你好，我是大圣，欢迎进入课程的第 18 讲。

在上一讲中，我们聊了项目中的权限设计，相信你对 Vue 项目中如何设计，以及如何实现权限都有了自己的心得。今天，我们来聊一下 Vue 项目中的另外一个难点：性能优化。性能优化是一个老生常谈的话题，如果你是前端从业者，那么无论是求职的简历，还是晋升的 PPT，性能优化相关的内容都是不可或缺的。

那么在 Vue 项目中，我们应该如何做性能优化呢？下面，我们会先从 Vue 项目在整体上的执行流程谈起，然后详细介绍性能优化的两个重要方面：网络请求优化和代码效率优化。不过，在性能优化之外，用户体验才是性能优化的目的，所以我也会简单谈一下用户体验方面的优化项。最后，我还会通过性能监测报告，为你指引出性能优化的方向。

用户输入 URL 到页面显示的过程

我们先来聊一个常见的面试题，那就是用户从输入 URL，然后点击回车，到页面完全显示出来，这一过程中到底发生了什么？

通过下图，我们可以从前端的视角看到从输入 URL 到页面显示的大致过程：

简单来说，就是用户在输入 URL 并且敲击回车之后，浏览器会去查询当前域名对应的 IP 地址。对于 IP 地址来说，它就相当于域名后面的服务器在互联网世界的门牌号。然后，浏览器会向服务器发起一个网络请求，服务器会把浏览器请求的 HTML 代码返回给浏览器。

之后，浏览器会解析这段 HTML 代码，并且加载 HTML 代码中需要加载的 CSS 和 JavaScript，然后开始执行 JavaScript 代码。进入到项目的代码逻辑中，可以看到 Vue 中通过 vue-router 计算出当前路由匹配的组件，并且把这些组件显示到页面中，这样我们的页面就完全显示出来了。而我们性能优化的主要目的，就是让页面显示过程的时间再缩短一些。

性能优化

从用户输入 URL 到页面显示的过程这个问题，包含着项目页面的执行流程。这个问题之所以重要，是因为我们只有知道了在这个过程中，每一步都发生了什么，之后才能针对每一步去做网络请求的优化，这也是性能优化必备的基础知识。

网络请求优化

对于前端来说，可以优化的点，首先就是在首页的标签中，使用标签去通知浏览器对页面中出现的其他域名去做 DNS 的预解析，比如页面中的图片通常都是放置在独立的 CDN 域名下，这样页面加载首页的时候就能预先解析域名并把结果缓存起来 。

因为极客时间首页没做这个优化，所以我们以淘宝网的首页为例进行分析。你可以在淘宝的首页源码中看到下图所示的一列 dns-prefetch 标签，这样首页再出现 img.alicdn.com 这个域名请求的时候，浏览器就可以从缓存中直接获取对应的 IP 地址。

项目在整体流程中，会通过 HTTP 请求加载很多的 CSS、JavaScript，以及图片等静态资源。为了让这些文件在网络加载中更快，我们可以从后面这几方面入手进行优化。

首先，浏览器在获取网络文件时，需要通过 HTTP 请求，HTTP 协议底层的 TCP 协议每次创建链接的时候，都需要三次握手，而三次握手会造成额外的网络损耗。如果浏览器需要获取的文件较多，那就会因为三次握手次数过多，而带来过多网络损耗的问题。