网站优化

14 个 JavaScript 代码优化技巧

本文初发布于 Medium 网站,经原作者由 InfoQ 中文站翻译并分享。

JavaScript 已经成为有史以来的编程语言。根据 W3Tech 的数据,全世界将近 96的网站都在使用它。关于 Web 有一个关键的事实是,你无法控制访问网站的用户所用设备的硬件规格。终用户访问你的网站时,使用的可能是设备也可能是低端设备,网络连接条件也有好有差。这意味着你尽可能优化自己的网站,以用户的需求。

这篇文章列举了一些技巧,可帮助你写出的 JavaScript 代码,从而性能。

附带提一下,请共享和重用你的 JS 组件,以在代码(写起来需要花费时间)和合理的交付时间之间保持适当的平衡。你可以使用 Bit 等流行工具将项目中的组件(普通 JS、TS、React、Vue 等)共享到 Bit 的组件,用不了多大功夫

1、删除未使用的代码和功能

你的应用程序包含的代码越多,就需要将多的数据传输到客户端。浏览器也需要多时间来分析和解释代码。

有时,你可能打包了很多根本用不到的功能。只在开发环境中保留这些额外的代码,而不要将其推送到生产环境中,以免给客户端的浏览器增加负担。

要不断问自己,某个功能或代码段是否是的。

你可以手动移除未使用的代码,也可以使用 Uglify 或谷歌的 Closure Compiler 之类的工具删除它们。你甚可以使用一种称为摇树优化的从应用程序中删除未使用的代码。Webpack 这类打包软件提供了这种,详情可以参考这里。如果要删除未使用的npm 软件包,可以使用命令npm prune,详细信息参考 M 文档。

2、尽可能缓存缓存

可以减少延迟和网络流量,从而减少了显示资源表示所需的时间,以网站的速度和性能。缓存可以借助 Cache API 或 HTTP caching 来实现。你可能想知道内容改时会发生什么。当某些条件(例如发布新内容)时,上述缓存机制能够处理和重成缓存。

3、避免内存泄漏

作为一种语言,JS 会负责一些底层管理工作,例如内存管理。回收是大多数编程语言共有的过程。用外行术语来说,收集就是收集并释放已分配给对象,但目前尚未在程序的部分中使用的内存。在 C 这样的编程语言中,开发人员使用 malloc() 和 dealloc() 函数来处理内存分配和释放操作。

虽然在 JavaScript 中回收是自动执行的,但在某些情况下它也不是的。在 JavaScript ES6 中,引入了 Map 和 Set 及其“weaker”的同对象。被称为 WeakMap 和 WeakSet 的“较弱”对应项持有对对象的“弱”引用。它们使未引用的值能够被回收,从而内存泄漏。你可以在此处阅读有关 WeakMaps 的多信息。

4、尽早打破循环

循环会消耗很多宝贵的时间,所以你应该尽早打破它们。你可以用 break 关键字和 continue 关键字来做这件事。编写效的代码是你的责任。

在下面的示例中,如果你没有从循环中 break,则你的代码将循环运行 1000000000 次,显然会过载的。


你可以在此处详细了解循环和性能的关系。

5、小化变量计算的次

为了减少计算变量的次数,可以使用闭包。通俗来说,JavaScript 中的闭包使你可以从函数访问外部函数作用域。每次创建函数(不调用)时都会创建闭包。函数将有权访问外部作用域的变量,即使在返回外部函数之后也是如此。

我们来看两个例子。这些示例均来自 Bret 的博客。

如果你多次调用上面的函数,那么每次都会创建一个新对象。每次调用时,变量 texasCustomers 和 californiaCustomers 都会导致不的内存重分配。

在上面的示例中,借助于闭包,返回到变量 cityOfCustomer 的函数可以访问外部函数 findCustomerCity() 的常量。而且,每当以传递的名称作为参数调用函数时,都再次实例化常量。要了解关于闭包的多信息,建议你阅读 Prashant 的博客文章。

6、尽量减少 DOM 访问

与其他 JavaScript 语句相比,访问 DOM 的速度很慢。如果你对 DOM 进行改,触发了布局的重新绘制,那么就得等好一阵子了。

为了减少访问 DOM 元素的次数,请先访问,然后将其用作局部变量。完成需求后,请将其设置为 null 来移除该变量的值。这将内存泄漏,因为这会触发回收过程。

7、压缩文件

通过压缩方法(例如 Gzip)可以减小 JavaScript 文件的大小。较小的文件会你的网站性能,因为浏览器下载较小的资产。

这类压缩手段可以减少 80的文件大小。在此处阅读有关压缩的多信息。

8、缩小终代码

有人认为缩小和压缩是相同的,其实不然。在压缩中,我们使用算法来改变文件的输出大小;在缩小时,我们需要删除 JavaScript 文件中的注释和多余的空格。可以在网上找到许多工具和软件包来帮助完成这一过程。缩小已成为页面优化的标准做法,也是前端优化的主要步骤。

缩小可以让文件大小减少 60。你可以在此处阅读有关缩小的多信息。

9、使用 Throttle(节流)和 Debounce(抖)

我们可以使用这两种来严格控制代码需要处理的次数。

节流是函数可以时的次数。例如,“每 1000 毫秒执行 onkeyup 函数”。也就是说哪怕你每秒敲 20 个键,该每秒也只会触发。这将减少代码的负担。

另一方面,抖是自上次执行相同函数以来再次运行该函数的短持续时间。换句话说,“上次调用函数后过少 600 毫秒才执行此函数”。要了解有关节流和抖的多信息,这里有一篇入门。

你可以实现自己的抖和节流函数,也可以从Lodash 和Underscore 之类的库中导入它们。

10、避免使用 Delete 

关键字delete 关键字用于从对象中删除属性。这个关键字的性能表现不怎么好,预计它将在未来的新中。

或者,你可以简单地将不需要的属性设置为 undefined。


你还可以使用 Map 对象,Bret 认为它的 delete 方法会快。

11、使用异步代码线程阻塞

你应该知道 JavaScript 默认情况下是同步的和单线程的。但是在某些情况下,你的代码需要很大的计算量。代码本质上是同步的,意味着一段代码运行时将阻止其他代码语句运行,直到前者完成执行为止。这会降低整体性能。

但是我们可以通过异步代码来避免这种情况。异步代码以前以回调的形式编写,但是 ES6 引入了一种处理异步代码的新样式。这种新样式被称为 Promise。你可以在 MDN 的文档中了解有关回调和 Promise 的多信息。

可是等等……

JavaScript 默认情况下是同步的,并且也是单线程的。

如何在单个线程上运行异步代码呢?这是很多人感到困惑的地方。做到这一点,主要依赖运行在浏览器后台的 JavaScript 引擎。JavaScript 引擎是执行 JavaScript 代码的计算机程序或解释器。JavaScript 引擎可以用多种语言编写。例如,支持 Chrome 浏览器的 V8 引擎是用 C++ 编写的,而支持 Firefox 浏览器的 SpiderMonkey 引擎是用 C 和 C++ 编写的。

这些 JavaScript 引擎可以在后台处理任务。根据 Brian 的说法,调用栈可以识别 Web API 的函数,并将其交给浏览器处理。浏览器完成这些任务后,它们将返回并作为回调被推上堆栈。

你可能想知道 Node.js 是怎么做这些工作的,毕竟它没有浏览器的帮助。实际上,支持 Chrome 的那个 V8 引擎也是 Node.js 背后的支撑。这里有 Salil 的一篇很棒的博客文章,解释了Node 生态系统中的这一过程。

12、使用代码拆

如果你有使用 Google Light House 的经验,会熟悉一种称为“first contentful paint”的指标。它是 Lighthouse 报告的 Performance 部分中跟踪的六个指标。

First Contentful Paint(FCP)衡量用户转到你的页面后浏览器渲染段 DOM 内容所花费的时间。页面上的图像、非白色<canvas>元素和 SVG 被视为 DOM 内容;iframe 不包含内容。

获得高的 FCP 分数的方法是使用代码拆分。代码拆分是一种在传输开始时将的模块发送给用户的。通过减小初发送的载荷大小,这将地影响 FCP 分数。

流行的模块打包器(例如 webpack)可为你提供代码拆分功能。你还可以利用原生 ES 模块来单独加载各个模块。你可以在此处详细了解有关原生 ES 模块的信息。

13、使用 async 和 defer

在现代网站中,脚本比 HTML 为密集,其大小大且消耗多的处理时间。默认情况下,浏览器等待脚本下载和执行完毕后,再处理页面的其余部分。

于是笨重的脚本可能会阻止网页的加载。为了避免这种情况,JavaScript 为我们提供了两种分别称为 async 和 defer 的。你将这些属性添加到<script>标记中。

Async 会让浏览器在不影响渲染的情况下加载脚本。换句话说,页面不会等待 async 脚本,而是先处理和显示内容。

Defer 是让浏览器在渲染完成后加载脚本。如果同时它们两者,则 async 在现代浏览器上优先,而支持 defer 但不支持 async 的老式浏览器将回退为 defer。

这两个属性可以帮助你大幅减少页面加载时间。我强烈建议你阅读 Flavio 的这篇博客文章。

14、使用 Web Workers 在后台运行 CPU 密集型任务

Web Worker 允许你在后台线程中运行脚本。如果你有一些的任务,可以将它们分配给 Web Worker,这些 WebWorker 可以在不干扰用户界面的情况下运行它们。创建后,Web Worker 可以将消息发布到该代码的处理程序来与 JavaScript 代码通信,反之亦然。

要了解有关 Web Worker 的多信息,建议你阅读 MDN 文档。

感谢阅读,欢迎评论,编程愉快!延伸阅读https://blog.bitsrc.io/14-javascript-code-optimization-tips-for-front-end-developers-a44763d3a0da

文章来源:https://www.infoq.cn/article/MwyrfzDPdRpkzfbW7NwW




相关新闻
标签: 网站优化  

Contact

地址:呼和浩特市金川开发区宽城小区#A6-4

电话:18698468112

0471-4599590

网站定制 电话咨询 公司导航