扫码开始移动端阅读

如何低成本提升用户体验

共

575

字

需要≈

2.875

分钟

奇淫技巧

VitePress

我在日常开发中，其实很讨厌骨架屏，因为大部分情况下，这些东西都是在浪费用户的时间，增加用户的等待时间。

后来发现了一个小巧思，可以利用vue的渲染机制来实现只加载html的时候，不是显示一个空白的页面。

比如在我们大部分的vue项目中，不管是vue2也好，vue3也好，都会有一个html的模板：

html

<!DOCTYPE html>
<html>
  <body>
    <noscript>
      <strong>We're sorry but <%= webpackConfig.name %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
  </body>
</html>

然后我们会在js中挂载vue实例：

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)
app.mount('#app')

所以当页面加载的时候，用户会看到一个空白的页面。这个时候，去加载vue框架，然后还有一些包的内容，全部加载完成以后页面才会显示。

这个时候有个技巧，就是在html中把loading的内容写在#app里面，这样用户在加载js之前就能看到一些内容。

html

<!DOCTYPE html>
<html>
  <body>
    <noscript>
      <strong>We're sorry but <%= webpackConfig.name %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app">
      <div class="loading">
        Loading...
      </div>
    </div>
  </body>
</html>

类似这样操作，如何在vue中实现呢。比如我们有一个很大很大的组件？或者需要一些时间渲染的组件。我们可以使用vue3的Suspense和defineAsyncComponent来实现。

vue

<template>
  <div>
    <Suspense>
      <template #default>
        <AsyncComponent />
      </template>
      <template #fallback>
        <div class="loading">
          Loading...
        </div>
      </template>
    </Suspense>
  </div>
</template>

<script setup>
import { Suspense, defineAsyncComponent } from 'vue'

const AsyncComponent = defineAsyncComponent(() => import('./AsyncComponent.vue'))
</script>

这样在这个同步的组件加载的时候，就会显示一个加载中组件，当异步组件加载完成之后，就会显示异步组件。你可以把这个loading改成一个骨架屏。

这样用户体验会更好一点，不要再把骨架屏写到组件里面了，那样没有任何意义。

最后，说一下这为什么是最低成本的，相比较配置代码压缩，代码分割，增加CDN,使用缓存，提升带宽等手段，这个成本是最低的。对代码侵入比较少，你在哪里改，哪里就可以生效，不会引起其他问题也不需要花钱。

转载请注明来源：LeeDaisen : 《如何低成本提升用户体验》