美文网首页
前端优化之骨架屏探索

前端优化之骨架屏探索

作者: Chris__Liu | 来源:发表于2019-03-05 21:25 被阅读0次

首屏渲染问题

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

概念

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

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


    饿了么方案

方案

饿了么

page-skeleton-webpack-plugin

Vue

Vue-content-loader

React

React-content-loader

小程序

skeleton

相关文章

  • 前端优化之骨架屏探索

    首屏渲染问题 首屏渲染问题一直单页面应用的问题,如果网速慢或者服务器响应慢的话,页面没有做一些交互处理,就会出现长...

  • 暂时定义自己的前端规划方向

    一年内计划:1、保持危机感、熟练并复习前端知识、探索前端优化并测试优化效果(1、webpack打包优化;2、首屏加...

  • 小程序 骨架屏探索...

    原文出处: https://cloud.tencent.com/developer/news/297207 仿照写...

  • 前端性能优化 - 首屏渲染优化实现及其必要性

    前端性能优化,不得不提的就是这个首屏渲染优化 首屏渲染优化 其实更具体点,应该是:首次加载首屏渲染优化,原因是某些...

  • 一种自动化生成骨架屏的方案

    今天分享的主题是:「一种自动化生成骨架屏的方案」, 先看下市场上常见的骨架屏优化效果。 今天的分享主要分为三个部分...

  • iOS常用库列表

    1、TABAnimated 骨架屏参考链接 CocoaPods pod 'TABAnimated' 骨架屏自动生成...

  • 前端优化(首屏优化)

    首屏优化方案 1、JavaScript外联文件引用放在html文档底部;CSS外联文件引用在html文档头部,位于...

  • 骨架屏( Skeleton Screen )

    骨架屏 什么是骨架屏 骨架屏英文叫 Skeleton Screen,也被称为加载占位图。它是在页面数据尚未加载前先...

  • 前端之骨架html

    前面介绍了html,其实就是一个html文档的基本构架。 那么html中它的标签就是构成骨架的重要的元...

  • React进阶篇(十)性能优化

    在整个流程上的优化 在 HTML 内实现 Loading 态或者骨架屏; 去掉外联 css; 缓存基础框架 - H...

网友评论

      本文标题:前端优化之骨架屏探索

      本文链接:https://www.haomeiwen.com/subject/tjuhuqtx.html