骨架屏的实现与总结

原文地址:https://segmentfault.com/a/1190000014832185

  spa页面首屏加载速度没加ssr优化很慢,需要用户等待,这时前端如果这个首屏预加载可以提高用户体验,于是等着这个教程体验了一番,下面说说自己在其中的经验。

首先,说下其实骨架屏也是ssr的一种体现,也是基于vue-server-renderer包实现的,可以了解它的文档。在文档中也介绍了了(这也是骨架屏的必要因素),就是骨架屏的实现的对npm包的有严格要求,这是重中之重,必须检查你的npm包的版本。

第二点,你在实现骨架屏注入的前置条件还有一个就是必须全局安装webpack webpack-cli。

mac用户在安装的时候必须给权限安装

sudo -s  输入密码
npm install webpack -g

第三点:骨架屏的场景应用不同,需要修改骨架屏样式时不能注释,而是应该删除,因为在打包的时候会出错。

我实现成功后,就把这个技术放到了我的博客上了,体验方法如下:

清空浏览器缓存
将浏览器模式调至slow 3G模式
刷新

原文地址:https://www.cnblogs.com/tzzf/p/9281796.html

时间: 2024-08-30 17:07:50

骨架屏的实现与总结的相关文章

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 提出的以用户为中心的四个

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

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

Vue页面显示骨架屏

1.什么是骨架屏幕? 在页面加载数据之前,有一段空白时间,要么用loading加载,要么就用骨架屏. 2.如何快速用Vue实现骨架屏效果? #①直接把下面的CSS代码复制,粘贴到vue项目的index.html 的 <head>...</head>里面 <style> .skeleton { position: fixed; height: 100%; overflow: hidden; padding: 15px; box-sizing: border-box; ba

前端骨架屏方案小结

骨架屏 最近在项目不时有用到骨架屏的需求,所以抽时间对骨架屏的方案作了一下调研,骨架屏的实践已经有很多了,也有很多人对自己的方案作了介绍.在这里按照个人的理解做了一个汇总和分类,分享给大家. 关于骨架屏(简介) 骨架屏就是在页面数据尚未加载前先给用户展示出页面的大致结构,直到请求数据返回后再渲染页面,补充进需要显示的数据内容.常用于文章列表.动态列表页等相对比较规则的列表页面. 很多项目中都有应用:ex:饿了么h5版本,知乎,facebook等网站中都有应用. 借个图举例如下: 两类用途 简介中

小程序(uniapp)骨架屏应用

效果图 注意点: 1, 引入组建后, template 标签内加入<skeleton selector="skeleton" bgcolor="#FFF" v-if="showSkeleton"></skeleton> 其中 v-if="showSkeleton" 为显示骨架屏显示的参数. 2, data对象中设置showSkeleton: true // 默认一开始进入页面加载骨架屏内容. 骨架屏渲染

用于小程序中的骨架屏

基于uni-app的一个骨架屏插件. 在使用的时候可以直接在components中引入组件quick-skeleton.vue.组件代码如下: 1 <template> 2 <view 3 v-show="show" 4 :style="{ 5 width: systemInfo.width + 'px', 6 height: systemInfo.height + 'px', 7 backgroundColor: bgcolor, 8 position:

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

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

web性能优化之页面加载体验(骨架屏)

针对web页面的首屏加载问题,一直是个问题,为此还引出一个性能考量标准:白屏时间.首屏时间. 1.白屏时间 打开chrome控制台的Performance,我们可以看到页面的渲染快照: 这段白屏时间影响的因素归根结底就是:资源加载耗时较长(chunk.js文件下载耗时35.75s): 而对于现在的大行其道的SPA来说,只要这个js文件没有执行,那么页面的代码就只是这样: 自然渲染结果暂时就只是一个白板咯 2.首屏时间 通常首屏内容中加载最慢的就是图片或者 iframe 资源,因此可以理解为当图片