首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

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元无门槛券

私享最新 技术干货

扫码加入开发者社群
领券