前言

当初的前端开发畛域，都是前后端拆散，前端框架的支流都是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

结束语

总结：功败垂成✌️✌️✌️✌️✌️✌️✌️✌️✌️✌️✌️✌️✌️✌️✌️✌️✌️✌️✌️✌️