ie:trident(三叉戟)內核
firefox:gecko(壁虎)內核
safari:webkit(瀏覽器核心)內核
opera:以前是presto(急速)內核,現在是和谷歌共同開發的blink(閃爍)內核
chrome:blink(基于webkit,谷歌和opera software共同開發)
附:瀏覽器內核的理解
瀏覽器內核分為兩部分:渲染引擎和js引擎
渲染引擎:負責取得網頁內容、整理訊息,以及計算網頁的顯示方式,然后輸出至顯示器或打印機。瀏覽器內核不同對于網頁的語法解釋會有不同,所以渲染的效果也不相同。所有網頁瀏覽器、電子郵件客戶端以及其他需要編輯、顯示網絡內容英語程序都需要審核。
js引擎:解析和執行js來實現網頁的動態效果。
2.每個HTML文件里開頭都有個很重要的東西,Doctype,知道這是干什么的嗎?
聲明位于文檔的最前面的位置,處于標簽之前。此標簽會告訴瀏覽器文檔使用那種HTML或者XHTML規范。(重點:告訴瀏覽器按照何種規范即系頁面)
Doctype不存在或者格式不正確會導致文檔以兼容模式呈現。
附:html5為什么只需要寫?
html5不基于SGML(標準通用標記語言/Standard Generalized Markup Language),因為不需要對DTD(文檔類型聲明/Document Type Declaration)進行引用,但是需要doctype來規范瀏覽器的行為(讓瀏覽器按照他們告知的方式來運行)
HTML4.01基于SGML,所以需要對DTD進行引用,才能告知瀏覽器文檔所使用的文檔類型。
3.xhtml和html有什么區別
hrml是一種基本的web網頁設計語言,xhtml是基于xml的標記語言。
區別:
xhmtl元素必須被正確的嵌套
xhtml元素必須被關閉
標簽名必須用小寫
xhtm必須有根元素
4.什么是BFC,什么會生成BFC
BFC(block formatting context)塊級格式化上下文
它是一個獨立的渲染區域,它規定了內部如何布局,并且與這個區域外部毫不相干。
什么會生成BFC
根元素
float不為none的浮動框
position為absolute、fixed
display為:inline-block、table-cell、flex、table-caption、inline-flex非塊框的塊容器
overflow不為visibility的塊框
觸發ie的hasLayout特性
5.Quirks模式是什么?它和Standard模式有什么區別?
從ie6開始,引入了Standards模式,標準模式中,瀏覽器嘗試給符合標準的文檔在規范上的正確處理達到指定瀏覽器中的程度。
在ie6之前css還不夠成熟,所以ie5等之前的瀏覽器對css的支持很差,ie6將對css提供更好的支持,然而這時候問題就來了,因為有很多頁面都是基于舊的布局方式寫的,而如果ie6支持css則將令這些頁面顯示不正常,如何在既保證不破壞現有頁面,又提供新的渲染機智呢?
深圳網站建設公司佰達科技老余在寫程序時我們也經常遇到這樣的問題,如何保障原來的接口不變,又提供更強大的功能,尤其是新功能不兼容舊功能時。遇到這種問題時的一個常見的做法是增加參數和分支,即當某個參數為真時,我們就使用新功能,如果不為真,就使用舊功能,這樣做既不破壞原有的程序,又提供新功能。ie6也是類似這樣做的,它將DTD當成了這個“參數”,因為以前的頁面大家都不會寫DTD,所以ie6就假定如果寫了DTD,就意味著這個頁面將采用對css支持更好的布局,如果沒有,就采用兼容之前的布局方式。這就是Quirks模式(怪癖模式,詭異模式,怪異模式)。
區別:總體會有布局、樣式解析和腳本三個方面的區別。
盒模型:在W3C標準中,如果設置了一個元素的寬度和高度,指的是元素的內容寬度和高度,而在Quirks模式下,ie的快讀和高度還白喊了padding和border。
盒模型:在W3C標準中,如果設置一個元素的寬度和高度,指的是元素內容的寬度和高度,而在Quirks 模式下,IE的寬度和高度還包含了padding和border。
設置行內元素的高度:在standards模式下,給等行內元素設置width和height都不會生效,在quirks模式下,會生效。
設置百分比高度:在standards模式下,一個元素的高度是由其包含的內容來決定的,如果父元素沒有設置百分比的高度,子元素設置了一個百分比高度是無效的。
水平居中:在standards模式下使用margin:0 auto可以使元素水平居中,但是在quirks模式下會失效。
6.什么是語義化的html
直觀的認識標簽,讓頁面內容結構化,便于對瀏覽器、搜索引擎解析,爬蟲依賴于標簽來確定上下文和各個關鍵字的權重,方便其他設備解析(屏幕閱讀器、盲人閱讀器、移動設備)。在沒有css樣式的時候也可以以一種清晰的文檔結構顯示。
7.div+css的布局特別較table有什么優點?
改版的時候方便,只需要更改css文件
頁面加載速度快、結構清晰、頁面顯示簡潔
表現與結構分離
易于優化seo,排名更容易靠前
8.漸進增強和優雅降級之間的區別?
漸進增強:首先針對低版本的瀏覽器進行頁面構建,保證最基本的功能,然后針對高級的瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。
優雅降級:一開始就構建完整的功能,然后再針對低版本進行兼容。
區別:優雅降級從復雜的情況開始,并試圖減少用戶體驗的供給,而漸進增強則是從一個非常基礎的能夠起作用的版本開始,并不斷擴充,以適應未來環境的需要。降級意味著往回看,而漸進增強以為這朝前看,同時保證其根基處于安全地帶。
9.src與href的區別
src(source)指向外部資源的位置,指向的內容將會嵌套入文檔中當時標簽所在的位置;在請求src資源時將會將其所指向的資源下載并應用到文檔中,如js腳本,img圖片和iframe等元素。
當瀏覽器解析到該元素時,會暫停其他資源的下載和處理,直到將該資源加載、編譯、執行完畢,類似于將所只想到額資源嵌套入當期標簽內。
href(hypertext reference/超文本引用)指向網絡資源所在的位置,建立和當前元素(錨點)或當前文檔(鏈接)之間的鏈接,如果我們在文檔中添加那么瀏覽器會識別該css文件,就會并行下載資源并且不會停止對當前文檔的處理。這也就是為什么建議使用link方式加載css而不是使用@import方式。
10.頁面中有大量圖片,如何優化加載,優化用戶體驗?
圖片懶加載。在頁面的未可視區域添加一個滾動時間,判斷圖片位置與瀏覽器頂端的距離和頁面頂端的距離(頁面被卷去的高度)來判斷,如果圖片到達了可視區域,則加載圖片。
如果是幻燈片、相冊等,可以使用圖片預加載技術,將當前展示的圖片的前一張和后一張優先加載。
如果圖片為css圖片,可以使用css Sprite,SVG Sprite等技術。
如果圖片過大,可以使用特殊的編碼技術,加載時會優先加載一張壓縮的特別厲害的縮略圖,可以提高用戶體驗。
如果圖片展示區域小于圖片的真實大小,應在服務器端根據業務需求先進行圖片壓縮,圖片壓縮后大小與展示一致。
11.什么是微格式
微格式(Microformats)是一種讓機器可讀的語義化的XHTML詞匯的集合,是結構化數據的開放標準。是為特殊應用而制定的特殊格式。
優點:將智能數據添加到網頁上,讓網站內容在搜素引擎結果界面可以顯示額外的提示。(應用范例:豆瓣,有興趣自行google)
12.在css/js的代碼上線后開發人員經常會優化性能,從用戶刷新網頁開始,一次js請求一般情況下有哪些地方會有緩存處理?
dns緩存、cdn緩存、瀏覽器緩存、服務器緩存。
附:緩存介紹
DNS(Domain Name System/域名解析系統):
短時間內多次訪問某個網址,系統會設計一個本地“dns緩存”,當第一次訪問baidu.com,dns返回了正確的ip后,系統就會將這個結果臨時儲存起來,這就是dns緩存。它會有一個失效時間,在這時間內,當再次訪問時,系統會從電腦本地的dns緩存中把結果交還給你,而不必再去詢問dns服務器,變相“加速”了網址的解析。
CDN(Content Delivery Network/內容分發網絡):
通過在不同的地點緩存內容,然后通過負載平衡等技術將用戶請求定向到最近的緩存服務器上獲取內容,提高用戶訪問網站的響應速度。
瀏覽器緩存:
為了節約網絡資源的加速瀏覽器,瀏覽器在用戶磁盤上對最近請求過的文檔進行存儲,當訪問這再次請求這個頁面時,瀏覽器可以從本地磁盤顯示文檔,這樣就可以加速頁面的閱讀。
web服務器緩存:
web緩存服務器的應用模式主要是正向代理和反向代理。正向代理(Proxy)模式是代理網絡用戶訪問internet,客戶端將本來要直接發送到internet上源服務器的連接請求發送給代理服務器處理。正向代理的目的是加速用戶在使用瀏覽器訪問Internet時的響應時間,并提高廣域網線路的利用率。正向代理瀏覽器無需和該站點建立聯系,只訪問到Web緩存即可。通過正向代理,大大提高了后續用戶的訪問速度,使他們無需再穿越Internet,只要從本地Web緩存就可以獲取所需要的信息,避免了帶寬問題,同時可以大量減少重復請求在網絡上的傳輸,從而降低網絡流量,節省資費。
上一篇:
重慶網站建設之注冊域名十大問題