vue 浏览器调试 样式如何定位样式_Vue项目骨架屏注入实践和方法总结
相比于早些年前后端代码紧密耦合、后端工程师还得写前端代码的时代,如今已发展到前后端分离,这种开发方式大大提升了前后端项目的可维护性与开发效率,让前后端工程师关注于自己的主业。然而在带来便利的同时,也带来了一些弊端,比如首屏渲染时间(FCP)因为首屏需要请求更多内容,比原来多了更多HTTP的往返时间(RTT),这造成了白屏,如果白屏时间过长,用户体验会大打折扣,如果用户网速差,则FCP会更长。
1. FCP优化
在 Google 提出的以用户为中心的四个页面性能衡量指标中,FP/FCP可能是开发者们最熟悉的了
为了优化首屏渲染时间这个指标,减少白屏时间,前端仔们想了很多办法:
- 加速或减少HTTP请求损耗:使用CDN加载公用库,使用强缓存和协商缓存,使用域名收敛,小图片使用Base64代替,使用Get请求代替Post请求,设置 Access-Control-Max-Age 减少预检请求,页面内跳转其他域名或请求其他域名的资源时使用浏览器prefetch预解析等;
- 延迟加载:非重要的库、非首屏图片延迟加载,SPA的组件懒加载等;
- 减少请求内容的体积:开启服务器Gzip压缩,JS、CSS文件压缩合并,减少cookies大小,SSR直接输出渲染后的HTML等;
- 浏览器渲染原理:优化关键渲染路径,尽可能减少阻塞渲染的JS、CSS;
- 优化用户等待体验:白屏使用加载进度条、菊花图、骨架屏代替等;
这里要介绍的就是优化用户等待体验的骨架屏,它可以被视为是原来加载菊花图的一种升级版,结合传统的首屏优化方法对应用进行优化可以达到不错的效果。
2. 骨架屏
骨架屏可以理解为是当数据还未加载进来前,页面的一个空白版本,一个简单的关键渲染路径。可以看一下下面Facebook的骨架屏实现,可以看到在页面完全渲染完成之前,用户会看到一个样式简单,描绘了当前页面的大致框架的骨架屏页面,然后骨架屏中各个占位部分被实际资源完全替换,这个过程中用户会觉得内容正在逐渐加载即将呈现,降低了用户的焦躁情绪,使得加载过程主观上变得流畅。
可以看一下下面的示例图,第一个为骨架屏,第二个为菊花图,第三个为无优化,可以看到相比于传统的菊花图会在感官上觉得内容出现的流畅而不突兀,体验更加优良。
如今这项技术已经在Facebook、Google、支付宝、饿了么、简书、新浪微博、知乎、美团、领英等公司的产品中被广泛的使用。在论坛和社区也都有不少文章讨论骨架屏的实现和使用场景等。
3. 生成骨架屏的方法
生成骨架屏的方式主要有:
- 手写HTML、CSS的方式为目标页定制骨架屏 做法可以参考,主要思路就是使用 vue-server-renderer 这个本来用于服务端渲染的插件,用来把我们写的.vue文件处理为HTML,插入到页面模板的挂载点中,完成骨架屏的注入。这种方式不甚文明,如果页面样式改变了,还得改一遍骨架屏,增加了维护成本。 骨架屏的样式实现参考 CodePen
- 使用图片作为骨架屏; 简单暴力,让UI同学花点功夫吧哈哈;小米商城的移动端页面采用的就是这个方法,它是使用了一个Base64的图片来作为骨架屏。
- 自动生成并自动插入静态骨架屏 这种方法跟第一种方法类似,不过是自动生成骨架屏,可以关注下饿了么开源的插件 page-skeleton-webpack-plugin ,它根据项目中不同的路由页面生成相应的骨架屏页面,并将骨架屏页面通过 webpack 打包到对应的静态路由页面中,不过要注意的是这个插件目前只支持history方式的路由,不支持hash方式,且目前只支持首页的骨架屏,并没有组件级的局部骨架屏实现,作者说以后会有计划实现(issue9)。
另外还有个插件 vue-skeleton-webpack-plugin,它将插入骨架屏的方式由手动改为自动,原理在构建时使用 Vue 预渲染功能,将骨架屏组件的渲染结果 HTML 片段插入 HTML 页面模版的挂载点中,将样式内联到 head 标签中。这个插件可以给单页面的不同路由设置不同的骨架屏,也可以给多页面设置,同时为了开发时调试方便,会将骨架屏作为路由写入router中,可谓是相当体贴了。
vue-skeleton-webpack-plugin的具体使用参考 vue-style-codebase,主要关注build目录的几个文件,线上Demo 在Chrome的DevTools中把network的网速调为Gast 3G / Slow 3G就能看到效果了~
链接文章:
https://juejin.im/post/5b79a2786fb9a01a18267362
vue 浏览器调试 样式如何定位样式_Vue项目骨架屏注入实践和方法总结相关推荐
- wpf page 界面渲染完成后执行自动操作_Vue项目骨架屏自动生成方案(dps)
什么是骨架屏 什么是骨架屏呢?骨架屏(Skeleton Screen)是指在页面数据加载完成前,先给用户展示出页面的大致结构(灰色占位图),在拿到接口数据后渲染出实际页面内容然后替换掉.Skeleto ...
- css3-6 表格如何设置样式和定位样式是什么
css3-6 表格如何设置样式和定位样式是什么 一.总结 一句话总结:css可以解决所有属性设置的样式. 1.表格如何设置样式? css样式可以解决一切问题,没必要在表格上面加属性来设置样式. 7 t ...
- vue 浏览器调试 样式如何定位样式_浏览器断点调试-程序员的必修课
一.源码调试/debugger方法 1.1控制台调试按钮介绍 Resume script execution恢复断点调试.常用在一个方法调用多个js文件(适用冗长js代码使用).点击这个会直接跳转到下 ...
- linux部署vue项目_Vue项目部署的最佳实践
点击上方"前端教程",选择"星标" 每天前端开发干货第一时间送达! 作者:沉末_ juejin.im/post/5eb2243e51882555d8457833 ...
- vue 判断页面加载完成_vue之骨架屏踩坑之路
vue的首屏优化方式有很多种 骨架屏就是其中之一 作为一个前端开发 用户体验感是很重要的 关于页面的loading状态的展示,目前主流的主要有loading图和进度条两种 现今使用骨架屏的也越来越多 ...
- chrome vue 未响应_vue之骨架屏踩坑之路
vue的首屏优化方式有很多种 骨架屏就是其中之一 作为一个前端开发 用户体验感是很重要的 关于页面的loading状态的展示,目前主流的主要有loading图和进度条两种 现今使用骨架屏的也越来越多 ...
- angular项目打包_vue项目部署的最佳实践
前言 使用vue.react.angular等技术开发过程中,我们都会遇到以下问题: 首屏加载慢 每一次更新都需要清除浏览器缓存才能看到效果(经常被测试吐槽) 这两个问题可以从很多方面进行优化,今天我 ...
- vue webpack打包入口文件是哪个_Vue项目起步
一,安装nodejs软件(直接商城搜索安装即可). 二,配置npm npm install npm -g 三,配置webpack,在cmd中安装. npm install -g webpack npm ...
- vue v-if判断数组元素的值_Vue项目上线做的一些基本优化
前言 本文主要是做一个Vue性能优化的帖子,做一个参考文档,对以后项目上线做一些集合文档.如果对各位在项目优化时,做一个文档参照. 开发过程 在开发项目的时候,就要注意项目的一些小技巧,下面我就罗列一 ...
最新文章
- python中json的使用
- 九度OJ 1089:数字反转 (数字反转)
- ANSI C标准预定义宏
- 看电影(movie):组合数
- 求出1~13的整数中1出现的次数,并算出100~1300的整数中1出现的次数?为此他特别数了一下1~13中包含1的数字有1、10、11、12、13因此共出现6次,但是对于后面问题他就没辙了
- linux映射80端口,Linux下访问默认80端口 映射到8080端口
- 聚类分析-K-means clustering 在生物信息学中的应用
- Direct Rendering RenderMan Point Cloud
- shell提示Algorithm negotiation fail
- java爬虫爬豆瓣图书_网络爬虫——爬取豆瓣图书
- 使用html2canvas实现超出浏览器部分截图
- linux格式化卡死,在Linux中格式化SD卡失败
- NodeJs视频教程 NodeJs零基础实战视频教程-来自三人行慕课
- 保姆级教程:手把手教你搭建个人网站
- python写法和c很像_另一个Python和C程序的对比
- 关于提高游戏中的打击感
- MBR与GPT(GUID)的区别及使用方式(偏实际操作)
- tiktok海外直播红人带货
- IOS(iPad、iPhone)删除已下载系统更新
- 努努小说通用爬取——多线程