用户体验是 Web 产品最为重要的部分，而随着现代 Web 业务可供用户的交互行为越来越多，前端项目的复杂度越来越高，每个页面的渲染时间也必然越来越长，这就导致了用户的体验不佳，用户的操作变慢。尽可能的减少页面加载时间，更为流畅地展示用户所需求的内容，会是用户是否留存的关键因素。因此，性能优化是前端开发工程师中级工程师向高级工程师进阶的必学知识点，以及核心技能。

       前端性能优化大体分为两个方向，一个是加载时优化，一个是运行时优化。加载时优化一般包括：预加载、缓存、网络层、页面解析、静态资源。运行时优化一般包括：避免强制同步布局、长列表优化、避免js执行时间过长、并行计算-service worker、Composite分层绘制、滚动事件性能优化等。

       在页面渲染的过程，导致首屏加载速度慢的因素可能如下：（1）静态资源加载过多 （2）网络延时问题 （3）重复请求加载资源（4）加载脚本时，渲染内容堵塞

优化方法：

1.图片资源的压缩

图片资源虽然不在编码过程中，但它却是对页面性能影响最大的因素，对于所有的图片资源，我们可以进行适当的压缩处理，对页面上使用到的icon，可以使用在线字体图标，或者雪碧图，将众多小图标合并到同一张图上，用以减轻http请求压力。

2.Ui组件按需引入资源

以ElementUI组件为例，若项目中使用到的组件并非全部组件，那么我们没必要将全部组件一次性引入。如下：

import { Button, Input, Pagination, Table, TableColumn, MessageBox } from 'element-ui';

Vue.use(Button);

Vue.use(Input);

Vue.use(Pagination);

3.使用cdn引入

 减小打包的体积：在webpack设置中添加externals，忽略不需要打包的库。打包时，把vue、vuex、vue-router、axios等，换用国内的bootcdn直接引入到根目录的index.html。例如：

<script src="//cdn.bootcss.com/vue/2.2.5/vue.min.js"></script>

<script src="//cdn.bootcss.com/vue-router/2.3.0/vue-router.min.js"></script>

4.路由懒加载

路由懒加载指的是打包部署时将资源按照对应的页面进行划分，需要的时候加载对应的页面资源，而不是把所有的页面资源打包部署到一块。避免不必要资源加载。

// 非懒加载

import Home from '@/components/Home'

const routes = [

  {

    path: '/home',

    name: 'home',

    component: Home

  }

]




// vue异步组件 懒加载

{

  path: '/home',

  name: 'home',

  component: resolve => require(['@/components/home'], resolve)

}

5.组件重复打包处理

假设A.js文件是一个常用的库，现在有多个路由使用了A.js文件，这就造成了重复下载解决方案：在webpack的config文件中，修改CommonsChunkPlugin的配置minChunks: 3，minChunks为3表示会把使用3次及以上的包抽离出来，放进公共依赖文件，避免了重复加载组件。

6.对http请求的优化

采用HTTP缓存，设置Cache-Control，Last-Modified，Etag等响应头；

采用Service Worker离线缓存。