浏览器性能优化--DOM重绘与重排版

当浏览器下载完所有页面HTML标记,JavaScript,CSS,图片等之后,解析文件并生成两个内部数据结构:一个DOM树-->页面结构; 一个渲染树-->DOM节点如何显示;
当DOM操作影响到元素的几何属性(宽和高),浏览器使渲染树上受到影响的部分失效,然后重构渲染树;
导致重排版的条件:
1.添加/删除DOM元素(display不为none);
2.元素位置改变;
3.元素尺寸改变;
4.元素内容改变;
5.浏览器窗口改变尺寸;
优化:
1.尽量少访问DOM,尽量在js端把事情做完美了;
2.必须访问的话,就用局部变量存放DOM的引用;
3.html元素集合的length属性采用局部变量存储;
4.使用事件托管机制最小化事件句柄数量;
5.img标签在行间给宽/高;