本文是建立在下文的基礎之上完成的：
瀏覽器的渲染機制
渲染數構建之渲染樹與DOM樹的關系
一. 簡述，這兒有幾個重要的概念：
-
當瀏覽器通過地址獲取到html以后會將它保存到內存中，瀏覽器會從內存中讀取數據，所以html的解析都是從內存中的字節開始的，生成dom完整的流程是：字節數據 => 字符串 => Token => Node => DOM（對應Bytes → characters → tokens → nodes → object model）；同理，CSSOM的構建過程是：字節數據 => 字符串 => Token => Node => CSSOM
-
在DOM樹構建的同時，瀏覽器會構建渲染樹。然后瀏覽器根據渲染樹進行布局，操作系統進行繪制；注意這兒如果DOM樹在構建的時候遇到script，那么將阻礙DOM數的進一步構建，但是此時並不會阻礙操作系統將布局好的部分進行繪制；
-
當html中有link與script引入外部資源的時候，是並行發起請求；不管它的位置在什么地方；也就是說header中script與html底部的script，它們的src都是並行發起的（應該是 Bytes → characters 后）
二. 接下來我們會從幾個簡單的例子分析一下這個過程，然后得出一些結論
1.下面是本地創建的html文件，里面省略了一些非核心代碼（服務器是node構建的服務器）
<!DOCTYPE html>
<html lang="en">
<head>
...
<style>
.box {
color: red;
}
</style>
</head>
<body>
<div class="box">
這兒是box
</div>
<script src="http://127.0.0.1:8080/test.js"></script>
<div class="box2">
這兒是box2
</div>
</body>
</html>
2.node核心代碼，我們對js和css的返回都進行了延時處理
（1）app.js
const http = require('http');
const url = require('url');
const fs = require('fs');
const path = require('path');
const mime = require('mime');
// 創建服務器
const server = http.createServer((req, res) => {
let requestPath = url.parse(req.url).pathname;
// 獲取請求文件的Content-type
let type = mime.getType(requestPath);
type = type?type:'text/plain';
// 設置返回頭
res.setHeader('Content-type', `${type}; charset=utf-8`);
let file = '';
let time = 3000; // 設置默認時間
// 如果檢測到請求的是css
if (/\.css$/.test(requestPath)) {
file = path.resolve(__dirname, 'test/test.css');
time = 8000;
} else {
file = path.resolve(__dirname, 'test/test.js')
}
let data = fs.readFileSync(file)
setTimeout(() => {
res.end(data);
}, time)
});
server.listen('8080', '127.0.0.1', () => {
console.log(`server run ar 127.0.0.1:8080`);
});
（2）test.css
.box {
color: blue;
}
（3）test.js
var box = document.createElement('div');
box.innerText = '12345';
document.body.appendChild(box);
3.我們按照整個流程分析一下這個過程：
（1）瀏覽器從本地讀取文件，在（ Bytes → characters 后）就會向服務器發起請求，然后開始構建DOM樹;
（2）當構建到style的時候，瀏覽器會構建CSSOM樹，（注意，這兒CSSOM的構建會阻礙dom的繼續構建，后面我們會通過一個簡單的例子證明）;
（3）當CSSDOM樹構建完畢以后，DOM樹繼續構建，同時這時候會生成render渲染樹；
（4）瀏覽器會根據渲染樹進行布局，同時操作系統開始繪制；
（5）當構建到body中的