CSS的重绘与重排
单从字面上理解，重绘是颜色之类的属性发生改变，重排是位置之类的属性发生改变。
要理解重排与重绘首先要知道浏览器是如何绘制页面的。
笼统地讲，浏览器从上往下解析HTML源码并构建一个由DOM节点组成的DOM树， DOM树构建完成后开始解析CSS样式并计算出最终的样式数据，构建一个渲染树并将页面绘制到页面上，这便是用户最终看到的页面效果。
重绘与重排的概念
当一个页面初次渲染完成，用户执行一些操作，这些操作往往会对页面产生影响（点击变色，移入变大之类）。
重绘：当在页面上修改了一些不需改变定位的样式的时候（比如color,outline)，浏览器只会将新的样式重新绘制给元素。重绘是一个元素外观的改变所触发的浏览器行为。浏览器会根据元素的新属性重新绘制，使元素呈现新的外观。
重排：当页面上的改变影响了文档内容、结构或者元素定位时，就会发生重排），就是相当于渲染树需要重新计算。重排是更明显的一种改变，代价更大。
产生重排的操作
DOM结构发生改变，如添加或者删除可见的DOM元素，元素位置改变。
DOM几何属性改变，元素尺寸改变，一个文本被另一个不同尺寸的图片替代。
浏览器窗口尺寸改变。
不可抗拒因素----页面初始化渲染。
减少重排次数和重排影响范围
将需要多次重排的元素，position属性设为absolute或fixed，使元素就脱离了文档流，即使变化也不会影响到其他元素。
将多次改变样式属性的操作合并成一次操作。
将需要经常那些引起浏览器重排的属性缓存到变量
在内存中多次操作节点，完成后再添加到文档中去。
对一个元素进行复杂的操作时，可以先隐藏它，操作完成后再显示。这样只在隐藏和显示时触发2次重排。（display属性为none的元素不在渲染树中，对隐藏的元素操作不会引发其他元素的重排。）
- 发表于:
- 原文链接：https://kuaibao.qq.com/s/20190211G0EQJP00?refer=cp_1026
- 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号（企鹅号）传播渠道之一，根据《腾讯内容开放平台服务协议》转载发布内容。
- 如有侵权，请联系 cloudcommunity@tencent.com 删除。
相关快讯
扫码
添加站长 进交流群
领取专属 10元无门槛券
私享最新 技术干货
腾讯云开发者
