浏览器的重绘、回流及网页优化

   

定义

重绘是指当color\background-color等与视觉相关的样式属性值被更新时触发绘制过程，在绘制过程中要重新计算元素的视觉信息，使元素呈现新的外观。
回流是指当窗口尺寸被修改(resize),发生滚动操作，或者position\display\width\height等元素位置相关属性被更新时触发布局过程，在布局过程中要计算所有元素的位置信息。

触发回流的操作

[1]DOM元素的几何属性变化
[2]DOM树的结构变化
[3]获取某些属性：offsetTop\offsetLeft\offsetWidth\offsetHeight\scrollTop\scrollLeft\scrollWidth\scrollHeight\clientTop\clientLeft\clientWidth\clientHeight\getComputedStyle()\currentStyle()
[4]改变元素的一些样式
[5]调整浏览器窗口大小

 

减少重绘和回流的方法

[1]不要一条一条地修改DOM样式，而是修改className或者修改style.cssText
[2]在内存中多次操作节点，完成后再添加到文档中去
[3]对于一个元素进行复杂的操作时，可以先隐藏它，操作完成后再显示
[4]在需要经常获取那些引起浏览器重排的属性值时，要缓存到变量中
[5]为需要多次重排的元素的position设置为fixed或absolute
[6]不要使用table布局，因为一个小改动可能会造成整个table重新布局。而且table渲染通常要3倍于同等元素时间

优化网页的方法：

html:
[1]使用新标签，提高浏览器识别能力
[2]减少html标签嵌套深度
[3]为图片指定大小，减少回流
[4]压缩html
[5]不要使用table布局，因为一个小改动可能会造成整个table重新布局。而且table渲染通常要3倍于同等元素时间

 

css:
[1]cssSprite
[2]模块化css
[3]简化和优化css选择器，将嵌套层数控制在最小，最右边的选择器使用优先级较高的选择器
[4]避免使用css表达式
[5]不使用@import
[6]合并和压缩css代码

 

js:
[1]压缩js代码
[2]不要一条一条地修改DOM样式，而是修改className或者修改style.cssText
[3]在内存中多次操作节点，完成后再添加到文档中去
[4]对于一个元素进行复杂的操作时，可以先隐藏它，操作完成后再显示
[5]在需要经常获取那些引起浏览器重排的属性值时，要缓存到变量中
[6]为需要多次重排的元素的position设置为fixed或absolute