要想理解瀏覽器的運(yùn)行環(huán)境口叙，我們先要搞明白一些計(jì)算機(jī)組件以及它們的作用。
CPU
它可以串行地一件接著一件處理交給它的任務(wù)稼虎。很久之前的時(shí)候大多數(shù)CPU只有一個(gè)核心送爸，不過(guò)在現(xiàn)在的硬件設(shè)備上CPU通常會(huì)有多個(gè)核心，因?yàn)槎嗪诵腃PU可以大大提高手機(jī)和電腦的運(yùn)算能力顷编。
GPU
圖形處理器 - 或者說(shuō)GPU（Graphics Processing Unit）是計(jì)算機(jī)的另外一個(gè)重要組成部分戚炫。和功能強(qiáng)大的CPU核心不一樣的是，單個(gè)GPU核心只能處理一些簡(jiǎn)單的任務(wù)媳纬，不過(guò)它勝在數(shù)量多双肤，單片GPU上會(huì)有很多很多的核心可以同時(shí)工作，也就是說(shuō)它的并行計(jì)算能力是非常強(qiáng)的钮惠。圖形處理器（GPU）顧名思義一開(kāi)始就是專(zhuān)門(mén)用來(lái)處理圖形的茅糜，所以在說(shuō)到圖形使用GPU（using）或者GPU支持（backed）時(shí)，人們就會(huì)聯(lián)想到圖形快速渲染或者流暢的用戶(hù)體驗(yàn)相關(guān)的概念萌腿。最近幾年來(lái)限匣，隨著GPU加速概念的流行，在GPU上單獨(dú)進(jìn)行的計(jì)算也變得越來(lái)越多了毁菱。
在進(jìn)程和線程上執(zhí)行程序
進(jìn)程可以看成正在被執(zhí)行的應(yīng)用程序米死，一個(gè)進(jìn)程可以有一個(gè)或多個(gè)線程。
當(dāng)你啟動(dòng)一個(gè)應(yīng)用程序的時(shí)候贮庞，操作系統(tǒng)會(huì)為這個(gè)程序創(chuàng)建一個(gè)進(jìn)程同時(shí)還為這個(gè)進(jìn)程分配一片私有的內(nèi)存空間峦筒，這片空間會(huì)被用來(lái)存儲(chǔ)所有程序相關(guān)的數(shù)據(jù)和狀態(tài)。當(dāng)你關(guān)閉這個(gè)程序的時(shí)候窗慎，這個(gè)程序?qū)?yīng)的進(jìn)程也會(huì)隨之消失物喷，進(jìn)程對(duì)應(yīng)的內(nèi)存空間也會(huì)被操作系統(tǒng)釋放掉。
有時(shí)候?yàn)榱藵M足功能的需要遮斥，創(chuàng)建的進(jìn)程會(huì)叫系統(tǒng)創(chuàng)建另外一些進(jìn)程去處理其它任務(wù)峦失，不過(guò)新建的進(jìn)程會(huì)擁有全新的獨(dú)立的內(nèi)存空間而不是和原來(lái)的進(jìn)程共用內(nèi)存空間。如果這些進(jìn)程需要通信术吗，它們要通過(guò)IPC機(jī)制（Inter Process Communication）來(lái)進(jìn)行尉辑。很多應(yīng)用程序都會(huì)采取這種多進(jìn)程的方式來(lái)工作，因?yàn)檫M(jìn)程和進(jìn)程之間是互相獨(dú)立的它們互不影響较屿，換句話來(lái)說(shuō)隧魄，如果其中一個(gè)工作進(jìn)程（worker process）掛掉了其他進(jìn)程不會(huì)受到影響，而且掛掉的進(jìn)程還可以重啟隘蝎。
瀏現(xiàn)代瀏覽器：多進(jìn)程购啄、多線程模型
瀏覽器會(huì)啟動(dòng)多個(gè)進(jìn)程，每個(gè)進(jìn)程里面有多個(gè)線程嘱么，不同進(jìn)程通過(guò)IPC進(jìn)行通信狮含。
最新的Chrome瀏覽器架構(gòu)，它采用的是多進(jìn)程架構(gòu)，Chrome會(huì)盡可能為每一個(gè)tab甚至是頁(yè)面里面的每一個(gè)iframe都分配一個(gè)單獨(dú)的進(jìn)程几迄。
采用多進(jìn)程模型可以帶來(lái)的好處:
- 避免因單個(gè)頁(yè)面的不響應(yīng)或者崩潰影響整個(gè)瀏覽器的穩(wěn)定性
- 當(dāng)?shù)谌讲寮罎r(shí),也不會(huì)影響整個(gè)瀏覽器的穩(wěn)定性
- 安全
多進(jìn)程架構(gòu)也有它不好的地方表蝙，那就是進(jìn)程的內(nèi)存消耗。由于每個(gè)進(jìn)程都有各自獨(dú)立的內(nèi)存空間乓旗，所以它們不能像存在于同一個(gè)進(jìn)程的線程那樣共用內(nèi)存空間，這就造成了一些基礎(chǔ)的架構(gòu)（例如V8 JavaScript引擎）會(huì)在不同進(jìn)程的內(nèi)存空間同時(shí)存在的問(wèn)題集索，這些重復(fù)的內(nèi)容會(huì)消耗更多的內(nèi)存屿愚。所以為了節(jié)省內(nèi)存，Chrome會(huì)限制被啟動(dòng)的進(jìn)程數(shù)目务荆，當(dāng)進(jìn)程數(shù)達(dá)到一定的界限后妆距，Chrome會(huì)將訪問(wèn)同一個(gè)網(wǎng)站的tab都放在一個(gè)進(jìn)程里面跑。
當(dāng)Chrome運(yùn)行在一些性能比較好的硬件時(shí)函匕，瀏覽器進(jìn)程相關(guān)的服務(wù)會(huì)被放在不同的進(jìn)程運(yùn)行以提高系統(tǒng)的穩(wěn)定性娱据。相反如果硬件性能不好，這些服務(wù)就會(huì)被放在同一個(gè)進(jìn)程里面執(zhí)行來(lái)減少內(nèi)存的占用
不同的進(jìn)程負(fù)責(zé)瀏覽器不同部分的界面內(nèi)容
1.Browser進(jìn)程: 瀏覽器的主進(jìn)程,負(fù)責(zé)瀏覽器界面的顯示,和各個(gè)頁(yè)面的管理, 瀏覽器中所有其他類(lèi)型進(jìn)程的祖先,負(fù)責(zé)其他進(jìn)程的的創(chuàng)建和銷(xiāo)毀盅惜。它有且只有一個(gè)!!!!!
2.Renderer進(jìn)程: 網(wǎng)頁(yè)渲染進(jìn)程,負(fù)責(zé)頁(yè)面的渲染,可以有多個(gè)中剩。當(dāng)然渲染進(jìn)程的數(shù)量不一定等于你開(kāi)打網(wǎng)頁(yè)的個(gè)數(shù)
3.各種插件進(jìn)程
4.GPU進(jìn)程
image.png
除了上面列出來(lái)的進(jìn)程，Chrome還有很多其他進(jìn)程在工作抒寂，例如擴(kuò)展進(jìn)程（Extension Process）和工具進(jìn)程（utility process）结啼。如果你想看一下你的Chrome瀏覽器現(xiàn)在有多少個(gè)進(jìn)程在跑可以點(diǎn)擊瀏覽器右上角的更多按鈕，選擇更多工具和任務(wù)管理器：
image.png
瀏覽器的渲染
渲染引擎
一個(gè)渲染引擎主要包括：HTML解析器屈芜，CSS解析器郊愧，javascript引擎，布局layout模塊井佑，繪圖模塊
HTML解析器：解釋HTML文檔的解析器属铁，主要作用是將HTML文本解釋成DOM樹(shù)。
CSS解析器：它的作用是為DOM中的各個(gè)元素對(duì)象計(jì)算出樣式信息躬翁，為布局提供基礎(chǔ)設(shè)施
Javascript引擎：使用Javascript代碼可以修改網(wǎng)頁(yè)的內(nèi)容焦蘑，也能修改css的信息，javascript引擎能夠解釋javascript代碼姆另，并通過(guò)DOM接口和CSS樹(shù)接口來(lái)修改網(wǎng)頁(yè)內(nèi)容和樣式信息喇肋，從而改變渲染的結(jié)果。
布局(layout)：在DOM創(chuàng)建之后蝶防，Webkit需要將其中的元素對(duì)象同樣式信息結(jié)合起來(lái)，計(jì)算他們的大小位置等布局信息明吩，形成一個(gè)能表達(dá)這所有信息的內(nèi)部表示模型
繪圖模塊(paint)：使用圖形庫(kù)將布局計(jì)算后的各個(gè)網(wǎng)頁(yè)的節(jié)點(diǎn)繪制成圖像結(jié)果
渲染流程
瀏覽器渲染頁(yè)面的整個(gè)過(guò)程：瀏覽器會(huì)從上到下解析文檔间学。
1.構(gòu)建DOM
遇到HTML標(biāo)記窒盐，HTML解析器解析就會(huì)開(kāi)始接收HTML數(shù)據(jù)解析接收到的文本數(shù)據(jù)并把它轉(zhuǎn)化為一個(gè)DOM（Document Object Model）對(duì)象
2.子資源加載
遇見(jiàn) style/link 標(biāo)記 調(diào)用解析器 處理 CSS 標(biāo)記并構(gòu)建 CSS樣式樹(shù)（link標(biāo)記會(huì)取后才去生成rander樹(shù)葡粒，所以會(huì)導(dǎo)致css阻塞）糯彬。
遇見(jiàn) script 標(biāo)記 吨些，取后再分配JS引擎線程把JS代碼先渲染了斩萌，都渲染完了姆吭，GUI再繼續(xù)往下渲染（宏任務(wù)）
3.JavaScript會(huì)阻塞HTML的解析過(guò)程
當(dāng)HTML解析器碰到script標(biāo)簽的時(shí)候榛做，它會(huì)停止HTML文檔的解析從而轉(zhuǎn)向JavaScript代碼的加載，解析以及執(zhí)行内狸。為什么要這樣做呢瘤睹？因?yàn)閟cript標(biāo)簽中的JavaScript可能會(huì)使用諸如document.write()這樣的代碼改變文檔流的形狀，從而使整個(gè)DOM樹(shù)的結(jié)構(gòu)發(fā)生根本性的改變（HTML規(guī)范里面的overview of the parsing model部分有很好的示意圖）答倡。因?yàn)檫@個(gè)原因，HTML解析器不得不等JavaScript執(zhí)行完成之后才能繼續(xù)對(duì)HTML文檔流的解析工作
4.生成Render樹(shù)
將 DOM樹(shù) 與 CSS樹(shù) 合并成一個(gè)渲染樹(shù)驴党。
4.布局與繪制
根據(jù)渲染樹(shù)來(lái)渲染瘪撇，以計(jì)算每個(gè)節(jié)點(diǎn)的幾何信息（布局）。將各個(gè)節(jié)點(diǎn)繪制到屏幕上（繪制）港庄。
阻塞
CSS 被視為渲染阻塞資源 (包括JS) 倔既，這意味著瀏覽器將不會(huì)渲染任何已處理的內(nèi)容，直至 CSSOM 構(gòu)建完畢鹏氧，才會(huì)進(jìn)行下一階段渤涌。
JavaScript 被認(rèn)為是解釋器阻塞資源，HTML解析會(huì)被JS阻塞把还，它不僅可以讀取和修改 DOM 屬性实蓬，還可以讀取和修改 CSSOM 屬性
回流和重繪
操作DOM 比較消耗性能：大部分性能都消耗在了“DOM 的重排（回流reflow）和重繪repaint”、
頁(yè)面第一次渲染吊履，必然會(huì)出現(xiàn)一次layout（回流）和painting（重繪）安皱；第一次渲染完成后：
重排（回流）：如果瀏覽器的視口大小發(fā)生改變 或者 頁(yè)面中元素的位置，大小發(fā)生改變艇炎，再或者DOM結(jié)構(gòu)發(fā)生變化（刪除酌伊，新增元素或者挪動(dòng)位置）...瀏覽器都需要重新計(jì)算節(jié)點(diǎn)在視口中（本層）的最新位置【也就是layout】，完成后再分層和重新繪制-->此操作非常消耗性能缀踪，所以我們應(yīng)該盡可能的減少重排（回流）的次數(shù)
重繪：視口/元素的位置大小都不變居砖，只是修改了一些基礎(chǔ)樣式（例如：背景顏色，文字顏色驴娃，透明度）奏候，此時(shí)我們無(wú)需重新layout，只需重新painting即可-->重繪是必不可免的托慨，只要想讓頁(yè)面第一次渲染完后還可以改變還可以再改變鼻由，必然需要重繪暇榴，而且觸發(fā)一次回流，也必然會(huì)經(jīng)歷重繪
如果基于JS操作DOM蕉世，那么前端性能優(yōu)化必做的事情：減少DOM的重排（回流）
基于vue/react/angular等框架進(jìn)行開(kāi)發(fā)蔼紧，我們是基于數(shù)據(jù)驅(qū)動(dòng)視圖渲染，規(guī)避了直接操作DOM狠轻，我們只需要操作數(shù)據(jù)奸例，框架內(nèi)部幫助我們操作DOM（他們做了很多減少DOM重排的操作）
