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

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

页面加载性能

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

function getSubmitCase(nextState, callback) {  require.ensure([], (require) => {
    callback(null, require('./containers/case/SubmitCasePage').default);
  }, 'SubmitCasePage');
}

<Route path="submit" getComponent={getSubmitCase} />

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

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

渐进式增强

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

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

具体怎么做呢？不用急，还真有个标签可以直接拿来用：

放在 body 里面就好了。

辅助功能

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

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

性能指标

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

把一些对图片的 src 引用，改成：

避免影响用户体验的 APIs

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

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

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

<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 被下载并处理完毕。

再来看几个例子：

<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分，还是让我吓了一跳的。