瀏覽器通識

一、瀏覽器架構

1、單進程瀏覽器時代

2007年之前，市面上瀏覽器都是單進程的,在同一個進程里會存在網絡、插件、JavaScript運行環境、渲染引擎和頁面等。
缺點

1. 不穩定：一個節點崩潰，整個瀏覽器崩潰
2. 不流暢：運行在同一個線程，需要重上到下一次完成
3. 不安全：通過瀏覽器的漏洞來獲取系統權限，可以對你的電腦做一些惡意的事情

2、多進程瀏覽器時代

新的Chrome瀏覽器包括：

1. 1個瀏覽器（Browser）主進程：界面顯示、用戶交互、子進程管理，同時提供存儲等功能
2. 1個 GPU 進程：UI界面都選擇采用GPU來繪制
3. 1個網絡（NetWork）進程：網絡資源加載
4. 多個渲染進程：將 HTML、CSS 和 JavaScript 轉換為用戶可以與之交互的網頁
5. 多個插件進程：負責插件的運行
   瀏覽器是多進程的優點
6. 一個頁面崩潰不會影響到整個瀏覽器
7. 多進程可以充分利用現代 CPU 多核的優勢。
8. 方便使用沙盒模型隔離插件等進程,提高瀏覽器的穩定性。

3、Chrome 打開一個頁面需要啟動多少進程？分別有哪些進程？

• 打開 1 個頁面至少需要 1 個網絡進程、1 個瀏覽器進程、1 個 GPU 進程以及 1 個渲染進程，共 4 個；
• 最新的 Chrome 瀏覽器包括：1 個瀏覽器（Browser）主進程、1 個 GPU 進程、1 個網絡（NetWork）進程、多個渲染進程和多個插件進程。

二、javascript單線程

1、為什么采用單線程

主要用途是與用戶互動，以及操作DOM。如果JavaScript是多線程的，會帶來很多復雜的問題。
Web Worker：為 JavaScript 創造多線程環境，允許主線程創建 Worker 線程，將一些任務分配給后者運行。但是子線程完全受主線程控制，且不得操作DOM

2、瀏覽器內核中線程之間的關系

1. GUI渲染線程和JS引擎線程互斥
2. JS阻塞頁面加載：js如果執行時間過長就會阻塞頁面

3、進程和線程又是什么呢

進程：是 CPU 資源分配的最小單位（是能擁有資源和獨立運行的最小單位）。
線程：是 CPU 調度的最小單位（是建立在進程基礎上的一次程序運行單位）。

4、任務隊列

JS 是單線程的，同步執行任務會造成瀏覽器的阻塞，所以我們將 JS 分成一個又一個的任務，通過不停的循環來執行事件隊列中的任務。

• 單線程就意味著，所有任務都要排隊執行，前一個任務結束，才會執行后一個任務。
• 如果當前線程空閑，并且隊列為空，那每次加入隊列的函數將立即執行。

三、渲染機制

1. 瀏覽器如何渲染網頁

瀏覽器渲染一共有五步

1. 處理 HTML 并構建 DOM 樹。
2. 處理 CSS構建 CSSOM 樹。
3. 將 DOM 與 CSSOM 合并成一個渲染樹。
4. 根據渲染樹來布局，計算每個節點的位置。
5. 調用 GPU 繪制，合成圖層，顯示在屏幕上

第四步和第五步是最耗時的部分，這兩步合起來，就是我們通常所說的渲染

1. 在構建 CSSOM 樹時，會阻塞渲染，直至 CSSOM樹構建完成
2. 當 HTML 解析到 script 標簽時，會暫停構建 DOM，完成后才會從暫停的地方重新開始

四、緩存機制

1、常見 http 緩存的類型

1. 私有/瀏覽器/本地緩存
2. 代理緩存

2、緩存的好處

1. 減少了冗余的數據傳輸，減少網費
2. 減少服務器端的壓力
   W3. eb 緩存能夠減少延遲與網絡阻塞，進而減少顯示某個資源所用的時間
3. 加快客戶端加載網頁的速度

3、瀏覽器緩存總結

瀏覽器緩存分為強緩存和協商緩存。

強緩存

對一個網站而言，CSS、JavaScript、圖片等靜態資源更新的頻率都比較低，而這些文件又幾乎是每次HTTP請求都需要的，如果將這些文件緩存在瀏覽器中，可以極好的改善性能。

通過設置http頭中的cache-control和expires的屬性，可設定瀏覽器緩存，將靜態內容設為永不過期，或者很長時間后才過期。

1、Cache-Control
Cache-Control屬性是在服務器端配置的，不同的服務器有不同的配置，apache、nginx、IIS、tomcat等配置都不盡相同。
以Apache為例，在http.conf中做如下配置：

<filesMatch ”.(jpg|jpeg|png|gif|ico)$”>
	Header set Cache Control max-age=16768000,public
</filesMatch>
<filesMatch ”.(css|js)$”>
	Header set Cache Control max-age=2628000,public
</filesMatch>

問題：瀏覽器緩存的資源，若又想更新資源，如何實現？
解決：通過修改該資源的名稱來實現。修改了資源名稱，瀏覽器會當做不同的資源。
Cache-Control相關屬性
no-cache：不使用本地緩存。
no-store：直接禁止游覽器緩存數據，
public：可以被所有的用戶緩存，
private：只能被終端用戶的瀏覽器緩存，
max-age：從當前請求開始，
must-revalidate，當緩存過期時，

2、Expires
Expires屬性也是在服務端配置的，具體的配置也根據服務器而定。
問題：可能存在客戶端時間跟服務端時間不一致的問題。
解決：建議Expires結合Cache-Control一起使用。

Cache-Control: public
Expires: Wed, Jan 10 2018 00:27:04 GMT

過程

• 第一次瀏覽器發送請求給服務器時，此時瀏覽器還沒有本地緩存副本，服務器返回資源給瀏覽器，響應碼是200 OK，瀏覽器收到資源后，把資源和對應的響應頭一起緩存下來
• 第二次瀏覽器準備發送請求給服務器時候，瀏覽器會先檢查上一次服務端返回的響應頭信息中的Cache-Control，它的值是一個相對值，單位為秒，表示資源在客戶端緩存的最大有效期，過期時間為第一次請求的時間減去Cache-Control的值，過期時間跟當前的請求時間比較，如果本地緩存資源沒過期，那么命中緩存，不再請求服務器
• 如果沒有命中，瀏覽器就會把請求發送給服務器，進入緩存協商階段。

協商緩存

覽器在第一次訪問頁面時向服務器請求資源，并緩存起來，下次再訪問時會判斷在緩存中是否已有該資源且有沒有更新過，如果已有該資源且未更新過，則直接從瀏覽器緩存中讀取。

原理：
通過HTTP 請求頭中的 If-Modified-Since（If-No-Match） 和響應頭中的Last-Modified（ETag）來實現
HTTP請求把 If-Modified-Since（If-No-Match）傳給服務器
服務器將其與Last-Modified（ETag）對比，若相同，則文件沒有被改動過，則返回304，直接瀏覽器緩存中讀取資源即可。

緩存位置

• Service Worker
• Memory Cache
• Disk Cache
• Push Cache

Service Worker

離線緩存: 這個應用場景比如PWA，它借鑒了Web Worker思路，由于它脫離了瀏覽器的窗體，因此無法直接訪問DOM。它能完成的功能比如：離線緩存、消息推送和網絡代理，其中離線緩存就是Service Worker Cache。

Memory Cache

內存緩存：從效率上講它是最快的，從存活時間來講又是最短的，當渲染進程結束后，內存緩存也就不存在了。

Disk Cache

存儲在磁盤中的緩存：從存取效率上講是比內存緩存慢的，優勢在于存儲容量和存儲時長。

Push Cache

推送緩存：這算是瀏覽器中最后一道防線吧，它是HTTP/2的內容

六、瀏覽器存儲

1. 短暫性存儲：我們只需要將數據存在內存中，只在運行時可用
2. 持久性存儲：可以分為 瀏覽器端 與 服務器端
   • 瀏覽器:
     1. cookie: 通常用于存儲用戶身份，登錄狀態等
     2. localStorage / sessionStorage: 長久儲存/窗口關閉刪除， 體積限制為 4~5M
     3. indexDB：瀏覽器提供的本地數據庫
   • 服務器:
     1. 分布式緩存 redis
     2. 數據庫

存儲大小：
cookie數據大小不能超過4k
sessionStorage和localStorage雖然也有存儲大小的限制，但比cookie大得多，可以達到5M或更大

有效期時間：
localStorage 存儲持久數據，瀏覽器關閉后數據不丟失除非主動刪除數據
sessionStorage 數據在當前瀏覽器窗口關閉后自動刪除
cookie 設置的cookie過期時間之前一直有效，即使窗口或瀏覽器關閉

七、跨域處理方案

九種實用的前端跨域處理方案

八、安全

網站安全問題匯總

九、PWA漸進式web應用--離線存儲

PWA漸進式web應用

十、DOM節點操作

JavaScript之BOM和DOM及其兼容操作詳細總結
(1)創建新節點

createDocumentFragment()    //創建一個DOM片段
createElement()   //創建一個具體的元素
createTextNode()   //創建一個文本節點

（2）添加、移除、替換、插入

appendChild(node)
removeChild(node)
replaceChild(new,old)
insertBefore(new,old)

（3）查找

getElementById();
getElementsByName();
getElementsByTagName();
getElementsByClassName();
querySelector();
querySelectorAll();

（4）屬性操作

getAttribute(key);
setAttribute(key, value);
hasAttribute(key);
removeAttribute(key);

十一、頁面加載過程

1. 當我們打開網址的時候，瀏覽器會從服務器中獲取到 HTML 內容

2. 瀏覽器獲取到 HTML 內容后，就開始從上到下解析 HTML 的元素

3. <head>元素內容會先被解析，此時瀏覽器還沒開始渲染頁面

4. 當瀏覽器解析到這里時（步驟 3），會暫停解析并下載 JavaScript 腳本

5. 當 JavaScript 腳本下載完成后，瀏覽器的控制權轉交給 JavaScript 引擎。當腳本執行完成后，控制權會交回給渲染引擎，渲染引擎繼續往下解析 HTML 頁面

6. 此時<body>元素內容開始被解析，瀏覽器開始渲染頁面]

js延遲加載的方式有哪些

1. 將 js 腳本放在文檔的底部，來使 js 腳本盡可能的在最后來加載執行
2. 給 js 腳本添加 defer 屬性，這個屬性會讓腳本的加載與文檔的解析同步解析，然后在文檔解析完成后再執行這個腳本文件，這樣的話就能使頁面的渲染不被阻塞。多個設置了 defer 屬性的腳本按規范來說最后是順序執行的，但是在一些瀏覽器中可能不是這樣
3. 給 js 腳本添加 async屬性，這個屬性會使腳本異步加載，不會阻塞頁面的解析過程，但是當腳本加載完成后立即執行 js腳本，這個時候如果文檔沒有解析完成的話同樣會阻塞。多個 async 屬性的腳本的執行順序是不可預測的，一般不會按照代碼的順序依次執行
4. 動態創建 DOM 標簽的方式，我們可以對文檔的加載事件進行監聽，當文檔加載完成后再動態的創建 script 標簽來引入 js 腳本

十二、輸入url到展示過程

基礎版本

• 瀏覽器根據請求的URL交給DNS域名解析，找到真實IP，向服務器發起請求；
• 服務器交給后臺處理完成后返回數據，瀏覽器接收文件（HTML、JS、CSS、圖象等）；
• 瀏覽器對加載到的資源（HTML、JS、CSS等）進行語法解析，建立相應的內部數據結構（如HTML的DOM）；
• 載入解析到的資源文件，渲染頁面，完成。

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模式等等內容）