Skip to main content

项目性能优化实践

本文以 Vue 项目为例，分别从代码层面优化、webpack 层面优化、基础的 Web 技术优化三个方面，概述常见的 Web 优化方式。其中一些优化方式是通用的，可以用到其他 SPA 框架开发的应用中。

代码层面的优化​

v-if 和 v-show 区分使用场景​

v-if 是真正的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建；也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

v-show 就简单得多，不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 的 display 属性进行切换。

所以，v-if 适用于在运行时很少改变条件，不需要频繁切换条件的场景；v-show 则适用于需要非常频繁切换条件的场景。

computed 和 watch 区分使用场景​

computed：是计算属性，依赖其它属性值，并且 computed 的值有缓存，只有它依赖的属性值发生改变，下一次获取 computed 的值时才会重新计算 computed 的值。

watch：更多的是观察的作用，类似于某些数据的监听回调 ，每当监听的数据变化时都会执行回调进行后续操作。

使用场景：

  • 当我们需要进行数值计算，并且依赖于其它数据时，应该使用 computed，因为可以利用 computed 的缓存特性，避免每次获取值时，都要重新计算。
  • 当我们需要在数据变化时执行异步或开销较大的操作时，应该使用 watch，使用 watch 选项允许我们执行异步操作，限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。这些都是计算属性无法做到的。

v-for 遍历必须为 item 添加 key，且避免同时使用 v-if​

列表渲染时，需要为每一项 item 设置唯一 key 值，方便 DOM Diff 时快速找到可以复用的节点，减少不必要的 DOM 操作，提升渲染性能。

v-for 比 v-if 优先级更高，如果每一次都需要遍历整个数组，将会影响速度，尤其是当之需要渲染很小一部分的时候，必要情况下应该替换成 computed 属性。

长列表性能优化​

Vue 会通过 Object.defineProperty 对数据进行劫持，来实现视图响应数据的变化，然而有些时候我们的组件就是纯粹的数据展示，不会有任何改变，我们就不需要 Vue 来劫持我们的数据，在大量数据展示的情况下，这能够很明显的减少组件初始化的时间。可以通过 Object.freeze 方法来冻结一个对象，一旦被冻结的对象就再也不能被修改了。

事件的销毁​

Vue 组件销毁时，会自动清理它与其它实例的连接，解绑它的全部指令及事件监听器，但是仅限于组件本身的事件。如果使用 addEventListene 等方式自定义事件，是不会自动销毁的，我们需要在组件销毁时手动移除这些事件的监听，以免造成内存泄露。如：

export default {
  created() {
    addEventListener('click', clickHandler, false);
  },
  beforeDestroy() {
    removeEventListener('click', clickHandler, false);
  },
};

图片资源懒加载​

对于图片过多的页面，为了加速页面加载速度，所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载，等到滚动到可视区域后再去加载。这样对于页面加载性能上会有很大的提升，也提高了用户体验。

我们在项目中可以使用 vue-lazyload 插件，或者通过 IntersectionObserver API 自定义实现。

路由懒加载​

Vue 是单页面应用，可能会有很多的路由引入 ，这样使用 webpcak 打包后的文件很大，当进入首页时，加载的资源过多，页面会出现白屏的情况，不利于用户体验。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应的组件，这样就更加高效了。这样会大大提高首屏显示的速度，但是可能其他的页面的速度就会降下来。

第三方插件的按需引入​

我们在项目中经常会需要引入第三方插件，如果我们直接引入整个插件，会导致项目的体积太大，我们可以借助 babel-plugin-component ，然后可以只引入需要的组件，以达到减小项目体积的目的。

优化无限列表的性能​

如果你的应用存在非常长或者无限滚动的列表，那么需要采用窗口化的技术来优化性能，只需要渲染少部分区域的内容，减少重新渲染组件和创建 dom 节点的时间。你可以参考以下开源项目 vue-virtual-scroll-list 和 vue-virtual-scroller 来优化这种无限列表的场景的。

Webpack 层面的优化​

压缩图片​

在项目中除了可以使用 url-loader 设置 limit 大小来对图片处理，对小于 limit 的图片转化为 base64 格式，其余的不做操作。所以对有些较大的图片资源，在请求资源的时候，加载会很慢，我们可以用 image-webpack-loader 来压缩图片。

减少 ES6 转为 ES5 的冗余代码​

Babel 插件会在将 ES6 代码转换成 ES5 代码时会注入一些辅助函数，例如下面的 ES6 代码：

class HelloWebpack extends Component{...}

这段代码再被转换成能正常运行的 ES5 代码时需要以下两个辅助函数：

babel-runtime/helpers/createClass  // 用于实现 class 语法
babel-runtime/helpers/inherits     // 用于实现 extends 语法

在默认情况下，Babel 会在每个输出文件中内嵌这些依赖的辅助函数代码，如果多个源代码文件都依赖这些辅助函数，那么这些辅助函数的代码将会出现很多次，造成代码冗余。为了不让这些辅助函数的代码重复出现，可以在依赖它们时通过 require('babel-runtime/helpers/createClass') 的方式导入，这样就能做到只让它们出现一次。babel-plugin-transform-runtime 插件就是用来实现这个作用的，将相关辅助函数进行替换成导入语句，从而减小 babel 编译出来的代码的文件大小。

提取公共代码​

如果项目中没有去将每个页面的第三方库和公共模块提取出来，则项目会存在以下问题：

  • 相同的资源被重复加载，浪费用户的流量和服务器的成本。
  • 每个页面需要加载的资源太大，导致网页首屏加载缓慢，影响用户体验。

所以我们需要将多个页面的公共代码抽离成单独的文件，来优化以上问题，这个操作称为分包。Webpack 内置了专门用于提取多个 Chunk 中的公共部分的插件 SplitChunksPlugin，通常我们是直接在 optimization.splitChunks 属性中配置来实现。

优化 SourceMap​

我们在项目进行打包后，会将开发中的多个文件代码打包到一个文件中，并且经过压缩、去掉多余的空格、babel 编译化后，最终将编译得到的代码会用于线上环境，那么这样处理后的代码和源代码会有很大的差别，当有 bug 的时候，我们只能定位到压缩处理后的代码位置，无法定位到开发环境中的代码，对于开发来说不好调式定位问题，因此 sourceMap 出现了，它就是为了解决不好调式代码问题的。

SourceMap 的可选值有很多，不同的配置也存在较大的差异，我们通常会根据不同的场景选择不同的配置。开发环境推荐使用 cheap-module-eval-source-map 配置，生成环境推荐使用 cheap-module-source-map 配置。

构建结果输出分析​

Webpack 输出的代码可读性非常差而且文件非常大，让我们非常头疼。为了更简单、直观地分析输出结果，社区中出现了许多可视化分析工具。这些工具以图形的方式将结果更直观地展示出来，让我们快速了解问题所在。项目中通常会选择使用 webpack-bundle-analyzer 插件生成分析报告，然后根据报告选择性优化一些对构建性能影响较大的点。

Web 层面的优化​

开启 gzip 压缩​

gzip 是 GNUzip 的缩写，最早用于 UNIX 系统的文件压缩。HTTP 协议上的 gzip 编码是一种用来改进 web 应用程序性能的技术，web 服务器和客户端（浏览器）必须共同支持 gzip。目前主流的浏览器，Chrome，firefox，IE 等都支持该协议。常见的服务器如 Apache，Nginx，IIS 同样支持，gzip 压缩效率非常高，通常可以达到 70% 的压缩率，也就是说，如果你的网页有 30K，压缩之后就变成了 9K 左右。

浏览器缓存​

为了提高用户加载页面的速度，对静态资源进行缓存是非常必要的，根据是否需要重新向服务器发起请求来分类，将 HTTP 缓存规则分为两类：强缓存、协商缓存。推荐阅读深入理解 HTTP 缓存机制及原理 。

CDN 的使用​

浏览器从服务器上下载资源文件时都要和服务器连接，而大部分服务器的带宽有限，如果超过限制，网页就半天反应不过来。而 CDN 可以通过不同的域名来加载文件，从而使下载文件的并发连接数大大增加，且 CDN 具有更好的可用性，更低的网络延迟和丢包率。

使用 Chrome Performance 查找性能瓶颈​

Chrome 的 Performance 面板可以录制一段时间内的 js 执行细节及时间。使用 Chrome 开发者工具分析页面性能的步骤如下。

  1. 打开 Chrome Performance 面板
  2. 点击 Record 开始录制
  3. 刷新页面或展开某个节点
  4. 点击 Stop 停止录制