高性能Javascript注意点 系统管理员 2021-07-04 22:57 415阅读 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){}`解决 递归都可以改为迭代 或者使用制表法
还没有评论，来说两句吧...