[转载] 全方位提升网站打开速度：前端、后端、新的技术 (6)

有很多关于 web 性能和可扩展系统设计的书：由 Ilya Grigorik 所写的 高性能浏览器网络 包含了几乎所有你需要了解的网络和浏览器性能知识，并且目前不断更新的版本可以免费在线阅读哦！Martin Kleppmann 写的 设计数据密集型应用 仍处于前期发布状态，但已经是其领域***的书之一，它涵盖了可扩展后端系统背后的大部分基础知识，并拥有相当多的细节。设计性能 由Lara Callender Hogan 写成，围绕着构建快速的、具有良好的用户体验的网站，涵盖了很多***实践。

还有一些很棒的在线指南、教程和工具可以考虑：从初学者友好的 Udacity 课程 网站性能优化、Google 的 开发者性能指南 到类似于 Google PageSpeed Insights、GTmetrix 和 WebPageTest 这样的优化工具。

最新的 Web 性能开发

移动页面加速

Google 正在通过诸如 PageSpeed Insights、开发人员指南 等网站性能项目来提高大家对于网站性能的意识，并将网页速度作为其 网页排名 的主要因素。

在 Google 搜索中用来提高网页速度、增强用户体验的最新概念是 移动网页加速（AMP）。其目的是让新闻文章、产品页面和其它搜索内容立即从 Google 搜索加载。为此，这些页面必须构建为 AMP。

一个 AMP 页面的示例

AMP 主要做两件事：

构建为 AMP 的网站使用精简版本的 HTML，并使用 JS 加载器来快速渲染，并异步加载尽可能多的资源。

Google 将网站缓存在 Google CDN 中，并通过 HTTP/2 分发。

第一件事从本质上意味着 AMP 以一种方式限制了你的 HTML、JS 和 CSS，这种方式构建的网页有一个优化的关键呈现路径，可以很容易地被 Google 爬取。 AMP 强制 几个限制，例如所有 CSS 必须内联，所有 JS 必须是异步的，页面上的所有内容必须具有静态大小（以防止重绘）。 虽然你可以通过坚持之前的 web 性能***实践，在没有这些限制的情况下，实现相同的结果，但 AMP 可能是很好的 trade-off ，能够为非常简单的网站提供帮助。

第二件事意味着，Google 抓取你的网站，然后将其缓存在 Google CDN 中，以便快速分发。网站内容会在爬虫重新索引你的网站后更新。CDN 还遵循服务器设置的静态 TTL，但至少执行 ：资源至少在一分钟内被视为最新的，并在用户请求进入时在后台更新。因此 AMP 最适用于内容大多是静态的用户案例。这种适用于人为编辑修改的新闻网站或者其他出版物的情况。

渐进式 web 应用（Progressive Web Apps）

Google 的另一种做法是 渐进式 web 应用（PWA）。其想法是在浏览器中使用 服务工作者（service worker） 来缓存网站的静态部分。因此，这些部分对于重复视图会立即加载，并可离线使用。动态部分仍从服务器端加载。

app shell（单页应用程序逻辑）可以在后台重新验证。如果标识了对应用 shell 的更新，则会提示用户，要求他更新页面。例如，Gmail 收件箱 就实现了这个。

但是，写出缓存静态资源并进行重新验证的服务工作者（service worker）代码，对于每个网站来说，都需要付出相当大的努力。此外，只有 Chrome 和 Firefox 充分地支持了服务工作者（service worker）。

缓存动态内容

所有缓存方法遇到的问题是它们不能处理动态内容。这只是由于 HTTP 缓存的工作机制导致的。有两种类型的缓存：基于失效的缓存（如转发代理缓存和 CDN）和基于到期的缓存（如 ISP 缓存、机构代理和浏览器缓存）。基于失效的缓存可以从服务器端主动失效，基于到期的高速缓存只能从客户端重新验证。