作者在我司，做了C端活动架构升级，产出的一种骨架屏。姐妹兄弟篇 -《你可能不知道的动态组件玩法🍉》。

相比于早些年前后端代码紧密耦合、后端工程师还得写前端代码的时代，如今已发展到前后端分离，这种开发方式大大提升了前后端项目的可维护性与开发效率，让前后端工程师关注于自己的主业。然而在带来便利的同时，也带来了一些弊端，比如首屏渲染时间(FCP)因为首屏需要请求更多内容，比原来多了更…

1、新建 src/components/Skeleton/index.vue, 书写骨架屏组件 2、新建 src/components/index.js,以插件形式注册为全局可用 法1：批量 法2：单

简单来说，骨架屏（skeleton screen) 就是一个页面从html 下载完成到 js 下载完成并且执行数据渲染这两个时间点之间暂时渲染页面基本结构的方案。 上图形象地解释了两个多页面程序之间的切换，用Skeleton Screen 去优化用户观感的方案。 Skeleto…

在我的前前公司，接口经常出问题，基本每个接口都会出问题，这就要求我们前端对每个接口都要做错误信息的提醒，非常麻烦，当然这也是必须的，所以就想着做一个组件能够帮我们自动处理和展示这些错误信息，当时开发用的是Flutter，所以应该叫widget。后来又做vue和小程序了，想着能不…

骨架屏组件`Skeleton` 常用于在需要等待加载内容的位置提供一个占位图形组合,可以被 `Loading` 完全代替，但是在可用的场景下可以提供更好的视觉效果和用户体验。

提升首屏的加载速度，是前端性能优化中最重要的环节，这里笔者梳理出一些 `常规且有效` 的首屏优化建议 通过对比优化前后的性能变化，来验证方案的有效性，了解并掌握其原理