PWA 渐进式实践 (3) - 用户体验 & 性能

为了让我们的网站能达到更高的评分(咦,为什么变成刷分了),我们最后需要进行用户体验和性能的优化。

页面加载性能

我们需要尽可能把其他所有页面做成异步的,如:

1
2
3
4
5
function getSubmitCase(nextState, callback) {
require.ensure([], (require) => {
callback(null, require('./containers/case/SubmitCasePage').default);
}, 'SubmitCasePage');
}
1
<Route path="submit" getComponent={getSubmitCase} />

通过把非首页面路由给大部分变成异步化的后:

After async

原来都是黄色红色的,现在大部分变成了绿色。

渐进式增强

页面在脚本(JavaScript)不可用的时候仍然包含一些内容,即便它只是一个给用户的警告,官方文档见:no-js

复杂地话,我们需要能输出静态页面,但由于我们是纯粹的客户端渲染,没办法那么做,所以一切从简,考虑直接在无法使用 JS 的时候输出提示。

具体怎么做呢?不用急,还真有个标签可以直接拿来用:

1
<noscript>Your browser does not support JavaScript!</noscript>

放在 body 里面就好了。

辅助功能

考虑到应用场景,这个就不加了(更何况报的一些其实是 ant design 的问题)。

还有一个是我们 form 表单没有使用 label(因为使用了 icon 来示意),这个提示有点傻逼,无视它。

性能指标

请求链路的优化,主要是因为一些静态文件的依赖比较多(css、js、图片)。没有想到特别好的方法,官方解释见:Critical Request Chains,应该需要尽量做成异步非阻塞的,并减少 roundtrips 数量。

避免影响用户体验的 APIs

Avoiding APIs that harm the user experience

CSS 文件大,容易导致阻塞,因为 CSS 会被默认处理为渲染阻塞的资源。

可以先阅读 Google 的这一篇文档:Render Blocking CSS

因为通常在 CSS 文件未正确加载前,我们的页面会无法正常使用,所以唯一的优化方案就是让加载 CSS 变得更快。

可是具体怎么做呢?其实 link stylesheet 有一个标签 —— media,也就是我们熟知的 media query:

1
2
3
<link href="style.css" rel="stylesheet">
<link href="print.css" rel="stylesheet" media="print">
<link href="other.css" rel="stylesheet" media="(min-width: 40em)">
  • 第一个 stylesheet 就是我们以往常用的,被应用在所有场景,总是会阻塞渲染。
  • 第二个 stylesheet 在内容被打印后才应用 —— 可能你会想要重新排版布局,改变字体等等,所以不会阻塞页面的首次加载。
  • 第三个使用了 media query,会被浏览器执行,如果条件负责,则会阻塞到该 stylesheet 被下载并处理完毕。

再来看几个例子:

1
2
3
4
<link href="style.css"    rel="stylesheet">
<link href="style.css" rel="stylesheet" media="all">
<link href="portrait.css" rel="stylesheet" media="orientation:portrait">
<link href="print.css" rel="stylesheet" media="print">
  • 第一个申明在所有条件下都是渲染阻塞的。
  • 第二个申明和第一个其实等价,因为如果没有指定 media type 的话,他其实就是 “all”。
  • 第三个申明有一个动态 media 查询,在页面加载时进行评估。依赖于加载时设备的方向,portrait.css 可能会阻塞渲染。
  • 最后一个在页面被打印时才应用,所以不会在首次加载页面时阻塞渲染。

最后要注意的是,阻塞渲染仅仅涉及到浏览器是否要等待资源加载后才进行首次渲染,在任何场景下,浏览器还是会下载该 css 资源的,只不过对非阻塞资源的优先级会低一点。

GitLab 也存在这个问题,见:https://gitlab.com/gitlab-org/gitlab-ce/issues/26080。

找了一下没找到对应的工具,回头试试看:https://github.com/WatchBeam/split-css-loader,暂且先放着了,毕竟目前 CSS 文件还不算太大。

尾声

最后的优化结果,竟然达到了97分,还是让我吓了一跳的。

Final result

PWA 实践系列到了这里就是尾声了,大家下回见。

Mark Zhai (翟一帆) wechat
欢迎您扫一扫上面的微信公众号,订阅我们的公众号!
坚持原创技术分享,您的支持将鼓励我继续创作!