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

1、頁面從輸入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. 瀏覽器發送異步請求

?2、瀏覽器工作原理

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

3、瀏覽器解析過程

流程：解析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. 把腳本放在頁面底部

?

轉載于:https://www.cnblogs.com/wanghao123/p/9377747.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。