前端性能优化技巧

一. 代码层面的优化

1.1、适当的场景下采用keep-alive缓存组件

1.2、合理使用v-if和v-show

v-if 当值为false时内部指令不会执行，具有阻断功能，v-if会引发浏览器的重绘和回流, v-show只会引发重绘, 很多情况下使用v-if替代v-show

1.3、v-for和v-if 避免一起使用

（1）vue循环中key的取值建议使用数据id，相比index更能保证数据的唯一性, 更好的触发vue虚拟dom, 采用就地复用策略。
（2）v-for每次会深层遍历数组, 尤其只渲染很小一部分的时候，必要情况下应该替换成 computed 属性。

1.4、长列表冻结

data中的所有数据都会被劫持，所以将数据尽可能扁平化，如果数据只是用来渲染可以使用 Object.freeze，可以将数据冻结起来，这样就不会增加getter和setter

1.5、拆分公共组件

尽可能拆分组件，来提高复用性、增加代码的可维护性，减少不必要的渲染。因为组件粒度最细，改组件的数组，它只会渲染当前的组件。

1.6、路由懒加载

造成进入首页时，需要加载的内容过多，时间过长，会造成长时间的白屏，即使做了loading也是不利于用户体验，
而运用路由懒加载则是通过异步的方式, 需要的时候调用该函数，可以有效的分担首页所承担的加载压力，减少首页加载所用时长

const router = new VueRouter({
 routes: [
    { path: '/login', component: ()=> import('@/views/login/index.vue')},
    { path: '/home', component: import('@/views/home/home.vue')}
  ]

1.7、图片懒加载

① 安装

npm install vue-lazyload --save-dev

② 引入

import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload)

③ 配置

Vue.use(VueLazyload, {
	preLoad: 1.1,
	loading: 'dist/loading.gif',
	attempt: 1
})

④ 使用

<img v-lazy="/images/loading.png">

1.8、computed 和 watch 区分使用场景

computed 计算属性: 根据依赖的值计算出来新值，该值会缓存下来，当依赖的值变化，会重新计算 watch 侦听器: 监听数据变化执行后续操作computed 能完成，watch 都可以完成
watch 能完成，computed 不一定能完成，比如异步操作
能用computed的地方尽量使用计算属性,因为有缓存

1.9、关于数据存放

页面需要响应式的数据放在data中，其他非响应式数据不需要放在data中，data中的数据都会增加getter和setter，会收集对应的 watcher，这样就会降低性能。

2.0、服务端渲染

使用服务端渲染（SSR）或静态网站生成器：对于需要更高性能的页面，考虑使用服务器端渲染或静态网站生成器，以在服务器端生成页面内容，减少客户端的渲染工作。

2.1、尽量使用css3动画：

合理使用requestAnimationFrame动画代替setTimeout。

2.2、避免使用table：

避免在页面的主体布局中使用table, table要等其中的内容完全下载以后才会显示出来, 显示比div+css布局要慢

二. 打包层面的优化

1.1、引入cdn

在exrernals排除依赖, 在index.html 中引入cdn资源
这样可以减少包体积, 让静态资源加载更快, 减少首屏渲染时间

1.2、开启gzip压缩

(1) 安装插件

npm install compression-webpack-plugin -D

(2) 第二步找到项目config文件下的index.is文件,把productionGzip更改为true
(3) 然后在vue.config.js文件中配置

1.3、tree-shaking

本质上是通过分析静态的 ES 模块，来移除未使用代码的。 依赖于ES2015模块系统中的静态结构特性，例如import和export，js的tree shaking主要通过uglifyjs来完成，css的tree shaking通过purify css来实现, tree-shaking的具体实现一般是由压缩器提供实现, 如webpack默认的压缩工具 terser-webpack-plug就支持tree-shaking.

三. 性能优化

1.1、缓存利用

缓存Ajax，使用CDN、外部 JavaScript和CSS文件缓存，添加 Expires头，在服务器端配置Etag，减少DNS查找等。

1.2、减少数据库操作, 减少磁盘IO, 向前端优化

缓存DOM节点查找的结果，减少I/O读取操作, 对普通的网站尽量向前端优化,
减少数据库操作, 减少磁盘IO, 向前端优化指的是: 在不影响功能的前提下, 能在浏览器执行的不要在服务端执行, 能缓存在服务器上直接返回的,不要应用到服务器, 本机能取得的尽量不要远程获取, 内存能取到的不要磁盘取, 缓存中有的尽量不去数据库查询, 减少数据库操作指减少更新次数, 缓存结果减少查询次数, 减少磁盘IO指尽量不使用文件系统作为缓存, 减少读写文件次数等

1.3、避免css表达式

CSS表达式就是动态的设置css属性，因为 CSS 表达式太强大了，以至于CSS 表达式带来的严重的性能问题:”为了确保有效性，CSS 表达式会进行频繁的求值”，到底有多频繁? 就是在你改变窗口大小，滚动页面甚至移动鼠标都会触发表达式进行求值，如此频繁的求值以至于浏览器的性能收到严重的影响;

1.4、图片预加载

将样式表放在顶部, 将脚本放在底部, 加上时间戳

四. 在某些特性条件下的优化

1.1、 在渲染几万条数据时, 页面不卡顿

createDocumentFragment:创建一个 虚拟的DOM节点, 它包含各种类型的节点，在创建之初是空的。
DocumentFragment (文档碎片):虚拟的DOM节点不属于文档树，继承的parentNode属性总是null。

    当请求把一个DocumentFragment(虚拟的DOM节点)插入文档树时，插入的不是DocumentFragment自身，而是它的所有子孙节点，即插入的是括号里的节点。这个特性使得DocumentFragment成了占位符，暂时存放那些一次插入文档的节点。它有利于实现文档的剪切、复制和粘贴操作。
    另外，当需要添加多个dom元素时，如果先将这些元素添加到DocumentFragment中，再统一将DocumentFragment添加到页面，会减少页面渲染dom的次数，效率会明显提升。

requestAnimationFrame(请求动画帧):
    window.requestAnimationFrame() 告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行
requestAnimationFrame 比起 setTimeout、setInterval的优势主要有两点:
1、requestAnimationFrame 会把每一帧中的所有DOM操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率，一般来说，这个频率为每秒60帧
2、在隐藏或不可见的元素中，requestAnimationFrame将不会进行重绘或回流，这当然就意味着更少的的cpu，gpu和内存使用量.