Vue实现前端页面缓存、分页记忆、性能最大化之终结篇！

前言：

前端性能优化是每个开发人员老生常谈的一个话题，每次在面试的时候也不乏被问到。如今前端已经发展成一个庞大的体系，HTML、CSS、JavaScript、Image等媒体文件的加载、编译无时不刻的影响着浏览器的性能。前端性能优化是复杂繁琐的，针对方方面面的资源都有不同的方式。那么，前端优化的目的是什么 ？

1. 从用户角度而言：能够使用户感觉网站打开很快、每次的操作响应很快，才能够给用户提供更的交互体验；
　　2. 从服务商角度而言：降低服务器处理压力、减小请求所占带宽，才能够节省可观的资源；
　　综上所述，快就完了！

优化：

性能优化无非就是让页面的打开速度更快一些，以得到更好的用户体验。

一、页面级别的优化，比如减少 http 请求次数、加快资源的加载速度，这一点在使用以nodeJS为中间层的Vue身上体现的淋漓尽致，webpack、babel已经几乎最大化完善了打包加载速度；

二、代码级别的优化，页面每次的渲染都会经过浏览器的重排、重绘这两部操起很是耗时间，所以减少页面的渲染次数能从根本上解决产品性能问题。Vue的虚拟DOM解决了由于真实DOM过多带来的性能损耗、数据操控DOM也大大减少性能的损耗，可以说Vue在产品性能上做了很大的贡献。

组件缓存：keep-alive

以后台管理项目为例，界面大致分为header、sidebar、content三大主体部分，为了不浪费浏览器资源通常会把header、sidebar作为共用组件，每次只对用户更新content部分，这极大减少了浏览器渲染、提高了用户打开产品的速度。

但认真思考 我们的content部分真的就不你那个再优化了吗？可能你真的会说不能了，content再优化就成静态页面了，还怎么交互？这时候Vue就有了组件缓存的概念：keep-alive

场景 ①：

content部分 现有 A页面 与 B页面，从A页面进入B页面进行数据交互之后 > 又返回到A页面，那么A页面渲染了多少次呢？答案肯定是两次，那么在这两次渲染之间我们并没有对A页面进行任何操作为什么要多余渲染一次呢？很明显前端优化问题他脚踏祥云又来了~_~

使用keep-alive解决方案：

效果预览：（受压缩泛黄）

效果图：初始页面A > 进入B页面（开始请求表格数据）> 表格展示数据 > 跳回A页面 > 回到B页面时表格数据直接展示，说明没有重新去发送http向后台拿数据，此时keep-alive生效，再看network里面的确没有进行二次请求服务器。

------------ 场景一结束 ------------

场景②：

思考：场景一真的没有问题吗？假设页面A有一条数据与页面B有关联，但是这条数据存储于服务器，如果我们在页面A修改了这条数据，那么返回页面B一定是被缓存之前的数据，这就是问题所在；

解决：使用activated钩子函数，没见过这个钩子？不必惊慌，当keep-alive缓存组件被激活时，对应的created、mounted等都不会二次调用，恰好我们获取表格数据的请求就是在mounted时调用的。相反activated（激活时）、deactivated（停用时）这两个钩子函数被激活。那么我们可以直接将mounted替换为activated，前提是该组件允许被缓存，才会触发activated钩子函数。

  //缓存组件 钩子被激活
  activated() {
    this.getTableData();
  },

效果预览：（受压缩泛黄）

 效果图：初始页面A > 进入B页面（开始请求表格数据）> 表格展示数据 > 跳回A页面 > 回到B页面时再次请求表格数据，但是按钮组件、搜索组件、分页组件等都没有被重新渲染，且分页状态为上一次离开B的状态，此时keep-alive生效，仅仅重新请求了表单的数据，除表单之外的所有组件均被成功缓存。

------------ 场景二结束 ------------

---

如果我的博客帮助你解决了开发问题，请不要吝啬你的小红心哦！❤  

---