溫馨提示：以下系列的面試題是通過(guò)整合網(wǎng)上各位大牛的文章而成，站在巨人的肩膀上，能夠讓我們更進(jìn)一步。

1、頁(yè)面從輸入U(xiǎn)RL到頁(yè)面加載顯示完成，這個(gè)過(guò)程中都發(fā)生了什么？

1. 輸入域名地址
2. 發(fā)送域名地址至DNS服務(wù)器并獲得對(duì)應(yīng)WEB服務(wù)器IP地址
3. 與WEB服務(wù)器建立TCP連接
4. 服務(wù)器的永久重定向響應(yīng)（從http://example.com到http://example.com）
5. 瀏覽器跟蹤重定向地址
6. 服務(wù)器處理請(qǐng)求
7. 服務(wù)器返回一個(gè)HTTP響應(yīng)
8. 瀏覽器顯示HTML
9. 瀏覽器發(fā)送請(qǐng)求獲取的資源（如圖片、音頻、視頻、CSS、JS等等）
10. 瀏覽器發(fā)送異步請(qǐng)求

?2、瀏覽器工作原理

1. 用戶(hù)界面
2. 網(wǎng)絡(luò)
3. UI后端
4. 數(shù)據(jù)存儲(chǔ)
5. 瀏覽器引擎
6. 渲染引擎
7. js解釋器

3、瀏覽器解析過(guò)程

流程：解析html以構(gòu)建DOM樹(shù) -> 構(gòu)建render樹(shù) -> 布局render樹(shù) -> 繪制render樹(shù)

4.瀏覽器內(nèi)核的理解

主要分為兩部分：渲染引擎和JS引擎

渲染引擎：負(fù)責(zé)取得網(wǎng)頁(yè)的內(nèi)容（HTML、XML、圖像等等）、整理訊息（例如加入CSS等）、以及計(jì)算網(wǎng)頁(yè)的顯示方式，然后會(huì)輸出至顯示器或打印機(jī)。

瀏覽器的內(nèi)核的不同對(duì)于網(wǎng)頁(yè)的語(yǔ)法解釋會(huì)有不同，所以渲染的效果也不相同。所有網(wǎng)頁(yè)瀏覽器、電子郵件客戶(hù)端以及其它需要編輯、顯示網(wǎng)絡(luò)內(nèi)容的應(yīng)用程序都需要內(nèi)核

JS引擎：解析和執(zhí)行javascript來(lái)實(shí)現(xiàn)網(wǎng)頁(yè)的動(dòng)態(tài)效果

最開(kāi)始渲染引擎和JS引擎并沒(méi)有區(qū)分的很明確，后來(lái)JS引擎越來(lái)越獨(dú)立，內(nèi)核就傾向于只指渲染引擎

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

1. Trident內(nèi)核：IE瀏覽器
2. Gecko內(nèi)核： Netscape6
3. Presto內(nèi)核： Opera7以上
4. Webkit內(nèi)核： Safari,Chrome等

?6.請(qǐng)描述一下cookies,sessionStorage和localStorage的區(qū)別

cookie是網(wǎng)站為了標(biāo)示用戶(hù)身份而存儲(chǔ)在用戶(hù)本地終端（Client Side）上的數(shù)據(jù)（通常經(jīng)過(guò)加密），數(shù)據(jù)會(huì)在瀏覽器和服務(wù)器間來(lái)回傳遞。

sessionStorage和localStorage不會(huì)自動(dòng)把數(shù)據(jù)發(fā)送給服務(wù)器，僅在本地保存。

存儲(chǔ)數(shù)據(jù)大小：

　　cookie：數(shù)據(jù)大小不能超過(guò)4k。

　　sessionStorage和localStorage：雖然也有存儲(chǔ)大小的限制，但比cookie大得多，可以達(dá)到5M或更大。

存儲(chǔ)有效時(shí)間：

　　localStorage:：存儲(chǔ)持久數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失除非主動(dòng)刪除數(shù)據(jù)；

　　sessionStorage： 數(shù)據(jù)在當(dāng)前瀏覽器窗口關(guān)閉后自動(dòng)刪除。

　　cookie： 設(shè)置的cookie過(guò)期時(shí)間之前一直有效，即使窗口或?yàn)g覽器關(guān)閉

?7.請(qǐng)大概描述下頁(yè)面訪(fǎng)問(wèn)cookie的限制條件

跨域問(wèn)題，設(shè)置了HttpOnly

8.如何實(shí)現(xiàn)瀏覽器內(nèi)多個(gè)標(biāo)簽頁(yè)之間的通信

調(diào)用localStorage、cookies等本地存儲(chǔ)方式

9.頁(yè)面可見(jiàn)性（Page Visibility API）可以有哪些用途

通過(guò)visibilityState的值檢測(cè)頁(yè)面當(dāng)前是否可見(jiàn)，以及打開(kāi)網(wǎng)頁(yè)的時(shí)間等；

在頁(yè)面被切換到其他后臺(tái)進(jìn)程的時(shí)候，自動(dòng)暫停音樂(lè)或視頻的播放

10.網(wǎng)頁(yè)驗(yàn)證碼是做什么的，是為了解決什么安全問(wèn)題

含義：區(qū)分用戶(hù)是計(jì)算機(jī)還是人的公共全自動(dòng)程序。

安全問(wèn)題：防止惡意破解密碼、刷票、論壇灌水；有效防止黑客對(duì)某一個(gè)特定注冊(cè)用戶(hù)用特定程序暴力破解方式進(jìn)行不斷的登錄嘗試。

11.性能優(yōu)化？

1. 使用CDN
2. 圖片懶加載
3. 使用外部Javascript和css
4. 壓縮JavaScript、css、字體、圖片等等
5. 優(yōu)化CSS Sprite
6. 減少HTTP請(qǐng)求數(shù)
7. 減少DNS查詢(xún)
8. 減少DOM操作
9. 減少DOM元素?cái)?shù)量
10. 把腳本放在頁(yè)面底部

?

轉(zhuǎn)載于:https://www.cnblogs.com/wanghao123/p/9377747.html

總結(jié)

以上是生活随笔為你收集整理的前端开发工程师面试题之综合篇的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。