html修改页面图片大小,关于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，当然如果从用户体验的角度必要的还是不能少。