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