高性能JavaScript

举报
拿我格子衫来 发表于 2022/03/17 22:26:00 2022/03/17
【摘要】   访问字面量和局部变量速度最快,相反,访问数组元素和对象成员相对较慢 由于局部变量存在于作用域的起始位置,因此访问局部变量比访问跨作用域变量更快,变量在作用域中的位置越深,访问所需时间就越长,由于全局变量总处在作用域的最末端,因此访问速度最慢。 避免使用with语句,因为他会改变执行环节作用域链,同样try-catch...

 

访问字面量和局部变量速度最快,相反,访问数组元素和对象成员相对较慢

由于局部变量存在于作用域的起始位置,因此访问局部变量比访问跨作用域变量更快,变量在作用域中的位置越深,访问所需时间就越长,由于全局变量总处在作用域的最末端,因此访问速度最慢。

避免使用with语句,因为他会改变执行环节作用域链,同样try-catch语句中的catch子句也有同样的影响,因此也需要小心使用

嵌套的对象成员会明显影响性能,尽量少用

属性或方法在原型链的位置越深,访问它的速度也就越慢。

通常来说,你可以把常用的对象成员,数组元素,跨域变量保存在局部变量中来改善JavaScript性能,因为局部变量访问速度更快。

 

 

最小化Dom访问次数,尽可能在JavaScript端处理

如果需要多次访问某个Dom节点,请使用局部变量存储它的引用

小心处理HTML集合,因为他实时联系着底层文档,把集合的长度缓存到一个变量中,并在迭代中使用它,如果需要经常操作集合,建议把它拷贝到一个数组中

如果可能的话,使用速度最快的API,比如querySelector和firstElementChild

要留意重绘和重排,批量修改样式时,离线操作DOM树,使用缓存,并减少访问布局信息的次数

动画中使用绝对定位,使用拖放代理

使用事件委托来减少事件处理器的数量

 

避免使用for-in循环,除非你需要遍历一个属性数量未知的对象

改善循环性能的最佳方式是减少每次迭代的运算量和减少循环迭代次数

通常来说,switch总是比if-else 快,当并不总是最佳解决方案

在判断条件较多时,使用查找表比if-else 和switch更快

堆栈溢出会导致其他代码中断运行

 

任何JavaScript任务都不应当执行超过100毫秒,过长的运行时间会导致UI更新出现明显的延迟,从而对用户体验产生负面影响

JavaScript运行期间,浏览器响应用户交互的行为存在差异,无论如何,JavaScript长时间运行都会导致用户体验变得混乱和脱节。

 

 

合并JavaScript文件以减少HTTP请求数

压缩JS文件

在服务端压缩JS文件Gzip编码

通过正确设置HTTP响应头来缓存JS文件,通过向文件名增加时间戳来避免缓存问题

通过CDN提供JS文件,CDN不仅可以提升性能,他还可以为你管理文件的压缩和缓存

 

 

 

文章来源: fizzz.blog.csdn.net,作者:拿我格子衫来,版权归原作者所有,如需转载,请联系作者。

原文链接:fizzz.blog.csdn.net/article/details/103754165

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。