如何写好 JavaScript （二） ——《高性能 JavaScript》章节总结

秒速五厘米 2022-06-04 07:52 136阅读 0赞

## 6、加载和执行（Loading and Execution） ##

JavaScript 和用户界面更新在同一个进程中运行，因此一次只能处理一个事情。这意味着当 JavaScript 代码正在运行时，用户界面不能响应输入，反之亦然。高效地管理 UI 线程就是要确保 JavaScript 不能运行太长时间，以免影响用户体验。最后，请牢记住如下几点：

*  任何 JavaScript 任务都不应当执行超过 100 毫秒。过长的运行时间会导致 UI 更新出现明显的延迟，从而对用户体验产生负面的影响。
 *  JavaScript 运行期间，浏览器响应用户交互的行为存在差异。无论如何，JavaScript 长时间运行将导致用户体验变得混乱和脱节。
 *  定时器可以用来安排代码延迟执行，它使得你可以把长时间运行脚本分解成一系列的任务。
 *  Web Workers 是新版浏览器支持的特征，它允许你在 UI 线程外部执行 JavaScript 代码，从而避免锁定 UI。

Web 应用越复杂，积极主动地管理 UI 线程就越重要。即使 JavaScript 代码再重要，也不应该影响用户体验。

## 7、Ajax ##

高性能的 Ajax 包括以下方面：了解你项目的具体需求，选择正确的数据格式与之匹配的传输技术。

作为数据格式，纯文本和 HTML 只适用于特定场合，但它们可以节省客户端的 CPU 周期。XML 被广泛应用而且支持良好，但是它十分笨重且解析缓慢。JSON 是轻量级的，解析速度快（被视为原生代码而不是字符串），通用性与 XML 相当。字符风格的自定义格式十分轻量，在解析大量数据集时非常快，但需要编写额外的服务端程序，并在客户端解析。

当从页面当前所处的域下请求数据时，XHR 提供了最完善的控制和灵活性，尽管它会把接收到的所有数据当成一个字符串，且这有可能降低解析速度。另一方面，动态脚本注入允许跨域请求和本地执行 JavaScript 和 JSON 但是它的接口不那么安全，而且还不能读取头信息或相应代码。Multipart XHR 可以用来减少请求数，并处理一个响应中的各种文件类型，但是它不能缓存接收到的响应。当需要发送数据时，图片信标是一种简单而有效的方法。XHR 还可以用 POST 方法发送大量数据。

除了这些格式和传输技术，还有一些有助于加速你的 Ajax：

*  减少请求数，可通过合并 JavaScript 和 CSS 文件，或使用 MXHR。
 *  缩短页面的加载时间，页面主要内容加载完成后，用 Ajax 获取那么次要的文件。
 *  确保你的代码错误不会输出给用户，并在服务端处理错误。
 *  知道何时使用成熟的 Ajax 类库，以及何时编写自己的底层 Ajax 代码。

## 8、编程实践 ##

JavaScript 提出了一些独一无二的性能挑战，这与你组织代码的方式有关。随着 Web 应用变得越来越高级，包含的 JavaScript 代码也越来越多，各种模式和反模式也逐渐出现。为了编写更高效的代码，请牢记以下编程实践：

*  通过避免使用 eval() 和 Function() 构造器来避免双重求值带来的性能消耗。同样的，给 setTimeout() 和 setInterval() 传递函数而不是字符串作为参数。
 *  尽量使用直接量创建对象和数组。直接量的创建和初始都比非直接量形式要快
 *  避免做重复的工作。当需要检测浏览器时，可使用延迟加载或条件预加载。
 *  在进行数学计算时，考虑使用直接操作数字的二进制形式的位运算。
 *  JavaScript 的原生方法总比你写的任何代码都要快。尽量使用原生方法。

当本书涵盖了大量的计划技术和方法，当把这些方案应用在那些被频繁运行的代码上时，你将会看到显著的性能提升。

## 9、构建并部署高性能 JavaScript 应用 ##

构建与部署的过程对基于 JavaScript 的 Web 应用的性能有着巨大的影响。这个过程中最重要的步骤有：

*  合并 JavaScript 文件以减少 HTTP 请求数。
 *  使用 YUI Compressor 压缩 JavaScript 文件。
 *  在服务器压缩 JavaScript 文件（Gzip 编码）。
 *  通过正确设置 HTTP 响应头来缓存 JavaScript 文件，通过向文件名增加时间戳来避免缓存问题。
 *  使用 CDN （Content Delivery Network）提供 JavaScript 文件；CDN 不仅可以提升性能，它也为你管理文件的压缩与缓存。

所有这些步骤都应该自动处理，可以使用公开的工具，比如 Apache Ant，也可使用定制的工具来满足你的特定的需求。如果你使得构建过程工作起来，你将会显著提高那些依赖大量 JavaScript 的 Web 应用或网站的性能

## 10、工具 ##

当网页或 Web 应用变量时，分析从网络下载的资源以及分析脚本的运行性能能让你专注于那些最需要优化的地方。

*  使用网络分析工具找出加载脚本和页面中其他资源的瓶颈，这会帮助你决定哪些脚本需要延迟加载，或者需要进一步分析。
 *  尽管传统的经验告诉我们要尽量减少 HTTP 请求数，但把脚本尽可能延迟加载可以加快页面渲染速度，给用户带来更好的体验。
 *  使用性能分析工具找出脚本运行过程中速度慢的地方，检查每个函数所消耗的时间，以及函数被调用的次数，通过调用栈自身提供的一些线索找出需要集中精力优化的地方。
 *  尽管耗费的时间和调用的次数通常是数据中最有价值的部分，但仔细观察函数的调用过程，你也许会发现其他优化目标。

这些工具会帮助你深入了解你的代码在那些通常比较陌生的编程环境下是如何运行的。在开始优化工作之前使用它们，以确保开发时间用在刀刃上。