【Web性能优化】在Vue项目中使用defer优化白屏，秒加载！

历史小剧场

相对而言，流芳千古的钱谦益先生，就有点儿区别了，除了家产外，也很能挣钱（怎么来的就别说了），经常出没红灯区，六十岁多了，还娶了柳如是，明朝亡时，说要跳河殉国，脚趾头都还没下去，就缩了回来，说水冷，不跳了，就投降了清朝。----《明朝那些事儿》

浅谈script标签上的defer和async

1. 当没有defer属性，也没有async属性

浏览器在解析HTML的时候，如果遇到一个没有任何属性的script标签，就会暂停解析，先发送网络请求获取该JS脚本的代码内容，然后让JS引擎执行该代码，当代码执行完毕后恢复解析。整个过程可以用下图来表示：

可以看到，script阻塞了浏览器对HTML的解析，如果获取JS脚本的网络请求迟迟得不到响应，或者JS脚本执行时间过长，都会导致白屏，用户看不到页面内容。

2. 使用了async

当浏览器遇到了带有async属性的script时，请求该脚本的网络请求是异步的，不会阻塞浏览器解析HTML，一旦网络请求回来之后，如果此时HTML还没有解析完，浏览器会暂停解析，会让JS引擎执行代码，执行完毕后再进行解析。整个过程可以用下图来表示：

还有第二种情况，如果在JS脚本请求回来之前，HTML已经解析完成了，那就啥事没有，立即执行JS代码。可以用下图表示：

总结：async是不可控的，因为执行时间不确定，你如果在一部分JS脚本中获取某个DOM元素，有可能获取到也有可能获取不到。而且如果存在多个async的时候，它们之间的执行顺序也不确定，完全依赖于网络传输结果，谁先到执行谁。

3. 使用了defer

defer表示延迟加载

当浏览器遇到带有defer属性的script时，获取该脚本的网络请求也是异步的，不会阻塞浏览器解析HTML，一旦网络请求回来之后，如果此时HTML还没有解析完，浏览器不会暂停解析并执行JS代码，而是等待HTML解析完毕再执行JS代码。可以用下图来表示：

总结：
script: 阻塞
script async: 可能阻塞，也可能不阻塞（网络请求返回顺序）
script defer: 不阻塞

在Vue中使用defer

这个案例主要有三个文件

HeavyDemo:

<template><div class="container"><div v-for="n in 100"><HeavyComp></HeavyComp></div>        </div>
</template><script setup lang="ts">
import HeavyComp from './HeavyComp.vue'
import { useDefer } from './useDefer';const defer  = useDefer()
</script><style lang="scss" scoped>
.container {display: grid;grid-template-columns: repeat(3, 1fr);grid-gap: 1em;
}
</style>

HeavyComp.vue

在这个文件中，主要渲染了5000个div

<template><div class="item-container"><div v-for="n in 5000" class="item"></div>        </div>
</template><script setup lang="ts"></script><style lang="scss" scoped>
.item-container {display: flex;flex-wrap: wrap;justify-content: center;border: 3px solid #f40;
}
.item {width: 5px;height: 3px;background-color: #ccc;margin: 0.1em;
}
</style>

userDefer hooks

import { ref, onUnmounted } from 'vue'export function useDefer(maxCount = 100) {const frameCount = ref(0)let animationId;function updateFrameCount() {animationId = requestAnimationFrame(() => {frameCount.value++;if (frameCount.value >= maxCount) {return;}updateFrameCount()})}updateFrameCount()onUnmounted(() => {cancelAnimationFrame(animationId)})return function defer(n) {// 目前渲染了多少帧 >= 3return frameCount.value >= 0;}
}

注意：在第一个文件中，我们还没有给 HeavyComp组件添加defer，这样运行之后，我们发现，页面在加载之前有一段白屏时间。然后我们性能分析控制台打开看一下

很明显，执行JS脚本和渲染占据了大量时间。
然后，我们在HeavyComp自定义组件上使用defer

<HeavyComp v-if="defer(n)"></HeavyComp>

这样，页面加载前奏的白屏时间少了