-
局部回流必然会造成当前所在文档流的整体回流
-
脱离文档流（定位 position属性 absolute，fixed）
3534846-00ef9f3d405462ef.png
主要说一下浏览器在各个流程中做了什么
- 解析HTML树，生成一个树状结构 解析css树
// dom树
document
html
body head
div div meta link
span
// css树
div { color: red, width: 100px, height: 100px };
div span { color: blue }
- 浏览经过复杂的算法实现了将css属性丰富了对应的dom节点，这个时候这个树不包含不显示元素，比如head style display：none这些元素 我们称他为 render树
render树 = html树 + css树 - 不可见和不展示的元素
- layout - 经过上面实现的render树， 但是他并没有大小和位置信息，确认这个的过程就是layout布局过程，浏览器采用一种流式布局方法，从上倒下，从左到右实现。
布局从render树的根节点进行，对应dom树的document，其初始位置是0，0
- 父节点的宽度是他本身的render确定的
- 父节点的高度是通过，遍历子元素，调用子元素的layout方法确定其高度，然后父节点根据子元素的height, margin. padding 确定自己的高度
- 绘制paint
几条关于优化渲染效率的建议
结合上文有以下几点可以优化渲染效率。
- 合法地去书写HTML和CSS ，且不要忘了文档编码类型。
- 样式文件应当在head标签中，而脚本文件在body结束前，这样可以防止阻塞的方式。
- 简化并优化CSS选择器，尽量将嵌套层减少到最小。
- DOM 的多个读操作（或多个写操作），应该放在一起。不要两个读操作之间，加入一个写操作。
- 如果某个样式是通过重排得到的，那么最好缓存结果。避免下一次用到的时候，浏览器又要重排。
- 不要一条条地改变样式，而要通过改变class，或者csstext属性，一次性地改变样式。
- 尽量用transform来做形变和位移
- 尽量使用离线DOM，而不是真实的网页DOM，来改变元素样式。比如，操作Document Fragment对象，完成后再把这个对象加入DOM。再比如，使用cloneNode()方法，在克隆的节点上进行操作，然后再用克隆的节点替换原始节点。
- 先将元素设为display: none（需要1次重排和重绘），然后对这个节点进行100次操作，最后再恢复显示（需要1次重排和重绘）。这样一来，你就用两次重新渲染，取代了可能高达100次的重新渲染。
- position属性为absolute或fixed的元素，重排的开销会比较小，因为不用考虑它对其他元素的影响。
- 只在必要的时候，才将元素的display属性为可见，因为不可见的元素不影响重排和重绘。另外，visibility : hidden的元素只对重绘有影响，不影响重排。
使用window.requestAnimationFrame()、window.requestIdleCallback()这两个方法调节重新渲染。
参考文献
链接： 浏览器渲染原理与过程 https://www.jianshu.com/p/e6252dc9be32
链接 https://www.cnblogs.com/luluping/archive/2013/04/05/3000460.html
网友评论