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

页面加载性能

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

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

再来看几个例子：

<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 实践系列到了这里就是尾声了，大家下回见。