前端骨架屏方案小结

骨架屏

最近在项目不时有用到骨架屏的需求,所以抽时间对骨架屏的方案作了一下调研,骨架屏的实践已经有很多了,也有很多人对自己的方案作了介绍.在这里按照个人的理解做了一个汇总和分类,分享给大家.

关于骨架屏(简介)

骨架屏就是在页面数据尚未加载前先给用户展示出页面的大致结构，直到请求数据返回后再渲染页面，补充进需要显示的数据内容。常用于文章列表、动态列表页等相对比较规则的列表页面。
很多项目中都有应用:ex:饿了么h5版本,知乎,facebook等网站中都有应用。
借个图举例如下:

两类用途

简介中作了关于用途的说明,但是仍然可以继续细分:

  1. 作为spa中路由切换的loading,结合组件的生命周期和ajax请求返回的时机来使用.
  2. 作为首屏渲染的优化.

第一类用途

第一类用途需要自己编写骨架屏,推荐两个成熟方便定制的svg组件定制为骨架屏的方案

作为首屏渲染(自动化方案)

该方案是饿了么在骨架屏的实践中总结出的一套方案:

  1. cssUnit的配置: 需要使用自适应的单位,按照文档给出的选择范围选,直接用 px 生成的比例会不合适
  2. puppeteer有大概80M, 安装的时候有可能不能一次下载成功.
  • 原理:
通过 puppeteer 在服务端操控 headless Chrome 打开开发中的需要生成骨架屏的页面，在等待页面加载
渲染完成之后，在保留页面布局样式的前提下，通过对页面中元素进行删减或增添，对已有元素通过层叠样
式进行覆盖，这样达到在不改变页面布局下，隐藏图片和文字，通过样式覆盖，使得其展示为灰色块。然后
将修改后的 HTML 和 CSS 样式提取出来，这样就是骨架屏了.

其他方案

结合ssr render/prerender来使用:

  1. 事先编写好骨架屏组件通过ssr render 解析注入html文件中(除了需要自己编写外其实过程类似于上面的自动化方案)参考文章
  2. 1中事先编写好的骨架屏组件可以用图片代替 (svg) ;或者设计师设计好.

小程序的骨架屏

  1. 不存在预渲染的概念,但是还是可以通过自己预先编写骨架屏组件放在页面中,等到异步请求的数据回来后更新页面.

广而告之

本文发布于薄荷前端周刊，欢迎Watch & Star ★，转载请注明出处。

欢迎讨论，点个赞再走吧 ????? ～

原文地址：https://www.cnblogs.com/jlfw/p/11829720.html

时间： 2024-11-11 12:57:09

前端骨架屏方案小结的相关文章

web前端入门到实战：css实现的骨架屏方案

优点 简单,不需要工程,不用puppeteer生成骨架dom,也不需要二次开发维护 定制程度高,想怎么搞就怎么搞 不臃肿,只给你想要的 缺点 自动化程度低,需要在骨架dom上手动添加类 协同要求高,不像工程化能通过工程去约束 思路 通过伪元素实现骨架样式,通过操作样式实现骨架和页面的动态切换 实现 css部分(scss写法) 通过after伪元素生成骨架样式,并通过absolute覆盖到实际元素上 专门建立的学习Q-q-u-n: 784-783-012 ,分享学习的方法和需要注意的小细节,不停更

前端骨架屏的资料

https://github.com/Jocs/jocs.github.io/issues/22 https://juejin.im/post/5bc5396ee51d456f490984eb https://segmentfault.com/a/1190000014832185 https://github.com/ElemeFE/page-skeleton-webpack-plugin/blob/master/docs/i18n/zh_cn.md 原文地址:https://www.cnblo

【小程序】小程序性能探索----骨架屏

骨架屏是什么? 在Goole提出的以用户为中心的四个页面性能衡量指标中,FP/FCP(首屏渲染). 关于尽快渲染出首屏,减少白屏时间,常见的优化方式大致有以下几种: 1. 优化关键渲染路径,尽可能减少阻塞渲染的JavaScript和CSS,常见做法包括使用async/defer让浏览器下载JavaScript的同时不阻塞HTML解析,内联页面关键部分的 样式 2. 使用Service Worker 缓存AppShell,加快后续访问速度. 3. 使用HTTP/2 Server Push,帮助浏览

自定义前端项目页面骨架屏

实际效果: 思路: 1.先根据页面编写骨架屏页面及样式 2.在最外层元素标签上添加“透明度动画”即可 3.根据实际业务逻辑控制显示/隐藏 代码如下: HTML部分 <!DOCTYPE html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale

骨架屏的实现与总结

原文地址:https://segmentfault.com/a/1190000014832185 spa页面首屏加载速度没加ssr优化很慢,需要用户等待,这时前端如果这个首屏预加载可以提高用户体验,于是等着这个教程体验了一番,下面说说自己在其中的经验. 首先,说下其实骨架屏也是ssr的一种体现,也是基于vue-server-renderer包实现的,可以了解它的文档.在文档中也介绍了了(这也是骨架屏的必要因素),就是骨架屏的实现的对npm包的有严格要求,这是重中之重,必须检查你的npm包的版本.

vue-skeleton-webpack-plugin骨架屏

vue-skeleton-webpack-plugin骨架屏使用 插件github地址:https://github.com/lavas-project/vue-skeleton-webpack-plugin 安装插件 npm install vue-skeleton-webpack-plugin 在项目中创建骨架屏展示组件 平时项目中使用的是rem适配,然后发现骨架屏中无效,因为他出现的时候并未渲染页面,因此找不到window对象,获取不到屏宽 <template> <div>

Vue项目骨架屏注入实践

相比于早些年前后端代码紧密耦合.后端工程师还得写前端代码的时代,如今已发展到前后端分离,这种开发方式大大提升了前后端项目的可维护性与开发效率,让前后端工程师关注于自己的主业.然而在带来便利的同时,也带来了一些弊端,比如首屏渲染时间(FCP)因为首屏需要请求更多内容,比原来多了更多HTTP的往返时间(RTT),这造成了白屏,如果白屏时间过长,用户体验会大打折扣,如果用户网速差,则FCP会更长. 由此引申出一系列的优化方法,骨架屏也因此被提出. FCP优化 在 Google 提出的以用户为中心的四个

Android适配方案小结（三）

在Android适配方案小结(一).(二)中,我们了解了一些基本概念. 那么在具体开发中,我们应该注意什么呢. 首先,我们必须要知道,其实适配的关键在于两点: (1)不同分辨率设备的适配,这点在单位的使用上用dp.sp以及图片资源存放于不同的drawable文件夹就可以解决问题: (2)不同尺寸的适配,这点主要靠将相关值以及布局文件放置于不同的文件夹中来解决. 2.1 values文件夹 可以在工程下创建不同的values文件夹:values-sw480dp, values-sw600dp, v

使用C#开发纽曼USB来电通来电弹屏客户端小结

基于CRM客户和咨询者的普遍需求,老板决定在CRM系统上加入来电弹屏功能,所谓来电弹屏,就是当一个电话打入时,电脑会弹出该电话号码对应的客户.联系人或者供应商详细信息,如果是新号码,则添加一个新的客户.     要达到这样的效果,首先需要硬件的支持,最后老板决定使用纽曼USB来电通作为电话与电脑的连接媒介,它提供二次开发接口,可以实现电脑中获取电话来电号码并弹屏.其次需要在CRM系统中预留一个接口支持根据电话号码弹出信息.由于CRM以前和某知名呼叫中心集成,所以留有这样的借口.     于是就只