提高js的12个技巧

一、在浏览器缓存
访问某个对象需要脚本。通常把重复访问的对象存储在用户定义的变量中,以及在后续对该对象的引用使用变量,可以立即实现性能的提升。
二、定义执行的上下文
为了有效的衡量在程序中加入的任何的改进,你必须创建一组良好的环境,方便用来测试代码的性能。
三、删除用户未使用的js
缩短传输时间,还会缩短浏览器分析和编译代码的时间
1、用户未使用的功能,最好删除
2、查看是否加入并不需要的库,或者有的依赖,这些依赖提供的功能在所有浏览器原本中就有,那么就可以删除。
四、避免使用太多内存
给内存加一条限制,只有绝对必须的内容才可以使用内存
五、推迟不必要的js加载
不是所有的函数都需要加网页的初始加载时就可用,如果是执行某个操作才执行某函数,就可以将该函数推迟到初始页面加载之后。
六、内存泄露
一旦内存正在泄露,则加载的页面将保留越来越多的内存,最终占用设备的所有可用内存并严重影响性能。eg:在带有轮播或图像滑动条的页面上。原因是:你在页面上删除了DOM,但是有一些变量还在引用这些DOM,因此垃圾回收站
无法回收它们。
七、适当的使用web worker
不阻塞用户用户界面线程。允许使你生成新线程并将工作委托给这些线程已获得更高的性能。这样,通常会阻碍其他任务且需要长时间运行的任务将被传递给 worker,从而让主线程可以在无阻碍的情况下运行。
八、适当将DOM元素保存在局部变量中
访问DOM会很慢,如果要多次读取某元素的内容,最好将其保存在局部变量中。如果稍后你会删除 DOM 的值,则应将变量设置为“null”,不然会导致内存泄漏。
九、优先访问局部变量
JavaScript 首先搜索以查看变量是否存在于本地,然后才在更高级别的作用域内逐步搜索到全局变量为止。将变量保存在本地作用域内能让 JavaScript 更快地访问它们。
局部变量是基于最具体的作用域的,并且可能会穿过多个级别的作用域,因此查找这一动作可能导致出现通用的查询。在一个它前面没有变量声明的局部变量中定义函数作用域时,需要在每个变量之前加上 let 或 const,以便定义当前作用域,防止查找并加速代码执行。
十、避免使用全局变量
因为脚本引擎在从函数或其他作用域内引用全局变量时需要逐一查看作用域,所以当本地作用域丢失时,该变量将被销毁。如果全局作用域中的变量无法在脚本的生命周期内持续存在,则性能将得到改善。
十一、实施一些优化方案
始终使用计算复杂度最低的算法和最佳的数据结构来解决任务。
重写算法以获得相同的结果和更少的计算。
避免递归调用。
给重复的函数加入变量、计算和调用。
分解和简化数学公式。
使用搜索数组:用它们来获取基于另一个的值,而不是使用 switch/case 语句。
使条件总是更有可能为真,以更好地利用处理器的推测执行。
如果可以,请使用位级运算符替换某些操作,因为这些运算符的处理周期较短。
十二、使用工具检测问题
devtools的性能分析你在加载页面时模拟cpu消耗、网络和其他指标,以便识别和修复问题。
最后,代码的可读性和优化之间保持平衡很重要。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值