骨架屏原理——面试别再被挨打了

目录

前言

骨架屏是什么

骨架屏原理

用途：

（一）简单实现

（二） vue项目中的构建

（三）自动化方案

---

前言

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

骨架屏是什么

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

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

骨架屏原理

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

用途：

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

（一）简单实现：

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

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

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

实现方法：

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

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

「CSS」骨架屏 Skeleton 效果

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

（二） vue项目中的构建

大致步骤：

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

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

封装插件：插件定义 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

 

      

        {{ item.name }}
        
        
        
      
    

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

（三）自动化方案

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

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

• 骨架屏的dom结构和css通过离线生成后构建的时候注入模板中的节点下面.
• 原理相关eleme骨架屏插件实现原理
• 方案的项目地址:page-skeleton-webpack-plugin
• 使用时候的注意点:

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

• 原理:

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