前言：為什么我們需要掌握瀏覽器的原理

作為一名前端研發，平日里打交道最多的，就是各式各樣的客戶端。

不論你是針對pc端還是移動端，甚至是專門在微信端做前端研發，都需要跟一樣東西接觸——瀏覽器。

不知道你有沒有留意過在使用瀏覽器的過程中，“遭遇”的某些現象：

1.部分網站，明明沒有過多的資源加載，卻打開速度奇慢無比；

2.部分網站相比于同類型網站，交互流暢程度相對差；

……

諸如此類的現象還有很多，這種現象的頻繁發生，極大降低了用戶體驗，降低了用戶的留存率。

代碼冗余、封裝性差……諸如此類的低維護性，導致整體項目在線上環境呈現出明顯的卡頓和延遲。

實際上，我在接觸BAT等互聯網企業的開發者時，就發現，他們對于瀏覽器的原理和優化有著極為嚴苛的要求，對底層知識的要求很高。

于是，今天我想簡單聊一聊，瀏覽器的原理（注意：是簡單聊聊，不涉及過深的理論）。

---

1.當我們在打開網頁時，瀏覽器做了什么

如果你現在手邊有一臺電腦，而電腦上又恰好安裝了Chrome瀏覽器，那么請你做下面的一件事——

打開你的Chrome瀏覽器，然后打開你的瀏覽器的任務管理器，

你會看到什么？

我的任務管理器截圖如下：

為什么我們僅僅是打開1~2張網頁，就觸發了如此多的進程（注意我這里說的是進程而不是線程，一個進程可以包含多個線程，1個線程又可以包含多個模塊）

這就需要引入一個新的概念——多線程瀏覽器

2.多線程瀏覽器：現代主流瀏覽器的“標配”

我隱約記得，多線程瀏覽器橫空出世的年份，似乎是在2007年還是2008年。

在此之前，我們都在使用單線程瀏覽器。

前端開發對”單線程“3個字再熟悉不過了，因為，我們最常用的語言JavaScript就是經典的單線程語言。

如果要我用最通俗，最粗礦的語言來解釋單線程，我就一句話——”代碼一行一行按著順序往下讀，如果報錯就卡在那里不走“

試想一下我們在使用單線程瀏覽器的時候會發生什么錯誤，假設我們在打開一張頁面，瀏覽器的網絡線程、插件線程、渲染線程等等挨著挨著往下走。

單線程瀏覽器處理單張頁面的機制

當走到頁面線程的JavaScript渲染的時候，如果不巧遇見了下面的執行代碼：

const

然后進程就會徹底卡死在這里，整個頁面將崩潰，不僅是本頁面，可能瀏覽器打開的好幾張也頁面都會呈現出這樣的致命缺陷。

出于要繞開上述的問題，才有了單線程瀏覽器的替代版本，也就是今天普遍在使用的多線程瀏覽器。

多線程瀏覽器的工作原理如下，我們再次想象我們打開一張頁面的過程：

多線程瀏覽器的工作原理

當我們再次打開一張頁面時，此時多個線程會被分割，這種低耦合的方式，其好處就在于即使任意一個線程的任意一個模塊報錯，也不會影響其他的線程。

頁面也能在部分功能缺失的情況下，渲染出絕大部分。

最典型的例子就是，當網速較慢的時候，我們在瀏覽一些圖片較多且較大的網站時，DOM和樣式都已經完全渲染出來了，可是圖片還沒渲染出來，導致頁面中的<img>標簽呈現出明顯的不和諧感。

（未完待續……）

總結

以上是生活随笔為你收集整理的.bat是什么语言_简单说说当我们打开网页时，浏览器到底做了什么？的全部內容，希望文章能夠幫你解決所遇到的問題。

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