Vue应用的Time-to-Interactive (TTI) 优化：关键路径CSS与JS的加载策略 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

Vue 应用的 Time-to-Interactive (TTI) 优化：关键路径 CSS 与 JS 的加载策略

大家好！今天我们来聊聊 Vue 应用的性能优化，特别是如何优化 Time-to-Interactive (TTI)。 TTI，即"可交互时间"，指的是页面变得完全可交互的时间点。这个指标直接影响用户体验，一个 TTI 过长的应用会让用户感到卡顿和延迟，从而降低用户满意度。

优化的核心在于优化关键渲染路径 (Critical Rendering Path, CRP)，而 CRP 的优化重点在于 CSS 和 JavaScript 的加载策略。我们的目标是尽可能快地呈现首屏内容，并且让用户能够立即与页面进行交互。

1. 理解关键渲染路径 (CRP)

在深入优化策略之前，我们需要理解浏览器渲染页面的过程。浏览器接收到 HTML 文档后，会经历以下步骤：

构建 DOM 树 (DOM Tree): 解析 HTML 构建 DOM 树。
构建 CSSOM 树 (CSSOM Tree): 解析 CSS 构建 CSSOM 树。
渲染树 (Render Tree): 将 DOM 树和 CSSOM 树合并成渲染树。渲染树只包含需要显示的节点。
布局 (Layout): 计算渲染树中每个节点的几何位置。
绘制 (Paint): 将渲染树绘制到屏幕上。

在这个过程中， JavaScript 会阻塞 DOM 的构建和 CSSOM 的构建， CSS 会阻塞 JavaScript 的执行。因此，如何有效地加载和处理 CSS 和 JavaScript 就变得至关重要。

2. 关键路径 CSS (Critical CSS)

关键路径 CSS 是指首屏渲染所需的最小 CSS 集合。它的目的是尽可能快地呈现首屏内容，而无需等待所有 CSS 加载完成。

2.1 提取关键路径 CSS

手动提取关键路径 CSS 是一项繁琐且容易出错的任务。幸运的是，我们可以使用一些工具来自动完成这项工作。

在线工具: 比如 Critical CSS，只需要提供 URL，就可以生成关键路径 CSS。
webpack 插件: critical-css-webpack-plugin 是一个常用的 webpack 插件，它可以自动提取关键路径 CSS 并内联到 HTML 中。

2.2 critical-css-webpack-plugin 的使用示例

首先，安装插件：

npm install critical-css-webpack-plugin --save-dev

然后，在 vue.config.js 中配置插件：

const CriticalCssWebpackPlugin = require('critical-css-webpack-plugin');

module.exports = {
  configureWebpack: {
    plugins: [
      new CriticalCssWebpackPlugin({
        base: './dist',
        inline: true,
        src: 'index.html',
        dest: 'index.html',
        minify: true,
        extract: true,  // 是否提取非关键css
        penthouse: {
            blockJSRequests: false,
        }
      })
    ]
  },
  // 如果是多页面应用，需要在每个页面配置 CriticalCssWebpackPlugin
}

这个配置会将 dist/index.html 中的关键路径 CSS 提取出来，并内联到 HTML 中。同时，会将非关键 CSS 提取到一个单独的 CSS 文件中。

2.3 内联关键路径 CSS

将关键路径 CSS 内联到 <head> 标签中，可以避免浏览器在渲染首屏内容之前发起额外的 CSS 请求。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My Vue App</title>
    <style>
      /* 内联的关键路径 CSS */
      body {
        font-family: sans-serif;
        margin: 0;
      }
      .header {
        background-color: #f0f0f0;
        padding: 10px;
      }
    </style>
    <link href="/css/app.css" rel="stylesheet"> <!-- 非关键 CSS -->
  </head>
  <body>
    <div id="app"></div>
    <script src="/js/app.js"></script>
  </body>
</html>

2.4 非关键 CSS 的异步加载

非关键 CSS 可以采用异步加载的方式，避免阻塞首屏渲染。常用的方法包括：

rel="preload": 使用 <link rel="preload" as="style" href="app.css" onload="this.onload=null;this.rel='stylesheet'"/>。浏览器会优先下载 app.css，并在下载完成后将其应用到页面上。 onload 事件处理程序确保在 CSS 加载完成后，将 rel 属性设置为 stylesheet。这种方式的优点是浏览器可以尽早地发现 CSS 资源，缺点是部分浏览器支持不好。
JavaScript 动态加载: 使用 JavaScript 动态创建 <link> 标签，并将其插入到 <head> 中。这种方式兼容性好，但可能会增加代码的复杂性。

下面是一个使用 JavaScript 动态加载 CSS 的示例：

function loadCSS(url) {
  var link = document.createElement('link');
  link.rel = 'stylesheet';
  link.href = url;
  document.head.appendChild(link);
}

// 在页面加载完成后加载 CSS
window.addEventListener('load', function() {
  loadCSS('/css/app.css');
});

2.5 总结关键路径 CSS 的优化

优化策略	优点	缺点
提取关键路径 CSS	减少首屏渲染所需的 CSS 大小，加快首屏渲染速度。	需要工具支持，手动提取比较困难。
内联关键路径 CSS	避免额外的 CSS 请求，进一步加快首屏渲染速度。	增加 HTML 文件的大小，可能影响缓存效率。
异步加载非关键 CSS	避免非关键 CSS 阻塞首屏渲染，提高 TTI。	需要额外的代码来实现异步加载，可能增加代码的复杂性。

3. JavaScript 加载策略

JavaScript 的加载和执行也会严重影响 TTI。默认情况下， JavaScript 会阻塞 DOM 的构建和 CSSOM 的构建。因此，我们需要采用合适的加载策略来避免阻塞。

3.1 defer 和 async 属性

HTML 提供了 defer 和 async 属性来控制 JavaScript 的加载和执行。

defer: 带有 defer 属性的脚本会并行下载，但会按照它们在 HTML 中出现的顺序执行。 defer 脚本会在 DOMContentLoaded 事件触发之前执行。
async: 带有 async 属性的脚本会并行下载，并在下载完成后立即执行。 async 脚本的执行顺序是不确定的。

3.2 使用 defer 和 async 的原则

defer 适用于需要按照特定顺序执行的脚本，以及依赖于 DOM 的脚本。 例如， Vue 应用的入口脚本通常应该使用 defer 属性，因为它需要在 DOM 构建完成后才能执行。
async 适用于独立的脚本，例如统计分析脚本或广告脚本。 这些脚本的执行顺序不重要，它们不会阻塞 DOM 的构建和 CSSOM 的构建。

3.3 Vue 应用的 JavaScript 加载策略

在 Vue 应用中，通常会将入口脚本（例如 app.js）使用 defer 属性加载。其他的第三方库或组件可以根据实际情况选择 defer 或 async 属性。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My Vue App</title>
    <link href="/css/app.css" rel="stylesheet">
  </head>
  <body>
    <div id="app"></div>
    <script src="/js/app.js" defer></script>
  </body>
</html>

3.4 代码分割 (Code Splitting)

代码分割是将应用程序的代码分割成多个小的 chunk，从而减少初始加载的代码量。 Vue CLI 默认支持代码分割。

路由懒加载 (Route-based Splitting): 将不同的路由组件分割成不同的 chunk。当用户访问某个路由时，才会加载对应的 chunk。

// 路由配置
const routes = [
  {
    path: '/home',
    component: () => import('./components/Home.vue') // 懒加载
  },
  {
    path: '/about',
    component: () => import('./components/About.vue') // 懒加载
  }
];

按需加载组件 (Component-based Splitting): 将不常用的组件分割成单独的 chunk。当组件被使用时，才会加载对应的 chunk。

<template>
  <div>
    <button @click="loadComponent">加载组件</button>
    <component :is="dynamicComponent"></component>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dynamicComponent: null
    };
  },
  methods: {
    loadComponent() {
      import('./components/MyComponent.vue')
        .then(component => {
          this.dynamicComponent = component.default;
        });
    }
  }
};
</script>

3.5 Tree Shaking

Tree shaking 是一种移除 JavaScript 代码中未使用的代码的技术。 Webpack 和 Rollup 等构建工具都支持 tree shaking。通过 tree shaking，可以减少最终打包的代码体积，从而提高加载速度。

在使用第三方库时，尽量只引入需要的模块，避免引入整个库。例如，如果只需要 lodash 的 map 函数，可以这样引入：

import map from 'lodash/map'; // 引入 lodash 的 map 函数

而不是这样引入：

import _ from 'lodash'; // 引入整个 lodash 库 (不推荐)

3.6 预加载 (Preloading) 和预取 (Prefetching)

预加载 (Preloading): 告诉浏览器优先加载当前页面需要的资源。例如，可以预加载当前页面需要的 JavaScript chunk 或 CSS 文件。使用 <link rel="preload" as="script" href="/js/chunk.js">。
预取 (Prefetching): 告诉浏览器加载将来可能需要的资源。例如，可以预取用户访问频率较高的路由对应的 chunk。使用 <link rel="prefetch" href="/js/next-page.js">。

预加载和预取可以有效地提高用户体验，但需要谨慎使用，避免过度加载资源，导致带宽浪费。

3.7 总结 JavaScript 加载的优化

优化策略	优点	缺点
defer 和 async	避免 JavaScript 阻塞 DOM 的构建和 CSSOM 的构建，提高 TTI。	需要根据脚本的类型选择合适的属性，配置不当可能导致错误。
代码分割	减少初始加载的代码量，提高加载速度。	增加构建的复杂性，需要合理地划分 chunk。
Tree Shaking	移除未使用的代码，减少代码体积，提高加载速度。	需要构建工具的支持，需要遵循一定的编码规范才能更好地发挥作用。
预加载和预取	提前加载资源，提高用户体验。	需要谨慎使用，避免过度加载资源，导致带宽浪费。

4. 其他优化策略

除了 CSS 和 JavaScript 的加载策略，还有一些其他的优化策略可以帮助提高 TTI。

服务端渲染 (SSR): 在服务器端渲染页面，并将渲染好的 HTML 返回给客户端。这样可以加快首屏渲染速度，提高 SEO。 Vue 提供了 Nuxt.js 框架来实现 SSR。
缓存 (Caching): 使用浏览器缓存和 CDN 缓存可以减少资源加载时间。
压缩 (Compression): 使用 Gzip 或 Brotli 压缩可以减少资源体积，提高加载速度。
图片优化: 使用合适的图片格式（例如 WebP），压缩图片大小，使用懒加载等技术可以提高页面加载速度。
减少 HTTP 请求: 合并 CSS 和 JavaScript 文件，使用 CSS Sprites 等技术可以减少 HTTP 请求的数量。

5. 性能监控与分析

优化是一个持续的过程，我们需要定期监控和分析应用的性能，找出瓶颈并进行优化。

Lighthouse: Google Chrome 提供的 Lighthouse 工具可以分析页面的性能，并提供优化建议。
WebPageTest: WebPageTest 是一个在线的性能测试工具，可以模拟不同的网络环境和浏览器，测试页面的加载速度。
Google Analytics: Google Analytics 可以跟踪用户的行为，并提供有关页面加载时间和用户体验的数据。

6. 总结优化策略，提升Vue应用的交互体验

通过优化关键路径 CSS 和 JavaScript 的加载策略，以及采用其他优化策略，我们可以有效地提高 Vue 应用的 TTI，从而改善用户体验。合理利用工具和持续监控，可以进一步提升应用性能。

更多IT精英技术系列讲座，到智猿学院