创建交互式网站需要向用户发送JavaScript，而且经常发送很多。您是否曾经在移动应用程序上单击链接或滑动网页却没有任何反应？总的来说，JavaScript仍然是手机上性能最密集的资源，因为它会在很多方面拖累网页的交互能力。上图显示了WebPageTest在CNN.com上花费的JavaScript时间。高端手机（如iPhone8）运行JavaScript约需4s，普通手机（如MotoG4）约需13s，低端手机（如Alcatel1X）约需36s秒。本文将介绍如何提高JavaScript性能的一些策略：为了速度，只加载当前页面需要的JavaScript。首先加载用户需要的代码，然后使用代码拆分来延迟加载其余代码。这将使您能够在加载和交互阶段最大限度地提高效率。默认情况下使用基于路由的代码拆分有很多好处。学会接受绩效目标。对于手机，压缩后的JS目标小于170KB，未压缩为0.7MB。高绩效是成功的关键，当然这包括团队文化、结构和纪律等因素。没有绩效目标的发展将是倒退的、不成功的。了解如何审核和优化JavaScript包。当你使用一个库的函数时，整个库都会被发送，一些浏览器不需要的polyfills和重复代码很可能会发生。每一次互动都是新互动的开始；根据实际情况进行优化。对于网络条件较差的手机，应减小数据包大小，对于CPU负载较重的手机，应减少JavaScript解析时间。如果在客户端运行的JavaScript并不能提升用户体验，那么就需要反思在服务端渲染是否会更快。如果做得不好，服务器端渲染和客户端渲染之间的选择可能是一个大问题。1.从用户体验的角度来看，网站可能会臃肿。当用户打开你的网站时，你可能会发送很多文件，其中有很多是脚本文件。从网站浏览者的角度来看，它可能看起来像这样：尽管我很喜欢JavaScript，但它始终是您网站中最需要性能的部分。我很乐意解释为什么javascript是主要问题。现在网站发送的压缩后的JavaScript中位数是350KB（查询网站，现在桌面网站是398KB，移动端是384KB），浏览器解压后需要运行一个1MB的脚本。提示：如果您想了解当用户与您的网站交互时您的JavaScript包如何执行，请查看Lighthouse。JavaScript的耗时主要取决于根据手机网络情况下载代码的时间和手机CPU消耗的运行时间。来看看全球手机网络的现状（中国是GW的原因，不能算吗？）这张来自OpenSignal的图展示了全球4G情况和各国网速。我们可以看到很多国家的网速比我们想象的要慢很多。网站有时会发送数兆字节的代码，需要浏览器运行，无论是PC端还是移动端都达到了天花板。现在的问题是，你能负担得起那么多JavaScript吗？2.JavaScript非常注重性能。提示：如果您发送的脚本太多，请考虑将它们与代码拆分或摇树优化捆绑在一起，以改进JS负载。今天的网站在他们发送的JS包中有以下内容：客户端UI框架。全局状态管理解决方案（如Redux）Polyfills（现在浏览器通常不需要）所有工具库（如loash、monent）。一组UI组件（例如Button、Input）。这些代码是一点一点添加的，最后代码越多，页面加载的时间就越长。加载网页就像解析电影的三个关键时刻。那就是：它发生了吗？真的有效吗？真的好用吗？发生的那一刻，就是你是否将内容显示在屏幕上（导航开始了吗？服务器开始响应了吗？）是否真的起作用了，也就是当你渲染页面时，用户可以从这个体验中获得价值并获得他们想要的信息。真的好用吗？即用户可以有有意义的交互体验，得到相应的反馈。“互动”的真正含义是什么？对于交互式网页，它必须能够快速响应用户输入。少量JavaScript负载可确保快速响应。当用户单击链接或滚动页面时，他们的操作需要反馈。不这样做会使用户感到沮丧。当人们使用服务器呈现的页面时，当一堆JavaScript数据包在后台发送，触发事件操作或其他额外操作时，这种情况经常发生。当浏览器根据需要运行尽可能多的事件时，用户输入操作也在同一个进程中运行，这个线程称为主线程。在主线程中加载过多的JavaScript是问题所在。将Js发送给WebWorker或者通过ServiceWorker缓存，这样会减少对实时交互的影响。在主线程上运行过多的JavaScript会延迟视觉元素的交互，这对很多公司来说是一个挑战测试GoogleNews的交互时间，我们观察到高端手机（7S左右）和低端手机（约55S）差距巨大。那么，交互的目标是什么？我们觉得在慢速3G连接和中端移动设备上，最小交互应该保证在5S内完成。“但我的用户连接到快速互联网和高端手机！”真的吗？您可能在咖啡店连接到“快速”wifi，但速度仅为2G或3G。还有其他各种原因会影响使用手机的效率。谁减少了JavaScript加载并减少了交互时间？Pinterest（类似Tumblr的图片分享网站）将网站的JavaScript包从2.5MB减少到不到200KB，开始交互的时间从23s减少到5.6s网站的收入增加了44%，数量登录量增长了753%，手机终端的每周活跃数增长了103%。AutoTrader将网站的JavaScript包大小减少了56%，并将加载时间减少了约50%。Nikkei将该网站的JavaScript包大小减少了43%，并将加载时间缩短了14秒。让我们设计不依赖大量JS负载的更具弹性的网站。交互性受很多因素的影响。它可能会受到您手机的数据限额、咖啡店wifi速度或间歇性互联网连接的限制。当这些情况发生时，网站可能需要运行大量的js，用户可能会在页面显示之前关闭网站。或者页面显示后，用户需要等待一段时间才能进行交互。理想情况下，传递较少的JS将缓解这些问题。3.为什么javascript会消耗那么多的资源为了解释为什么javascript会消耗那么多的性能。我需要向您介绍当您向浏览器发送内容时会发生什么，当用户在地址栏中键入URL时会发生什么。向服务器发送请求时。服务器将返回一个资源。浏览器然后解析这些资源并找到必要的CSS、Javascript、图像等。最后浏览器运行所有资源。这样做的问题之一是javascript经常成为阻碍性能的瓶颈。我们都想尽快把图画出来，因为页面有交互功能。但是当javascript成为了那个短板，只能看屏幕不能交互。如果我们在开发的时候想要加快javascript的运行速度，我们必须记住一件事，一定要快速下载、解析、编译、执行。这意味着我们需要更快的网络传输和更快的应用端运行。如果javascript引擎在解析和编译阶段花费了大量的时间，这将导致用户延迟相同时间的交互体验。下图展示了V8引擎运行不同网页时各个阶段所花费的时间：橙色表示网页接受js后解析所需的时间。黄色部分表示编译需要的时间。这两个阶段合计占总时间的30%以上。虽然V8将js编译在一个独立的线程中进行编译（后台线程），减少了20%的编译时间，但是编译和解析还是非常耗时的，很少能看到不到50ms的大型脚本。另外需要注意的是，相同大小的不同资源需要不同的加载时间。200kb的代码和200kb的图像之间的性能开销差异是巨大的。它们的下载时间可能相同，但运行时间却大相径庭。JPEG图像需要解码、光栅化并在屏幕上绘制。一个JavaScript包需要解析、编译、执行，还有一系列的步骤需要引擎来完成。注意区别。4、高低手机有区别。如果幸运的话，我们可能会拥有高端或像样的手机。然而，现实是并非所有用户都拥有这些设备。用户可能是低端或中端手机。这些手机的档次差异也会带来严重的消费。散热片（热节流）、内存、cpu、gpu的不同会给用户带来非常大的差异。您使用低端手机的用户甚至可能在美国。以下是2018年不同手机解析javascript的区别：在iphone8这样的高端设备上运行脚本，顶端相对较快，而在一般的Moto4和低端的Alcatel1X上运行速度较慢。注意到运行时的差异了吗？Android手机一般比较便宜，但速度较慢，而且这些设备通常有低端的CPU和较少的内存，如果你想当然地认为用户使用的是高端手机，你就会失去他们。有些用户的网速不快或没有最新最好的手机，因此使用真实手机和网络进行测试很重要。不同的情况是一个需要认真考虑的问题。虽然不同的情况会使用户体验变得更糟，但底线缓慢对每个人都有好处。如果你的团队能看分析报告了解用户的真实情况，就会让你知道用哪款手机做测试。5、如何减少发送的javascript代码大小成功的关键是发送最少的脚本，让用户获得有用的体验。代码拆分是一个很好的选择。代码拆分就像把一个巨大的披萨切成几块，然后一次给用户一块，把代码分成几份，只发送当前页面需要的代码和其他代码，需要的时候再发送。代码拆分可以应用于页面、路由和组件级别。现代框架通过webpack和parcel等打包器完美支持代码拆分。另一方面，可以将代码审计引入到工作流中。幸运的是，当今的生态系统中有许多工具可以帮助进行代码分析。这些工具可视化你的javascript包的内容：它们标记大型库、重复代码、你可能需要的依赖项。代码审计还标记了重量级包（例如Moment.js）可以替换为轻量级包（例如date-fns）。如果您使用的是webpack，则可以在我们的github上找到常见的库问题。快点，保持快点。表演是一段旅程。许多小的改变可以带来很大的收获。使用户能够以最少的摩擦与您的网站进行交互。运行最少量的JavaScript以提供真正的价值。这可能意味着采取渐进的步骤来实现目标。最后，您的用户会感谢您。6.变得更快，保持更快的表现表现就像一段旅程。许多小的改变可以获得巨大的好处。让您的用户在浏览网页时获得更好的用户体验。为了更接近该目标，请尽可能少地使用JavaScript来传递有用的信息。最后，您的用户会感谢您。
