#星光计划2.0#JavaScript性能优化方案 原创

发布于 2021-12-16 09:55
浏览
0收藏

​​【本文正在参与51CTO HarmonyOS技术社区创作者激励计划-星光计划2.0】​​

JavaScript是手机和网页应用开发中的通用语言。 由于JavaScript的流行,为了提高应用程序的性能,它的优化变得越来越必要。 让我们来认识一些与JavaScript相关的挑战,以及如何优化js的性能。  

典型的js性能挑战  
有许多因素会影响JavaScript的性能。 以下是与js性能相关的常见问题:  

事件处理质量差:  
正确使用事件处理程序可以通过减少调用堆栈的深度来提高JavaScript的性能。  

跟踪所有事件处理程序是很重要的,这样处理程序就不会在您不知道的情况下执行。  

无组织的代码  
JavaScript是松散的,这有利有弊。  

词汇构造的分子集允许开发人员实现很多功能。 然而,代码中缺乏组织可能导致资源分配不足。  

这在很大程度上阻碍了JavaScript的性能。 理解ECMA对于理解JavaScript非常重要。  

太多的依赖  
有时,JavaScript依赖关系管理得很差或过度。 当这种情况发生时,应用的性能将受到负面影响。  

例如,带宽受限的移动用户将需要等待更长的时间来渲染对象。  

低效的迭代  
迭代过程需要很长时间。 然而,这也是有益的。 较长的处理时间为JavaScript优化创建了一个完美的起点。 当您修复代码中不相关的调用或循环时,您的JavaScript性能将大大提高。  

js性能优化建议 
修剪HTML  
JavaScript HTML很复杂,在查询时间、查询和修改DOM对象方面起着至关重要的作用。  

当你把应用程序的HTML切成两半时,DOM的速度可能会翻倍。 这可能很困难,但是通过丢弃像<div>和<span>这样的标签是可能的。  

批处理DOM更改  
批处理DOM转换,以防止重复出现屏幕渲染。 当创建样式更改时,一次完成所有的更改,而不是对每个样式单独应用更改。  

学习异步编程的方法  
JavaScript应用程序需要对大量api进行多次内部调用来获取数据。  

每个函数都需要中间件,因为JavaScript是单线程的。  

同步组件有时会锁定整个应用程序。 JavaScript使用async.js管理异步代码。  

异步代码不会阻塞线程。 相反,威胁将被硬塞到事件队列中,该事件队列在执行其他代码之后触发。  

使用JavaScript异步特性,可能会无意中利用外部库来恢复异步干扰调用。  

这会降低JavaScript的性能。 相反,应该在代码中使用异步api,尤其是在关键的性能部分。  

使用gzip压缩  
JavaScript文件可能非常庞大。 利用GZip来解压和压缩文件。 GZip减少延迟时间,提高应用程序性能,并节省带宽。 使用GZip,服务器在将资源发送到浏览器之前对其进行压缩。  

利用HTTP / 2  
HTTP的最新版本是HTTP/2,它提高了JavaScript的性能,加快了网站的性能。  

HTTP/2利用多路复用,允许同时发送多个响应和请求。 

缓冲DOM  
如果有可滚动的div,可以使用一个缓冲区来清除当前在视口中不可见的DOM项。 这些技术节省了DOM遍历和内存使用。  

限制库依赖关系  
加载时间会影响库的依赖关系,所以将利用率保持在最低水平是很重要的。  

利用外部库依赖的最好方法是依赖于浏览器内技术。  

当使用CSS选择器时,使用Sizzle.js而不是jQuery。 当库包含单个特性时,单独添加CSS选择器是至关重要的。  

保持代码轻巧  
保持JavaScript代码紧凑将减少延迟并提高性能。 当优化JavaScript性能时,问问自己:  

  • 这个模块有真正的需求吗?  
  • 使用这个框架的原因是什么?  
  • 开销值吗?  
  • 有更简单的方法吗?  
    通过将多个JS文件转换为一个来优化JavaScript性能。  

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
4
收藏
回复
举报
回复
添加资源
添加资源将有机会获得更多曝光,你也可以直接关联已上传资源 去关联
    相关推荐