首页 > 互联资讯 > 网络资讯  > 

前端如何对页面进行优化

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

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




简单优化(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. 压缩图片,使用字体代替图片,使用雪碧图;

前端如何对页面进行优化由讯客互联网络资讯栏目发布,感谢您对讯客互联的认可,以及对我们原创作品以及文章的青睐,非常欢迎各位朋友分享到个人网站或者朋友圈,但转载请说明文章出处“前端如何对页面进行优化