Web前端面試真題html部分帶詳解

臨近秋招，不少小伙伴開始了求職之路，面試是十分重要的考驗，其次也離不開面試題。網上的面試題零零散散，十分混亂，正好我抽時間幫助大家總結一下。難易程度肯定是從簡到難，今天是第一篇——基礎篇。

面試題來源是我從網上花錢購買的真題，是有專人親自面試總結出來的精題，也是高頻問題。

是一套完整的面試題庫，如果有小伙伴需要可以下載。（面試題900題+公司實戰面試題400問）

HTML、HTTP、Web綜合問題

1.前端需要注意哪些SEO

?合理的 title 、 description 、 keywords ：搜索對著三項的權重逐個減?， title

值強調重點即可，重要關鍵詞出現不要超過2次，?且要靠前，不同?? title 要有所不

同； description 把??內容?度概括，?度合適，不可過分堆砌關鍵詞，不同??

description 有所不同； keywords 列舉出重要關鍵詞即可

?語義化的 HTML 代碼，符合W3C規范：語義化代碼讓搜索引擎容易理解??

?重要內容 HTML 代碼放在最前：搜索引擎抓取 HTML 順序是從上到下，有的搜索引擎對抓

取?度有限制，保證重要內容?定會被抓取

?重要內容不要? js 輸出：爬?不會執?js獲取內容

?少? iframe ：搜索引擎不會抓取 iframe 中的內容

??裝飾性圖?必須加 alt

?提??站速度：?站速度是搜索引擎排序的?個重要指標

2. 的 title 和 alt 有什么區別

?通常當?標滑動到元素上的時候顯示

?alt 是 的特有屬性，是圖?內容的等價描述，?于圖??法加載時顯示、讀屏器

閱讀圖??？商釄D??可訪問性，除了純裝飾圖?外都必須設置有意義的值，搜索引擎會

重點分析。

3.HTTP的幾種請求方法用途

GET ?法

發送?個請求來取得服務器上的某?資源

POST ?法

向 URL 指定的資源提交數據或附加新的數據

PUT ?法

跟 POST ?法很像，也是想服務器提交數據。但是，它們之間有不同。 PUT 指定了資

源在服務器上的位置，? POST 沒有

HEAD ?法

只請求??的?部

DELETE ?法

刪除服務器上的某資源

OPTIONS ?法

它?于獲取當前 URL 所?持的?法。如果請求成功，會有?個 Allow 的頭包含類

似 “GET,POST” 這樣的信息

TRACE ?法

TRACE ?法被?于激發?個遠程的，應?層的請求消息回路

CONNECT ?法

把請求連接轉換到透明的 TCP/IP 通道

4.從瀏覽器地址欄輸入url到顯示頁面的步驟

基礎版本：

1.瀏覽器根據請求的 URL 交給 DNS 域名解析，找到真實 IP ，向服務器發起請求；

2.服務器交給后臺處理完成后返回數據，瀏覽器接收?件（ HTML、JS、CSS 、圖象等）；

3.瀏覽器對加載到的資源（ HTML、JS、CSS 等）進?語法解析，建?相應的內部數據結構

（如 HTML 的 DOM ）；

4.載?解析到的資源?件，渲染??，完成。

詳細版本：

1. 在瀏覽器地址欄輸?URL

2. 瀏覽器查看緩存，如果請求資源在緩存中并且新鮮，跳轉到轉碼步驟

1. 如果資源未緩存，發起新請求

2. 如果已緩存，檢驗是否?夠新鮮，?夠新鮮直接提供給客戶端，否則與服務器進?驗

證。

3. 檢驗新鮮通常有兩個HTTP頭進?控制 Expires 和 Cache-Control ：

HTTP1.0提供Expires，值為?個絕對時間表示緩存新鮮?期

HTTP1.1增加了Cache-Control: max-age=,值為以秒為單位的最?新鮮時間

3. 瀏覽器解析URL獲取協議，主機，端?，path

4. 瀏覽器組裝?個HTTP（GET）請求報?

5. 瀏覽器獲取主機ip地址，過程如下：

1. 瀏覽器緩存

2. 本機緩存

3. hosts?件

4. 路由器緩存

5. ISP DNS緩存

6. DNS遞歸查詢（可能存在負載均衡導致每次IP不?樣）

6. 打開?個socket與?標IP地址，端?建?TCP鏈接，三次握?如下：

1. 客戶端發送?個TCP的SYN=1，Seq=X的包到服務器端?

2. 服務器發回SYN=1， ACK=X+1， Seq=Y的響應包

3. 客戶端發送ACK=Y+1， Seq=Z

7. TCP鏈接建?后發送HTTP請求

8. 服務器接受請求并解析，將請求轉發到服務程序，如虛擬主機使?HTTP Host頭部判斷請

求的服務程序

9. 服務器檢查HTTP請求頭是否包含緩存驗證信息如果驗證緩存新鮮，返回304等對應狀態碼

10. 處理程序讀取完整請求并準備HTTP響應，可能需要查詢數據庫等操作

11. 服務器將響應報?通過TCP連接發送回瀏覽器

12. 瀏覽器接收HTTP響應，然后根據情況選擇關閉TCP連接或者保留重?，關閉TCP連接的四次握?如下：

1. 主動?發送Fin=1， Ack=Z， Seq= X報?

2. 被動?發送ACK=X+1， Seq=Z報?

3. 被動?發送Fin=1， ACK=X， Seq=Y報?

4. 主動?發送ACK=Y， Seq=X報?

13. 瀏覽器檢查響應狀態嗎：是否為1XX，3XX， 4XX， 5XX，這些情況處理與2XX不同

14. 如果資源可緩存，進?緩存

15. 對響應進?解碼（例如gzip壓縮）

16. 根據資源類型決定如何處理（假設資源為HTML?檔）

17. 解析HTML?檔，構件DOM樹，下載資源，構造CSSOM樹，執?js腳本，這些操作沒有嚴格的先后順序，以下分別解釋

18. 構建DOM樹：

1. Tokenizing：根據HTML規范將字符流解析為標記

2. Lexing：詞法分析將標記轉換為對象并定義屬性和規則

3. DOM construction：根據HTML標記關系將對象組成DOM樹

19. 解析過程中遇到圖?、樣式表、js?件，啟動下載

20. 構建CSSOM樹：

1. Tokenizing：字符流轉換為標記流

2. Node：根據標記創建節點

3. CSSOM：節點創建CSSOM樹

21. 根據DOM樹和CSSOM樹構建渲染樹 :

1. 從DOM樹的根節點遍歷所有可?節點，不可?節點包括：1） script , meta 這樣本身

不可?的標簽。2)被css隱藏的節點，如 display: none

2. 對每?個可?節點，找到恰當的CSSOM規則并應?

3. 發布可視節點的內容和計算樣式

22. js解析如下：

1. 瀏覽器創建Document對象并解析HTML，將解析到的元素和?本節點添加到?檔中，此

時document.readystate為loading

2. HTML解析器遇到沒有async和defer的script時，將他們添加到?檔中，然后執??內

或外部腳本。這些腳本會同步執?，并且在腳本下載和執?時解析器會暫停。這樣就可

以?document.write()把?本插?到輸?流中。同步腳本經常簡單定義函數和注冊事件

處理程序，他們可以遍歷和操作script和他們之前的?檔內容

3. 當解析器遇到設置了async屬性的script時，開始下載腳本并繼續解析?檔。腳本會在它

下載完成后盡快執?，但是解析器不會停下來等它下載。異步腳本禁?使?

document.write()，它們可以訪問??script和之前的?檔元素

4. 當?檔完成解析，document.readState變成interactive

5. 所有defer腳本會按照在?檔出現的順序執?，延遲腳本能訪問完整?檔樹，禁?使?

document.write()

6. 瀏覽器在Document對象上觸發DOMContentLoaded事件

7. 此時?檔完全解析完成，瀏覽器可能還在等待如圖?等內容加載，等這些內容完成載?

并且所有異步腳本完成載?和執?，document.readState變為complete，window觸發

load事件

23. 顯示??（HTML解析過程中會逐步顯示??）

詳細簡版：

1.從瀏覽器接收 url 到開啟?絡請求線程（這?部分可以展開瀏覽器的機制以及進程與線程

之間的關系）

2. 開啟?絡線程到發出?個完整的 HTTP 請求（這?部分涉及到dns查詢， TCP/IP 請求，

五層因特?協議棧等知識）

3. 從服務器接收到請求到對應后臺接收到請求（這?部分可能涉及到負載均衡，安全攔截以

及后臺內部的處理等等）

4. 后臺和前臺的 HTTP 交互（這?部分包括 HTTP 頭部、響應碼、報?結構、 cookie 等知

識，可以提下靜態資源的 cookie 優化，以及編碼解碼，如 gzip 壓縮等）

5. 單獨拎出來的緩存問題， HTTP 的緩存（這部分包括http緩存頭部， ETag ， catch-

control 等）

6. 瀏覽器接收到 HTTP 數據包后的解析流程（解析 html -詞法分析然后解析成 dom 樹、解

析 css ?成 css 規則樹、合并成 render 樹，然后 layout 、 painting 渲染、復合圖

層的合成、 GPU 繪制、外鏈資源的處理、 loaded 和 DOMContentLoaded 等）

7. CSS 的可視化格式模型（元素的渲染規則，如包含塊，控制框， BFC ， IFC 等概念）

8. JS 引擎解析過程（ JS 的解釋階段，預處理階段，執?階段?成執?上下?， VO ，作

?域鏈、回收機制等等）

9. 其它（可以拓展不同的知識模塊，如跨域，web安全， hybrid 模式等等內容）

5.如何進行網站性能優化

?content ??

減少 HTTP 請求：合并?件、 CSS 精靈、 inline Image

減少 DNS 查詢： DNS 緩存、將資源分布到恰當數量的主機名

減少 DOM 元素數量

?Server ??

使? CDN

配置 ETag

對組件使? Gzip 壓縮

?Cookie ??

減? cookie ??

?css ??

將樣式表放到??頂部

不使? CSS 表達式

使? 不使? @import

?Javascript ??

將腳本放到??底部

將 javascript 和 css 從外部引?

壓縮 javascript 和 css

刪除不需要的腳本

減少 DOM 訪問

?圖???

優化圖?：根據實際顏?需要選擇?深、壓縮

優化 css 精靈

不要在 HTML 中拉伸圖片

6 .HTTP狀態碼及其含義

?1XX ：信息狀態碼

100 Continue 繼續，?般在發送 post 請求時，已發送了 http header 之后服務端

將返回此信息，表示確認，之后發送具體參數信息

?2XX ：成功狀態碼

200 OK 正常返回信息

201 Created 請求成功并且服務器創建了新的資源

202 Accepted 服務器已接受請求，但尚未處理

?3XX ：重定向

301 Moved Permanently 請求的??已永久移動到新位置。

302 Found 臨時性重定向。

303 See Other 臨時性重定向，且總是使? GET 請求新的 URI 。

304 Not Modified ?從上次請求后，請求的??未修改過。

?4XX ：客戶端錯誤

400 Bad Request 服務器?法理解請求的格式，客戶端不應當嘗試再次使?相同的內

容發起請求。

401 Unauthorized 請求未授權。

403 Forbidden 禁?訪問。

404 Not Found 找不到如何與 URI 相匹配的資源。

?5XX: 服務器錯誤

500 Internal Server Error 最常?的服務器端錯誤。

503 Service Unavailable 服務器端暫時?法處理請求（可能是過載或維護）。

7 .語義化的理解

??正確的標簽做正確的事情！

?HTML 語義化就是讓??的內容結構化，便于對瀏覽器、搜索引擎解析；

?在沒有樣式 CSS 情況下也以?種?檔格式顯示，并且是容易閱讀的。

?搜索引擎的爬?依賴于標記來確定上下?和各個關鍵字的權重，利于 SEO 。

?使閱讀源代碼的?對?站更容易將?站分塊，便于閱讀維護理解

8.介紹?下你對瀏覽器內核的理解？

?主要分成兩部分：渲染引擎( layout engineer 或 Rendering Engine )和 JS 引擎

?渲染引擎：負責取得??的內容（ HTML 、 XML 、圖像等等）、整理訊息（例如加?

CSS 等），以及計算??的顯示?式，然后會輸出?顯示器或打印機。瀏覽器的內核的不

同對于??的語法解釋會有不同，所以渲染的效果也不相同。所有??瀏覽器、電?郵件

客戶端以及其它需要編輯、顯示?絡內容的應?程序都需要內核

?JS 引擎則：解析和執? javascript 來實現??的動態效果

?最開始渲染引擎和 JS 引擎并沒有區分的很明確，后來JS引擎越來越獨?，內核就傾向于

只指渲染引擎

9.html5有哪些新特性、移除了那些元素？

?HTML5 現在已經不是 SGML 的?集，主要是關于圖像，位置，存儲，多任務等功能的增

加

繪畫 canvas

?于媒介回放的 video 和 audio 元素

本地離線存儲 localStorage ?期存儲數據，瀏覽器關閉后數據不丟失

sessionStorage 的數據在瀏覽器關閉后?動刪除

語意化更好的內容元素，?如 article 、 footer 、 header 、 nav 、 section

表單控件， calendar 、 date 、 time 、 email 、 url 、 search

新的技術 webworker 、 websocket 、 Geolocation

?移除的元素：

純表現的元素： basefont 、 big 、 center 、 font 、 s 、 strike 、 tt 、 u

對可?性產?負?影響的元素： frame 、 frameset 、 noframes

??持 HTML5 新標簽：

IE8/IE7/IE6 ?持通過 document.createElement ?法產?的標簽

可以利?這?特性讓這些瀏覽器?持 HTML5 新標簽

瀏覽器?持新標簽后，還需要添加標簽默認的樣式

?當然也可以直接使?成熟的框架、?如 html5shim

10.HTML5 的離線儲存怎么使用，?作原理能不能解釋?下？

?在?戶沒有與因特?連接時，可以正常訪問站點或應?，在?戶與因特?連接時，更新?

戶機器上的緩存?件

?原理： HTML5 的離線存儲是基于?個新建的 .appcache ?件的緩存機制(不是存儲技

術)，通過這個?件上的解析清單離線存儲資源，這些資源就會像 cookie ?樣被存儲了下

來。之后當?絡在處于離線狀態下時，瀏覽器會通過被離線存儲的數據進???展示

?如何使?：

??頭部像下??樣加??個 manifest 的屬性；

在 cache.manifest ?件的編寫離線存儲的資源

在離線狀態時，操作 window.applicationCache 進?需求實現

CACHE MANIFEST #v0.11 CACHE: js/app.js css/style.css NETWORK: resourse/logo.png FALLBACK: /offline.html

11.瀏覽器是怎么對 HTML5 的離線儲存資源進行管理和加載的呢

?在線的情況下，瀏覽器發現 html 頭部有 manifest 屬性，它會請求 manifest ?件，如

果是第?次訪問 app ，那么瀏覽器就會根據manifest?件的內容下載相應的資源并且進?

離線存儲。如果已經訪問過 app 并且資源已經離線存儲了，那么瀏覽器就會使?離線的資

源加載??，然后瀏覽器會對?新的 manifest ?件與舊的 manifest ?件，如果?件沒

有發?改變，就不做任何操作，如果?件改變了，那么就會重新下載?件中的資源并進?

離線存儲。

?離線的情況下，瀏覽器就直接使?離線存儲的資源。

12 .請描述?下 cookies ， sessionStorage 和 localStorage 的區別？

?cookie 是?站為了標示?戶身份?儲存在?戶本地終端（Client Side）上的數據（通常

經過加密）

?cookie數據始終在同源的http請求中攜帶（即使不需要），記會在瀏覽器和服務器間來回

傳遞

?sessionStorage 和 localStorage 不會?動把數據發給服務器，僅在本地保存

?存儲??：

cookie 數據??不能超過4k

sessionStorage 和 localStorage 雖然也有存儲??的限制，但? cookie ?得

多，可以達到5M或更?

?有期時間：

localStorage 存儲持久數據，瀏覽器關閉后數據不丟失除?主動刪除數據

sessionStorage 數據在當前瀏覽器窗?關閉后?動刪除

cookie 設置的 cookie 過期時間之前?直有效，即使窗?或瀏覽器關閉

13.?iframe有那些缺點？

?iframe 會阻塞主??的 Onload 事件

?搜索引擎的檢索程序?法解讀這種??，不利于 SEO

?iframe 和主??共享連接池，?瀏覽器對相同域的連接有限制，所以會影響??的并?

加載

?使? iframe 之前需要考慮這兩個缺點。如果需要使? iframe ，最好是通過

javascript 動態給 iframe 添加 src 屬性值，這樣可以繞開以上兩個問題

14.WEB標準以及W3C標準是什么?

?標簽閉合、標簽?寫、不亂嵌套、使?外鏈 css 和 js 、結構?為表現的分離

15. xhtml和html有什么區別?

??個是功能上的差別：主要是 XHTML 可兼容各?瀏覽器、?機以及 PDA ，并且瀏覽器也能快速正確地編譯?頁

?另外是書寫習慣的差別：XHTML 元素必須被正確地嵌套，閉合，區分??寫，?檔必須擁有根元素

16.Doctype作用? 嚴格模式與混雜模式如何區分？它們有何意義?

???被加載的時， link 會同時被加載，? @imort ??被加載的時， link 會同時被加

載，? @import 引?的 CSS 會等到??被加載完再加載 import 只在 IE5 以上才能識

別，? link 是 XHTML 標簽，?兼容問題 link ?式的樣式的權重 ?于 @import 的權

重

? 聲明位于?檔中的最前?，處于 標簽之前。告知瀏覽器的解析

器， ?什么?檔類型 規范來解析這個?檔

?嚴格模式的排版和 JS 運作模式是 以該瀏覽器?持的最?標準運?

?在混雜模式中，??以寬松的向后兼容的?式顯示。模擬?式瀏覽器的?為以防?站點?

法?作。 DOCTYPE 不存在或格式不正確會導致?檔以混雜模式呈現

17 .行內元素有哪些？塊級元素有哪些？ 空(void)元素有那些？?內元

素和塊級元素有什么區別？

??內元素有： a b span img input select strong

?塊級元素有： div ul ol li dl dt dd h1 h2 h3 h4… p

?空元素：

??內元素不可以設置寬?，不獨占??

?塊級元素可以設置寬?，獨占??

18.HTML全局屬性(global attribute)有哪些

?class :為元素設置類標識

?data-* : 為元素增加?定義屬性

?draggable : 設置元素是否可拖拽

?id : 元素 id ，?檔內唯?

?lang : 元素內容的的語?

?style : ?內 css 樣式

?title : 元素相關的建議信息

19 .Canvas和SVG有什么區別？

?svg 繪制出來的每?個圖形的元素都是獨?的 DOM 節點，能夠?便的綁定事件或?來修

改。 canvas 輸出的是?整幅畫布

?svg 輸出的圖形是?量圖形，后期可以修改參數來?由放?縮?，不會失真和鋸?。?

canvas 輸出標量畫布，就像?張圖??樣，放?會失真或者鋸?

20. HTML5 為什么只需要寫

?HTML5 不基于 SGML ，因此不需要對 DTD 進?引?，但是需要 doctype 來規范瀏覽器

的?為

?? HTML4.01 基于 SGML ,所以需要對 DTD 進?引?，才能告知瀏覽器?檔所使?的?檔

類型

21. 如何在??上實現?個圓形的可點擊區域？

?svg

?border-radius

?純 js 實現 需要求?個點在不在圓上簡單算法、獲取?標坐標等等

22.網頁驗證碼是?嘛的，是為了解決什么安全問題

?區分?戶是計算機還是?的公共全?動程序?？梢苑?惡意破解密碼、刷票、論壇灌?

?有效防??客對某?個特定注冊?戶?特定程序暴?破解?式進?不斷的登陸嘗試

23. viewport

?局部處理

mate 標簽中的 viewport 屬性 ， initial-scale 設置為 1

rem 按照設計稿標準?，外加利? transfrome 的 scale(0.5) 縮??倍即可；

?全局處理

mate 標簽中的 viewport 屬性 ， initial-scale 設置為 0.5

rem 按照設計稿標準?即可

24.渲染優化

?禁?使? iframe （阻塞??檔 onload 事件）

iframe 會阻塞主??的 Onload 事件

搜索引擎的檢索程序?法解讀這種??，不利于SEO

iframe 和主??共享連接池，?瀏覽器對相同域的連接有限制，所以會影響??的并

?加載

使? iframe 之前需要考慮這兩個缺點。如果需要使? iframe ，最好是通過

javascript

動態給 iframe 添加 src 屬性值，這樣可以繞開以上兩個問題

?禁?使? gif 圖?實現 loading 效果（降低 CPU 消耗，提升渲染性能）

?使? CSS3 代碼代替 JS 動畫（盡可能避免重繪重排以及回流）

?對于?些?圖標，可以使?base64位編碼，以減少?絡請求。但不建議?圖使?，?較耗

費 CPU

?圖標優勢在于

減少 HTTP 請求

避免?件跨域

修改及時?效

???頭部的 會阻塞??；（因為 Renderer

進程中 JS 線程和渲染線程是互斥的）

???中空的 href 和 src 會阻塞??其他資源的加載 (阻塞下載進程)

??? gzip ， CDN 托管， data 緩存 ，圖?服務器

?前端模板 JS+數據，減少由于 HTML 標簽導致的帶寬浪費，前端?變量保存AJAX請求結

果，每次操作本地變量，不?請求，減少請求次數

?? innerHTML 代替 DOM 操作，減少 DOM 操作次數，優化 javascript 性能

?當需要設置的樣式很多時設置 className ?不是直接操作 style

?少?全局變量、緩存 DOM 節點查找的結果。減少 IO 讀取操作

?圖?預加載，將樣式表放在頂部，將腳本放在底部 加上時間戳

?對普通的?站有?個統?的思路，就是盡量向前端優化、減少數據庫操作、減少磁盤 IO

25.meta viewport相關

26.你做的頁面在哪些流覽器測試過？這些瀏覽器的內核分別是什么?

?IE : trident 內核

?Firefox ： gecko 內核

?Safari : webkit 內核

?Opera :以前是 presto 內核， Opera 現已改?Google - Chrome 的 Blink 內核

?Chrome:Blink (基于 webkit ，Google與Opera Software共同開發)

27.div+css的布局較table布局有什么優點？

?改版的時候更?便 只要改 css ?件。

?頁面加載速度更快、結構化清晰、??顯示簡潔。

?表現與結構相分離。

?易于優化（ seo ）搜索引擎更友好，排名更容易靠前。

28 a：img的alt與title有何異同？b：strong與em的異同？

?alt(alt text) :為不能顯示圖像、窗體或 applets 的?戶代理（ UA ）， alt 屬性?

來指定替換?字。替換?字的語?由 lang 屬性指定。(在IE瀏覽器下會在沒有 title 時

把 alt 當成 tool tip 顯示)

?title(tool tip) :該屬性為設置該屬性的元素提供建議性的信息

?strong :粗體強調標簽，強調，表示內容的重要性

?em :斜體強調標簽，更強烈強調，表示內容的強調點

29 你能描述?下漸進增強和優雅降級之間的不同嗎？

?漸進增強：針對低版本瀏覽器進?構建??，保證最基本的功能，然后再針對?級瀏覽器

進?效果、交互等改進和追加功能達到更好的?戶體驗。

?優雅降級：?開始就構建完整的功能，然后再針對低版本瀏覽器進?兼容。

區別：優雅降級是從復雜的現狀開始，并試圖減少?戶體驗的供給，?漸進增 強則是從?個?常基礎的，能夠起作?的版本開始，并不斷擴充，以適應未來 環境的需要。降級（功能衰減）意味著往回看；?漸進增強則意味著朝前看， 同時保證其根基處于安全地帶

30 為什么利用多個域名來存儲網站資源會更有效？

?CDN 緩存更?便

?突破瀏覽器并發限制

?節約 cookie 帶寬

?節約主域名的連接數，優化??響應速度

?防?不必要的安全問題

31 簡述?下src與href的區別

?src ?于替換當前元素，href?于在當前?檔和引?資源之間確?聯系。

?src 是 source 的縮寫，指向外部資源的位置，指向的內容將會嵌?到?檔中當前標簽所

在位置；在請求 src 資源時會將其指向的資源下載并應?到?檔內，例如 js 腳本，

img 圖?和 frame 等元素

當瀏覽器解析到該元素時，會暫停其他 資源的下載和處理，直到將該資源加載、編譯、執?完畢，圖?和框架等元素 也如此，類似于將所指向資源嵌?當前標簽內。這也是為什么將js腳本放在底 部?不是頭部

??href 是 Hypertext Reference 的縮寫，指向?絡資源所在位置，建?和當前元素（錨

點）或當前?檔（鏈接）之間的鏈接，如果我們在?檔中添加

? 那么瀏覽器會識別該?檔為 css ?

件，就會并?下載資源并且不會停?對當前?檔的處理。這也是為什么建議使? link ?

式來加載 css ，?不是使? @import ?式

32 知道的網頁制作會用到的圖片格式有哪些？

?png-8 、 png-24 、 jpeg 、 gif 、 svg

但是上?的那些都不是?試官想要的最后答案。?試官希望聽到是 Webp , Apng 。（是否有關注新技術，新鮮事物）

?Webp： WebP 格式，?歌（google）開發的?種旨在加快圖?加載速度的圖?格式。圖

?壓縮體積?約只有 JPEG 的 2/3 ，并能節省?量的服務器帶寬資源和數據空間。

Facebook Ebay 等知名?站已經開始測試并使? WebP 格式。

?在質量相同的情況下，WebP格式圖像的體積要?JPEG格式圖像? 40% 。

?Apng：全稱是 “Animated Portable Network Graphics” , 是PNG的位圖動畫擴展，可

以實現png格式的動態圖?效果。04年誕?，但?直得不到各?瀏覽器?商的?持，直到

?前得到 iOS safari 8 的?持，有望代替 GIF 成為下?代動態圖標準

33 在css/js代碼上線之后開發?員經常會優化性能，從用戶刷新網頁

開始，?次js請求?般情況下有哪些地?會有緩存處理？

dns 緩存， cdn 緩存，瀏覽器緩存，服務器緩存

34.一個頁面上有大量的圖片（大型電商網站），加載很慢，你有哪

些方法優化這些圖片的加載，給用戶更好的體驗。

?圖?懶加載，在??上的未可視區域可以添加?個滾動事件，判斷圖?位置與瀏覽器頂端

的距離與??的距離，如果前者?于后者，優先加載。

?如果為幻燈?、相冊等，可以使?圖?預加載技術，將當前展示圖?的前?張和后?張優

先下載。

?如果圖?為css圖?，可以使? CSSsprite ， SVGsprite ， Iconfont 、 Base64 等技

術。

?如果圖?過?，可以使?特殊編碼的圖?，加載時會先加載?張壓縮的特別厲害的縮略

圖，以提??戶體驗。

?如果圖?展示區域?于圖?的真實??，則因在服務器端根據業務需要先?進?圖?壓

縮，圖?壓縮后??與展示?致。

35. 常見排序算法的時間復雜度,空間復雜度

十大算法博文

36.?web開發中會話跟蹤的方法有哪些

cookie

session

url 重寫

隱藏 input

ip 地址

37.HTTP request報文結構是怎樣的

1. ??是Request-Line包括：請求?法，請求URI，協議版本，CRLF

2. ??之后是若??請求頭，包括general-header，request-header或者entity-header，

每個??以CRLF結束

3. 請求頭和消息實體之間有?個CRLF分隔

4. 根據實際請求需要可能包含?個消息實體 ?個請求報?例?如下：

GET /Protocols/rfc2616/rfc2616-sec5.html HTTP/1.1 Host: www.w3.org Connection: keep-alive Cache-Control: max-age=0 Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/ User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, Referer: https://www.google.com.hk/ Accept-Encoding: gzip,deflate,sdch Accept-Language: zh-CN,zh;q=0.8,en;q=0.6 Cookie: authorstyle=yes If-None-Match: "2cc8-3e3073913b100" If-Modified-Since: Wed, 01 Sep 2004 13:24:52 GMT name=qiu&age=25

38.HTTP response報文結構是怎樣的

首行是狀態行包括：HTTP版本，狀態碼，狀態描述，后面跟?個CRLF

首行之后是若干行響應頭，包括：通?頭部，響應頭部，實體頭部

響應頭部和響應實體之間??個CRLF空?分隔

最后是?個可能的消息實體 響應報?例?如下：

HTTP/1.1 200 OK Date: Tue, 08 Jul 2014 05:28:43 GMT Server: Apache/2 Last-Modified: Wed, 01 Sep 2004 13:24:52 GMT ETag: "40d7-3e3073913b100" Accept-Ranges: bytes Content-Length: 16599 Cache-Control: max-age=21600 Expires: Tue, 08 Jul 2014 11:28:43 GMT P3P: policyref="http://www.w3.org/2001/05/P3P/p3p.xml" Content-Type: text/html; charset=iso-8859-1 {"name": "qiu", "age": 25}

下集預告：CSS部分

關注專欄，更新不斷，祝你輕松拿offer

HTML web前端

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。