先上一张图
文章图片
注意事项：
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
【css|浏览器是如何渲染的】7，有布局的变动活节点的变动会引起回流，布局没变动，节点不增加，只修改元素样式等，会引起重绘
8，宏任务一般是 script代码，setTimeout，setInterval，微任务一般是Promise，process.nextTick
简单总结，欢迎大家指点。。。
推荐阅读
- 操作系统|[译]从内部了解现代浏览器(1)
- web网页模板|如此优秀的JS轮播图，写完老师都沉默了
- JavaScript|vue 基于axios封装request接口请求——request.js文件
- vue.js|vue中使用axios封装成request使用
- JavaScript|JavaScript: BOM对象 和 DOM 对象的增删改查
- JavaScript|JavaScript — 初识数组、数组字面量和方法、forEach、数组的遍历
- JavaScript|JavaScript — call()和apply()、Date对象、Math、包装类、字符串的方法
- JavaScript|JavaScript之DOM增删改查(重点)
- 网络|一文彻底搞懂前端监控
- javascript|vue使用js-xlsx导出excel，可修改格子样式，例如背景颜色、字体大小、列宽等