javascript性能优化总结

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 中的应用;栈溢出错误导致其他代码也不能正常执行。

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

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

原文地址:https://www.cnblogs.com/baiJr/p/6124313.html