導(dǎo)讀基礎(chǔ)版本詳細(xì)版，我來為大家講解一下關(guān)于15道前端面試題?跟著小編一起來看一看吧!15道前端面試題1前端需要注意哪些SEO合理的title、descripti....

基礎(chǔ)版本詳細(xì)版，我來為大家講解一下關(guān)于15道前端面試題?跟著小編一起來看一看吧!

15道前端面試題

1 前端需要注意哪些SEO

• 合理的title、description、keywords：搜索對(duì)著三項(xiàng)的權(quán)重逐個(gè)減小，title值強(qiáng)調(diào)重點(diǎn)即可，重要關(guān)鍵詞出現(xiàn)不要超過2次，而且要靠前，不同頁面title要有所不同；description把頁面內(nèi)容高度概括，長度合適，不可過分堆砌關(guān)鍵詞，不同頁面description有所不同；keywords列舉出重要關(guān)鍵詞即可
• 語義化的HTML代碼，符合W3C規(guī)范：語義化代碼讓搜索引擎容易理解網(wǎng)頁
• 重要內(nèi)容HTML代碼放在最前：搜索引擎抓取HTML順序是從上到下，有的搜索引擎對(duì)抓取長度有限制，保證重要內(nèi)容一定會(huì)被抓取
• 重要內(nèi)容不要用js輸出：爬蟲不會(huì)執(zhí)行js獲取內(nèi)容
• 少用iframe：搜索引擎不會(huì)抓取iframe中的內(nèi)容
• 非裝飾性圖片必須加alt
• 提高網(wǎng)站速度：網(wǎng)站速度是搜索引擎排序的一個(gè)重要指標(biāo)

2 <img>的title和alt有什么區(qū)別

• 通常當(dāng)鼠標(biāo)滑動(dòng)到元素上的時(shí)候顯示
• alt是<img>的特有屬性，是圖片內(nèi)容的等價(jià)描述，用于圖片無法加載時(shí)顯示、讀屏器閱讀圖片。可提圖片高可訪問性，除了純裝飾圖片外都必須設(shè)置有意義的值，搜索引擎會(huì)重點(diǎn)分析。

3 HTTP的幾種請(qǐng)求方法用途

• GET方法發(fā)送一個(gè)請(qǐng)求來取得服務(wù)器上的某一資源
• POST方法向URL指定的資源提交數(shù)據(jù)或附加新的數(shù)據(jù)
• PUT方法跟POST方法很像，也是想服務(wù)器提交數(shù)據(jù)。但是，它們之間有不同。PUT指定了資源在服務(wù)器上的位置，而POST沒有
• HEAD方法只請(qǐng)求頁面的首部
• DELETE方法刪除服務(wù)器上的某資源
• OPTIONS方法它用于獲取當(dāng)前URL所支持的方法。如果請(qǐng)求成功，會(huì)有一個(gè)Allow的頭包含類似“GET,POST”這樣的信息
• TRACE方法TRACE方法被用于激發(fā)一個(gè)遠(yuǎn)程的，應(yīng)用層的請(qǐng)求消息回路
• CONNECT方法把請(qǐng)求連接轉(zhuǎn)換到透明的TCP/IP通道

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

基礎(chǔ)版本

• 瀏覽器根據(jù)請(qǐng)求的URL交給DNS域名解析，找到真實(shí)IP，向服務(wù)器發(fā)起請(qǐng)求；
• 服務(wù)器交給后臺(tái)處理完成后返回?cái)?shù)據(jù)，瀏覽器接收文件（HTML、JS、CSS、圖象等）；
• 瀏覽器對(duì)加載到的資源（HTML、JS、CSS等）進(jìn)行語法解析，建立相應(yīng)的內(nèi)部數(shù)據(jù)結(jié)構(gòu)（如HTML的DOM）；
• 載入解析到的資源文件，渲染頁面，完成。

詳細(xì)版

1. 在瀏覽器地址欄輸入U(xiǎn)RL
2. 瀏覽器查看緩存，如果請(qǐng)求資源在緩存中并且新鮮，跳轉(zhuǎn)到轉(zhuǎn)碼步驟如果資源未緩存，發(fā)起新請(qǐng)求如果已緩存，檢驗(yàn)是否足夠新鮮，足夠新鮮直接提供給客戶端，否則與服務(wù)器進(jìn)行驗(yàn)證。檢驗(yàn)新鮮通常有兩個(gè)HTTP頭進(jìn)行控制Expires和Cache-Control：HTTP1.0提供Expires，值為一個(gè)絕對(duì)時(shí)間表示緩存新鮮日期HTTP1.1增加了Cache-Control: max-age=,值為以秒為單位的最大新鮮時(shí)間
3. 瀏覽器解析URL獲取協(xié)議，主機(jī)，端口，path
4. 瀏覽器組裝一個(gè)HTTP（GET）請(qǐng)求報(bào)文
5. 瀏覽器獲取主機(jī)ip地址，過程如下：瀏覽器緩存本機(jī)緩存hosts文件路由器緩存ISP DNS緩存DNS遞歸查詢（可能存在負(fù)載均衡導(dǎo)致每次IP不一樣）
6. 打開一個(gè)socket與目標(biāo)IP地址，端口建立TCP鏈接，三次握手如下：客戶端發(fā)送一個(gè)TCP的SYN=1，Seq=X的包到服務(wù)器端口服務(wù)器發(fā)回SYN=1， ACK=X 1， Seq=Y的響應(yīng)包客戶端發(fā)送ACK=Y 1， Seq=Z
7. TCP鏈接建立后發(fā)送HTTP請(qǐng)求
8. 服務(wù)器接受請(qǐng)求并解析，將請(qǐng)求轉(zhuǎn)發(fā)到服務(wù)程序，如虛擬主機(jī)使用HTTP Host頭部判斷請(qǐng)求的服務(wù)程序
9. 服務(wù)器檢查HTTP請(qǐng)求頭是否包含緩存驗(yàn)證信息如果驗(yàn)證緩存新鮮，返回304等對(duì)應(yīng)狀態(tài)碼
10. 處理程序讀取完整請(qǐng)求并準(zhǔn)備HTTP響應(yīng)，可能需要查詢數(shù)據(jù)庫等操作
11. 服務(wù)器將響應(yīng)報(bào)文通過TCP連接發(fā)送回瀏覽器
12. 瀏覽器接收HTTP響應(yīng)，然后根據(jù)情況選擇關(guān)閉TCP連接或者保留重用，關(guān)閉TCP連接的四次握手如下：主動(dòng)方發(fā)送Fin=1， Ack=Z， Seq= X報(bào)文被動(dòng)方發(fā)送ACK=X 1， Seq=Z報(bào)文被動(dòng)方發(fā)送Fin=1， ACK=X， Seq=Y報(bào)文主動(dòng)方發(fā)送ACK=Y， Seq=X報(bào)文
13. 瀏覽器檢查響應(yīng)狀態(tài)嗎：是否為1XX，3XX， 4XX， 5XX，這些情況處理與2XX不同
14. 如果資源可緩存，進(jìn)行緩存
15. 對(duì)響應(yīng)進(jìn)行解碼（例如gzip壓縮）
16. 根據(jù)資源類型決定如何處理（假設(shè)資源為HTML文檔）
17. 解析HTML文檔，構(gòu)件DOM樹，下載資源，構(gòu)造CSSOM樹，執(zhí)行js腳本，這些操作沒有嚴(yán)格的先后順序，以下分別解釋
18. 構(gòu)建DOM樹：Tokenizing：根據(jù)HTML規(guī)范將字符流解析為標(biāo)記Lexing：詞法分析將標(biāo)記轉(zhuǎn)換為對(duì)象并定義屬性和規(guī)則DOM construction：根據(jù)HTML標(biāo)記關(guān)系將對(duì)象組成DOM樹
19. 解析過程中遇到圖片、樣式表、js文件，啟動(dòng)下載
20. 構(gòu)建CSSOM樹：Tokenizing：字符流轉(zhuǎn)換為標(biāo)記流Node：根據(jù)標(biāo)記創(chuàng)建節(jié)點(diǎn)CSSOM：節(jié)點(diǎn)創(chuàng)建CSSOM樹
21. 根據(jù)DOM樹和CSSOM樹構(gòu)建渲染樹:從DOM樹的根節(jié)點(diǎn)遍歷所有可見節(jié)點(diǎn)，不可見節(jié)點(diǎn)包括：1）script,meta這樣本身不可見的標(biāo)簽。2)被css隱藏的節(jié)點(diǎn)，如display: none對(duì)每一個(gè)可見節(jié)點(diǎn)，找到恰當(dāng)?shù)腃SSOM規(guī)則并應(yīng)用發(fā)布可視節(jié)點(diǎn)的內(nèi)容和計(jì)算樣式
22. js解析如下：瀏覽器創(chuàng)建Document對(duì)象并解析HTML，將解析到的元素和文本節(jié)點(diǎn)添加到文檔中，此時(shí)document.readystate為loadingHTML解析器遇到沒有async和defer的script時(shí)，將他們添加到文檔中，然后執(zhí)行行內(nèi)或外部腳本。這些腳本會(huì)同步執(zhí)行，并且在腳本下載和執(zhí)行時(shí)解析器會(huì)暫停。這樣就可以用document.write()把文本插入到輸入流中。同步腳本經(jīng)常簡單定義函數(shù)和注冊(cè)事件處理程序，他們可以遍歷和操作script和他們之前的文檔內(nèi)容當(dāng)解析器遇到設(shè)置了async屬性的script時(shí)，開始下載腳本并繼續(xù)解析文檔。腳本會(huì)在它下載完成后盡快執(zhí)行，但是解析器不會(huì)停下來等它下載。異步腳本禁止使用document.write()，它們可以訪問自己script和之前的文檔元素當(dāng)文檔完成解析，document.readState變成interactive所有defer腳本會(huì)按照在文檔出現(xiàn)的順序執(zhí)行，延遲腳本能訪問完整文檔樹，禁止使用document.write()瀏覽器在Document對(duì)象上觸發(fā)DOMContentLoaded事件此時(shí)文檔完全解析完成，瀏覽器可能還在等待如圖片等內(nèi)容加載，等這些內(nèi)容完成載入并且所有異步腳本完成載入和執(zhí)行，document.readState變?yōu)閏omplete，window觸發(fā)load事件
23. 顯示頁面（HTML解析過程中會(huì)逐步顯示頁面）

詳細(xì)簡版

1. 從瀏覽器接收url到開啟網(wǎng)絡(luò)請(qǐng)求線程（這一部分可以展開瀏覽器的機(jī)制以及進(jìn)程與線程之間的關(guān)系）
2. 開啟網(wǎng)絡(luò)線程到發(fā)出一個(gè)完整的HTTP請(qǐng)求（這一部分涉及到dns查詢，TCP/IP請(qǐng)求，五層因特網(wǎng)協(xié)議棧等知識(shí)）
3. 從服務(wù)器接收到請(qǐng)求到對(duì)應(yīng)后臺(tái)接收到請(qǐng)求（這一部分可能涉及到負(fù)載均衡，安全攔截以及后臺(tái)內(nèi)部的處理等等）
4. 后臺(tái)和前臺(tái)的HTTP交互（這一部分包括HTTP頭部、響應(yīng)碼、報(bào)文結(jié)構(gòu)、cookie等知識(shí)，可以提下靜態(tài)資源的cookie優(yōu)化，以及編碼解碼，如gzip壓縮等）
5. 單獨(dú)拎出來的緩存問題，HTTP的緩存（這部分包括http緩存頭部，ETag，catch-control等）
6. 瀏覽器接收到HTTP數(shù)據(jù)包后的解析流程（解析html-詞法分析然后解析成dom樹、解析css生成css規(guī)則樹、合并成render樹，然后layout、painting渲染、復(fù)合圖層的合成、GPU繪制、外鏈資源的處理、loaded和DOMContentLoaded等）
7. CSS的可視化格式模型（元素的渲染規(guī)則，如包含塊，控制框，BFC，IFC等概念）
8. JS引擎解析過程（JS的解釋階段，預(yù)處理階段，執(zhí)行階段生成執(zhí)行上下文，VO，作用域鏈、回收機(jī)制等等）
9. 其它（可以拓展不同的知識(shí)模塊，如跨域，web安全，hybrid模式等等內(nèi)容）

#5 如何進(jìn)行網(wǎng)站性能優(yōu)化

• content方面減少HTTP請(qǐng)求：合并文件、CSS精靈、inline Image減少DNS查詢：DNS緩存、將資源分布到恰當(dāng)數(shù)量的主機(jī)名減少DOM元素?cái)?shù)量
• Server方面使用CDN配置ETag對(duì)組件使用Gzip壓縮
• Cookie方面減小cookie大小
• css方面將樣式表放到頁面頂部不使用CSS表達(dá)式使用<link>不使用@import
• Javascript方面將腳本放到頁面底部將javascript和css從外部引入壓縮javascript和css刪除不需要的腳本減少DOM訪問
• 圖片方面優(yōu)化圖片：根據(jù)實(shí)際顏色需要選擇色深、壓縮優(yōu)化css精靈不要在HTML中拉伸圖片

你有用過哪些前端性能優(yōu)化的方法？

• 減少http請(qǐng)求次數(shù)：CSS Sprites, JS、CSS源碼壓縮、圖片大小控制合適；網(wǎng)頁Gzip，CDN托管，data緩存 ，圖片服務(wù)器。
• 前端模板 JS 數(shù)據(jù)，減少由于HTML標(biāo)簽導(dǎo)致的帶寬浪費(fèi)，前端用變量保存AJAX請(qǐng)求結(jié)果，每次操作本地變量，不用請(qǐng)求，減少請(qǐng)求次數(shù)
• 用innerHTML代替DOM操作，減少DOM操作次數(shù)，優(yōu)化javascript性能。
• 當(dāng)需要設(shè)置的樣式很多時(shí)設(shè)置className而不是直接操作style
• 少用全局變量、緩存DOM節(jié)點(diǎn)查找的結(jié)果。減少IO讀取操作
• 避免使用CSS Expression（css表達(dá)式)又稱Dynamic properties(動(dòng)態(tài)屬性)
• 圖片預(yù)加載，將樣式表放在頂部，將腳本放在底部 加上時(shí)間戳
• 避免在頁面的主體布局中使用table，table要等其中的內(nèi)容完全下載之后才會(huì)顯示出來，顯示比div css布局慢

談?wù)勑阅軆?yōu)化問題

• 代碼層面：避免使用css表達(dá)式，避免使用高級(jí)選擇器，通配選擇器
• 緩存利用：緩存Ajax，使用CDN，使用外部js和css文件以便緩存，添加Expires頭，服務(wù)端配置Etag，減少DNS查找等
• 請(qǐng)求數(shù)量：合并樣式和腳本，使用css圖片精靈，初始首屏之外的圖片資源按需加載，靜態(tài)資源延遲加載
• 請(qǐng)求帶寬：壓縮文件，開啟GZIP

前端性能優(yōu)化最佳實(shí)踐？

• 性能評(píng)級(jí)工具（PageSpeed 或 YSlow）
• 合理設(shè)置 HTTP 緩存：Expires 與 Cache-control
• 靜態(tài)資源打包，開啟 Gzip 壓縮（節(jié)省響應(yīng)流量）
• CSS3 模擬圖像，圖標(biāo)base64（降低請(qǐng)求數(shù)）
• 模塊延遲(defer)加載/異步(async)加載
• Cookie 隔離（節(jié)省請(qǐng)求流量）
• localStorage（本地存儲(chǔ)）
• 使用 CDN 加速（訪問最近服務(wù)器）
• 啟用 HTTP/2（多路復(fù)用，并行加載）
• 前端自動(dòng)化（gulp/webpack）

6 HTTP狀態(tài)碼及其含義

• 1XX：信息狀態(tài)碼100 Continue 繼續(xù)，一般在發(fā)送post請(qǐng)求時(shí)，已發(fā)送了http header之后服務(wù)端將返回此信息，表示確認(rèn)，之后發(fā)送具體參數(shù)信息
• 2XX：成功狀態(tài)碼200 OK 正常返回信息201 Created 請(qǐng)求成功并且服務(wù)器創(chuàng)建了新的資源202 Accepted 服務(wù)器已接受請(qǐng)求，但尚未處理
• 3XX：重定向301 Moved Permanently 請(qǐng)求的網(wǎng)頁已永久移動(dòng)到新位置。302 Found 臨時(shí)性重定向。303 See Other 臨時(shí)性重定向，且總是使用 GET 請(qǐng)求新的 URI。304 Not Modified 自從上次請(qǐng)求后，請(qǐng)求的網(wǎng)頁未修改過。
• 4XX：客戶端錯(cuò)誤400 Bad Request 服務(wù)器無法理解請(qǐng)求的格式，客戶端不應(yīng)當(dāng)嘗試再次使用相同的內(nèi)容發(fā)起請(qǐng)求。401 Unauthorized 請(qǐng)求未授權(quán)。403 Forbidden 禁止訪問。404 Not Found 找不到如何與 URI 相匹配的資源。
• 5XX: 服務(wù)器錯(cuò)誤500 Internal Server Error 最常見的服務(wù)器端錯(cuò)誤。503 Service Unavailable 服務(wù)器端暫時(shí)無法處理請(qǐng)求（可能是過載或維護(hù)）。

7 語義化的理解

• 用正確的標(biāo)簽做正確的事情！
• HTML語義化就是讓頁面的內(nèi)容結(jié)構(gòu)化，便于對(duì)瀏覽器、搜索引擎解析；
• 在沒有樣式CSS情況下也以一種文檔格式顯示，并且是容易閱讀的。
• 搜索引擎的爬蟲依賴于標(biāo)記來確定上下文和各個(gè)關(guān)鍵字的權(quán)重，利于 SEO。
• 使閱讀源代碼的人對(duì)網(wǎng)站更容易將網(wǎng)站分塊，便于閱讀維護(hù)理解

8 介紹一下你對(duì)瀏覽器內(nèi)核的理解？

• 主要分成兩部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎
• 渲染引擎：負(fù)責(zé)取得網(wǎng)頁的內(nèi)容（HTML、XML、圖像等等）、整理訊息（例如加入CSS等），以及計(jì)算網(wǎng)頁的顯示方式，然后會(huì)輸出至顯示器或打印機(jī)。瀏覽器的內(nèi)核的不同對(duì)于網(wǎng)頁的語法解釋會(huì)有不同，所以渲染的效果也不相同。所有網(wǎng)頁瀏覽器、電子郵件客戶端以及其它需要編輯、顯示網(wǎng)絡(luò)內(nèi)容的應(yīng)用程序都需要內(nèi)核
• JS引擎則：解析和執(zhí)行javascript來實(shí)現(xiàn)網(wǎng)頁的動(dòng)態(tài)效果
• 最開始渲染引擎和JS引擎并沒有區(qū)分的很明確，后來JS引擎越來越獨(dú)立，內(nèi)核就傾向于只指渲染引擎

常見的瀏覽器內(nèi)核有哪些

• Trident內(nèi)核：IE,MaxThon,TT,The World,360,搜狗瀏覽器等。[又稱MSHTML]
• Gecko內(nèi)核：Netscape6及以上版本，F(xiàn)F,MozillaSuite/SeaMonkey等
• Presto內(nèi)核：Opera7及以上。 [Opera內(nèi)核原為：Presto，現(xiàn)為：Blink;]
• Webkit內(nèi)核：Safari,Chrome等。 [ Chrome的Blink（WebKit的分支）]

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

• HTML5 現(xiàn)在已經(jīng)不是 SGML 的子集，主要是關(guān)于圖像，位置，存儲(chǔ)，多任務(wù)等功能的增加新增選擇器 document.querySelector、document.querySelectorAll拖拽釋放(Drag and drop) API媒體播放的 video 和 audio本地存儲(chǔ) localStorage 和 sessionStorage離線應(yīng)用 manifest桌面通知 Notifications語意化標(biāo)簽 article、footer、header、nav、section增強(qiáng)表單控件 calendar、date、time、email、url、search地理位置 Geolocation多任務(wù) webworker全雙工通信協(xié)議 websocket歷史管理 history跨域資源共享(CORS) Access-Control-Allow-Origin頁面可見性改變事件 visibilitychange跨窗口通信 PostMessageForm Data 對(duì)象繪畫 canvas
• 移除的元素：純表現(xiàn)的元素：basefont、big、center、font、 s、strike、tt、u對(duì)可用性產(chǎn)生負(fù)面影響的元素：frame、frameset、noframes
• 支持HTML5新標(biāo)簽：IE8/IE7/IE6支持通過document.createElement方法產(chǎn)生的標(biāo)簽可以利用這一特性讓這些瀏覽器支持HTML5新標(biāo)簽瀏覽器支持新標(biāo)簽后，還需要添加標(biāo)簽?zāi)J(rèn)的樣式
• 當(dāng)然也可以直接使用成熟的框架、比如html5shim

如何區(qū)分 HTML 和 HTML5

• DOCTYPE聲明、新增的結(jié)構(gòu)元素、功能元素

10 HTML5的離線儲(chǔ)存怎么使用，工作原理能不能解釋一下？

• 在用戶沒有與因特網(wǎng)連接時(shí)，可以正常訪問站點(diǎn)或應(yīng)用，在用戶與因特網(wǎng)連接時(shí)，更新用戶機(jī)器上的緩存文件
• 原理：HTML5的離線存儲(chǔ)是基于一個(gè)新建的.appcache文件的緩存機(jī)制(不是存儲(chǔ)技術(shù))，通過這個(gè)文件上的解析清單離線存儲(chǔ)資源，這些資源就會(huì)像cookie一樣被存儲(chǔ)了下來。之后當(dāng)網(wǎng)絡(luò)在處于離線狀態(tài)下時(shí)，瀏覽器會(huì)通過被離線存儲(chǔ)的數(shù)據(jù)進(jìn)行頁面展示
• 如何使用：頁面頭部像下面一樣加入一個(gè)manifest的屬性；在cache.manifest文件的編寫離線存儲(chǔ)的資源在離線狀態(tài)時(shí)，操作window.applicationCache進(jìn)行需求實(shí)現(xiàn)

CACHE MANIFEST#v0.11CACHE:js/app.jscss/style.cssNETWORK:resourse/logo.pngFALLBACK:/offline.html