网站开发如何应对浏览器的重绘和重排

小土逗

网站开发如何应对浏览器的重绘和重排？浏览器重绘即repaint，浏览器的重排即reflows。下面是中为科技深圳网站建设为大家总结的一些常见可以触发重排的操作（不同的浏览器的情况很有一些不同）：



1、DOM（文档对象模型）元素的几何属性发生变化时
当网页中DOM元素的几何属性变化时，渲染树中的相关节点就会失效，浏览器会根据DOM元素的变化重建构建渲染树中失效的节点。随之瑞来的就是重新绘制被重排的页面。特点：浏览器重排一定会引起浏览器的重绘。

2、浏览器引擎因获取某些属性而触发重排。
当浏览器引擎获取网页中一些属性时，浏览器为取得正确的值也会触发重排，所以我们在在多次使用这些属性值时应进行缓存。网站中可修改属性包括：offsetTop、offsetLeft、 offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、clientTop、clientLeft、clientWidth、clientHeight、getComputedStyle() (currentStyle in IE)。

3、改变元素的样式、调整窗口大小触发重排
网站建设前端开发中，改变网页中元元素的一些样式，或是调整浏览器窗口大小都会触发浏览器重排。避免方法：将网页中需要多次重排的元素的position属性设为absolute或fixed，这样此元素就脱离了文档流，不会影响到其他元素。

中为科技是业内领先的互联网服务提供商，致力于向客户提供精品网站建设、舆情监控系统、企业情报系统、城市应急管理系统、网站运营等卓越服务！中为科技立足深圳、面向全国，多年来竭诚为用户提供优质服务，我们的客户遍布全国各地，辐射各行各业。秉承用户至上，诚信为本的宗旨，中为科技将一如既往的以客户需求为导向，不断开发出更加优秀的互联网应用服务解决方案，以“创新无极限，关爱每一天”为经营思想，开拓创新、与时俱进，历经行业的洗礼，与互联网一道不断发展壮大！