|
为了让我们的网站能达到更高的评分（咦，为什么变成刷分了），我们最后需要进行用户体验和性能的优化。 页面加载性能我们需要尽可能把其他所有页面做成异步的，如：
原来都是黄色红色的，现在大部分变成了绿色。 渐进式增强页面在脚本（JavaScript）不可用的时候仍然包含一些内容，即便它只是一个给用户的警告，官方文档见：no-js。 复杂地话，我们需要能输出静态页面，但由于我们是纯粹的客户端渲染，没办法那么做，所以一切从简，考虑直接在无法使用 JS 的时候输出提示。 具体怎么做呢？不用急，还真有个标签可以直接拿来用：
辅助功能考虑到应用场景，这个就不加了（更何况报的一些其实是 ant design 的问题）。 还有一个是我们 form 表单没有使用 label（因为使用了 icon 来示意），这个提示有点傻逼，无视它。 性能指标请求链路的优化，主要是因为一些静态文件的依赖比较多（css、js、图片）。没有想到特别好的方法，官方解释见：Critical Request Chains，应该需要尽量做成异步非阻塞的，并减少 roundtrips 数量。 避免影响用户体验的 APIs![]()
CSS 文件大，容易导致阻塞，因为 CSS 会被默认处理为渲染阻塞的资源。 可以先阅读 Google 的这一篇文档：Render Blocking CSS。 因为通常在 CSS 文件未正确加载前，我们的页面会无法正常使用，所以唯一的优化方案就是让加载 CSS 变得更快。 可是具体怎么做呢？其实 link stylesheet 有一个标签 —— media，也就是我们熟知的 media query：
最后要注意的是，阻塞渲染仅仅涉及到浏览器是否要等待资源加载后才进行首次渲染，在任何场景下，浏览器还是会下载该 css 资源的，只不过对非阻塞资源的优先级会低一点。 GitLab 也存在这个问题，见：https://gitlab.com/gitlab-org/gitlab-ce/issues/26080。 找了一下没找到对应的工具，回头试试看：https://github.com/WatchBeam/split-css-loader，暂且先放着了，毕竟目前 CSS 文件还不算太大。 尾声最后的优化结果，竟然达到了97分，还是让我吓了一跳的。 ![]()
PWA 实践系列到了这里就是尾声了，大家下回见。
| 
收藏
淘帖
踩
