本文是建立在下文的基础之上完成的:
浏览器的渲染机制
渲染数构建之渲染树与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中的