前端開發工程師面試題之綜合篇

舒適提示：如下系列的面試題是經過整合網上各位大牛的文章而成，站在巨人的肩膀上，可以讓咱們更進一步。

一、頁面從輸入URL到頁面加載顯示完成，這個過程當中都發生了什麼？

1. 輸入域名地址
2. 發送域名地址至DNS服務器並得到對應WEB服務器IP地址
3. 與WEB服務器創建TCP鏈接
4. 服務器的永久重定向響應（從http://example.com到http://example.com）
5. 瀏覽器跟蹤重定向地址
6. 服務器處理請求
7. 服務器返回一個HTTP響應
8. 瀏覽器顯示HTML
9. 瀏覽器發送請求獲取的資源（如圖片、音頻、視頻、CSS、JS等等）
10. 瀏覽器發送異步請求

 二、瀏覽器工做原理

1. 用戶界面
2. 網絡
3. UI後端
4. 數據存儲
5. 瀏覽器引擎
6. 渲染引擎
7. js解釋器

三、瀏覽器解析過程

流程：解析html以構建DOM樹 -> 構建render樹 -> 佈局render樹 -> 繪製render樹

4.瀏覽器內核的理解

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

渲染引擎：負責取得網頁的內容（HTML、XML、圖像等等）、整理訊息（例如加入CSS等）、以及計算網頁的顯示方式，而後會輸出至顯示器或打印機。

瀏覽器的內核的不一樣對於網頁的語法解釋會有不一樣，因此渲染的效果也不相同。全部網頁瀏覽器、電子郵件客戶端以及其它須要編輯、顯示網絡內容的應用程序都須要內核

JS引擎：解析和執行javascript來實現網頁的動態效果

最開始渲染引擎和JS引擎並無區分的很明確，後來JS引擎愈來愈獨立，內核就傾向於只指渲染引擎

5.常見的瀏覽器內核有哪些

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

 6.請描述一下cookies,sessionStorage和localStorage的區別

cookie是網站爲了標示用戶身份而存儲在用戶本地終端（Client Side）上的數據（一般通過加密），數據會在瀏覽器和服務器間來回傳遞。

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

存儲數據大小：

　　cookie：數據大小不能超過4k。

　　sessionStorage和localStorage：雖然也有存儲大小的限制，但比cookie大得多，能夠達到5M或更大。

存儲有效時間：

　　localStorage:：存儲持久數據，瀏覽器關閉後數據不丟失除非主動刪除數據；

　　sessionStorage： 數據在當前瀏覽器窗口關閉後自動刪除。

　　cookie： 設置的cookie過時時間以前一直有效，即便窗口或瀏覽器關閉

 7.請大概描述下頁面訪問cookie的限制條件

跨域問題，設置了HttpOnly

8.如何實現瀏覽器內多個標籤頁之間的通訊

調用localStorage、cookies等本地存儲方式

9.頁面可見性（Page Visibility API）能夠有哪些用途

經過visibilityState的值檢測頁面當前是否可見，以及打開網頁的時間等；

在頁面被切換到其餘後臺進程的時候，自動暫停音樂或視頻的播放

10.網頁驗證碼是作什麼的，是爲了解決什麼安全問題

含義：區分用戶是計算機仍是人的公共全自動程序。

安全問題：防止惡意破解密碼、刷票、論壇灌水；有效防止黑客對某一個特定註冊用戶用特定程序暴力破解方式進行不斷的登陸嘗試。

11.性能優化？

1. 使用CDN
2. 圖片懶加載
3. 使用外部Javascript和css
4. 壓縮JavaScript、css、字體、圖片等等
5. 優化CSS Sprite
6. 減小HTTP請求數
7. 減小DNS查詢
8. 減小DOM操做
9. 減小DOM元素數量
10. 把腳本放在頁面底部