大家好，欢迎来到IT知识分享网。
在HTML中，每个元素都可以理解成一个盒子，在浏览器解析过程中，会涉及到重排与重绘。
一、什么是重绘(repaint)和重排(reflow)
重绘：当一个元素的外观发生改变，但没有改变布局,重新把元素外观绘制出来的过程，叫做重绘。
重排：当DOM的变化影响了元素的几何信息(元素的的位置和尺寸大小)，浏览器需要重新计算元素的几何属性，将其安放在界面中的正确位置，这个过程叫做重排。
局部范围重排：把dom的宽高之类的几何信息定死，然后在dom内部触发重排，就只会重新渲染该dom内部的元素，而不会影响到外界。
浏览器解析渲染机制如下：
①.解析HTML，生成DOM树，解析CSS，生成CSSOM树
②.将DOM树和CSSOM树结合，生成渲染树(Render Tree)
③.Layout(回流):根据生成的渲染树，进行回流(Layout)，得到节点的几何信息（位置，大小）
④.Painting(重绘):根据渲染树以及回流得到的几何信息，得到节点的绝对像素
⑤.Display:将像素发送给GPU，展示在页面上
在页面初始渲染阶段，回流不可避免的触发，可以理解成页面一开始是空白的元素，后面添加了新的元素使页面布局发生改变。
当我们对 DOM 的修改引发了 DOM几何尺寸的变化（比如修改元素的宽、高或隐藏元素等）时，浏览器需要重新计算元素的几何属性，然后再将计算的结果绘制出来。
二、常见的引起重绘的属性
| color | border-style | visibility | background | text-decoration |
| background-image | background-position | background-repeat | outline-color | outline |
| outline-style | border-radius | box-shadow | background-size | outline-width |
三、常见引起重排属性和方法
| width | height | margin | padding | display |
| border-width | border | position | overflow | font-size |
| vertical-align | min-height | clientWidth | clientHeight | clientTop |
| clientLeft | scrollWidth | scrollHeight | scrollTop |
scrollLeft |
| getComputedStyle() | getBoundingClientRect() | scrollIntoViewIfNeeded() | 伪类：如：hover |
四、什么情况下会触发重绘
触发回流时一定会触发重绘，除此之外，例如颜色修改，设置圆角、文本方向修改，阴影修改等。
五、什么情况下会触发回流
提示：重绘不一定导致重排，但重排一定会导致重绘。
六、浏览器优化机制
由于每次重排都会造成额外的计算消耗，因此大多数浏览器都会通过队列化修改并批量执行来优化重排过程。浏览器会将修改操作放入到队列里，直到过了一段时间或者操作达到了一个阈值，才清空队列。
当你获取布局信息的操作的时候，会强制队列刷新，包括前面讲到的offsetTop等方法都会返回最新的数据。因此浏览器不得不清空队列，触发回流重绘来返回正确的值。
七、重排优化方案有哪些？
②.不要使用table布局，可能很小的一个小改动会造成整个table的重新布局，在不得已使用table的场合，可以设置table-layout:auto,或者table-layout:fixed，这样可以让table一行一行的渲染，这种做法是为了限制reflow的影响范围。
二、减少重排的次数
免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://haidsoft.com/110826.html
