Javascript高性能编程
-
访问字面量和局部变量的速度更快,访问数组元素和对象成员相对较慢。
-
由于局部变量存在于作用域链的起始问自己,因此访问局部变量比访问跨作用域变量更快。变量在作用域中的位置越深,访问所需时间久越长。由于全局变量总处在作用域链的最末端,因此访问速度也是最慢的。
-
嵌套的对象成员会明显影响性能,尽量少用。
-
属性和方法在原型链中的位置越深,访问速度就越慢。
-
通常来说,可以通过把常用的对象成员、数组元素、跨域变量保存在局部变量中来改善javascript性能,因为局部变量访问速度越快。
-
最小化DOM访问次数,尽可能在javascript端处理。
-
如果需要多次访问莫个DOM节点,使用局部变量存储它的引用。
-
小心处理HTML集合,因为它实时联系着底层文档。把集合的长度缓存到一个变量中,并在迭代中使用它。如果需要经常操作集合,建议把它拷贝到一个数组中。
-
如果可能的话,使用熟读更快的API,比如querySelectorAll()和firstElementChild。
-
要留意重绘和重排,批量修改样式时,“离线”操作DOM树,使用缓存,并减少访问布局信息的次数。
-
动画中使用绝对定位,使用拖放代理。
-
使用事件委托来减少事件处理器的数量。
-
改善循环性能的最佳方式是减少每次迭代的运算量和减少循坏迭代次数。
-
通常来说,switch总是比if-else快,但并不总是最佳解决方案。
-
在端盘条件较多时,使用查找表比if-else和switch更快。
-
浏览器的调用栈大小限制了递归算法在javasc中的应用;栈溢出错误会导致其他代码中断运行。
-
如果遇到栈溢出错误,可讲方法改为迭代算法,或使用memoiaztion来避免重复计算。
-
for、while和do-while循环性能相当,并没有一种循坏类型明显快于或慢于其他类型。
-
避免使用for-in循环,除非你需要遍历一个属性数量未知的对象。
-
回溯既是正则表达式匹配功能的基本组成部分,也是正则表达式的低效之源。
-
任何javascript任务都不应当执行超过100毫秒。js的运行时间会导致UI更新出现明显的延迟,从而对用户体验产生负面影响。
-
js运行期间,浏览器响应用户交互的行为存在差异。无论如何,js长时间运行将导致用户体验变得混乱和脱节。
-
定时器可用来安排代码延迟执行。
-
web worker是新版浏览器支持的特性,它允许你在UI线程外部执行javascript代码,从而避免锁定UI。
-
减少请求数,合并js和css文件。
-
缩短页面的加载时间,页面主要内容加载完成后,才用ajax获取那些次要的文件。
-
压缩js文件。
-
在服务器端压缩js文件(gzip)。
-
通过正确设置HTTP响应头来缓存js文件。
-
使用cdn提供js文件。