目录

前言

骨架屏是什么

骨架屏原理

用途：

（一）简单实现

（二） vue项目中的构建

（三）自动化方案

前言

同样是之前练手项目中的，emmm,知道干嘛用的，没了解过具体原理，面试时加上紧张😓，那简直被吊打的感觉，现在来总结一波。

骨架屏是什么

同样的，首先遇到的问题是什么呢？现在的前端开发领域，都是前后端分离，首先我们拿到数据后，页面渲染以及等待的白屏时间，成为我们需要解决的问题点；而且大项目，这个问题尤为突出。webpack可以实现按需加载，减小我们首屏需要加载的代码体积；再配合上 CDN 以及一些静态代码（框架，组件库等等…）缓存技术，可以很好的缓解这个加载渲染的时间过长的问题。但即便如此，首屏的加载依然还是存在这个加载以及渲染的等待时间问题。

那么，目前主流，常见的解决方案是使用骨架屏技术，包括很多原生的APP，在页面渲染时，也会使用骨架屏。如图所示：数据加载前的占位动画，吸引更多的注意力，内容还在加载中，
相比于之前的Loading动画，骨架屏页面更容易让用户产生一种错觉，页面快加载完了。

骨架屏原理

我看到的文章中，骨架屏提到了两种用途，目前只具体了解了一种，后面一种还没接触过，也一起列出来，接下来解析原理：

用途：

  1. 作为首屏渲染的优化.
  2. 作为spa中路由切换的loading,结合组件的生命周期和ajax请求返回的时机来使用.

（一）简单实现：

缺点：自动化程度低，需要在骨架dom上手动添加类

  • 简单实现就是通过占位线框元素，渐进式加载数据。

  • 骨架屏是结合了懒加载功能，在页面没有加载完成之前，先呈现页面基本结构。

实现方法：

  1. 在页面元素后面增加一个骨架div，当页面加载完成后就隐藏这个div
  2. 在页面元素结构中先嵌入骨架div，当页面加载完成后就替换这个div
  3. 通过伪元素实现骨架样式，通过操作样式实现骨架和页面的动态切换
<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>骨架屏示例</title>
   <style>
       *{
           margin: 0;
           padding: 0;
       }
       @keyframes loading {
           0% {
               background-position: -400px 0
           }

           100% {
               background-position: 400px 0
           }
       }

       .box1 {
           position: absolute;
           margin: 0 auto;
           left: 50%;
           margin-left: -400px;
           top: 0;
           width: 800px;
           height: 60px;
           background-color: blue;
           /* 图像线性渐变写法 */
           background-image: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
           animation-duration: 1s;
           animation-iteration-count: infinite;
           animation-name: loading;
           animation-timing-function: linear;
           transition: 0.3s;
       }
       .bgMasker {
           background-color: #fff;
       }

       .line1 {
           background-color: #fff;
           height: 20px;
           position: absolute;
           right: 0;
           top: 0;
           left: 60px;
       }

       .line2 {
           background-color: #fff;
           height: 20px;
           position: absolute;
           right: 700px;
           top: 20px;
           left: 60px;
       }

       .line3 {
           background-color: #fff;
           height: 20px;
           position: absolute;
           left: 400px;
           right: 0;
           top: 20px;
       }

       .line4 {
           background-color: #fff;
           height: 20px;
           top: 40px;
           position: absolute;
           left: 60px;
           right: 500px;
       }

       .line5 {
           background-color: #fff;
           height: 20px;
           position: absolute;
           left: 600px;
           right: 0;
           top: 40px;
       }
   </style>
</head>

<body>
   <!-- 骨架 -->
   <div class="box1">
       <div class="bgMasker line1"></div>
       <div class="bgMasker line2"></div>
       <div class="bgMasker line3"></div>
       <div class="bgMasker line4"></div>
       <div class="bgMasker line5"></div>
   </div>
</body>

</html>

 下面是个具体讲解css骨架屏实现的链接

「CSS」骨架屏 Skeleton 效果

介绍了用 CSS 编写骨架屏效果的方法，大家在实际应用中，只需要在数据载入的时候，为容器加上 loading 这个 class；而在数据载入完成后，将数据显示到指定位置，并且将 loading 这个 class 移除即可，

（二） vue项目中的构建

大致步骤：

  • 需要一个组件，做占位使用。这个占位组件有个专业术语：骨架屏组件。
    • 暴露一些属性：高，宽，背景，是否有闪动画。
  • 这是一个公用组件，需要全局注册，将来这样的组件建议再vue插件中定义。
  • 使用组件完成左侧分类骨架效果。

封装组件：src/components/library/xtx-skeleton.vue

<template>
  <div class="xtx-skeleton" :style="{width,height}" :class="{shan:animated}">
    <!-- 1 盒子-->
    <div class="block" :style="{backgroundColor:bg}"></div>
    <!-- 2 闪效果 xtx-skeleton 伪元素 --->
  </div>
</template>
<script>
export default {
  name: 'XtxSkeleton',
  // 使用的时候需要动态设置 高度，宽度，背景颜色，是否闪下
  props: {
    bg: {
      type: String,
      default: '#efefef'
    },
    width: {
      type: String,
      default: '100px'
    },
    height: {
      type: String,
      default: '100px'
    },
    animated: {
      type: Boolean,
      default: false
    }
  }
}
</script>
<style scoped lang="less">
.xtx-skeleton {
  display: inline-block;
  position: relative;
  overflow: hidden;
  vertical-align: middle;
  .block {
    width: 100%;
    height: 100%;
    border-radius: 2px;
  }
}
.shan {
  &::after {
    content: "";
    position: absolute;
    animation: shan 1.5s ease 0s infinite;
    top: 0;
    width: 50%;
    height: 100%;
    background: linear-gradient(
      to left,
      rgba(255, 255, 255, 0) 0,
      rgba(255, 255, 255, 0.3) 50%,
      rgba(255, 255, 255, 0) 100%
    );
    transform: skewX(-45deg);
  }
}
@keyframes shan {
  0% {
    left: -100%;
  }
  100% {
    left: 120%;
  }
}
</style>

封装插件：插件定义 src/componets/library/index.js 使用插件 src/main.js

// 扩展vue原有的功能：全局组件，自定义指令，挂载原型方法，注意：没有全局过滤器。
// 这就是插件
// vue2.0插件写法要素：导出一个对象，有install函数，默认传入了Vue构造函数，Vue基础之上扩展
// vue3.0插件写法要素：导出一个对象，有install函数，默认传入了app应用实例，app基础之上扩展

import XtxSkeleton from './xtx-skeleton.vue'

export default {
  install (app) {
    // 在app上进行扩展，app提供 component directive 函数
    // 如果要挂载原型 app.config.globalProperties 方式
    app.component(XtxSkeleton.name, XtxSkeleton)
  }
}
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import './mock'
+import ui from './components/library'

import 'normalize.css'
import '@/assets/styles/common.less'
+// 插件的使用，在main.js使用app.use(插件)
+createApp(App).use(store).use(router).use(ui).mount('#app')

最后使用组件完成左侧分类骨架效果： src/views/home/components/home-category.vue

 <ul class="menu">
      <li :class="{active:categoryId&&categoryId===item.id}" v-for="item in menuList" :key="item.id" @mouseenter="categoryId=item.id">
        <RouterLink :to="`/category/${item.id}`">{{ item.name }}</RouterLink>
        <template v-if="item.children">
          <RouterLink
            v-for="sub in item.children"
            :key="sub.id"
            :to="`/category/sub/${sub.id}`"
            >{{ sub.name }}</RouterLink
          >
        </template>
        <!-- 骨架 -->
        <template v-else>
          <XtxSkeleton height="18px" width="60px" bg="rgba(255,255,255,0.2)" style="margin-right:5px" />
          <XtxSkeleton height="18px" width="50px" bg="rgba(255,255,255,0.2)"/>
        </template>
      </li>
    </ul>

总结：这个封装的骨架屏组件需要用props暴露高，宽，背景，动画，不同组件的骨架屏效果还要手动配置，使用的时候用v-if,v-else对传入的数据进行判断。

（三）自动化方案

这个方案还没时间具体了解，先贴上来

饿了么在骨架屏的实践中总结出的一套方案:

  1. cssUnit的配置: 需要使用自适应的单位,按照文档给出的选择范围选,直接用 px 生成的比例会不合适
  2. puppeteer有大概80M, 安装的时候有可能不能一次下载成功.
  • 原理:

通过 puppeteer 在服务端操控 headless Chrome 打开开发中的需要生成骨架屏的页面，在等待页面加载 渲染完成之后，在保留页面布局样式的前提下，通过对页面中元素进行删减或增添，对已有元素通过层叠样 式进行覆盖，这样达到在不改变页面布局下，隐藏图片和文字，通过样式覆盖，使得其展示为灰色块。然后 将修改后的 HTML 和 CSS 样式提取出来，这样就是骨架屏了.

# javascript # 前端
Logo
华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

cover

解锁HDC 2024之旅：从购票到报名，全程攻略

avatar 华为云开发者联盟
cover

从原始边列表到邻接矩阵Python实现图数据处理的完整指南

avatar 华为云开发者联盟
cover

华为云云原生FinOps解决方案，释放云原生最大价值

avatar 华为云开发者联盟