步步提高网站体验系列之—

前言

最近周末有点时间想着把博客网站再折腾一下，上点流行的技术，提高一下网站交互体验，准备从以下几点入手，也算立个flag，提醒自己不要偷懒：

骨架屏
PWA (Progressive Web App)
- service worker 做离线缓存
- manifest.json 搞个添加至首屏和启动动画
- 消息推送

网站概况

前端：

因为工作中用过Angular4和React，所以网站用Vue搭的。

角手架是vue-cli 2.9，用到的组件库是: Element-UI

后台：

阿里云上买了一个的服务器, 操作系统是Linux Unbuntu
注：有点后悔，感觉现在CentOS用的多一些。内存起码要1G，否则npm run build起不来
nginx服务器指向项目build好的目录(即网站根目录)
获取数据通过node查询MongoDB数据库。

什么是骨架屏 Skeleton Screen

Google 有一篇很好的文章 User-centric Performance Metrics
是关于网站性能的关键指标以及度量方式。

FP/FCP就是我们经常所说的首屏渲染。

最差的体验当然是首屏加载好之前页面一片空白，用户很难知道发生了什么，是正在加载还是加载失败？为了提示用户，我们通常会放一个loading动画，基本上就是菊花图以及各种变种。这会好一些，但是还不足够好。问题就在于从加载中到加载完成是一个粗暴的跳转过程，从白屏直接到内容。如果中间能有个过渡过程，给用户一个如丝般顺滑的感觉，那就完美了。骨架屏就应运而生。

骨架屏就是加载前把内容的大概轮廓预先展现出来，然后再逐步的加载真正的内容，给用户一种内容正在逐渐加载即将呈现的期待，既降低了焦虑，又使得页面加载的过程变得顺畅，会有一种比其他加载方式更快的感觉。

骨架屏实现方式

SSR （server side rending）服务端渲染
预渲染（prerender）

SSR:

将骨架屏组件的 HTML 片段插入 HTML 页面模版(Template)的挂载点中，样式内联到 head 标签中。当前端真正的内容渲染完成时，Vue 将使用客户端混合，把挂载点中的骨架屏内容替换成真正的页面内容。

注：所谓客户端激活，指的是 Vue 在浏览器端接管由服务端发送的静态 HTML，使其变为由 Vue 管理的动态 DOM 的过程。

预渲染：
无需使用 web 服务器实时动态编译 HTML，而是使用预渲染方式，在构建时(build time)简单地生成针对特定路由的静态 HTML 文件。优点是设置预渲染更简单，并可以将你的前端作为一个完全静态的站点。

事实上作为一个简单的个人网站，其实用预渲染的方式就足够了，为了解一下服务端渲染的知识，我还是采用了SSR的方式。
Vue SSR 指南

vue-skeleton-webpack-plugin

这是一个基于 vue 的 webpack 插件，为单页和多页应用生成 skeleton，提升首屏展示体验。

先来看一下效果：

配置步骤

新建webpack.skeleton.conf.js

'use strict';const path = require('path')
const merge = require('webpack-merge')
const baseWebpackConfig = require('./webpack.base.conf')
const nodeExternals = require('webpack-node-externals')function resolve(dir) {return path.join(__dirname, dir)
}module.exports = merge(baseWebpackConfig, {target: 'node',devtool: false,entry: {app: resolve('../src/entry-skeleton.js')},output: Object.assign({}, baseWebpackConfig.output, {libraryTarget: 'commonjs2'}),externals: nodeExternals({whitelist: /\.css$/}),plugins: []
})

在webpack.skeleton.conf中entry的路径下添加骨架屏SSR入口：
entry-skeleton.js

import Vue from 'vue'
import Skeleton from './components/skeleton/Skeleton'export default new Vue({components: {Skeleton},template: '<skeleton />'
})

骨架屏组件

这个就不放代码了，根据自己页面的情况手动做一个骨架屏
npm run build
打开dist目录下的index.html(即网站的入口)，可以看到骨架屏组件已经成功添加了。

一个小坑

我的项目引用了iconfont和Element-UI，在build时会报一个错，看起来是和css有些关联，可能我哪里还需要再配置一下。但是这个并不影响打包结果，项目仍可顺利运行。

骨架屏就先告一段落。接下来工作估计要忙了，等闲下来开搞service-worker，敬请期待：）

步步提高网站体验系列之——骨架屏相关推荐

vue 判断页面加载完成_vue之骨架屏踩坑之路
vue的首屏优化方式有很多种骨架屏就是其中之一作为一个前端开发用户体验感是很重要的关于页面的loading状态的展示,目前主流的主要有loading图和进度条两种现今使用骨架屏的也越来越多 ...
chrome vue 未响应_vue之骨架屏踩坑之路
vue的首屏优化方式有很多种骨架屏就是其中之一作为一个前端开发用户体验感是很重要的关于页面的loading状态的展示,目前主流的主要有loading图和进度条两种现今使用骨架屏的也越来越多 ...
网站建设中提高用户体验的重要性和方法
用户体验一直是一个比较重要的问题,一个网站要想有效益,就要做好用户体验这件事情,不过也有很多人不以为然,认为用户体验不重要,等到以后网站转化率过低就能明白用户体验的重要性了.企业网站建设必须要留住用户 ...
中山网络推广浅谈网站提高用户体验要做好的5点！
中山网络推广表示,企业做网站优化的很大一部分目的是为了能更好地营销.销售自己的产品,而实现销售的工作就需要有客户,所以网站在优化时做好用户体验也非常重要,那么该怎样才能提高用户体验呢?下面中山网络推广 ...
手机uc怎么放大页面_手机网站怎样做可以提高用户体验度？——竹晨网络
目前,手机已经占据了人们大多数的闲暇时间,互联网的流量开始逐渐向移动端倾斜,重视移动端的用户体验,就可以给客户端增加很多意想不到的功能.但是还是有很多公司和站长不知道手机网站应该怎么建才能符合用户的使 ...
网站哪些功能可以提高用户体验度?
点击下方"青年码农"关注回复"源码"可获取软件,源码等资料网站用户体验是指用户在使用网站时所感受到的感觉和情感.它包括用户与网站的互动.使用过程中的舒适 ...
如何快速提高网站用户体验之3大绝招：快、准、狠
流量的重要性,相信大家都明白!网上也有成千上万的教程,引导大家如何做好网站的引流工作,可是我们最终的目的不只是将用户引导进来而已,更重要的是怎么留住用户,才是我们引流的目的.因此,大家在引流时千万不要 ...
提升HTML5的性能体验系列之一避免切页白屏
提升HTML5的性能体验系列之一避免切页白屏白屏切换页面性能转场提升HTML5的性能体验系列文章目录导航: - [提升HTML5的性能体验系列之一避免切页白屏] - 提升HTML5的性能 ...
海外租用主机如何提高网站性能和用户体验
海外租用主机如何提高网站性能和用户体验在全球化的今天,海外租用主机成为了许多企业和网站主人的选择,以便于提高网站性能和用户体验.租用海外主机的好处是可以让网站在国内外都有良好的访问速度和稳定性,还可 ...

步步提高网站体验系列之——骨架屏

步步提高网站体验系列之——骨架屏相关推荐

最新文章

热门文章