Vue 骨架屏助力提升用户体验

2023-12-21 08:23:20

骨架屏的优势

提升用户体验：骨架屏可以有效减少页面白屏时间，让用户在等待页面加载时也能获得流畅的视觉反馈。
提高 SEO 排名：骨架屏可以帮助搜索引擎更好地抓取页面内容，从而提高页面的搜索引擎排名。
降低服务器压力：骨架屏可以降低服务器的负载，因为在页面数据加载完成之前，服务器只需要返回骨架屏的内容。

使用 Vue 开发框架和 puppeteer 库为 Vue 应用添加骨架屏

安装 puppeteer 库

npm install puppeteer

在 Vue 应用中引入 puppeteer 库

import puppeteer from 'puppeteer';

创建一个 puppeteer 实例

const browser = await puppeteer.launch();

使用 puppeteer 实例生成骨架屏

const page = await browser.newPage();
await page.goto('http://localhost:8080');
const html = await page.content();

将生成的骨架屏添加到 Vue 应用中

this.skeletonHtml = html;

在 Vue 应用中使用骨架屏

<template>
  <div v-if="skeletonHtml">
    <div v-html="skeletonHtml"></div>
  </div>
  <div v-else>
    <div v-html="html"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      skeletonHtml: null,
      html: null,
    };
  },
  mounted() {
    this.getSkeletonHtml();
  },
  methods: {
    async getSkeletonHtml() {
      const browser = await puppeteer.launch();
      const page = await browser.newPage();
      await page.goto('http://localhost:8080');
      const html = await page.content();
      this.skeletonHtml = html;
      browser.close();
    },
  },
};
</script>