javascript性能优化总结

Posted 2020-08-21 Bai~Jr

js加载顺序优化

原理：在使用src 属性加载javascript 的过程中浏览器必须首先下载外部文件的代码，这要占用一些时间，然后，解析并运行此代码。此过程中，页面解析和用户交互是被完全阻塞的。

解决方案:

——将所有<script>标签放置在页面的底部，紧靠body 关闭标签</body>的上方。

——将脚本成组打包。页面的<script>标签越少，页面的加载速度就越快，响应也更加迅速。

——为<script>标签添加defer 属性（只适用于Internet Explorer 和Firefox 3.5 以上版本）
——动态创建<script>元素，用它下载并执行代码
——用XHR 对象下载代码，并注入到页面中

 

js对于数据访问优化

在JavaScript 中，数据存储位置可以对代码整体性能产生重要影响。有四种数据访问类型：直接量，变量，数组项，对象成员。它们有不同的性能考虑。

直接量和局部变量访问速度非常快，数组项和对象成员需要更长时间。

局部变量比域外变量快，因为它位于作用域链的第一个对象中。变量在作用域链中的位置越深，访问所需的时间就越长。全局变量总是最慢的，因为它们总是位于作用域链的最后一环。

嵌套对象成员会造成重大性能影响，尽量少用。

一个属性或方法在原型链中的位置越深，访问它的速度就越慢。

一般来说，你可以通过这种方法提高JavaScript 代码的性能：将经常使用的对象成员，数组项，和域外变量存入局部变量中。然后，访问局部变量的速度会快于那些原始变量。

 

DOM访问优化

DOM 访问和操作是现代网页应用中很重要的一部分。但每次你通过桥梁从ECMAScript 岛到达DOM 岛时，都会被收取“过桥费”。

最小化DOM 访问，在JavaScript 端做尽可能多的事情。

在反复访问的地方使用局部变量存放DOM 引用.

小心地处理html 集合，因为他们表现出“存在性”，总是对底层文档重新查询。将集合的length 属性缓存到一个变量中，在迭代中使用这个变量。如果经常操作这个集合，可以将集合拷贝到数组中。

注意重绘和重排版；批量修改风格，离线操作DOM 树，缓存并减少对布局信息的访问。

动画中使用绝对坐标，使用拖放代理。

使用事件托管技术最小化事件句柄数量。

 

 

算法和流程优化

for，while，do-while 循环的性能特性相似，谁也不比谁更快或更慢。

除非你要迭代遍历一个属性未知的对象，否则不要使用for-in 循环。

改善循环性能的最好办法是减少每次迭代中的运算量，并减少循环迭代次数。

一般来说，switch 总是比if-else 更快，但并不总是最好的解决方法。

当判断条件较多时，查表法比if-else 或者switch 更快。

浏览器的调用栈尺寸限制了递归算法在JavaScript 中的应用；栈溢出错误导致其他代码也不能正常执行。

如果你遇到一个栈溢出错误，将方法修改为一个迭代算法或者使用制表法可以避免重复工作。

运行的代码总量越大，使用这些策略所带来的性能提升就越明显。