目录
前言
骨架屏是什么
骨架屏原理
用途：
（一）简单实现
（二） vue项目中的构建
（三）自动化方案
前言
同样是之前练手项目中的，emmm,知道干嘛用的，没了解过具体原理，面试时加上紧张😓，那简直被吊打的感觉，现在来总结一波。
骨架屏是什么
同样的，首先遇到的问题是什么呢？现在的前端开发领域，都是前后端分离，首先我们拿到数据后，页面渲染以及等待的白屏时间，成为我们需要解决的问题点；而且大项目，这个问题尤为突出。webpack可以实现按需加载，减小我们首屏需要加载的代码体积；再配合上 CDN 以及一些静态代码（框架，组件库等等…）缓存技术，可以很好的缓解这个加载渲染的时间过长的问题。但即便如此，首屏的加载依然还是存在这个加载以及渲染的等待时间问题。
那么，目前主流，常见的解决方案是使用骨架屏技术，包括很多原生的APP，在页面渲染时，也会使用骨架屏。如图所示：数据加载前的占位动画，吸引更多的注意力，内容还在加载中， 相比于之前的Loading动画，骨架屏页面更容易让用户产生一种错觉，页面快加载完了。
骨架屏原理
我看到的文章中，骨架屏提到了两种用途，目前只具体了解了一种，后面一种还没接触过，也一起列出来，接下来解析原理：
用途：
作为首屏渲染的优化.
作为spa中路由切换的loading,结合组件的生命周期和ajax请求返回的时机来使用.
（一）简单实现：
缺点：自动化程度低，需要在骨架dom上手动添加类
简单实现就是通过占位线框元素，渐进式加载数据。
骨架屏是结合了懒加载功能，在页面没有加载完成之前，先呈现页面基本结构。
实现方法：
在页面元素后面增加一个骨架div，当页面加载完成后就隐藏这个div
在页面元素结构中先嵌入骨架div，当页面加载完成后就替换这个div
通过伪元素实现骨架样式，通过操作样式实现骨架和页面的动态切换