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

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

不論你是針對(duì)pc端還是移動(dòng)端，甚至是專門在微信端做前端研發(fā)，都需要跟一樣?xùn)|西接觸——瀏覽器。

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

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

2.部分網(wǎng)站相比于同類型網(wǎng)站，交互流暢程度相對(duì)差；

……

諸如此類的現(xiàn)象還有很多，這種現(xiàn)象的頻繁發(fā)生，極大降低了用戶體驗(yàn)，降低了用戶的留存率。

代碼冗余、封裝性差……諸如此類的低維護(hù)性，導(dǎo)致整體項(xiàng)目在線上環(huán)境呈現(xiàn)出明顯的卡頓和延遲。

實(shí)際上，我在接觸BAT等互聯(lián)網(wǎng)企業(yè)的開發(fā)者時(shí)，就發(fā)現(xiàn)，他們對(duì)于瀏覽器的原理和優(yōu)化有著極為嚴(yán)苛的要求，對(duì)底層知識(shí)的要求很高。

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

---

1.當(dāng)我們?cè)诖蜷_網(wǎng)頁(yè)時(shí)，瀏覽器做了什么

如果你現(xiàn)在手邊有一臺(tái)電腦，而電腦上又恰好安裝了Chrome瀏覽器，那么請(qǐng)你做下面的一件事——

打開你的Chrome瀏覽器，然后打開你的瀏覽器的任務(wù)管理器，

你會(huì)看到什么？

我的任務(wù)管理器截圖如下：

為什么我們僅僅是打開1~2張網(wǎng)頁(yè)，就觸發(fā)了如此多的進(jìn)程（注意我這里說的是進(jìn)程而不是線程，一個(gè)進(jìn)程可以包含多個(gè)線程，1個(gè)線程又可以包含多個(gè)模塊）

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

2.多線程瀏覽器：現(xiàn)代主流瀏覽器的“標(biāo)配”

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

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

前端開發(fā)對(duì)”單線程“3個(gè)字再熟悉不過了，因?yàn)?#xff0c;我們最常用的語(yǔ)言JavaScript就是經(jīng)典的單線程語(yǔ)言。

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

試想一下我們?cè)谑褂脝尉€程瀏覽器的時(shí)候會(huì)發(fā)生什么錯(cuò)誤，假設(shè)我們?cè)诖蜷_一張頁(yè)面，瀏覽器的網(wǎng)絡(luò)線程、插件線程、渲染線程等等挨著挨著往下走。

單線程瀏覽器處理單張頁(yè)面的機(jī)制

當(dāng)走到頁(yè)面線程的JavaScript渲染的時(shí)候，如果不巧遇見了下面的執(zhí)行代碼：

const

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

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

多線程瀏覽器的工作原理如下，我們?cè)俅蜗胂笪覀兇蜷_一張頁(yè)面的過程：

多線程瀏覽器的工作原理

當(dāng)我們?cè)俅未蜷_一張頁(yè)面時(shí)，此時(shí)多個(gè)線程會(huì)被分割，這種低耦合的方式，其好處就在于即使任意一個(gè)線程的任意一個(gè)模塊報(bào)錯(cuò)，也不會(huì)影響其他的線程。

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

最典型的例子就是，當(dāng)網(wǎng)速較慢的時(shí)候，我們?cè)跒g覽一些圖片較多且較大的網(wǎng)站時(shí)，DOM和樣式都已經(jīng)完全渲染出來了，可是圖片還沒渲染出來，導(dǎo)致頁(yè)面中的<img>標(biāo)簽呈現(xiàn)出明顯的不和諧感。

（未完待續(xù)……）

總結(jié)

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

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