这是我参与2022首次更文挑战的第20天，活动详情查看：2022首次更文挑战
hi 我是小十七_，之前总结过浏览器渲染 HTML 过程、重绘和重排，分享给大家～
浏览器渲染 HTML 过程
- 发现有
link标签引入了 css 文件，会用异步线程下载 css 文件，下载完成后使用 css 文件内容渲染页面，但是 js 文件里如果有操纵样式的部分，需要等 css 文件下载并解析完成。 - 浏览器继续边下载边渲染 html，遇到
img标签，会异步下载 img，继续渲染页面，等图片下载完，占用了一定面积，再重新渲染受影响的地方 - 浏览器继续边下载边渲染html，遇到
script标签，会停止渲染html，去下载 js 文件，并等待下载完成，去执行它（因为 js 可能会去改变 DOM 树结构），再继续渲染。（defer 异步下载页面渲染完后执行，有顺序；async 异步下载下载后执行，无顺序） - 最后解析到
</html>，渲染完成。
浏览器的重绘和重排
在页面渲染完之后，我们对于DOM节点的操作或是样式修改会引起浏览器的重排或者重绘操作
重排
首先浏览器是基于流式布局的，一个元素的位置宽高或浏览器窗口大小等等发生变化后，会引起全局或局部的重新布局。
重绘
元素的样式发生变化后，浏览器根据样式重新渲染这个元素，会引起重绘。
操纵 DOM 节点的成本是非常高的，每个 DOM 节点自身和原型上有很多的属性，在对于 DOM 进行操作后，会引起浏览器的重排，引发性能问题
可以进行的优化：
- 减少 DOM 的访问次数，如果需要多次访问 DOM，先暂存他的引用
- 减少在 HTML 中的 style 属性写样式，因为这样操作样式，会引起重排，使用 class
- 带有动画的元素，最好进行absolute或fixed布局，脱离文档流，减少对别的元素的影响
- 使用虚拟 DOM 库（比如 React）
