高性能Javascript注意点

系统管理员 2021-07-04 22:57 457阅读 0赞

## 重绘和重排 ##

当下载完页面后，浏览器会解析文件病穿件两个内部数据结构，一个DOM树，一个渲染树。根据两棵树，浏览器来渲染页面。  
当页面的DOM几何属性（改变宽高）改变时，浏览器会使受到影响的树失效，然后重构渲染树，这个过程叫做**重排(reflow)**。  
当非几何属性，例如背景颜色，改变时，页面布局没有改变，只需要重新绘制，叫做**重绘（repaint）**。

### 重排的情况 ###

1.  添加或者删除**可见**DOM元素

display:none reflow and repaint  
    visibility: hidden repaint

1.  元素位置改变
2.  元素尺寸改变（M P B W H）
3.  内容改变
4.  页面最初的渲染
5.  浏览器尺寸改变

### 影响因素与解决方法 ###

1.  查询强制刷新渲染

offsetTop/offsetLeft/offsetWidth/offsetHeight -> nearest relative  
    scrollTop ......-> 元素scroll量  
    clientTop ......-> border量，不包括padding 和margin  
    getComputedStyle

1.  最小化重排与重绘  
    例如  
    多次修改`css` 用 `cssText`或者修改类名而不是修改属性  
    批量修改`dom`元素是先讲元素摘除（隐藏`display:none；`**新建一个脱离文件流的dom再append上去**；clone 节点，操作后`replace`）
2.  缓存布局信息  
    将布局信息缓存给变量，而不是一次次读取从而导致一次次强制重绘
3.  为动画将元素提出  
    将元素先定位为`absolute` 然后进行动画，它会重绘页面但是只是一小部分，避免了重排和整个页面重绘。最后重新定位
4.  当图标是尽量避免:hover forIE8
5.  事件托管（？）利用冒泡原理，需要考虑各个浏览器的兼容性

## 算法 ##

1.  循环

for(){ }  
    do{ }while()  
    while(){ }  
    for(var in ){ }

其中`for-in`开销很大，尽量少用  
减少循环中的工作量  
倒序  
达夫设备  
一个针对此章节的测试  
http://blog.sina.com.cn/s/blog\_8f49f0060100wwj1.html  
基于函数的迭代

1.  条件表达式 `if-else vs switch`  
    `if-else` 适用于种类少的时候，种类多的时候用`switch`性能更好  
    对于`if-else` 来说先写最可能的情况，使用二分法做`if-else`性能比较高  
    当大量数据是，可以用查表法（类似hash？）
2.  递归  
    递归最大的问题是调用栈限制，**某些浏览器**可以用`try{}catch(e){}`解决  
    递归都可以改为迭代  
    或者使用制表法