前端优化之骨架屏探索

首屏渲染问题

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

概念

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

  • 在数据没有渲染到页面之前,绘制响应的图形,将要渲染页面的DOM元素进行占位,类似饿了么APP效果。
  • 另一种是前端提前获取DOM节点的形状,等待数据的渲染。


    前端优化之骨架屏探索_第1张图片
    饿了么方案

方案

饿了么

page-skeleton-webpack-plugin

Vue

Vue-content-loader

React

React-content-loader

小程序

skeleton

你可能感兴趣的:(前端优化之骨架屏探索)