一分钟科普:骨架屏技术

前言

  • 前端框架主流的都是 SPA(单页应用)MPA(多页应用);这就意味着,页面渲染以及等待的白屏时间,成为我们需要解决的问题点;而且大项目,这个问题尤为突出。
  • webpack可以实现按需加载,减小我们首屏需要加载的代码体积;再配合上 CDN 以及一些静态代码(框架,组件库等等…)缓存技术,可以很好的缓解这个加载渲染的时间过长的问题。

但即便如此,首屏的加载依然还是存在这个加载以及渲染的等待时间问题;


一、骨架屏是什么

目前主流,常见的解决方案是使用骨架屏技术,包括很多原生的APP,在页面渲染时,也会使用骨架屏。(下图中,红圈中的部分,即为骨架屏在内容还没有出现之前的页面骨架填充,以免留白

二、如何实现一个骨架屏

方案一、在模版中来实现骨架屏

思路:在 index.html 中的 div#app 中来实现骨架屏,程序渲染后就会替换掉 index.html 里面的 div#app 骨架屏内容;

方案二、使用一个Base64的图片来作为骨架屏

使用图片作为骨架屏; 简单暴力,让UI同学花点功夫吧;小米商城的移动端页面采用的就是这个方法,它是使用了一个Base64的图片来作为骨架屏。

按照方案一的方案,将这个 Base64 的图片写在我们的 index.html 模块中的 div#app 里面。

方案三、使用 .vue 文件来完成骨架屏

我们可能不希望在默认的模版(index.html)上来进行代码的coding;想在方案一的基础上,将骨架屏的代码抽离出来,使用一个 .vue 文件来 coding,易于维护。

方案四、自动生成并自动插入静态骨架屏

饿了么开源的插件 page-skeleton-webpack-plugin ,它根据项目中不同的路由页面生成相应的骨架屏页面,并将骨架屏页面通过 webpack 打包到对应的静态路由页面中,不过要注意的是这个插件目前只支持 history 方式的路由,不支持 hash 方式,且目前只支持首页的骨架屏,并没有组件级的局部骨架屏实现,作者说以后会有计划实现(issue9)。

另外还有个插件 vue-skeleton-webpack-plugin,它将插入骨架屏的方式由手动改为自动,原理在构建时使用 Vue 预渲染功能,将骨架屏组件的渲染结果 HTML 片段插入 HTML 页面模版的挂载点中,将样式内联到 head 标签中。这个插件可以给单页面的不同路由设置不同的骨架屏,也可以给多页面设置,同时为了开发时调试方便,会将骨架屏作为路由写入 router 中,可谓是相当体贴了。

你可能感兴趣的:(一分钟科普:骨架屏技术)