2. 程式人生 > >通過chrome偵錯程式測試瞭解瀏覽器解析和渲染HTML的過程

通過chrome偵錯程式測試瞭解瀏覽器解析和渲染HTML的過程

阿新 • • 發佈：2019-01-29

1.基礎知識：瞭解chrome的Timeline工具

僅僅是通過理論知識，很難記住和理解瀏覽器解析html的原則，因此我動手做了些小實驗。而做這個實驗，不得不用到一個工具：chrome的Timeline工具。

這個工具真的很強大，Timeline工具欄提供了對於在裝載Web應用的過程中，時間花費情況的概覽，這些應用包括處理DOM事件, 頁面佈局渲染或者向螢幕繪製元素。Timeline可以通過事件，框架，和實時記憶體用量3個方面的資料來監測網頁，通過這些資料，我們可以方便的找出頁面中存在問題的地方。
這裡寫圖片描述

具體的使用方式，這篇部落格裡有詳盡的說明。

2.主要過程

  • 解析HTML
  • 構建DOM樹
  • DOM樹與CSS樣式進行附著構造呈現樹
  • 佈局
  • 繪製

3.解析與構建DOM樹

瀏覽器有專門的html解析器，並且是邊解析邊構建do’m樹的，因此將前兩部分放在一塊講。
總體的解析原則是：1.自上而下順序解析。2.解析過程中遇到外部樣式（link,style）和外部指令碼(script),會阻塞瀏覽器的解析。3.外部樣式和外部指令碼（在沒有async、defer屬性下）會並行載入，但是外部樣式會阻塞外部指令碼的執行。

即：html解析->外部樣式、指令碼載入->外部樣式執行->外部指令碼執行->html繼續解析
情況一：如果是動態指令碼（即內聯指令碼）則不受樣式影響，在解析到它時會執行。
情況二：如果是動態建立的樣式檔案，則不會阻塞後續任何型別指令碼的執行。
情況三：外部樣式後續

外部指令碼含有async屬性（IE下為defer），外部樣式不會阻塞該指令碼的載入與執行

3.1外部樣式、指令碼並行載入，外部樣式會阻塞後續指令碼執行，直到外部樣式載入並解析完畢。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <script>var start = +new Date;</script>
  <link href="http://udacity-crp.herokuapp.com/style.css?rtt=2"
 
 rel="stylesheet">
   <link href="http://udacity-crp.herokuapp.com/style.css?rtt=1" rel="stylesheet">
</head>
<body>
  <p>I am here!</p>
  <span id="result"></span>
  <p>I am here  two!</p>
  <script>
    var end = +new Date;
    document.getElementById('result').innerHTML = (end-start);
  </script>
</body>
</html>

程式碼執行結果：
這裡寫圖片描述
並行載入：
這裡寫圖片描述
阻塞執行：
這裡寫圖片描述
可以看到，外部css載入並解析（parse）完畢之後才執行後面的js程式碼。

注意
dom樹構建完畢會觸發DOMContentLoaded事件，但此時外部檔案不一定載入完畢，比如一些圖片。當頁面載入完畢後才出發load事件，這也是 jquery的$ (document).ready(function(){})和原生程式碼window.onload=function(){}的區別。（其他區別： window.onload不能同時編寫多個，如果有多個window.onload方法，只會執行一個; $(document).ready()可以同時編寫多個，並且都可以得到執行 ）

3.2 外部樣式不會阻塞後續指令碼的載入，但會阻塞後續指令碼的執行

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <script>var start = +new Date;</script>
  <link href="http://udacity-crp.herokuapp.com/style.css?rtt=2" rel="stylesheet">

</head>

<body>
  test
  <script src="http://udacity-crp.herokuapp.com/time.js?rtt=1&a"></script>
  <div id="result"></div>
  <script>var end = +new Date;document.getElementById("result").innerHTML = end-start;</script>

</body>
</html>

外部指令碼程式碼：

var loadTime = document.createElement('div');
loadTime.innerText = document.currentScript.src + ' executed @ ' + window.performance.now();
loadTime.style.color = 'blue';
document.body.appendChild(loadTime);

執行結果：
這裡寫圖片描述
在瀑布流中檢視外部檔案載入順序：
這裡寫圖片描述
可以看到，確實是按先後順序發起請求，但是並行載入。
這裡寫圖片描述
可以看你到，在外部樣式載入和解析完畢，外部指令碼才開始執行

3.3 如果後續外部指令碼含有async屬性，則該指令碼不會被樣式檔案阻塞

這裡我直接在3.2 中外部指令碼標籤中加入async ,程式碼就不貼了，看下執行結果：
這裡寫圖片描述
這裡寫圖片描述
這裡寫圖片描述
可以看到 外部引入的time.js檔案在不沒有被css阻塞。

3.4 動態建立的樣式檔案不會阻塞其後的script的執行，不管script標籤是否具有async屬性

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <script>var start = +new Date;</script>

</head>

<body>
  test
  <script> 
    var link = document.createElement('link');
    link.href = "http://udacity-crp.herokuapp.com/style.css?rtt=2";
    link.rel = "stylesheet";
    document.head.appendChild(link);
  </script>
  <div id="result"></div>
  <script>var end = +new Date;document.getElementById("result").innerHTML = end-start;</script>

</body>
</html>

執行結果：
這裡寫圖片描述
動態建立的link載入了3秒左右，而第一個script指令碼（line:6）在67ms時執行，第三個script指令碼（line:19）在75ms左右執行。
這裡寫圖片描述
這裡寫圖片描述

3.5動態建立的樣式檔案不會阻塞其後動態建立的script的執行

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <script>var start = +new Date;</script>

</head>

<body>
  test
  <script> 
    var link = document.createElement('link');
    link.href = "http://udacity-crp.herokuapp.com/style.css?rtt=2";
    link.rel = "stylesheet";
    document.head.appendChild(link);
    var script = document.createElement('script');
    script.src = "http://udacity-crp.herokuapp.com/time.js?rtt=1&a";
    document.head.appendChild(script);
  </script>
  <div id="result"></div>
  <script>var end = +new Date;document.getElementById("result").innerHTML = end-start;</script>

</body>
</html>

這裡寫圖片描述
可以看到，動態指令碼在3秒左右才載入完畢，後其後的指令碼在1.8秒左右就以及載入並執行了。另外第三個script標籤在2ms左右就執行了，可見，js指令碼無論是動態建立還是直接引入在頁面的，順序載入，但並行執行。這個在3.6節進行進一步證明。

3.6動態建立的指令碼的載入和執行均會被之前的樣式檔案阻塞,但不會阻塞後續指令碼的執行

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <script>var start = +new Date;</script>
  <link href="http://udacity-crp.herokuapp.com/style.css?rtt=2" rel="stylesheet">
</head>

<body>
  test
  <script> 
    var script = document.createElement('script');
    script.src = "http://udacity-crp.herokuapp.com/time.js?rtt=1&a";
    document.head.appendChild(script);
  </script>
  </script>
  <div id="result"></div>
  <script>var end = +new Date;document.getElementById("result").innerHTML = end-start;</script>

</body>
</html>

這裡寫圖片描述
這裡寫圖片描述
可以看到，動態建立的指令碼並沒有阻塞後面指令碼的執行，而且它的執行方式和其他指令碼一樣，均會被之前的CSS阻塞

4 構建渲染樹，繪製與佈局

在外部樣式執行完畢後，css附著於DOM，建立了一個渲染樹（渲染樹是一些被渲染物件的集），也就是說渲染樹與dom樹是同時構建的。每個渲染物件都包含了與之對應的計算過樣式的DOM物件，對於每個渲染元素來說，位置都經過計算，所以這裡被叫做“佈局”。然後將“佈局”顯示在瀏覽器視窗，稱之為“繪製”。
同指令碼檔案一樣，CSS樣式表會阻塞圖片的載入，而指令碼檔案不會。接著指令碼的執行完畢後，DOM樹構建完成。

渲染樹的節點（渲染器），在Gecko中稱為frame，而在webkit中稱為renderer。渲染器是在文件解析和建立DOM節點後建立的，會計算DOM節點的樣式資訊。

在webkit中，renderer是由DOM節點呼叫attach()方法建立的。attach()方法計算了DOM節點的樣式資訊。attach()是自上而下的遞迴操作。也就是說，父節點總是比子節點先建立自己的renderer。銷燬的時候，則是自下而上的遞迴操作，也就是說，子節點總是比父節點先銷燬。

如果元素的display屬性被設定成了none，或者如果元素的子孫繼承了display:none，renderer不會被建立。節點的子類和display屬性一起決定為該節點建立什麼樣的渲染器。但是visibility：hidden的元素會被建立

具體如何構建渲染樹，可參見：

相關推薦

通過chrome偵錯程式測試瞭解瀏覽器解析和渲染HTML的過程

1.基礎知識：瞭解chrome的Timeline工具 僅僅是通過理論知識，很難記住和理解瀏覽器解析html的原則，因此我動手做了些小實驗。而做這個實驗，不得不用到一個工具：chrome的Timeline工具。 這個工具真的很強大，Timeline工具欄

在 Visual Studio 偵錯程式中指定符號 (.pdb) 和原始檔

釋出日期： 2016年6月若要了解有關 Visual Studio 2017 RC 的最新文件，請參閱 Visual Studio 2017 RC 文件。程式資料庫 (.pdb) 檔案（也稱為符號檔案）將你在類、方法和其他程式碼的原始檔中建立的識別符號對映到在專案的已編譯可執

巧用瀏覽器F12偵錯程式定位系統前後端bug

做測試的小夥伴可能用過httpwatch，firebug，fiddler，charles等抓包（資料包）工具，但實際上除了這些還有一個簡單實用並的抓包工具，那就是瀏覽器的F12偵錯程式。 httpwatch，firebug都是瀏覽器的外掛，需要額外下載，fiddler，charles也需要額外下載安裝包另行

2018/11/08-偵錯程式-《惡意程式碼分析實戰》

　　偵錯程式是用來檢測或測試其他程式執行的以來軟體或硬體。由於剛完成的程式包含錯誤，因此偵錯程式在軟體開發過程中可以大顯身手。偵錯程式讓你能夠洞察程式在執行過程中做了什麼。偵錯程式的目的是允許開發者監控程式的內部狀態和執行。 　　從偵錯程式獲得程式的資訊可能比較困難，但並不意味著不可能，可以從反彙編器中獲得

[基礎]-Python3 偵錯程式入門

原文出處： Clément Verna   譯文出處：linux中國-Flowsnow    Python 生態系統包含豐富的工具和庫，可以讓開發人員更加舒適。 例如，我們之前已經介紹瞭如何使用互動式 shell 增強 Pyt

Linux偵錯程式——gdb

一、介紹      GDB是一個在UNIX/LINUX作業系統下基於命令列的且功能強大的程式除錯工具，由GNU開源組織釋出。 二、基本用法 1.如何進入除錯？      （1）要使用gdb除錯，我們必須首先在原始碼生

ros節點呼叫gdb偵錯程式和呼叫valgrind分析節點

    在很多情況下我們需要呼叫gdb偵錯程式去除錯自己的程式碼。有時候也需要使用valgrind來檢測程式的記憶體洩露情況。下面我們就來介紹如何啟動gdb或者valgrind分析ros節點。     我是使用的launch檔案去啟動r

嵌入式ARM處理器的7種整合開發環境和6種JTAG偵錯程式

      嵌入式ARM處理器的7種整合開發環境和6種JTAG偵錯程式 7種整合開發環境 1.ADS(ARM Developer Suite) ADS由以下幾部分組成： （1）命令列開發工具：armcc、armcpp、tcc、tcpp、armasm、

圖形化OpenGL偵錯程式 BuGLe

圖形化OpenGL偵錯程式 BuGLe [轉] BuGLe 結合圖形化的OpenGL除錯與選擇的過濾器上的OpenGL命令流。偵錯程式可以檢視狀態、紋理、framebuffers ，著色器，而過濾器允許日誌，錯誤檢查，自由相機控制，視訊捕捉等。   主頁:http://www.

C++/MFC偵錯程式專案

本次偵錯程式專案已實現的功能 附加，建立除錯程序 檢視，修改彙編，記憶體，棧，暫存器 檢視任意模組，匯入表，匯出表。 永久性的斷點(偵錯程式重新開啟斷點依然存在) 無限軟體(條件)斷點，硬體 (條件)斷點，執行，讀寫，訪問 記憶體斷點，執行，讀寫，訪問 反反除錯，外掛功能 解析符號，原始

Linux下偵錯程式GDB、makefile的使用

  前面的幾篇部落格中我們講解了Linux下的編輯器vim、編譯器gcc和g++，今天我們來介紹一下其他常用的三種工具，它們分別是程式偵錯程式:GDB、程式碼檢視器:ctags、還有一個輔助工程的工具:Makefile 程式偵錯程式：GDB 在windos下我們常用vs編輯器中自帶

Python 偵錯程式之pdb

https://www.cnblogs.com/xiaohai2003ly/p/8529472.html   Python 偵錯程式之pdb 使用PDB的方式有兩種: 1. 單步執行程式碼,通過命令 python -m pdb xxx.py 啟動指令碼，進入單步執行模式

那些在偵錯程式裡沒問題(在開發環境沒問題)，但是獨立執行卻出問題的原因彙總

1.靜態編譯的動態庫依賴，在偵錯程式中會把程式的起始目錄放在當前專案目錄，因此如果依賴庫在當前專案目錄則不會出問題。 2.許可權問題，比如偵錯程式可能是administrator啟動，於是啟動的除錯程序也有了同樣的許可權。有些操作是需要降權的，比如注入後使用管道，在啟動目標程序的時候需要普通使用

Visual Studio圖形偵錯程式詳細使用教程(基於DirectX11)

前言 對於DirectX程式開發者來說，學會使用Visual Studio Graphics Debugger(圖形偵錯程式)可以幫助你全面瞭解渲染管線繫結的資源和執行狀態，從而確認問題所在。現在就以我所掌握的圖形除錯經驗來進行展開描述。 下面的教程基於Visual Studio 2017 Community

[轉]如何在程式啟動的時候將偵錯程式附加上去

有時，可能需要除錯由另一個程序啟動的應用程式的啟動程式碼。 這樣的示例包括服務和自定義設定操作。 在這些情況下，可以讓偵錯程式在應用程式啟動時啟動並自動附加。 設定應用程式以自動啟動偵錯程式 啟動登錄檔編輯器 (regedit)。 在“登錄檔編輯器”中開啟

Linux偵錯程式-gdb使用

如何用gdb執行一個程式 格式：gdb ./程式名 例: gdb ./main 程式名後邊不需要參加引數，因為引數的獲取在這裡無效，這裡僅僅載入可執行程式資訊 進入gdb除錯之後的命令操作： 退出：ctrl + d 或 quit 1.r/run：執行程式

痞子衡嵌入式：飛思卡爾Kinetis開發板OpenSDA偵錯程式那些事（上）- 背景與架構

　　大家好，我是痞子衡，是正經搞技術的痞子。今天痞子衡給大家介紹的是飛思卡爾Kinetis MCU開發闆闆載OpenSDA偵錯程式（上篇）。 　　眾所周知，嵌入式軟體開發幾乎離不開偵錯程式，因為寫一個稍有程式碼規模（5K行以上）的嵌入式應用程式一般不可能一次性搞定，沒有任何bug，出了bug並不可怕，只要我

QT 偵錯程式未設定（win7+qt5.6.2））

剛裝好的vs2013和qt5.6.2，準備進行軟體單步除錯，發現qt提示“偵錯程式未設定”，點開圖中設定，     我們發現無可選偵錯程式，所以問題的根本就是我們要怎麼配置一下CDB引擎而已。要找到CBD，需要下載安裝windows的sdk包，下載這個包主要是為了安裝D

自己動手編寫一個Linux偵錯程式系列之4 ELF檔案格式與DWARF除錯格式

目錄 在上一節中，你已經聽說了DWARF除錯格式，它是程式的除錯資訊，是一種可以更好理解原始碼的方式，而不只是解析程式。今天我們將討論原始碼級除錯資訊的細節，以準備在本教程後面的部分中使用它。 系列索引 準備工作 斷點的設定 暫存器和記憶體 ELF檔案格式

[Win32]一個偵錯程式的實現-------除錯事件與除錯迴圈

前言 程式設計師離不開偵錯程式，它可以動態顯示程式的執行過程，對於解決程式問題有極大的幫助。如果你和我一樣對偵錯程式的工作原理很感興趣，那麼這一系列文章很適合你，這些文章記錄了我開發一個偵錯程式雛形的過程，希望對你有幫助。或許我寫的程式碼很拙劣，還請大家多多見諒！ 這