前端如何对页面进行优化

2021-03-09    分类: 网站建设

页面初始化时提升用户体验

我们前端页面的数据一般都是请求后端获取的,当后端接口数据还没有请求完成时,我们是拿不到后端数据的。此时页面初始化显示的效果可能如下图所示:



简单优化(loading优化):

我们可以在用户刚进入时,将整个页面隐藏,同时加载loading动画。在拿到后端数据之后再展示页面关闭loading动画。加一个loading动画可以让用户感觉时间变快。以Vue代码为例:


使用骨架屏进行优化:

骨架屏可以理解为是当数据还未加载进来前,页面的一个空白版本,一个简单的关键渲染路径。可以看一下下面Facebook的骨架屏实现,可以看到在页面完全渲染完成之前,用户会看到一个样式简单,描绘了当前页面的大致框架的骨架屏页面,然后骨架屏中各个占位部分被实际资源完全替换,这个过程中用户会觉得内容正在逐渐加载即将呈现,降低了用户的焦躁情绪,使得加载过程主观上变得流畅。


可以看一下下面的示例图,第一个为骨架屏,第二个为菊花图,第三个为无优化,可以看到相比于传统的菊花图(第一种loading优化)会在感官上觉得内容出现的流畅而不突兀,体验更加优良。


如今这项技术已经在Facebook、Google、支付宝、饿了么、简书、新浪微博、知乎、美团、领英等公司的产品中被广泛的使用。在论坛和社区也都有不少文章讨论骨架屏的实现和使用场景等。

生成骨架屏的方法

生成骨架屏的方式主要有:

  1. 手写HTML、CSS的方式为目标页定制骨架屏 做法可以参考,主要思路就是使用 vue-server-renderer 这个本来用于服务端渲染的插件,用来把我们写的 .vue文件处理为 HTML,插入到页面模板的挂载点中,完成骨架屏的注入。这种方式不甚文明,如果页面样式改变了,还得改一遍骨架屏,增加了维护成本。
  2. 使用图片作为骨架屏;简单暴力,让UI同学花点功夫吧哈哈;小米商城的移动端页面采用的就是这个方法,它是使用了一个Base64的图片来作为骨架屏。
  3. 自动生成并自动插入静态骨架屏 这种方法跟第一种方法类似,不过是自动生成骨架屏,可以关注下饿了么开源的插件 page-skeleton-webpack-plugin ,它根据项目中不同的路由页面生成相应的骨架屏页面,并将骨架屏页面通过 webpack 打包到对应的静态路由页面中,不过要注意的是这个插件目前只支持history方式的路由,不支持hash方式,且目前只支持首页的骨架屏,并没有组件级的局部骨架屏实现,作者说以后会有计划实现。

另外还有个插件 vue-skeleton-webpack-plugin,它将插入骨架屏的方式由手动改为自动,原理在构建时使用 Vue 预渲染功能,将骨架屏组件的渲染结果 HTML 片段插入 HTML 页面模版的挂载点中,将样式内联到 head标签中。这个插件可以给单页面的不同路由设置不同的骨架屏,也可以给多页面设置,同时为了开发时调试方便,会将骨架屏作为路由写入router中,可谓是相当体贴了。

PS:如果在进行网页开发的话,不建议使用图片来代替骨架屏,因为要从网络加载图片,极有可能得不偿失,不过控制好图片大小,应该影响不大。一般在进行混合app开发的时候才有可能用到骨架图。因为app图片资源可以打入APP本地,加载本地图片很快。

加载优化

主要是从减少代码体积,图片大小,后端接口响应时间入手:

  1. 减少http请求,尽量减少向服务器的请求数量;
  2. 利用缓存:所有的资源都要的服务器端设置缓存,缓存一切可以缓存的资源;
  3. 压缩HTML、CSS、JS,减少资源大小可加快页面加载速度;
  4. 无阻塞:css文件在头部引入,js在也页面尾部,防止页面阻塞;
  5. 按需加载,预加载;
  6. 压缩图片,使用字体代替图片,使用雪碧图;

当前文章:前端如何对页面进行优化
标题来源:https://www.cdcxhl.com/news/104885.html

成都网站建设公司_创新互联,为您提供微信公众号搜索引擎优化网站设计网站导航自适应网站移动网站建设

广告

声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联

搜索引擎优化