了解浏览器渲染过程

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