重绘和重排
当下载完页面后,浏览器会解析文件病穿件两个内部数据结构,一个DOM树,一个渲染树。根据两棵树,浏览器来渲染页面。
当页面的DOM几何属性(改变宽高)改变时,浏览器会使受到影响的树失效,然后重构渲染树,这个过程叫做重排(reflow)。
当非几何属性,例如背景颜色,改变时,页面布局没有改变,只需要重新绘制,叫做重绘(repaint)。
重排的情况
- 添加或者删除可见DOM元素
display:none reflow and repaint
visibility: hidden repaint
- 元素位置改变
- 元素尺寸改变(M P B W H)
- 内容改变
- 页面最初的渲染
- 浏览器尺寸改变
影响因素与解决方法
- 查询强制刷新渲染
offsetTop/offsetLeft/offsetWidth/offsetHeight -> nearest relative
scrollTop ......-> 元素scroll量
clientTop ......-> border量,不包括padding 和margin
getComputedStyle
-
最小化重排与重绘
例如
多次修改css
用cssText
或者修改类名而不是修改属性
批量修改dom
元素是先讲元素摘除(隐藏display:none;
新建一个脱离文件流的dom再append上去;clone 节点,操作后replace
) -
缓存布局信息
将布局信息缓存给变量,而不是一次次读取从而导致一次次强制重绘 -
为动画将元素提出
将元素先定位为absolute
然后进行动画,它会重绘页面但是只是一小部分,避免了重排和整个页面重绘。最后重新定位 -
当图标是尽量避免:hover forIE8
-
事件托管(?)利用冒泡原理,需要考虑各个浏览器的兼容性
算法
- 循环
for(){}
do{}while()
while(){}
for(var in ){}
其中for-in
开销很大,尽量少用
减少循环中的工作量
倒序
达夫设备
一个针对此章节的测试
http://blog.sina.com.cn/s/blog_8f49f0060100wwj1.html
基于函数的迭代
-
条件表达式
if-else vs switch
if-else
适用于种类少的时候,种类多的时候用switch
性能更好
对于if-else
来说先写最可能的情况,使用二分法做if-else
性能比较高
当大量数据是,可以用查表法(类似hash?) -
递归
递归最大的问题是调用栈限制,某些浏览器可以用try{}catch(e){}
解决
递归都可以改为迭代
或者使用制表法