目录
前言
骨架屏是什么
骨架屏原理
用途：
（一）简单实现
（二） vue项目中的构建
（三）自动化方案
前言
同样是之前练手项目中的，emmm,知道干嘛用的，没了解过具体原理，面试时加上紧张😓，那简直被吊打的感觉，现在来总结一波。
骨架屏是什么
同样的，首先遇到的问题是什么呢？现在的前端开发领域，都是前后端分离，首先我们拿到数据后，页面渲染以及等待的白屏时间，成为我们需要解决的问题点；而且大项目，这个问题尤为突出。webpack可以实现按需加载，减小我们首屏需要加载的代码体积；再配合上 CDN 以及一些静态代码（框架，组件库等等…）缓存技术，可以很好的缓解这个加载渲染的时间过长的问题。但即便如此，首屏的加载依然还是存在这个加载以及渲染的等待时间问题。
那么，目前主流，常见的解决方案是使用骨架屏技术，包括很多原生的APP，在页面渲染时，也会使用骨架屏。如图所示：数据加载前的占位动画，吸引更多的注意力，内容还在加载中，
相比于之前的Loading动画，骨架屏页面更容易让用户产生一种错觉，页面快加载完了。
骨架屏原理
我看到的文章中，骨架屏提到了两种用途，目前只具体了解了一种，后面一种还没接触过，也一起列出来，接下来解析原理：
用途：
- 作为首屏渲染的优化.
- 作为spa中路由切换的loading,结合组件的生命周期和ajax请求返回的时机来使用.
（一）简单实现：
缺点：自动化程度低，需要在骨架dom上手动添加类
-
简单实现就是通过占位线框元素，渐进式加载数据。
-
骨架屏是结合了懒加载功能，在页面没有加载完成之前，先呈现页面基本结构。
实现方法：
- 在页面元素后面增加一个骨架div，当页面加载完成后就隐藏这个div
- 在页面元素结构中先嵌入骨架div，当页面加载完成后就替换这个div
- 通过伪元素实现骨架样式，通过操作样式实现骨架和页面的动态切换
<!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"><RouterLinkv-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对传入的数据进行判断。
（三）自动化方案
这个方案还没时间具体了解，先贴上来
饿了么在骨架屏的实践中总结出的一套方案:
- 骨架屏的dom结构和css通过离线生成后构建的时候注入模板中的节点下面.
- 原理相关eleme骨架屏插件实现原理
- 方案的项目地址:page-skeleton-webpack-plugin
- 使用时候的注意点:
- cssUnit的配置: 需要使用自适应的单位,按照文档给出的选择范围选,直接用
px生成的比例会不合适 - puppeteer有大概80M, 安装的时候有可能不能一次下载成功.
- 原理:
通过 puppeteer 在服务端操控 headless Chrome 打开开发中的需要生成骨架屏的页面，在等待页面加载 渲染完成之后，在保留页面布局样式的前提下，通过对页面中元素进行删减或增添，对已有元素通过层叠样 式进行覆盖，这样达到在不改变页面布局下，隐藏图片和文字，通过样式覆盖，使得其展示为灰色块。然后 将修改后的 HTML 和 CSS 样式提取出来，这样就是骨架屏了.
