前端优化之骨架屏探索

首屏渲染问题

首屏渲染问题一直单页面应用的问题，如果网速慢或者服务器响应慢的话，页面没有做一些交互处理，就会出现长时间白屏状态。我以前的做法是加loading进行简单的交互，随着技术的不断迭代更新，传统菊花图并不能满足当下交互的需求，于是FaceBook等大公司又用到了一些较好交互技术。

概念

骨架屏技术主要有两种实现方式：

  • 在数据没有渲染到页面之前，绘制响应的图形，将要渲染页面的DOM元素进行占位，类似饿了么APP效果。

  • 另一种是前端提前获取DOM节点的形状，等待数据的渲染。


    饿了么方案

方案

饿了么

page-skeleton-webpack-plugin

Vue

Vue-content-loader

React

React-content-loader

小程序

skeleton

©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容