写点什么

提高 JavaScript 性能的 12 个技巧

  • 2019-07-23
  • 本文字数:2762 字

    阅读完需:约 9 分钟

提高JavaScript性能的12个技巧

在创建 Web 应用程序时应始终考虑性能。为了帮助你开始,本文列举了有效提高应用程序性能的 12 种方法。


性能是创建网页或应用程序时最重要的一个方面。没有人想要应用程序崩溃或者网页无法加载,或者用户的等待时间很长。根据 Kissmetrics,47%的访问者希望网站在不到 2 秒的时间内加载,如果加载过程需要 3 秒以上,则有 40%的访问者会离开网站。


考虑到以上这些数字,你在创建 Web 应用程序时应始终考虑性能。为了帮助你开始,以下提供了有效提高应用程序性能的 12 种方法:

1.在浏览器中缓存

要这样做有两种选择。第一种是使用 JavaScript Cache API,我们可以安装 service worker 来使用它。第二种是使用 HTTP 协议缓存。


访问某个对象通常要用脚本。通过把重复访问的对象存储在用户定义的变量中,以及在后续对该对象的引用中使用变量,可以立即实现性能的提升。

2.定义执行的上下文

为了有效地衡量你在程序中加入的任何改进,你必须创建一组定义良好的环境,以便测试代码的性能。


对所有 Javascript 引擎的所有版本进行性能测试和优化实际上是不可行的。但是,在单一的环境中进行测试并非一个好习惯,因为你可能会得到片面的结果。因此,建立多个定义良好的环境并测试代码是否有效非常重要。

3.删除未使用的 JavaScript

此步骤不仅会缩短传输时间,还会缩短浏览器分析和编译代码所需的时间。为此,你必须考虑以下几点:


  • 如果你检测到一个用户未使用的功能,最好删除所有与之相关的 JavaScript 代码,这样网站的加载速度会更快,用户也会有更好的体验。

  • 还有可能,你错误地加入了一个并不需要的库,或者你有依赖项,这些依赖项提供的功能在所有浏览器中原本就有,那么你无需再增加多余的代码。

4.避免使用太多内存

你应该始终给内存加一条限制,那就是只有绝对必须的内容才能使用内存,因为你无法知道运行应用程序的设备到底需要多少内存。只要你的代码要求浏览器保留新的内存,浏览器的垃圾收集器就会被执行,并停止 JavaScript 的运行。如果经常发生这种情况,页面将变慢。

5.推迟不必要的 JS 加载

用户希望页面快速加载,但并非所有函数都需要在页面的初始加载时就可用。如果用户必须执行某个操作才能执行某个函数(例如,通过单击某个元素或更改选项卡),那么你可以将该函数的加载推迟到初始页面加载之后。


通过这种方式,你可以避免加载和编译那些会延迟页面初始显示的 JavaScript 代码。页面完全加载后,我们可以再开始加载这些功能,以便它们在用户开始交互时立即可用。在RAIL模型中,Google 建议将此延迟加载以 50 毫秒为单位进行,这样就不会影响用户与页面的交互。

6.避免内存泄漏

如果内存正在泄漏,则加载的页面将保留越来越多的内存,并最终占用设备的所有可用内存并严重影响性能。你可能见过此类故障(并且可能对此类故障感到懊恼),例如在带有轮播或图像滑动条的页面上。


在 Chrome 开发者工具中,你可以通过在“性能”标签中记录时间线来分析你的网站是否存在内存泄漏。通常,内存泄漏的原因是,你从页面中删除了 DOM,但有一些变量还在引用这些 DOM,因此,垃圾收集器无法消除它们。

7.适当的使用 Web worker

当你执行耗时很长的代码时,请使用 Web worker。根据 Mozilla 开发人员网络 (MDN) 文档:“Web Worker 可以在与 Web 应用程序的主执行线程分开的后台线程中运行脚本操作。这样做的好处是你可以在一个单独的线程中执行耗时又费力的的处理,同时让主(通常为 UI)线程运行而不被阻塞或减慢。”


Web worker 允许代码执行处理器密集型计算,而不阻塞用户界面线程。Web Worker 允许你生成新线程并将工作委托给这些线程以获得高效的性能。这样,通常会阻碍其他任务且需要长时间运行的任务将被传递给 worker,从而让主线程可以在无阻碍的情况下运行。

8.适当将 DOM 元素保存在局部变量中

访问 DOM 会很慢。如果要多次读取某元素的内容,最好将其保存在局部变量中。但记住重要的是,如果稍后你会删除 DOM 的值,则应将变量设置为“null”,不然会导致内存泄漏。

9.优先访问局部变量

JavaScript 首先搜索以查看变量是否存在于本地,然后才在更高级别的作用域内逐步搜索到全局变量为止。将变量保存在本地作用域内能让 JavaScript 更快地访问它们。


局部变量是基于最具体的作用域的,并且可能会穿过多个级别的作用域,因此查找这一动作可能导致出现通用的查询。在一个它前面没有变量声明的局部变量中定义函数作用域时,需要在每个变量之前加上 let 或 const,以便定义当前作用域,防止查找并加速代码执行。

10.避免使用全局变量

因为脚本引擎在从函数或其他作用域内引用全局变量时需要逐一查看作用域,所以当本地作用域丢失时,该变量将被销毁。如果全局作用域中的变量无法在脚本的生命周期内持续存在,则性能将得到改善。

11.实施一些优化方案

  • 始终使用计算复杂度最低的算法和最佳的数据结构来解决任务。

  • 重写算法以获得相同的结果和更少的计算。

  • 避免递归调用。

  • 给重复的函数加入变量、计算和调用。

  • 分解和简化数学公式。

  • 使用搜索数组:用它们来获取基于另一个的值,而不是使用 switch/case 语句。

  • 使条件总是更有可能为真,以更好地利用处理器的推测执行。

  • 如果可以,请使用位级运算符替换某些操作,因为这些运算符的处理周期较短。

12.使用工具检测问题

Lighthouse 是一个很好的网页性能工具,它可以帮助你审核性能、可访问性、最佳实践和 SEO。谷歌 PageSpeed 旨在帮助开发人员了解网站的性能优化和潜在可改进的方面。这些组件旨在识别网站是否符合 Google Web 性能最佳实践,以及将调整过程自动化。


在 Chrome 中,你还可以使用主菜单中的“更多工具”选项来查看每个选项卡使用的内存和 CPU。对于更高级的分析,你可以使用 Firefox 或 Chrome 中的开发人员工具“性能”视图来分析不同的指标,例如:



devtools 的性能分析允许你在加载页面时模拟 CPU 消耗、网络和其他指标,以便识别和修复问题。



为了更深入地了解,建议你使用 JavaScript Navigation Timing API,它允许你详细测量代码的每个部分从编程本身中获取的内容。


对于基于 Node.js 构建的应用程序,NodeSource Platform 也是一种非常好、影响低的方式,它可以在非常精细的级别上探索应用程序性能。


全面的 Node.js 指标可帮助你识别内存泄漏源或其他性能问题,并更快地解决这些问题。

最后的说明

在代码的可读性和优化之间保持平衡很重要。代码由计算机解释,但我们需要确保代码将来可以由我们自己或其他人维护,因此它们需要易于理解。


请记住:应始终考虑性能,但不应将性能凌驾于错误检测和功能添加之上。

参考文献


英文原文:https://nodesource.com/blog/improve-javascript-performance


2019-07-23 19:333864
用户头像

发布了 34 篇内容, 共 20.1 次阅读, 收获喜欢 47 次。

关注

评论

发布
暂无评论
发现更多内容

埃文科技完成数千万A轮融资

郑州埃文科技

网络安全 企业融资 数据服务

go实现类似spring BeanUtil工具

Z.K

微服务开发平台 Spring Cloud Blade 部署实践

北京好雨科技有限公司

Kubernetes 微服务 云原生 Spring Cloud

海鑫科金:通过 YMatrix 实现离线在线平台统一,满足公安数据场景的管理分析需求

YMatrix 超融合数据库

超融合数据库 YMatrix 公安数据场景 海鑫科金

龙磐投资,中国领先生物医药风险投资机构,规模超百亿

联营汇聚

Getaverse - 基于Web3.0数字认证引擎协议的元宇宙生态服务平台

Geek_Web3

Web3 Daily #区块链# did web3

学习java参加培训哪个比较好呢?

小谷哥

微服务中的鉴权该怎么做?

江南一点雨

SpringCloud Gateway openfei

30个编程小技巧,提高代码性能

千锋IT教育

笔记2022-12-06

mklop

学习笔记 构架

学习web前端培训怎么样呢

小谷哥

Gin路由添加流程

Z.K

Getaverse测试网即将上线,节点销售火爆,是否成为下一个GALA?

Geek_Web3

区块链 Web3 Daily #区块链# did web3

智慧交通的待解谜题,中科视语在首届昇腾AI创新大赛交出金奖答案

脑极体

艾瑞《政企数智办公平台行业研究报告》,政企数智办公「百宝书」

融云 RongCloud

办公 数智化

前端培训学习需要什么条件?

小谷哥

大数据培训学习方法有哪些

小谷哥

直播预告丨泛CG元宇宙分会场云桌π—从NVIDIA XR到云渲染,如何构建元宇宙虚拟场景生态闭环

3DCAT实时渲染

CG 渲染 虚拟现实 元宇宙 元宇宙开发

基于训练和推理场景下的MindStudio高精度对比

华为云开发者联盟

人工智能 华为云 12 月 PK 榜

制定数据战略的三大要素和五个步骤!

用友BIP

FFA 2022 收官总结|活动报告出炉,实时即未来!

Apache Flink

大数据 flink 实时计算

从一个 issue 出发,带你玩图数据库 NebulaGraph 内核开发

NebulaGraph

图数据库 开源贡献

Getaverse月报 - 11月

Geek_Web3

区块链 Web3 Daily #区块链# did web3

找运营商电商化运营突破口的九个策谋

鲸品堂

12 月 PK 榜

SoviChart数据可视化:条形图(Bar chart)

2D3D前端可视化开发

数据分析 数据可视化 可视化图表 sovitchart 条形图

王者荣耀商城异地多活架构设计

Jack

架构实战训练营9期

福利Day | KaiwuDB 邀你相约 DTCC 2022,文末免费抢价值3200元大会门票!

KaiwuDB

数据库

Smart Finance将AIGC引入GameFi,P2E进入人工智能时代

股市老人

消息队列跨区域协同方案的演进

移动云大数据

kafka pulsar

小游戏的前世今生

FinFish

微信小程序 休闲游戏 小游戏 H5小游戏

web前端培训应该怎么做

小谷哥

提高JavaScript性能的12个技巧_语言 & 开发_Liz Parody_InfoQ精选文章