回流和重绘

本人第一次接触重绘和回流也是在一次刷题的时候,那么我就讲一下我对重绘和回流的理解吧

了解浏览器渲染过程

1.根据html元素,生成DOM tree
2.根据css样式表,生成style rules
3.二者结合生成render tree
4.根据位置信息大小等信息,生成layout(回流)
5.根据颜色等信息,生成pointing(重绘)
6.显示页面


那么咱们了解了原理以后,就能看出来几个简单的道理,重绘在回流的后面,那么发生回流必定发生重绘,回流是因为位置信息产生的,因此位置大小等改变,就会产生回流,颜色等改变,就会产生重绘

那么咱们总结一下

• 回流: 发生在layout 位置 ,当修改属性__引起页面布局变化__,则触发回流
• 重绘: 发生在上图的Painting位置,当修改属性__不引起页面布局变化__,则只触发重绘

因此,回流必定发生重绘,重绘不必定回流

## 引起回流产生的状况

• 页面首次渲染 (初始化)
• DOM树发生改变(增长删除节点等)
• Render树变化(如: padding改变)
• 浏览器窗口大小发生变化
• 获取元素的某些属性

了解了这些大概就知道为啥要学习重绘和回流了吧,减小重绘和回流的同时能够优化代码,减小浏览器渲染


优化（减小 回流/重绘 的次数）：

• 尽可能一次性修改节点样式

• let el = document.getElementById('test');
  // el.style.padding = '5px';
  // el.style.borderLeft = '1px';
  // el.style.borderRight = '2px';
  // 使用 cssText 避免屡次修改
  el.style.cssText += 'border-left:1px; border-right:2px; padding:5px'

• 避免屡次读取某些属性

• 将复杂节点元素脱离文档流 (如:"position:absolute"),下降回流成本

• 将须要屡次修改的元素设置 "display:none"，操做完再显示（上面说起"display:none"不在render树内，不触发回流重绘）

• 批量修改DOM时, 使用DocumentFragment缓存起来,再一次性插入到指定节点

补充

• CSS 放在头部，缘由是渲染(render)须要 DOM(HTML) 和CSSOM(CSS) ，放在头部有助于缩短首次渲染时间
• JS 放在尾部，缘由是JS会阻塞浏览器解析，当发现一个外链脚本须要下载完后在继续解析后续的 HTML
• load 事件触发时，页面上全部的DOM，样式表，脚本，图片都已加载完成