关于html页面的重排和重绘,确定图片大小

在编写页面样式时,我们需要对每个图片都事先确定大小,这是因为如果没有控制大小,在图片加载成功后,会改变页面的布局,会引起页面的重排和重绘。而从降低页面执行效率。

这样我想起了关于页面重排和重绘的相关问题。

一个页面载入成功以后形成两个内部数据结构,一个是dom树(记录页面中的dom节点结构),一个是渲染树(控制节点如何渲染)。而所有引起页面几何属性(宽高)改变的的操作都会引起页面的重新计算,这讲改变dom树(重排),而后将重绘页面,而重排和重绘,而比如页面颜色的改变等外观上的变化,也将单独引起页面的重绘。这些都将极大的降低页面性能。

那些操作会引起页面的重排和重绘

1、添加或删除可见的DOM 元素 (重排+重绘)
2、元素位置改变 (重排+重绘)
3、元素尺寸改变 (重排+重绘)
4、内容改变,(重排+重绘)
5、浏览器窗口改变尺寸 (重排+重绘)
6、字体大小改变 (重排+重绘)
7、字体的颜色,body的颜色改变 (重绘)
8、同时当获取以下属性时,因为会造成浏览器强行刷新页面重排队列,而导致页面重排和重绘,这些属性和方法有
offsetTop, offsetLeft, offsetWidth, offsetHeight
scrollTop, scrollLeft, scrollWidth, scrollHeight
clientTop, clientLeft, clientWidth, clientHeight
getComputedStyle() (currentStyle in IE)(在IE 中此函数称为currentStyle)
所以用到此类数据时,尽量用变量缓存处理

如何减少浏览器的重排和重绘

1、将需要多次改变的元素的样式属性的,通过一次改变完成
2、将新建的dom节点操作完毕后在插入到body中
3、将页面中需要操作的节点先隐藏:display:none,(甚至是先将body隐藏),操作完毕后在显示。
4、不要经常访问会引起浏览器flush队列的属性,需要的时候先缓存处理。
5、尽量减少持续改变和动态变化的效果。比如jquery的animate,当然如果从用户体验的角度必要的还是不能少。

相关阅读:http://fangrn.iteye.com/blog/697584
此问介绍的更为详细,供读者参考,文章还提供的对比性能测试和相关代码实例,文中的回流指的就是重排。

 

 

 

马上分享给你的朋友吧~

关于html页面的重排和重绘,确定图片大小》上有 1 条评论

  1. Pingback 引用通告: Lazy Load, 延迟加载图片的 jQuery 插件,修正版 _ 雨打浮萍