标签：浅谈 DOM 重绘 重排 回流 DocumentFragment 节点 reflow
重绘和重排的概念，如何减少或避免回流
1.重绘（repaint）
屏幕的一部分要重绘。渲染树节点发生改变，但不影响该节点在页面当中的空间位置及大小。譬如某个div标签节点的背景颜色、字体颜色等等发生改变，但是该div标签节点的宽、高、内外边距并不发生变化，此时触发浏览器重绘（repaint）。
2.重排（reflow）
也有称回流，当渲染树节点发生改变，影响了节点的几何属性（如宽、高、内边距、外边距、或是float、position、display：none;等等），导致节点位置发生变化，此时触发浏览器重排（reflow），需要重新生成渲染树。譬如JS为某个p标签节点添加新的样式：“display:none;”。导致该p标签被隐藏起来，该p标签之后的所有节点位置都会发生改变。此时浏览器需要重新生成渲染树，重新布局，即重排（reflow）。
3.引起重排的原因
1、添加或者删除可见的DOM元素；
2、元素位置改变——display、float、position、overflow等等；
3、元素尺寸改变——边距、填充、边框、宽度和高度
4、内容改变——比如文本改变或者图片大小改变而引起的计算值宽度和高度改变；
5、页面渲染初始化；
6、浏览器窗口尺寸改变——resize事件发生时；
4.如何减少和避免重排
1.使用transform代替top、left，因为使用transform页面不会出现回流现象
2.不要使用table来进行布局，因为一个小改动就会导致整个table的重新布局
3.不要逐条变更DOM的样式，应封装在一个style对象中赋值给DOM的样式属性
4.避免频繁操作DOM，创建一个documentFragment，在他上面应用所有DOM操作，最后再把他添加到文档中
- DocumentFragment 表示一个没有父级文件的最小文档对象。它被当做一个轻量版的 Document
使用，用于存储已排好版的或尚未打理好格式的XML片段。最大的区别是因为DocumentFragment不是真实DOM树的一部分，它的变化不会引起DOM树的重新渲染的操作(reflow)
，且不会导致性能等问题。把一个 DocumentFragment 节点插入文档树时，插入的不是 DocumentFragment
自身，而是它的所有子孙节点。这使得 DocumentFragment 成了有用的占位符，暂时存放那些一次插入文档的节点。
标签：浅谈,DOM,重绘,重排,回流,DocumentFragment,节点,reflow 来源： https://blog.csdn.net/m0_46149348/article/details/120999226
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。