DocumentFragment

Posted 2020-10-07 HelloHello233

　　浏览器根据html节点生成一颗dom树，接着根据这个dom树和css生成另外一棵树：render tree。最后浏览器就根据render tree来渲染界面。

dom树和render树的区别：

　　前者包含了隐藏的元素（display=none），后者不包含。render树仅仅包含了需要被渲染的dom节点，包括visability=hidden，因为虽然不可视，但依然占据布局。

 

　　回流(reflow)这个名词指的是网络浏览器为了重新渲染部分或全部的文档而重新计算文档中元素的位置和几何结构、位置的过程。在回流的时候，浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树，完成回流后，浏览器会重新绘制受影响的部分到屏幕中，该过程成为重绘（回流必将引起重绘，而重绘不一定会引起回流）

回流

出现reflow的操作：

1. 缩放浏览器
2. 改变dom样式（修改style属性、class属性、增加CSS）
3. 增删移动dom（display=none也会触发）
4. 计算 offsetWidth 和 offsetHeight 属性

减少回流次数：

1. 使用DocumentFragment 或者将多个元素添加到一个display=none的元素中，添加完后再展示出来
2. 将要动画的dom脱离文档流，设置为绝对定位或者固定定位
3. 通过class来一次修改dom样式
4. 不使用CSS表达式　　

重绘

　　当一个元素的外观的可见性visibility发生改变的时候，重绘(repaint)也随之发生，但是不影响布局。

　　类似的例子包括：outline, visibility,  background color，:hover