正文
当我们网站更严重依赖于JavaScript的框架时，我们有时会以我们不容易看到的方式来支付我们发送的内容。在这篇文章中，我将介绍为什么一些规则可以帮助我们的网站在移动设备上快速加载和互动。
较少的代码=较少的解析/编译+较少的传输+较少的解压缩
网络
当大多数开发人员考虑JavaScript使用成本时，我们首先会考虑下载和执行成本。通过线路发送更多字节的JavaScript需要的时间越长，用户的连接越慢。（因此我们在服务端使用了gzip）
即使在一线城市，因为有效的网络连接类型用户实际上可能不是3G，4G或WiFi。你可能在商城里面只连接到2G的蜂窝热点（我们在商城里查找附件美食，明明手机有3g可是就是刷不出来就是这种状况）。
我们可以通过以下方式降低 JavaScript的网络传输成本：
只运送用户需要的代码。代码拆分可以在这里帮助。
缩小它（ES515的 Uglify， ES2015的 babel- minify或uglify -es）
大力压缩它（使用 Brotli〜Q11，Zopfli或gzip的）。Brotli的压缩比超过Gzip。它帮助CertSimple节省了 17％的压缩JS字节的大小，LinkedIn节省了 4％的加载时间。
删除未使用的代码（webpack2开始可使用tree-shaking，虽然他还不够完善 ）。通过DevTools代码覆盖来确定。
对于剥离的代码，关闭编译器的高级优化和微调库插件如lodash-bable或的WebPack的ContextReplacementPlugin像Moment.js库。使用babel-preset-env＆browserlist来避免现代浏览器中已经存在的转译功能。高级开发人员可能会发现他们的Webpack捆绑包的仔细分析有助于识别不需要的依赖关系的机会。
缓存它以尽量减少网络旅行。确定脚本的最佳生命周期（max-age）和提供验证令牌（ETag）以避免传输不变的字节。服务器缓存可以使我们的应用程序网络具有弹性，让我们可以快速访问代码缓存等功能，例如文件名散列的长期缓存。
解析/编译
一旦下载，JavaScript 最重的一个成本就是JS引擎解析/编译这段代码的时间。在Chrome DevTools中，解析和编译是“性能”面板中黄色“脚本”时间的一部分。
花费很长时间解析/编译代码会严重延迟用户与您的网站互动的时间。您发送的JavaScript越多，在网站交互之前解析和编译的时间就越长。
与JavaScript相比，在处理等效大小的图片时（涉及到大量的图片仍然需要解码！），涉及到大量的成本，但是在平均的移动硬件上，JS更可能对页面的交互性产生负面影响。
当我们谈论解析和编译变慢的时候，这是因为大众用户使用CPU和GPU速度较慢的手机，无L2 / L3缓存，甚至可能会受到内存限制。
在JavaScript启动性能中，我注意到在低端和高端硬件上解析〜1MB解压缩（简单）JavaScript的成本。在市场上最快的手机和普通手机之间解析/编译代码的时间有2-5倍的差异。
在高端的iPhone 8上，解析/编译CNN的JS需要花费大约4秒，而普通手机（Moto G4）则只需要13秒。这可以显着影响用户与本网站完全交互的速度。
使用HTTP Archive（最高500K站点）来分析移动设备上JavaScript的状态，我们可以看到，50％的站点需要14秒才能获得交互。这些网站花费长达4秒，只是解析和编译JS。
从网页中删除不重要的JavaScript可以减少传输时间，CPU密集型解析和编译以及潜在的内存开销。这也有助于让您的网页更快地交互。
执行时间处理时间
不仅仅是解析和编译，JavaScript执行（一次解析/编译运行代码）是在主线程上发生的操作。很长的执行时间也可以影响用户与网站互动的时间。
为了解决这个问题，JavaScript从小块中获益，避免锁定主线程。探索是否可以异步小矩阵策略解决JavaScript执行。（可参考乌镇互联网的人脸识别信息反馈达到0.6s）
减少JavaScript交付成本的模式
当你试图保持JavaScript的解析/编译和网络传输时间很慢时，有一些模式可以帮助像基于路由的分块或PRPL。
PRPL是一种通过积极的代码分割和缓存优化交互性的模式：
我们使用V8的运行时调用统计来分析流行移动网站和Progressive Web Apps的加载时间。正如我们所看到的，解析时间（以橙色显示）是许多这些站点花费时间的重要部分：
其他
JavaScript可以通过其他方式影响页面性能：
由于GC（垃圾收集），页面可能会出现突然或暂停。当浏览器回收内存时，JS执行被暂停，所以经常收集垃圾的浏览器可以比我们想要的更频繁地暂停执行。避免内存泄漏和频繁的gc暂停，以保持页面结束免费。
在运行时，长时间运行的JavaScript可以阻止主线程导致无响应的页面。将工作分成更小的部分（使用requestAnimationFrame（）或requestIdleCallback（）进行调度）可以最大限度地减少响应性问题。
如果您正在构建一个针对移动设备的网站，请尽可能在具有代表性的硬件上开发，保持较低的JavaScript分析/编译时间，并采用性能预算来确保您的团队能够关注其JavaScript成本。
