回流和重绘

Posted 2020-11-23 sunhang32

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

了解浏览器渲染过程

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，样式表，脚本，图片都已加载完成