武汉的开发者们注意啦!AI技术战略、框架以及最佳实战尽在Azure OpenAI Day 了解详情
写点什么

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

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

关注

评论

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

从萧何进入咸阳丞相府到数字化时代的决策

数列科技杨德华

28天写作

写给 Go 初学者的指北

Rayjun

Go 语言

LiteOS:SpinLock自旋锁及LockDep死锁检测

华为云开发者联盟

死锁 LiteOS 自旋锁 SpinLock LockDep

第十二周 学习总结

简简单单

GitHub上连夜被下架!阿里巴巴2021版JDK源码笔记(2月第三版)

Java架构追梦

Java 阿里巴巴 面试 jdk源码 金三银四

Linux入门篇 —— Linux 用户与组管理详解(system-config-users && 命令行)

若尘

Linux 命令行 用户

多年阅读《经济学人》是一种什么体验?

wbliu85

深入解读华为云细粒度文本情感分析及其应用

华为云开发者联盟

AI 华为云 情感分析 语言语义 文本情感分析

2021突击金三银四必备:BAT1000Java面试真题合集!

比伯

Java 编程 架构 面试 计算机

如何探索自己的职业价值观,让工作更有动力

一笑

28天写作

我看JAVA 之 Class

awen

Java 源码 jdk class

Linux常见IO分析工具

运维研习社

我看JAVA 之 枚举类型

awen

Java 源码 jdk 枚举

《经济学人》2021年2月27日刊精彩文章导读及资源下载

wbliu85

第十二周 作业

简简单单

双指针高频面试题:「三数之和」的姐妹篇 ...

宫水三叶的刷题日记

面试 LeetCode 数据结构与算法

Enterprise Tech30(2021)

行人23

Tech ET30

优雅地停止Spring Boot应用

韩斌

(28DW-S8-Day7) 比特币原始文献略读

mtfelix

比特币 区块链 白皮书 28天写作 工作量证明

如何学习一项技能

不在调上

观点 | 破解云管理平台在数据中心管理体系中定位模糊的困局

BoCloud博云

云计算 PaaS 服务目录 多云管理平台 数据中心管理

记忆这件“小事”「Day 7」

道伟

心理学 28天写作

前端170面试题+答案学习整理(良心制作)

我是哪吒

程序员 面试 大前端 28天写作 2月春节不断更

我看JAVA 之 基本数据类型与封装类型

awen

Java 源码 基本数据类型

智能客服+智能助手,这波“数字员工”的业务能力太强了!

华为云开发者联盟

华为 AI 数字 智能客服 智能助手

我看JAVA 之 Thread & ThreadLocal

awen

Java 源码 多线程

我看JAVA 之 Annotation

awen

Java 源码 jdk 注解 annotation

推荐程序员平时使用最多的绘图软件!!!

秦怀杂货店

软件 流程图 绘图

涨薪50%,从小厂逆袭快手 - 附面经

haxianhe

面试

万绿丛中一点红——雷斯多夫效应

Justin

心理学 交互设计 28天写作 游戏设计

探索图神经网络的网络架构和训练方法

华为云开发者联盟

神经网络 AI 图神经网络 网络架构 GNNs

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