共计 1488 个字符，预计需要花费 4 分钟才能阅读完成。
前言
当初的前端开发畛域，都是前后端拆散，前端框架的支流都是 SPA，MPA; 这就意味着，页面渲染以及期待的白屏工夫，成为咱们须要解决的问题点；而且大我的项目，这个问题就尤为突出。
Webpack 能够实现按需加载，缩小咱们首屏须要加载的代码体积；在配合 CDN 以及一些动态代码（框架，组件库等等 …）缓存技术，能够很好的缓解这个加载渲染的工夫过长的问题。
即便如此，首屏加载依然存在加载以及渲染等待时间的问题；
目前，常见的解决方案是应用骨架屏技术，包含很多原生 APP，在页面渲染的时候，也会应用骨架屏。
一、什么是骨架屏
举个🌰：
骨架屏 就是在页面资源尚未加载实现以及渲染尚未实现 时须要先给用户的展现页面大抵构造。直到资源加载实现以及渲染实现后 应用渲染的页面。
罕用例子：文章列表，动静列表页等绝对比拟规定的页面。
实战我的项目例子：饿了么 h5 版本、知乎、Facebook 等都有利用。
二、什么是骨架屏
- 首屏：能够在
index.html模版中手写骨架屏相干代码。 - 其余页面：能够利用 UI 提供 SVG 图
- 应用组件库中的骨架屏组件：
React: Material-UI 中的 Skeleton 骨架屏、Vue: Ant Design of Vue 的 Skeleton 骨架屏等 - 能够应用饿了么团队依据页面款式生成的骨架屏工具
page-skeleton-webpack-plugin
依照用处能够细分为两类
2.1 作为 SPA 中路由切换的 loading
须要本人编写骨架屏，举荐两个成熟不便定制的 svg 组件去定制骨架屏
- react-content-loader
- vue-content-loader
2.2 作为首屏渲染的优化（自动化计划）
该计划是饿了么在骨架屏中总结出的一套计划：
- 骨架屏的 dom 构造和 css 通过离线生成后构建的时候注入模版中的节点上面。
- 如果你的我的项目是基于
vue-cli脚手架构建的，那么饿了么团队的page-skeleton-webpack-plugin是最佳之选，如果不是，那么能够抉择 vue-router 提供的vue-server-renderer。
page-skeleton-webpack-plugin 的原理
通过无头浏览器 puppeteer 关上要生成骨架屏的页面
期待页面渲染完后注入提取骨架屏的脚本（留神：肯定要等页面齐全渲染完，不然提取的 DOM 不残缺）
对页面中元素进行删减或削减，对已有元素通过层叠款式进行笼罩，这样达到在不扭转页面布局下，暗藏图片和文字，通过款式笼罩，使得其展现为灰色块。而后将批改后的 HTML 和 CSS 款式提取进去生成骨架屏。
劣势：
- 反对多种加载动画
- 针对挪动端 web 页面
- 反对多路由
- 可定制化，能够通过配置项对骨架块形态色彩进行配置，同时也能够在预览页面间接批改骨架页面源码
- 简直能够零配置应用
三、骨架屏的具体实现
3.1 在模版中来实现骨架屏
以 vue 我的项目为例，默认状况下，咱们的模版 index.html 中有一个 id 为 app 的 div 元素 <div id="app"></div>, 最终应用程序会替换到该 div 元素。
利用这个个性，在 index.html 中的 id#app 的元素内实现骨架屏，程序渲染实现后，就会替换掉骨架屏内容。
也就是首屏，能够在 index.html 中实现骨架屏款式。如果不手写款式，能够用 base64 图片 来代替。（小米商城的挪动端页面）
3.2 主动生成并主动插入动态骨架屏
- 饿了么开源插件：page-skeleton-webpack-plugin
- vue-skeleton-webpack-plugin
结束语
总结：功败垂成✌️✌️✌️✌️✌️✌️✌️✌️✌️✌️✌️✌️✌️✌️✌️✌️✌️✌️✌️✌️
