写点什么

提高 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:333867
用户头像

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

关注

评论

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

华为云PB级数据库GaussDB(for Redis)揭秘:如何搞定推荐系统存储难题

华为云开发者联盟

数据库 推荐系统 存储 华为云 GaussDB(for Redis)

柯基数据通过Rainbond完成云原生改造,实现离线持续交付客户

北京好雨科技有限公司

云原生 需求落地 离线部署 可持续交付

如何设计企业特色的数字化转型架构?

博文视点Broadview

❤️用武侠小说的形式来阅读LinkedList的源码,绝了!

沉默王二

Java

敏捷团队的最佳测试实践:自动化金字塔

禅道项目管理

测试 自动化测试

【LeetCode】 二叉树中和为某一值的路径Java题解

Albert

算法 LeetCode 9月日更

值钱的数据放在云上安全吗?怎样才能保障其安全性?

行云管家

网络安全 信息安全 数据安全 企业上云

波场链DAPP智能合约系统搭建|波场链DAPP开发

Geek_23f0c3

DAPP智能合约交易系统开发 波场DAPP 波场链DAPP开发

netty系列之:搭建自己的下载文件服务器

程序那些事

Java Netty io nio 程序那些事

浪潮云说丨上云迁移——快,准,稳!

云计算

聊聊什么样的代码是可读性强的代码?

卢卡多多

代码质量 代码 9月日更

企业级即时通信市场能否告别“孤岛时代”?

BeeWorks

移动数字化底座 企业即时通讯平台 移动数字化平台 即时通讯IM 移动办公

全球教育行业机构遭受的攻击增长了 29%

BeeWorks

阅读

携手伙伴,共赴星海-百度飞桨应急行业AI私享会成功举办

百度大脑

人工智能 飞桨

国产接口管理工具APIPOST中的常见设置项

Proud lion

大前端 后端 Postman 开发工具 接口文档

第一波场DAPP系统搭建,DAPP介绍

合肥艾数199四②43⑧797

拥抱开源,云智慧发布AIOps社区

BeeWorks

阅读

如何采购ARM六核RK3399安卓工控开发主板?

双赞工控

安卓主板 工控主板 rk3399主板

电信运营商基于 MQTT 协议构建千万级 IoT 设备管理平台

EMQ映云科技

物联网 IoT mqtt 通信运营商 emq

再启动!零代码第四期训练营报名开放中

明道云

Dogfooding-爱奇艺移动端后台灰度环境优化实践

爱奇艺技术产品团队

测试 开发 灰度发布

架构学习模块一

George

深入分析3种线程池执行任务的逻辑方法

华为云开发者联盟

Java 线程 线程池 ThreadPoolExecutor类

祝贺 StreamNative 工程师张勇成功跻身 Apache BookKeeper Committer

Apache Pulsar

bookKeeper Apache Pulsar StreamNative

API与ESB 、ServiceMesh、微服务究竟关系如何?

BoCloud博云

云管理

华为云IoT如何连接边缘和云,实现海量IoT数据就地处理的技术实践

华为云开发者联盟

IoT 边缘 IoT边缘 实时数据 IoT Edge

云小课|细数那些VMware虚拟机的恢复招式

华为云开发者联盟

vmware 云小课 云备份 VMware恢复 恢复数据

国资云横空出世,云上安全监管再加码

行云管家

云计算 数据安全 企业上云 国资云

服务器运维是什么意思?日常工作包含哪些?

行云管家

运维 服务器 IT运维 服务器运维

就靠这一篇文章,我就弄懂了 Python Django 的 django-admin 命令行工具集

梦想橡皮擦

9月日更

IDC:2021年全球大数据和分析支出预计达2157亿美元

BeeWorks

阅读

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