成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

瀏覽器解析渲染HTML文檔的過程

warkiz / 1215人閱讀

摘要：瀏覽器的預解析可以減緩渲染被阻塞的情況，例如文檔解析過程中預加載器發(fā)現(xiàn)了標簽，會對文件進行加載并放在瀏覽器緩存中，這樣當解析器遇到這個標記時，由于預加載器已經(jīng)將文件加載下來了，所以會被立即執(zhí)行，不需要等待從網(wǎng)絡抓取資源，減緩了對渲染的阻塞。

參考資料

瀏覽器的工作原理

瀏覽器加載網(wǎng)頁時的過程是什么？

HTML渲染過程詳解

瀏覽器的工作原理 一、瀏覽器的高層結(jié)構(gòu)

瀏覽器的主要組件為：

用戶界面 - 包括地址欄、前進/后退按鈕、書簽菜單等。除了瀏覽器主窗口顯示的您請求的頁面外，其他顯示的各個部分都屬于用戶界面。

瀏覽器引擎 - 在用戶界面和呈現(xiàn)引擎之間傳送指令。

呈現(xiàn)引擎 - 負責顯示請求的內(nèi)容。如果請求的內(nèi)容是 HTML，它就負責解析 HTML 和 CSS 內(nèi)容，并將解析后的內(nèi)容顯示在屏幕上。

網(wǎng)絡 - 用于網(wǎng)絡調(diào)用，比如 HTTP 請求。其接口與平臺無關，并為所有平臺提供底層實現(xiàn)。

用戶界面后端 - 用于繪制基本的窗口小部件，比如組合框和窗口。其公開了與平臺無關的通用接口，而在底層使用操作系統(tǒng)的用戶界面方法。

JavaScript 解釋器。用于解析和執(zhí)行 JavaScript 代碼。

數(shù)據(jù)存儲。這是持久層。瀏覽器需要在硬盤上保存各種數(shù)據(jù)，例如 Cookie。新的 HTML 規(guī)范 (HTML5) 定義了“網(wǎng)絡數(shù)據(jù)庫”，這是一個完整（但是輕便）的瀏覽器內(nèi)數(shù)據(jù)庫。

值得注意的是，和大多數(shù)瀏覽器不同，Chrome 瀏覽器的每個標簽頁都分別對應一個呈現(xiàn)引擎實例。每個標簽頁都是一個獨立的進程。

二、主流程

呈現(xiàn)引擎一開始會從網(wǎng)絡層獲取請求文檔的內(nèi)容，內(nèi)容的大小一般限制在 8000 個塊以內(nèi)。

然后進行如下所示的基本流程：

呈現(xiàn)引擎將開始解析 HTML 文檔，并將各標記逐個轉(zhuǎn)化成“內(nèi)容樹”上的 DOM 節(jié)點。同時也會解析外部 CSS 文件以及樣式元素中的樣式數(shù)據(jù)。HTML 中這些帶有視覺指令的樣式信息將用于創(chuàng)建另一個樹結(jié)構(gòu)：呈現(xiàn)樹。

呈現(xiàn)樹包含多個帶有視覺屬性（如顏色和尺寸）的矩形。這些矩形的排列順序就是它們將在屏幕上顯示的順序。

呈現(xiàn)樹構(gòu)建完畢之后，進入“布局”處理階段，也就是為每個節(jié)點分配一個應出現(xiàn)在屏幕上的確切坐標。下一個階段是繪制 - 呈現(xiàn)引擎會遍歷呈現(xiàn)樹，由用戶界面后端層將每個節(jié)點繪制出來。

需要著重指出的是，這是一個漸進的過程。為達到更好的用戶體驗，呈現(xiàn)引擎會力求盡快將內(nèi)容顯示在屏幕上。它不必等到整個 HTML 文檔解析完畢之后，就會開始構(gòu)建呈現(xiàn)樹和設置布局。在不斷接收和處理來自網(wǎng)絡的其余內(nèi)容的同時，呈現(xiàn)引擎會將部分內(nèi)容解析并顯示出來。

主流程示例：

三、處理腳本和樣式表的順序

腳本
網(wǎng)絡的模型是同步的。網(wǎng)頁作者希望解析器遇到 標簽，會對 last.js 文件進行加載并放在瀏覽器緩存中，這樣當解析器遇到這個

由上面兩張截圖可以看到，jquery.min.js 腳本文件與 bootstrap.css 等樣式文件并行加載，但是由于 chrome 的并發(fā)連接數(shù)上限為 6 個，因此 bootstrap.min.js 腳本、xxx.css 樣式等文件的加載會等待前面的文件加載完成，有可用連接數(shù)的時候才開始加載。

了解以上信息之后，我們可以對該頁面進行相應優(yōu)化，例如對CSS文件進行壓縮處理、使用 CDN，將資源分布在多個域名下、合并 CSS 文件，減少 HTTP 請求數(shù)量等，來提高 CSS 的加載速度，減少 HTML 文檔解析和渲染的阻塞時間。

browser only allows six TCP connections per origin on HTTP 1.

瀏覽器的并發(fā)請求數(shù)目限制是針對同一域名的。因此可以使用 CDN 加速技術來提高用戶訪問網(wǎng)站的響應速度，這樣使用了 CDN 的資源加載不會占用當前域名下的并發(fā)連接數(shù)，從而減少阻塞的時間。

網(wǎng)頁性能

了解 HTML 文檔的解析和渲染的過程對于分析網(wǎng)頁性能有著重要意義，它可以幫助我們找到影響網(wǎng)頁性能的關鍵因素。例如，我們知道 JS 外部腳本的執(zhí)行會阻塞文檔的解析，那么重量級的第三方插件則會影響首頁加載的速度，如果因此影響到了用戶體驗，我們就需要考慮這個第三方插件的使用成本是不是太高了，能否使用其他輕量級的插件進行替代，或者只使用其中一部分模塊。

以 Datatables 為例：

上圖是一個項目頁面的 Network 截圖，紅色框中的部分出現(xiàn)了約 700ms 左右的空白，我們需要知道為什么頁面的加載會出現(xiàn)這樣的情況，這段空白時間瀏覽器在干什么？

我們分析 Timeline 圖，看看瀏覽器在這段時間的具體信息，如下：

通過 Timeline 圖我們可以看到，在 250ms~900ms 時間區(qū)間內(nèi)，瀏覽器在執(zhí)行 datatables.min.js 腳本代碼，這個腳本的執(zhí)行阻塞了文檔的解析，耗時約 700ms，對應了 Network 圖中的空白。

我們繼續(xù)查看頁面總的耗時時間，評估 700ms 耗時的影響，如下：

可以看到，頁面總的完成耗時為 1.66s，由此可知 datatables.min.js 的執(zhí)行耗時占了很大比重，應當慎重考慮是否一定要使用這個插件，能否使用其他輕量級的插件進行替代，或者能否精簡插件的不必要模塊，或者舍棄插件的使用。

參考資料-1
瀏覽器接收到html代碼，可能是一份完整的文檔，也可能是一個chunk，即開始解析。解析過程是先構(gòu)建dom樹，再根據(jù)dom樹構(gòu)建渲染樹，最后瀏覽器將渲染樹繪制到頁面上。
構(gòu)建dom樹的過程即根據(jù)html代碼自上而下進行構(gòu)建，當遇到script文件加載／執(zhí)行會阻塞后面dom樹的構(gòu)建（javascript可能會改變dom樹），而遇到css文件則會阻塞渲染樹的構(gòu)建，即dom樹依然繼續(xù)構(gòu)建（除非遇到script標簽并且css文件依舊未加載完成），但不會渲染繪制到頁面上。而無論哪個阻塞，該加載的文件還是會加載，例如html文檔中的其他css／js／圖片文件。
另外javascript被加載后就會被執(zhí)行，執(zhí)行的過程也阻塞樹的構(gòu)建。是執(zhí)行完了才解析其他內(nèi)容，而不是執(zhí)行完了才加載其他內(nèi)容。

作者：加冰
鏈接：https://www.zhihu.com/questio...

參考資料-2
首先，開源瀏覽器一般以8k每塊下載html頁面。
然后解析頁面生成DOM樹，遇到css標簽或JS腳本標簽就新起線程去下載他們，并繼續(xù)構(gòu)建DOM。
下載完后解析CSS為CSS規(guī)則樹，瀏覽器結(jié)合CSS規(guī)則樹和DOM樹生成Render Tree。
注意：構(gòu)建CSS Object Model（CSSOM)會阻塞JavaScript的執(zhí)行。JavaScript的執(zhí)行也會阻塞DOM的構(gòu)建。
JavaScript下載后可以通過DOM API修改DOM，通過CSSOM API修改樣式作用域Render Tree。
每次修改會造成Render Tree的重新布局和重繪。只要修改DOM或修改了元素的形狀或大小，就會觸發(fā)Reflow，單純修改元素的顏色只需Repaint一下（調(diào)用操作系統(tǒng)Native GUI的API繪制）。

作者：陳金
鏈接：https://www.zhihu.com/questio...

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/102959.html

相關文章

  • 瀏覽器工作原理整理

    摘要：每種可被解析的格式必須具有由詞匯及語法規(guī)則組成的特定的文法，稱為上下文無關文法。解析解析器，每個標識都有特定的正則進行解析。開發(fā)者可以將腳本標識為，以使其不阻塞文檔解析，并在文檔解析結(jié)束后執(zhí)行。 瀏覽器組成 用戶界面-地址欄、按鈕之類的 瀏覽器引擎-用來查詢及操作渲染引擎的接口 渲染引擎-顯示請求的內(nèi)容 網(wǎng)絡-進行網(wǎng)絡請求 ui后端-用來滬指選擇框、對話框的基本組件 js解析器 數(shù)據(jù)...

    hqman 評論0 收藏0

  • 瀏覽器工作原理整理

    摘要：每種可被解析的格式必須具有由詞匯及語法規(guī)則組成的特定的文法，稱為上下文無關文法。解析解析器，每個標識都有特定的正則進行解析。開發(fā)者可以將腳本標識為，以使其不阻塞文檔解析，并在文檔解析結(jié)束后執(zhí)行。 瀏覽器組成 用戶界面-地址欄、按鈕之類的 瀏覽器引擎-用來查詢及操作渲染引擎的接口 渲染引擎-顯示請求的內(nèi)容 網(wǎng)絡-進行網(wǎng)絡請求 ui后端-用來滬指選擇框、對話框的基本組件 js解析器 數(shù)據(jù)...

    Dionysus_go 評論0 收藏0

  • 瀏覽器解析渲染HTML文檔的過程

    摘要：瀏覽器的預解析可以減緩渲染被阻塞的情況，例如文檔解析過程中預加載器發(fā)現(xiàn)了標簽，會對文件進行加載并放在瀏覽器緩存中，這樣當解析器遇到這個標記時，由于預加載器已經(jīng)將文件加載下來了，所以會被立即執(zhí)行，不需要等待從網(wǎng)絡抓取資源，減緩了對渲染的阻塞。 參考資料 瀏覽器的工作原理 瀏覽器加載網(wǎng)頁時的過程是什么？ HTML渲染過程詳解 瀏覽器的工作原理 一、瀏覽器的高層結(jié)構(gòu) 瀏覽器的主要組件為：...

    davidac 評論0 收藏0

  • 瀏覽器解析渲染HTML文檔的過程

    摘要：瀏覽器的預解析可以減緩渲染被阻塞的情況，例如文檔解析過程中預加載器發(fā)現(xiàn)了標簽，會對文件進行加載并放在瀏覽器緩存中，這樣當解析器遇到這個標記時，由于預加載器已經(jīng)將文件加載下來了，所以會被立即執(zhí)行，不需要等待從網(wǎng)絡抓取資源，減緩了對渲染的阻塞。 參考資料 瀏覽器的工作原理 瀏覽器加載網(wǎng)頁時的過程是什么？ HTML渲染過程詳解 瀏覽器的工作原理 一、瀏覽器的高層結(jié)構(gòu) 瀏覽器的主要組件為：...

    CoyPan 評論0 收藏0

  • Web性能優(yōu)化

    摘要：性能優(yōu)化網(wǎng)站的性能細線在幾個方面網(wǎng)站首頁加載速度動畫的流暢度通過分析瀏覽器的渲染原理資源對渲染的影響，得出優(yōu)化網(wǎng)站性能的辦法。查看性能的工具的面板錄制網(wǎng)頁加載的過程，分析記錄瀏覽器渲染過程中每個過程的耗時。通過引入，可以避免阻塞。 1 Web性能優(yōu)化 Web網(wǎng)站的性能細線在幾個方面： 網(wǎng)站首頁加載速度 動畫的流暢度 通過分析瀏覽器的渲染原理、資源對渲染的影響，得出優(yōu)化網(wǎng)站性能的辦法...

    ZHAO_ 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<