JavaScript 性能优化技巧分享

JavaScript 做为当前最为常见的直译式脚本语言，已经普遍应用于 Web 应用开发中。为了提升Web应用的性能，从 JavaScript 的性能优化方向入手，会是一个很好的选择。

本文从加载、上下文、解析、编译、执行和捆绑等多个方面来说解 JavaScript 的性能优化技巧，以便让更多的前端开发人员掌握这方面知识。

什么是高性能的 JavaScript 代码？

尽管目前没有高性能代码的绝对定义，但却存在一个以用户为中心的性能模型，能够用做参考：RAIL模型。

• 响应

若是你的应用程序能在100毫秒内响应用户的操做，那么用户会认为该响应为即时的。这适用于可点击的元素，不适用于滚动或拖动操做。

• 动画

在60Hz的显示器上，咱们但愿动画和滚动时每秒有60帧，这种状况下每帧大约为16ms。在这16ms的时间内，实际上只有8-10ms来完成全部工做，其他时间则由浏览器的内部和其它差别占据。

• 空闲工做

若是你有一个耗时好久，须要持续运行的任务时，请确保把它分红很小的块，以便容许主线程对用户的输入操做作出反应。不该该出现一个任务延迟超过50ms的用户输入。

• 加载

页面加载应该在1000毫秒内完成。在移动设备上，这是一个很难达到的目标，由于它涉及到页面的互动，而不只仅是在屏幕上渲染和滚动。

 

现代加载最佳实践（Chrome Dev Summit 2017）

 让咱们来看看一些统计数据：

• 若是移动网站的加载时间超过三秒，则会有53％的用户放弃访问

• 50%的用户但愿在不到2秒的时间内完成页面加载

• 77％的移动网站须要10秒以上的时间来加载3G网络

• 19秒是3G网络上移动站点的平均加载时间

 

代码内容

你可能已经注意到了，最大的瓶颈是加载网站所需的时间。具体来讲就是 JavaScript 的下载、解析、编译和执行时间。除了加载更少的 JavaScript 文件或者加载的更加灵活之外，看起来没有其它办法。

除去启动网站以外，JavaScript 代码又是如何实际工做的呢？

在进行代码优化以前，请考虑你当前正在构建的内容。你正在创建的是一个框架仍是一个 VDOM 库？你的代码是否须要每秒执行数千次操做？你是否正在作一个对时间要求较为严格的库来处理用户输入和/或动画？若是没有，你须要把时间和精力转移到更有影响力的地方。

编写高性能代码并非那么重要，由于对于宏观计划一般没有什么影响。50k ops/s 听起来好于 1k ops/s，但在大多数状况下总体时间并不会有所改变。

 

解析、编译和执行

从根本上说，大多数 JavaScript 的性能问题，并不在于运行代码自己，而是在代码开始执行以前必须采起的一系列步骤。

咱们在这里讨论抽象层次的问题。计算机上运行的大多数代码都是编译后的二进制格式。意思是说，除了全部的操做系统级别的抽象外，代码均可以在硬件上本地运行，不须要准备工做。

JavaScript 代码不是预编译的，它在浏览器上是可读的。

JavaScript 代码首先会被解析，也就是读取并转换成可用于编译的计算机索引的结构，而后再被编译成字节码，最后被编译成机器码，用于设备/浏览器执行。

另外一个很是重要的方面是：JavaScript 是单线程的，而且在浏览器的主线程上运行。这意味着一次只能运行一个进程。若是你的 DevTools 性能时间线充满×××峰值，同时 CPU 占用率达到100%，则将出现丢帧的状况。这是滚动操做常出现的，也是很讨厌的一种状况。

在 JavaScript 代码运行以前，须要完成全部的这些解析、编译和执行工做。在 ChromeV8 引擎中，解析和编译占 JavaScript 执行总时间的50％左右。

因此在这部分中，应该了解两件事情：

1. 虽然 JavaScript 解析的时间长度和包的大小不是彻底线性的，可是须要处理的 JavaScript 越少，则所花时间越少。

2. 你使用的每个 JavaScript 框架（React，Vue，Angular，Preact ...）都是另外一个抽象层次（除非它是一个预编译的）。这不只会增长你的包的大小，并且会让你的代码变慢，由于你不是直接与浏览器通讯的。

 

有些方法能够缓解这种状况，好比使用 service workers 在后台的另外一个线程中执行部分工做，或者使用 asm.js 编写更容易编译机器指令的代码。

咱们所能作的，就是避免使用 JavaScript 动画库。只有在使用常规的 CSS 转换和动画彻底没法实现时，才去使用这些库。

即便这些 JavaScript 动画库使用 CSS 转换，合成属性和 requestAnimationFrame( )，可是它们仍然运行在 JavaScript 的主线程上。基本上这些库会使用内联样式每16ms访问一次 DOM。你须要确保全部的 JavaScript 都在每帧8ms之内完成，才能保持动画的平滑性。

另外一方面，CSS 动画和转换会在主线程中运行，若是可以高效执行，则能避免从新布局/重排的状况出现。

考虑到大多数动画都在加载或用户交互的过程当中运行，这能够为你的 web 应用程序提供很是重要的调整空间。

web Animations API 是一个即将到来的功能集，它可以脱离主线程执行高性能的 JavaScript 动画。但就目前而言，还须要继续使用 CSS 转换等技术。

 

捆绑尺寸很是重要

如今已经再也不是在 </body> 结束标签以前包含有多个 <script> 的时代了。如今，能够在 npm 上找到各式各样的工具包，而且能够将这些工具包和 Webpack 捆绑在一个单个的 1MB 大小的 JavaScript 文件中，在完成数据计划时，提醒用户的浏览器进行爬取。

这样可使用更少许的 JavaScript，这也意味着你的项目可能再也不须要整个Lodash库。若是必须使用 JavaScript 库，也能够考虑使用 React 之外的东西，好比 Preact 或者 HyperHTML，它们只是 React 的1/20大小。

Webpack 3 有着神奇的功能，被称做代码分割和动态导入。它不会将全部 JavaScript 模块捆绑到一个 app.js 整包中，而是使用 import( ) 语法自动分割代码而且进行异步加载。

你不须要使用框架、组件和客户端路由，就能得到这些好处。你只须要简单地在主 JavaScript 文件中写入如下内容：

if (document.querySelector('.mega-widget')) {
    import('./mega-widget');
}

若是你的应用程序须要在页面上用到这个小部件，它将动态加载所需的支持代码。

另外，Webpack 须要运行时间来工做，并将其注入到它生成的全部 .js 文件中。若是使用该 commonChunks 插件，则可使用如下内容将运行时抽取到 Chunk 中：

new webpack.optimize.CommonsChunkPlugin({
  name: 'runtime',
}),

确保 Webpack 在主 JavaScript 包以前已完成加载，那么全部其它 chunk 中的运行时间会剥离到各自的文件中，这种状况也被成为 runtime.js。例如：

<script src="runtime.js">
<script src="main-bundle.js">

而后是编译代码和 polyfills 的部分。若是你正在编写现代 JavaScript 代码（ES6 +），则可使用 Babel 将其转换为 ES5 兼容的代码。与原生 ES6+ 代码相比，编译不只增长了文件的大小，还增长了复杂性，而且常常会出现性能降低的状况。

除此以外，你还极可能使用 babel-polyfill 软件包和 whatwg-fetch，来修复旧版本浏览器中的缺失功能。所以若是你正在编写 async/await，你还须要使用包 regenerator-runtime 的生成器来进行编译。

问题是，你为 JavaScript 软件包添加了近 100KB 的内容，这不只是一个巨大的文件，并且预示着巨大的解析和执行花费，以便可以支持旧版本的浏览器。

一种方法是建立两个独立的 bundle，并根据实际条件来加载它们。Babel 转换编译器在 babel-preset-env 的帮助下，会使同时面临新旧两种浏览器的状况更加容易处理。

一个并不规范但行之有效的方法，是将如下内容放在一个内联脚本中：

(function() {  try {    new Function('async () => {}')();
  } catch (error) {    // create script tag pointing to legacy-bundle.js;
    return;
  }  // create script tag pointing to modern-bundle.js;;})();

若是浏览器没法识别 async 函数，则会被认为是旧版本的浏览器，此时就会用到 polyfill 包。若是能识别，用户则将获得现代浏览器的处理。

JavaScript 开发工具推荐

SpreadJS 纯前端表格控件是基于 HTML5 的 JavaScript 电子表格和网格功能控件，提供了完备的公式引擎、排序、过滤、输入控件、数据可视化、Excel 导入/导出等功能，适用于 .NET、Java 和移动端等各平台在线编辑类 Excel 功能的表格程序开发。

结论

想要提升网站的运行速度，就须要确保网站能快速的加载 JavaScript 文件，以实现快速的互动。你的 JavaScript 代码应该被分红更小的、可管理的 bundle，同时尽量地进行异步加载。在服务器端，请确保启用了 HTTP 2.0，以便实现更快的并行传输和 gzip/Brotli 压缩，从而大大减小了 JavaScript 的传输大小。

原文连接：https://www.sitepoint.com/javascript-performance-optimization-tips-an-overview/

转载请注明出自：葡萄城控件