基于VUE的SPA单页应用开发－加载性能篇

Posted 2021-05-01 爱又米前端

1、基于异步数据的vue页面刷新

先看看基于异步数据的vue页面刷新后，都发生了啥～

如图所示：

图1 基于异步数据的vue页面刷新 网络请求图

步骤如下：
step1：请求页面；
step2：请求页面内的css、js资源；
step3：vue页面初始化；
step4：页面渲染，框架呈现［无数据内容］；
step5：请求页面实际数据；
step6：数据ready，填充视图，图片资源加载；
step7：完整页面呈现。

步骤分析：

step1：请求html文件；

step2：请求资源；优化点：

• a、多次访问的资源缓存：可从MD5、组件打包方式等角度再细分;

• b、app框架资源预加载：如果是hybird开发的app，可通过app框架预加载的方式，将单页应用的资源提前缓存。

    单页的css、js资源，与传统页面的资源相比，规模要大很多。其集合了几乎单页应用的所有css、js文件，随着应用的规模大小成正比增长。合理的缓存处理，将大大提升页面加载速度。a、b两点可实现性能加速的原因是，本地加载过的资源，会缓存在本地；页面请求资源时，浏览器会先查找缓存，如果有缓存，则本地取，节省了网络请求。［可了解浏览器的强缓、弱缓］

step3：页面初始化；优化点：利用v-if指令按需加载组件～

    由于vue在初始化过程中，会深度查找子组件，生成依赖，构建虚拟DOM，所以其初始化时间相对较长；不过在查找过程中，遇到v-if为false的组件，将停止深度查找，从而节省初始化时间。由此可通过控制v-if的布尔值，实现性能优化和组件的按需加载。例如在初始化过程中，仅首屏必须的组件v-if=true，其他组件［如非首屏组件、弹窗组件等］，可在下一事件循环中［通过setTimeout(fn, 0)等异步操作可实现］，或者首屏资源加载完成后，开启。

step4：默认数据页面渲染；（默认数据由vuex提供）
优化点：无数据的页面框架的渲染展现［通常所说的灰框］，让用户提前感知页面，从而提升用户体验；（包括读取vuex数据，进行渲染）

step5：异步请求数据，与step4同时进行，通过ajax实现；

step6：资源加载；
    优化点：进行图片［视频］分批加载优化，从而增加同一带宽下单图的加载速度，加速首屏展现。
建议图片加载流程：

• step6-1：首屏展现必须图片加载及首屏默认图片；［如：banner图第一张］；

• step6-2：首屏其余图片加载及其他默认图片；［如：剩余的banner图］；

• step6-3：非首屏 or 弹窗。［接下来的加载顺序，可根据需求调整。但要遵循一条原则，不影响首屏的用户交互。］

2、基于异步数据的vue页面的路由跳转

再来看看通过单页路由跳转到新页，又发生了什么？

图2 基于异步数据的vue页面路由跳转 网络请求图

页面加载步骤：
step1：捕获到路由变化；
step2：初始化该页面，并默认数据渲染；（包括读取vuex数据，进行渲染）［step3、step4］
step3：异步请求最新的初始化数据；［同step5］
step4：资源分批预加载。［同step6］

总结：

优势：页内跳转性能非常赞。对比图1和图2，在路由内跳转时减少了图1中step1、step2的页面请求和.css、.js的请求时间［节省1s＋］，页面展现嗖嗖的。再好好结合vuex的数据流，可以给用户非常棒的体验。

劣势：再观察图1的网络请求图，可以发现以下几点：

• a、css、js资源相对传统页面，量更大，加载时间加长；

• b、vue的首屏展现，依赖异步数据的请求，相对传统同步页面，增加了单独的数据请求时间消耗；

• c、页面渲染，在js执行完毕之后，才开始进行；而最终的首屏展现，则需要等待异步数据请求到达之后。

    由于a、b的存在，c的首屏展现时间相对传统页面更慢。

VUE的异步单页应用优势与劣势非常明显，缺点是初始化时间长，依赖js资源的加载；优势是运行速度快，路由内跳转几乎没太多的时间消耗。如果是一定规模大小的单页应用，它将是不错的选择。特别是使用hybird开发，通过app框架将资源预加载之后，需依赖js资源的劣势也必将不存在，那将给到用户传统页面无法给到的体验。

Q：那有什么办法来解决这些劣势吗？
A：在接下来的3中，将提出一种解决方案。

3、提速方案

对于a点，资源量大，可以从打包方式、缓存、CDN分发等角度进行处理；
对于b点，有两种方式解决：
1、同步＋异步数据请求：刷新页面时，使用同步MVC框架的方式，通过后台路由带入初始化数据；页内路由跳转时，仍然采用异步的方式进行。
2、异步数据请求提前：刷新页面时，将数据请求提前至js资源加载前，由于网络请求可并发多个，将节省单独的数据请求时间。

tips：如果不是mvvm的异步单页，推荐使用同步＋异步的方式，页面的展现可以提前至js资源加载之前。［由于mvvm框架下的页面视图通过数据进行驱动，该驱动的基本需要依赖js脚本实现，所以必须等待js加载完毕，才能正确展现页面。因此，在mvvm框架下，同步＋异步的方式仅能节省数据请求时间，但其他单页应用可以节省数据请求时间＋js资源加载时间］
ps：js的加载顺序：不影响页面初始化呈现的js底部后置：如日志、分享、im的相关js。

4、初始化性能优化［可用于加速首屏呈现］

如下示例：

<app>
    <app-nav></app-nav>
    <app-content></app-content>
    <app-sidebar></app-sidebar>
</app>

其页面结构与组件结构关系图如下：

vue初始化的组件编译原则是，按照深度查找，遇到v-if为false的节点或者叶子节点，停止查找。从示例的组件结构图，我们可以看出，
初始化中组件查找过程为：

• step1：首先查找根节点的子组件nav组件，其为叶子节点，编译，返回；

• step2：查找app的第二个子组件（节点）content，其非叶子节点，且无v-if标记，继续深度查找；查找其子节点c-a组件，为叶子节点，编译，返回content；查找另一个子节点c－b组件，叶子节点，编译，返回；

• step3：节点content查找完毕；返回app，查找sidebar节点，sidebar非叶子节点，且无v-if，继续深度查找；同step2，最终返回app节点。

• step4：所有组件编译完毕，初始化完毕，渲染。
  如上示例，将深度遍历所有子组件，再完成渲染。如果将首屏不需要展现的组件设置成v-if，将降低深度查找的复杂度，从而加速组件初始化，加速页面的呈现。

加速代码如下：

<app>
    <app-nav></app-nav>
    <app-content v-if="showContent"></app-content>
    <app-sidebar v-if="showSidebar"></app-sidebar>
</app>

new Vue({
    data: {
        showContent: false,
        showSidebar: false
    },
    created () {
        // 显示content
        setTimeout(() => {
            this.showContent = true;
        }, 0);
        // 显示sidebar
        setTimeout(() => {
            this.showSidebar = true;
        }, 0);
    }
});

以上代码将组件content与sidebar的v-if设置成false，组件的编译查找过程如下：

• step1：不变；

• step2：查找content组件，其为v-if＝false，停止，并返回根节点；

• step3：查找sidebar组件，其为v-if＝false，停止，并返回根节点；

• step4：所有组件编译完毕，初始化完毕，渲染。

是不是快了很多～～由此，首先被渲染，出现的是nav组件结构；另外两个组件通过showContent，showSidebar控制。

为何这里使用setTimeout(fn, 0)控制两个组件的状态变化呢？

因为setTimeout是时间异步处理模块，通过其设置，相应的处理方法将在下一事件循环中才被执行，而VUE的渲染时机为本次主线程执行完毕。如此，使得另外两个组件的编译推迟到首次渲染之后，从而实现组件加速。

tips：这里需要注意，不是将组件设置v-if＝false就可以了，要看看v-if＝true的开启时机，如果是同一事件循环中被开启，便没有意义了。因为vue的数据驱动渲染时机，是同一事件循环中的代码全部执行完毕之后，拿到数据的最终状态才进行。同时，setTimeout(fn, 0)也不可乱用。

附加：图片分批预加载的js脚本

参数说明：
auto: 是否自执行
imgs: 需预加载的图片列表，为二维表
ignore：在自执行过程中，需要跳过的图片批次脚标
firstSetReady: 第一组图片完成加载以后，置为true，便于外部掌握状态［一般首屏资源为第一组图片］
finished: 所有图片资源加载完毕
说明：
非自执行的需求，可直接调用loadOneSetImages方法，返回值为promise

let co = require('co')
class Preload {
    // 定义构造函数的数据结构，创建实例对象时，自动初始化
    constructor(auto, imgs = [], ignore = []) {
        this.imgs = imgs;
        this.ignore = ignore;
        this.auto = auto;
        this.firstSetReady = false;
        this.finished = false;
        this.init();
    }

    // 初始化函数
    init() {
        let me = this
        // 如果自动执行，则调用co模块，自动加载资源
        if (this.auto) {
            // generator的自执行函数，资源加载完毕时，参数finished置为true
            co(this.autoExeImageStream.call(this)).then(function() {
                console.log('资源加载完毕～')
                me.finished = true
            }).catch(function() {
                console.log('资源加载出错～')
                me.finished = true
            })
        }
    }

    // 同步加载分批图片资源，使用generator函数，完成当前批次加载，再启动下一批次的加载
    * autoExeImageStream() {
        let rstList = []
        for (let i = 0; i < this.imgs.length; i++) {
            if (this.ignore.indexOf(i) == -1) {
                yield this.loadOneSetImages(this.imgs[i], i)
            }
        }
    }

    // 加载一个批次的图片资源，当前批次所有图片加载完毕后，将firstSetReady置为true；表示第一组图片加载完毕
    loadOneSetImages(imgList, i) {
        let promiseList = []
        let me = this
        imgList.forEach(function(item, index) {
            promiseList.push(me.loadSingleImage(item))
        })
        return Promise.all([...promiseList]).then(function() {
            me.firstSetReady = true
        }).catch(function() {
            me.firstSetReady = true
        })
    }

    // 加载图片资源的函数，每个图片单独设置primise
    loadSingleImage(src) {
        if (!src) {
            return new Promise(function(resolve, reject) {
                resolve('noImage')
            })
        }
        let newImg = new Image()
        newImg.src = src
        return new Promise(function(resolve, reject) {
            newImg.onload = function() {
                this.total++;
                resolve('success')
            }
            newImg.onerror = function() {
                reject('fail')
            }
        })
    }
}
export default Preload;

调用：this.preloadObj = new Preload(true, imgs)

图片分批预加载脚本通过ES6 promise结合generator函数实现，使得图片按照我们想要的方式顺序加载，且单批次速度更快。但不能滥用，需要留意图片资源的加载规模与用户交互操作之间的关系。由于，ES6 的 promise在事件循环中的消息处理级别高于DOM事件［or 网络请求等其他异步模块］，当有 promise 消息要处理时，其他事件消息将等待，直到promise处理完毕。因此在使用其进行预加载时，一定要结合业务情况及预加载的需求进行设置。如有需要可以创建多个preload实例，通过一定的条件，触发图片预加载，将其进行分散，从而达到性能加速的同时，用户交互体验也不受影响。