Skeleton 是什么？

页面中的大致骨架

Skeleton 实现思路

  • 使用 Vue 预渲染 Skeleton 内容
  • 将骨架屏渲染结果插入到 HTML 模板中
  • 页面渲染完成后，替换 Skeleton
  • 配合 Service Worker，将 HTML 文件缓存

多种 Skeleton 如何实现

image.png

Skeleton 的问题

  • SPA 应用中，css 同步加载，且体积较大。
  • 浏览器的渲染机制，样式表文件会阻塞页面渲染。

解决方案

image.png

  • css 样式表异步加载。
  • onload 回调中加载页面，避免闪屏。