前端性能精进之浏览器（五）

　　JavaScript 是一种通过解释执行的高级编程语言，同时也是一门动态、弱类型的直译脚本语言，适合面向对象（基于原型）和函数式的编程风格。

　　直译语言可以直接在解释器中运行，而与直译语言相对应的编译语言（例如 C++），要先将代码编译为机器码，然后才能运行。

　　不过直译语言有一个弱点，就是如果有一条不能运行，那么下面的也不能运行了。

　　JavaScript 主要运行在一个内置 JavaScript 解释器的客户端中（例如 Web 浏览器），能够处理复杂的计算，操控文档的内容、样式和行为。

　　能在客户端完成的操作（例如输入验证、日期计算等）尽量都由 JavaScript 完成，这样就能减少与服务器的通信，降低服务器的负载。

　　JavaScript 作为现今前端开发最为核心的一部分，处理的不好就很容易影响网页性能和用户体验。

　　因此有必要了解一些 JavaScript 的代码优化。本文所用的示例代码已上传至 Github。

　　完整的JavaScript由3部分组成，如下所列：

　　对其优化，也会围绕这 3 部分展开。

1）相等运算符

　　相等（==）和全等（===）这两个运算符都用来判断两个操作数是否相等，但它们之间有一个最大的区别。

　　就是“==”允许在比较中进行类型转换，而“===”禁止类型转换。

　　各种类型之间进行相等比较时，执行的类型转换是不同的，在 ECMAScript 5 中已经定义了具体的转换规则。

　　下表将规则以表格的形式展示，第一列表示左边操作数“X”的类型，第一行表示右边操作数“Y”的类型。

　　在表格中，Number() 函数用简写 N() 表示，ToPrimitive() 函数用简写 TP() 表示。

　　当判断对象和非对象是否相等时，会先让对象执行 ToPrimitive 抽象操作，再进行相等判断。

　　ToPrimitive 抽象操作就是先检查是否有 valueOf() 方法，如果有并且返回基本类型的值，就用它的返回值；如果没有就改用 toString() 方法，再用它的返回值。

　　由于相等会进行隐式的类型转换，因此会出现很多不确定性，ESLint 的规则会建议将其替换成全等。

　　顺带说一句，弱类型有着代码简洁、灵活性高等优势，但它的可读性差、不够严谨等劣势也非常突出。

　　在编写有点规模的项目时，推荐使用强类型的 TypeScript，以免发生不可预测的错误。

2）位运算

　　在内存中，数字都是按二进制存储的，位运算就是直接对更低层级的二进制位进行操作。

　　由于位运算不需要转成十进制，因此处理速度非常快。

　　常见的运算符包括按位与（&）、按位或（|）、按位异或（^）、按位非（~）、左移（）等。

　　位运算常用于取代纯数学操作，例如对 2 取模（digit%2）判断偶数与奇数、数字交换，如下所示。

　　位掩码技术是使用单个数字的每一位来判断选项是否成立。注意，每项值都是 2 的幂，如下所示。

　　用按位左移（），例如 digit * 2 可以替换成 digit

　　虚拟 DOM 还有一大亮点，那就是将它与其他渲染器配合能够集成到指定的终端。

　　例如将 React 元素映射成对应的原生控件，既可以用 react-dom 在 Web 端渲染，还可以使用 react-native 在手机端渲染。

5）Service Worker

　　Service Worker 是浏览器和服务器之间的代理服务器，可拦截网站所有请求，根据自定义条件采取适当的动作，例如读取响应缓存、将请求转发给服务器、更新缓存的资源等。

　　Service Worker 运行在主线程之外，提供更细粒度的缓存管理，虽然无法访问 DOM，但增加了离线缓存的能力。

　　当前，正在使用 Service Worker 技术的网站有 google、微博等。

　　每个 Service Worker 都有一个独立于 Web 页面的生命周期，如下图所示，其中 Cache API 是指 CacheStorage，可对缓存进行增删改查。

　　在主线程中注册 Service Worker 后，触发 install 事件，安装 Service Worker 并且解析和执行 Service Worker 文件（常以 sw.js 命名）。

　　当 install 事件回调成功时，触发 activate 事件，开始激活 Service Worker，然后监听指定作用域中页面的资源请求，监听逻辑记录在 fetch 事件中。

　　接下来用一个例子来演示 Service Worker 的使用，首先在 load 事件中注册 Service Worker，如下所示。

　　因为注册的脚本是运行在主线程中的，为了避免影响首屏渲染，遂将其移动到 load 事件中。

　　sw.js 是一个 Service Worker 文件，将其放置在根目录中，这样就能监控整个项目的页面。若放置在其他位置，则需要配置 scope 参数，如下所示。

　　但是在访问 sw.js 时会报错（如下所示），需要给它增加 Service-Worker-Allowed 首部，然后才能在整个域中工作，默认只能在其所在的目录和子目录中工作。

　　在 sw.js 中注册了 install 和 fetch 事件（如下所示），都是比较精简的代码，caches 就是 CacheStorage，提供了 open()、match()、addAll() 等方法。

　　在 then() 方法中，当存在 response 参数时，就直接将其作为响应返回，它其实就是一个 Response 实例。

　　运行网页后，在 Chrome DevTools 的 Application 面板中的 Service Workers 菜单中，就能看到注册成功的 Service Worker，如下图所示。

　　在 Cache Storage 菜单中，就能看到添加的缓存资源，如下图所示。

　　关闭页面，再次打开，查看 demo.js 的网络请求，size 那列显示的就不是文件尺寸，而是 Service Worker，如下图所示。

　　worker.html 没有进行缓存，所以将请求转发给服务器。

　　2022 年 HTTP Archive 预估网站中 Service Worker 的使用率在桌面端和移动端分别有 1.63% 和 1.81%，从数据中可知，使用率并不高。

　　虽然 Service Worker 的兼容性除了 IE 之外，主流的浏览器都已兼容，但是在实际使用中，还是要慎重。

　　首先得做到引入 Service Worker 后带来某些方面的性能提升，但不能让另一些方面的性能降低，需要考虑成本和收益。

　　其次网页的运行不能依赖 Service Worker，它的作用只是锦上添花，而不是业务必须的。

　　对于不能运行 Service Worker 的浏览器，也要确保网页的呈现和交互都是正常的。

　　函数（function）就是一段可重复使用的代码块，用于完成特定的功能，能被执行任意多次。

　　它是一个 Function 类型的对象，拥有自己的属性和方法。

　　JavaScript 是一门函数式编程语言，它的函数既是语法也是值，能作为参数传递给一个函数，也能作为一个函数的结果返回。

　　与函数相关的优化有许多，本文选取其中的 3 种进行讲解。

1）记忆函数

　　记忆函数是指能够缓存先前计算结果的函数，避免重复执行不必要的复杂计算，是一种用空间换时间的编程技巧。

　　具体的实施可以有多种写法，例如创建一个缓存对象，每次将计算条件作为对象的属性名，计算结果作为对象的属性值。

　　下面的代码用于判断某个数是否是质数，在每次计算完成后，就将计算结果缓存到函数的自有属性 digits 内。

　　质数又叫素数，是指一个大于1的自然数，除了1和它本身外，不能被其它自然数整除的数。

　　适用于 mousemove、resize 和 scroll 事件。之前做过一个内部系统的表格，希望在左右滚动时能将第一列固定在最左边。

　　为了让操作能更流畅，在 scroll 事件中使用了节流技术，如下图所示。

　　值得一提的是，在未来会有一个 scrollend 事件，专门监听滚动的结束，待到浏览器支持，就可以不用再大费周章的节流了。

　　防抖（debounce）是指当调用动作 n 毫秒后，才会执行该动作，若在这 n 毫秒内又调用此动作则将重新计算执行时间，示例如下。

　　适用于文本输入的 keydown 和 keyup 两个事件，常应用于文本框自动补全。

　　节流与防抖最大的不同的地方就是在计算最后执行时间的方式上，著名的开源工具库 underscore 中有内置了两个方法。

　　JavaScript 并没有提供像 C 语言那样底层的内存管理函数，例如 malloc() 和 free()。

　　而是在创建变量（对象，字符串等）时自动分配内存，并且在不使用它们时自动释放，释放过程称为垃圾回收。

　　虽然垃圾回收器很智能，但是若处理不当，还是有可能发生内存泄漏的。

1）垃圾回收器

　　Node.js 是一个基于 V8 引擎的 JavaScript 运行时环境，而 Node.js 中的垃圾回收器（GC）其实就是 V8 的垃圾回收器。

　　这么多年来，V8 的垃圾回收器（Garbage Collector，简写GC）从一个全停顿（Stop-The-World），慢慢演变成了一个更加并行，并发和增量的垃圾回收器。

　　本节内容参考了 V8 团队分享的文章：Trash talk: the Orinoco garbage collector。

　　在垃圾回收中有一个重要术语：代际假说（The Generational Hypothesis），这个假说不仅仅适用于 JavaScript，同样适用于大多数的动态语言，Java、Python 等。

　　代际假说表明很多对象在内存中存在的时间很短，即从垃圾回收的角度来看，很多对象在分配内存空间后，很快就变得不可访问。

　　在 V8 中，会将堆分为两块不同的区域：新生代（Young Generation）和老生代（Old Generation）。

　　新生代中存放的是生存时间短的对象，大小在 1~ 8M之间；老生代中存放的生存时间久的对象。

　　对于这两块区域，V8 会使用两个不同的垃圾回收器：

　　无论哪种垃圾回收器，都会有一套共同的工作流程，定期去做些任务：

　　V8 为新生代采用 Scavenge 算法，会将内存空间划分成两个区域：对象区域（From-Space）和空闲区域（To-Space）。

　　副垃圾回收器在清理新生代时：

　　主垃圾回收器负责老生代的清理，而在老生代中，除了新生代中晋升的对象之外，还有一些大的对象也会被分配到此处。

　　主垃圾回收器采用了 Mark-Sweep（标记清除）和 Mark-Compact（标记整理）两种算法，其中涉及三个阶段：标记（marking），清除（sweeping）和整理（compacting）。

2）内存泄漏

　　内存泄漏（memory leak）是计算机科学中的一种资源泄漏，主因是程序的内存管理失当，因而失去对一段已分配内存的控制。

　　程序继续占用已不再使用的内存空间，或是存储器所存储对象无法透过执行代码而访问，令内存资源空耗，简单地说就是内存无法被垃圾回收。

　　下面会罗列几种内存泄漏的场景：

　　第一种是全局变量，它不会被自动回收，而是会常驻在内存中，因为它总能被垃圾回收器访问到。

　　第二种是闭包（closure），当一个函数能够访问和操作另一个函数作用域中的变量时，就会构成一个闭包，即使另一个函数已经执行结束，但其变量仍然会被存储在内存中。

　　如果引用闭包的函数是一个全局变量或某个可以从根元素追溯到的对象，那么就不会被回收，以后不再使用的话，就会造成内存泄漏。

　　第三种是事件监听，如果对某个目标重复注册同一个事件，并且没有移除，那么就会造成内存泄漏。

　　第四种是缓存，当缓存中的对象属性越来越多时，长期存活的概率就越大，垃圾回收器也不会清理，部分不需要的对象就会造成内存泄漏。

　　在实际开发中，曾遇到过第三种内存泄漏，如下图所示，内存一直在升。

　　要分析内存泄漏，首先需要下载堆快照（*.heapsnapshot文件），然后在 Chrome DevTools 的 Memory 面板中载入，可以看到下图内容。

　　在将堆快照做缜密的分析后发现，请求的 ma.gif 地址中的变量不会释放，其内容如下图所示。

　　仔细查看代码后，发现在为外部的 queue 对象反复注册一个 error 事件，如下所示。

　　将这段代码去除后，内存就恢复了平稳，没有出现暴增的情况，如下图所示。

　　本文首先分析了相等和全等两个运算符的差异，然后再介绍了几种位运算的巧妙用法。

　　再介绍了目前主流的几种 Web 存储，以及虚拟 DOM 解决的问题，并且讲解了 Service Worker 管理缓存的过程。

　　在第二节中主要分析了三种函数优化，分别是记忆函数、惰性模式、节流和防抖。

　　其中节流和防抖在实际项目中有着广泛的应用，很多知名的库也都内置这两个函数。

　　最后讲解了 V8 对内存的管理，包括垃圾回收，以及用一个实例演示了内存泄漏后简单的排查过程。