2021-03-09 分类: 网站建设
我们前端页面的数据一般都是请求后端获取的,当后端接口数据还没有请求完成时,我们是拿不到后端数据的。此时页面初始化显示的效果可能如下图所示:
简单优化(loading优化):
我们可以在用户刚进入时,将整个页面隐藏,同时加载loading动画。在拿到后端数据之后再展示页面关闭loading动画。加一个loading动画可以让用户感觉时间变快。以Vue代码为例:
使用骨架屏进行优化:
骨架屏可以理解为是当数据还未加载进来前,页面的一个空白版本,一个简单的关键渲染路径。可以看一下下面Facebook的骨架屏实现,可以看到在页面完全渲染完成之前,用户会看到一个样式简单,描绘了当前页面的大致框架的骨架屏页面,然后骨架屏中各个占位部分被实际资源完全替换,这个过程中用户会觉得内容正在逐渐加载即将呈现,降低了用户的焦躁情绪,使得加载过程主观上变得流畅。
可以看一下下面的示例图,第一个为骨架屏,第二个为菊花图,第三个为无优化,可以看到相比于传统的菊花图(第一种loading优化)会在感官上觉得内容出现的流畅而不突兀,体验更加优良。
如今这项技术已经在Facebook、Google、支付宝、饿了么、简书、新浪微博、知乎、美团、领英等公司的产品中被广泛的使用。在论坛和社区也都有不少文章讨论骨架屏的实现和使用场景等。
生成骨架屏的方法
生成骨架屏的方式主要有:
另外还有个插件 vue-skeleton-webpack-plugin,它将插入骨架屏的方式由手动改为自动,原理在构建时使用 Vue 预渲染功能,将骨架屏组件的渲染结果 HTML 片段插入 HTML 页面模版的挂载点中,将样式内联到 head标签中。这个插件可以给单页面的不同路由设置不同的骨架屏,也可以给多页面设置,同时为了开发时调试方便,会将骨架屏作为路由写入router中,可谓是相当体贴了。
PS:如果在进行网页开发的话,不建议使用图片来代替骨架屏,因为要从网络加载图片,极有可能得不偿失,不过控制好图片大小,应该影响不大。一般在进行混合app开发的时候才有可能用到骨架图。因为app图片资源可以打入APP本地,加载本地图片很快。
主要是从减少代码体积,图片大小,后端接口响应时间入手:
当前题目:前端如何对页面进行优化
URL分享:/news35/104885.html
成都网站建设公司_创新互联,为您提供标签优化、Google、网站排名、电子商务、外贸网站建设、移动网站建设
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联
猜你还喜欢下面的内容