如何编写更快,更轻的JavaScript代码

null

构建交互式网站可能涉及向您的用户发送JavaScript。通常,太多了。您是否曾经在手机上看起来已经加载的网页上,只是在您点击链接或尝试滚动时没有任何结果?我们都有。

字节为字节,JavaScript仍然是我们发送给手机最昂贵的资源,因为它可以以显着的方式延迟交互性。在此功能中,我们将介绍一些策略,以便在移动设备上有效地为用户提供JavaScript,同时仍然为他们提供宝贵的体验。在这个页面上,我们将深入研究导致问题的原因。跳转到第2页,了解有关如何减少JavaScript加载时间的一些建议,包括一些网页设计工具帮助您有效地监控您的网站。

为什么JS减慢你的移动网站?

当用户访问您的站点时,您可能会发送大量文件,其中许多是脚本。也许您添加了一个快速的JavaScript库或插件,但没有机会检查它引入了多少代码?这发生在我们很多人身上。尽管我喜欢JavaScript,但它始终是您网站中最昂贵的部分。我想解释为什么这可能是一个重大问题。

Statistics from the HTTP Archive state of JavaScript report, July 2018

来自HTTP存档状态的JavaScript报告的统计数据,2018年7月

许多热门网站向其移动网络用户提供了数兆字节的JavaScript。今天的平均网页目前出货少了一点 - A中位数约为350kB缩小和压缩的JavaScript。未压缩,浏览器需要处理的脚本超过1MB。使用这么多JavaScript的经验需要超过14秒才能加载并在移动设备上进行交互。

其中一个重要因素是在移动网络上下载代码然后在移动CPU上处理代码需要多长时间。不仅可以从早期的中间站点获得350kB的脚本需要一段时间才能下载,实际情况是,如果我们查看热门网站,他们实际上会发送比这更多的脚本。我们在桌面和移动网络上都达到了这个上限,在这些网站中,网站有时会发送多兆字节的代码,然后浏览器需要处理这些代码。要问的问题是:你能买得起这么多JavaScript吗?

今天的网站通常会在他们的JavaScript包中发送以下内容:

  • 一套用户界面组件(例如,小部件,轮播或抽屉的代码)
  • 客户端框架或用户界面库
  • Polyfills(通常用于不需要它们的现代浏览器)
  • 完整库与仅使用它们的内容(例如,Moment.js和locales与较小的替代品,如date-fns或Luxon)

这段代码加起来。它越多,页面加载所需的时间就越长。

加载现代网页

单击右上角的图标以展开图像

加载网页就像一个有三个关键时刻的电影地带:

  • 它发生了吗?您可以将一些内容传送到屏幕的那一刻。导航是否已启动,服务器是否已开始响应?
  • 它有用吗?您绘制文本或内容的时刻,使用户能够从体验中获取价值并与之互动。
  • 有用吗?用户可以开始有意义地与体验交互并发生某些事情的那一刻。

我之前提到过这个术语“互动”,但这意味着什么?对于要交互的页面,它必须能够快速响应用户输入。一个小的JavaScript负载可以确保快速发生这种情况。无论用户点击链接还是滚动页面,他们都需要看到实际发生的事情是为了响应他们的行为。无法实现这一目标的体验会让您的用户感到沮丧。

当浏览器运行您可能需要的许多事件时,它可能会在处理用户输入的同一线程上执行此操作。该线程称为主线程。太多(主线程)JavaScript可以延迟可见元素的交互性。这对许多公司来说都是一个挑战。

为什么JavaScript如此昂贵?

那么为什么JavaScript会导致这些问题呢?将请求发送到服务器,然后服务器返回一些HTML。浏览器解析该标记并发现构成它的必要代码(CSS和JavaScript)和资源(图像,字体等)。完成后,浏览器必须下载并处理这些文件。

如果我们想快速使用JavaScript,我们必须下载并快速处理它。这意味着我们必须快速进行网络传输以及脚本的解析,编译和执行。如果您花费很长时间在JavaScript引擎中解析和编译脚本,则会延迟用户与您的体验交互的速度。

单击右上角的图标放大

请记住,网络上的资源有不同的成本。 200kB脚本与200kB JPG具有不同的成本集。它们可能需要相同的下载时间,但在处理时,成本却不尽相同。

需要对JPEG图像进行解码,光栅化并在屏幕上绘制。这通常可以很快完成。需要下载JavaScript包然后进行解析,编译和执行。这可能比您在移动硬件上想象的时间更长。

什么是交互性的良好目标?

我们Chrome团队认为您的基线应该在5秒内通过缓慢的3G或4G连接进行交互中位移动设备。你可能会说:'我的用户都在使用快速网络和高端手机!'但是他们呢?您可能正在使用'快速'咖啡店Wi-Fi,但实际上只能获得2G或3G速度。可变性很重要。

单击右上角的图标以展开图像

Mobile是由低端,中值和高端设备组成的频谱。如果我们很幸运,我们可能会有一部高端手机,但实际情况是并非所有用户都拥有这些设备。

它们可能位于低端或中位数的手机上,由于热量限制,高速缓存大小,CPU,GPU的差异,这些多类设备之间的差异可能非常明显 - 您最终可能会遇到JavaScript等资源的不同处理时间,取决于您使用的设备。您的低端手机用户甚至可能是在美国

有些用户不会使用快速网络或拥有最新最好的手机,因此我们开始在真实手机和网络上进行测试至关重要。快速的设备和网络实际上有时可能很慢;可变性最终会降低绝对一切的速度。在真实手机上测试或至少使用移动仿真测试。使用缓慢的基线进行开发可确保每个人 - 无论是快速还是慢速设置 - 都能获益。

单击右上角的图标以展开图像

检查您的分析以了解您的用户访问您网站的设备是一项非常有用的练习。 WebPageTest拥有多款Moto G4手机在移动配置文件下预先配置。如果您无法购买自己的中等级硬件进行测试,这将非常有用。

了解您的受众非常重要。并非每个站点都需要在低端手机上使用2G。也就是说,旨在实现整个频谱的高水平性能,确保访问您网站的每个潜在用户都有机会快速加载。

下一页:编写更快,更轻的JavaScript编码的重要提示



翻译字数超限