一次完整的html渲染过程
- 浏览器拿到html文件后开始解析，解析过程中下载资源（js,css,图片等），解析的HTML文件，生成DOM树，解析的CSS文件生成渲染树，等到渲染树构建完成之后，浏览器开始布局渲染树并将其绘制到屏幕上。
- 这个过程比较复杂，涉及到两个概念: reflow(重排)和repain(重绘)。
- DOM节点都是以盒子模型存在的，这些都需要浏览器计算它的大小和位置，这个过程叫reflow(重排),当盒子的位置，大小以及其他属性，如颜色，字体大小等，确定下来，浏览器便开始绘制内容，这个过程叫repain(重绘)。
- 首次加载页面必然经历reflow和repain。
触发重绘
重绘是一个元素外观的改变所触发的浏览器行为，例如改变visibility，outline，background等属性），浏览器会根据元素的新属性重新绘制，是元素呈现新的外观。
触发重排
重排时更明显是一种改变，可以理解为渲染DOM树重新计算大小和位置
- DOM元素的几何属性变化
- DOM树的结构变化（例如节点的增删、移动）
- 获取某些属性（例如offsetTop，offsetLeft，offsetHeight，offsetWidth，clientWidth，clientHeight等）
- 改变元素的一些样式（例如调整浏览器窗口大小）
重绘并不会带来新的布局，不一定伴随重排
如何减少重排和重绘
reflow和repain是非常消耗性能的，尤其在移动设备上，它会破坏用户体验，有时会造成页面卡顿，所以应该尽可能减少reflow和repain
- 将多次改变样式属性的操作合并成一次操作
- 将需要多次重排的元素，position属性设为absolute或fixed,脱离标准文档流，这样它的变化就不会影响到其他元素
- 在内存中多次操作节点，完成后再添加到文档中去
- 如果对一个元素进行复杂操作，可以将其dispaly属性设为none使其隐藏，待操作完成后再显示
- 在需要经常获取那些引起浏览器重排的属性值时，要缓存到变量
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
