对浏览器渲染机制的理解

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