浏览器是如何渲染的

先上一张图
注意事项：

1，浏览器会开启另一个线程去获取css等资源，但这并不意味着js是多线程，主要执行js代码的只有一个主线程，所以js是单线程的

2，浏览器收到HTML文件后，会遍历文档节点，生成DOM树，script标签页会在树中，并且会把当前节点的所有子节点都构建好后才会去构建当前节点的下一个兄弟节点。

3，css解析是可以跟DOM解析同时进行的

4，有了CSSOM和DOM，浏览器开始构建render tree，遍历一个节点，找到它的CSS样式，然后绘制

5，有了render tree 还需要进行一次布局，处理文档流的布局和脱离文档流的布局，然后调用渲染器的paint()渲染

6，js会阻塞生成DOM，CSSOM

7，有布局的变动活节点的变动会引起回流，布局没变动，节点不增加，只修改元素样式等，会引起重绘

8，宏任务一般是 script代码，setTimeout，setInterval，微任务一般是Promise，process.nextTick

简单总结，欢迎大家指点。。。