首屏渲染问题

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

概念

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

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

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

  
  饿了么方案

方案

饿了么

page-skeleton-webpack-plugin

Vue

Vue-content-loader

React

React-content-loader

小程序

skeleton