建站
咨詢
售后
建站咨詢
新聞中心
Chrome 算是程序員的標(biāo)配了，從全球的市場(chǎng)份額來(lái)看，它在全球市場(chǎng)的份額已經(jīng)超過(guò) 60%。
成都創(chuàng)新互聯(lián)公司是一家專業(yè)提供蒸湘企業(yè)網(wǎng)站建設(shè),專注與網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計(jì)、H5高端網(wǎng)站建設(shè)、小程序制作等業(yè)務(wù)。10年已為蒸湘眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)絡(luò)公司優(yōu)惠進(jìn)行中。
在 Chrome 10 周年之際，官方發(fā)布了一個(gè)系列文章，用圖解的方式，很清晰的講解了現(xiàn)代瀏覽器的運(yùn)行原理。
渲染器進(jìn)程的內(nèi)部工作原理
本系列分為 4 個(gè)部分，主要講解關(guān)于現(xiàn)代瀏覽器的運(yùn)行原理，本文為該系列的第 3 篇。在之前的文章中，我們介紹了多進(jìn)程架構(gòu)和導(dǎo)航的完整流程，而在這篇文章中，我們將探究在渲染器進(jìn)程的內(nèi)部，到底發(fā)生了什么。
渲染器進(jìn)程涉及到 Web 性能相關(guān)的多個(gè)方面，由于渲染器進(jìn)程中處理了很多的邏輯，不是一篇文章可以全面講解的，因此本文僅作為一個(gè)概述。如果你有興趣深入研究，可以在《Why Performance Matters》這篇文章里找到更多的資料。
渲染器進(jìn)程處理Web內(nèi)容
所有選項(xiàng)卡內(nèi)發(fā)生的邏輯，都由渲染器進(jìn)程負(fù)責(zé)。在渲染器進(jìn)程中，主線程處理了服務(wù)器發(fā)送給用戶的大部分代碼。如果你使用到 Web Workder 或者Service Worker，那 JavaScript 中的這部分代碼，將由工作線程處理。Compositor（合成器） 和 Raster（光柵） 線程也在渲染器內(nèi)運(yùn)行，從而實(shí)現(xiàn)高效、流暢的渲染頁(yè)面。
渲染器進(jìn)程的核心工作是將 HTML，CSS 和 JavaScript 轉(zhuǎn)換為用戶可以與之交互的網(wǎng)頁(yè)。
上圖中，描述了具有主線程、工作線程、Compositor 線程、Raster 線程的渲染器進(jìn)程，以及他們之間的關(guān)系。
解析
構(gòu)建 DOM
當(dāng)渲染器進(jìn)程收到一個(gè)導(dǎo)航請(qǐng)求，并開(kāi)始接收 HTML 數(shù)據(jù)，主線程將開(kāi)始處理文本字符串（HTML），將其解析成 DOM（Document Object Model）。
DOM 是 Web 頁(yè)面的內(nèi)部的邏輯樹(shù)文檔結(jié)構(gòu)，Web 開(kāi)發(fā)人員可以通過(guò) JavaScript 腳本與之交互數(shù)據(jù)，以及通過(guò)標(biāo)準(zhǔn) API 來(lái)操作 DOM 節(jié)點(diǎn)。
將 HTML 文檔解析成 DOM 是完全依照于 HTML 協(xié)議。并且在 HTML 協(xié)議中，瀏覽器不會(huì)對(duì)錯(cuò)誤的 HTML 進(jìn)行錯(cuò)誤提示。例如，缺少結(jié)束的
標(biāo)簽時(shí)，這依然是一個(gè)有效的 HTML。類似 Hi! I'm Chrome! 中，b 標(biāo)簽在 i 標(biāo)簽之前關(guān)閉這樣的錯(cuò)誤，會(huì)被 HTML 理解為 Hi! I'm Chrome!。這是因?yàn)?HTML 規(guī)范的主要原則是優(yōu)雅的處理這些錯(cuò)誤，而不是嚴(yán)格檢查。如果你對(duì)這些規(guī)范感到好奇，可以閱讀 HTML 規(guī)范中的 “解析器中的錯(cuò)誤處理和奇怪案例介紹” 部分。
解析器中的錯(cuò)誤處理和奇怪案例介紹:
https://html.spec.whatwg.org/multipage/parsing.html#an-introduction-to-error-handling-and-strange-cases-in-the-parser
子資源加載
一個(gè)完整的 Web 站點(diǎn)通常會(huì)包含圖片、CSS 和 JS 等外部資源，這些文件都需要從網(wǎng)絡(luò)或者本地緩存中加載。主線程可以在解析構(gòu)建 DOM 的時(shí)候，將他們逐個(gè)請(qǐng)求，但是為了加快速度，會(huì)同時(shí)使用 “預(yù)加載掃描（Preload Scanner）”。
如果 “預(yù)加載掃描” 發(fā)現(xiàn)有類似 或 這樣的標(biāo)簽時(shí)，會(huì)由 HTML 解析器對(duì)該資源生成一個(gè) Tokens，然后在瀏覽器進(jìn)程中，通過(guò)網(wǎng)絡(luò)或者本地緩存來(lái)加載資源。
上圖描述了，主線程解析 HTML 并構(gòu)建 DOM 樹(shù)的過(guò)程。
JS 可以阻止解析
當(dāng) HTML 解析器遇到