关于本书

本书旨在帮助你创建更加快速的网站，你在本书中学到的技术也能够用于提升已有网站的性能。

读者对象

本书主要（但不只）关注在客户端提升网站性能。这意味着本书面向熟练掌握HTML、CSS和JavaScript的Web前端开发人员。你应当能够在工作中对这些技术运用自如。

本书偶尔会在合适的时机涉及服务器端的内容，例如一些使用PHP编写的服务器端代码示例。这些例子旨在说明某个概念，通常不是重点。第10章介绍服务器压缩，包括新的Brotli压缩算法，这需要服务器端配合进行。第11章解释HTTP/2，这个新协议会影响网站优化方式，如果你对此感兴趣，这一章会对你大有帮助。

你还应该在一定程度上熟悉命令行操作，不过即使现在还做不到这一点，你仍然可以跟随提供的示例进行操作。接下来，我们来谈谈本书结构。

本书结构

本书和Manning出版的其他书不太一样，没有划分为几大部分，不过确实遵循了某种逻辑流程。第1章介绍Web性能的基础知识，比如代码压缩、服务器压缩等。如果你已经开始注重性能，那就不会对这些概念感到陌生，这一章是为那些不熟悉Web性能概念的前端开发人员准备的。第2章介绍性能评估工具，包括在线的和集成于浏览器的工具，其中主要关注Chrome的开发者工具。

接着，我们将进入CSS优化领域。第3章涵盖了关于如何精简CSS的各个主题和示例，介绍如何使用CSS原生功能提升网站对用户输入的响应能力。第4章介绍“关键CSS”（critical CSS）的概念，这种技术能够提升网站的渲染性能。

之后将讨论图像优化。第5章重点介绍不同类型的图像及其使用方法，以及如何在CSS和内联HTML中以最佳方式将它们传输给不同设备。第6章介绍如何缩减图像的文件大小、自动生成雪碧图、使用Google的WebP图像格式，以及编写自定义的图片懒加载脚本。

随后，我们将焦点从图像转向字体。第7章介绍字体优化，内容包括使用最优的@font-face层叠来精简字体、使用CSS的unicode-range属性、压缩服务器上的传统字体格式，以及结合CSS和JavaScript控制字体的加载与显示。

第8章和第9章关注JavaScript。第8章通过提倡使用浏览器内置特性代替jQuery和其他库，更详细地说明了JavaScript中简约主义的必要性。对于那些离不开jQuery的人，我会谈及兼容jQuery的替代方案，它们提供了jQuery的部分功能，并且开销更小。这一章还会讨论<script>标签的正确位置、如何使用async属性，以及如何使用requestAnimationFrame方法编写动画。第9章介绍JavaScript Service Worker，你将学习如何为离线用户提供内容，以及如何使用该技术为在线用户提高页面性能。

第10章又是一个“大杂烩”，主题包括不合理的服务器压缩带来的影响、新的Brotli压缩算法、资源提示、配置缓存策略，以及使用CDN托管资源的好处。

第11章介绍HTTP/2，包括它解决的性能问题、与HTTP/1优化实践之间的区别、服务器推送，以及如何调整网站的内容交付以同时兼容两个协议版本的概念证明。

第12章综合运用你所学的大部分知识，并使用gulp任务管理器将其自动化。你将学习如何从多个方面自动优化网站性能，这将会帮助你在编码时完成网站优化，从而节省宝贵的时间。

另外还有两个附录。附录A是一份工具参考，附录B重点介绍常用的jQuery函数，并展示如何通过原生方法完成相同的任务。

本书使用的工具

学习本书示例时，你可以自由选择喜欢的文本编辑器和命令行窗口。除此之外，有两个工具贯穿全书，需要先行安装。

Node.js

Node.js（有时简称Node）是允许你在浏览器之外使用JavaScript的JavaScript运行时。它可以用在各种疯狂的场景中，几年前，几乎没有人会想象到JavaScript还可以这样使用。这包括任务管理器、图像处理器，甚至Web服务器。所有这些都是通过Node包管理器（npm）进行安装的。

本书的优化工作离不开Node。比如，你经常需要使用它来在本地运行基于Express框架的Web服务器。在第11章中，你甚至需要运行一个本地的HTTP/2服务器；在第6章，你需要使用Node来批量优化图像；在第12章中，你将要通过它来运行gulp，使常见的优化任务自动化。几乎每一章都要通过Node来实现某种功能。

如果你想掌握本书中的知识，就需要先安装Node。如果尚未安装，可以访问Node官网并前往下载专区。不必因为不熟悉Node而感到惊慌和担心！官网已经详尽解释了每个部分，按照指引操作即可。如果你希望后续深入了解Node的工作原理，不妨看看《Node.js实战（第2版）》。但对于阅读本书来说，不需要对Node有非常深入的了解。

Git

Git是一个版本控制系统，用来跟踪软件应用中的更改。你很可能已经用过了，但如果没有，可以在本书中使用它。Git可以用来下载本书托管在GitHub仓库https://github.com/webopt中的示例代码。

为什么要使用Git，而不是直接下载示例代码的zip文件包呢？其中一个原因是，在命令行使用Git这样的版本控制系统，更容易抓取并执行内容。不过最大的好处是，如果你陷入困境，或者只想看到最终的结果，通过Git可以很容易地跳转到已完成的示例代码。

如果你从未用过Git，不必担心。官网清晰描述了关于它的所有说明，只需要遵循步骤使用即可。如果你不喜欢使用Git，可以到https://github.com/webopt从每个仓库分别下载zip文件。

其他工具

本书使用的大多数工具都将由Node包管理器进行安装，因此它们都依赖Node。但是有两个例外，让你有机会使用Node以外的工具。

在第3章中，有个例子需要把DRY原则（Don't repeat yourself，不要重复自己）应用在CSS中，它需要在多个选择器之下组合冗余规则。这个例子使用了一个基于Ruby的工具来检测冗余，名为csscss。如果你有一台Mac，或者运行的是任何其他类UNIX的操作系统，可能能够直接使用它。如果你运行的是Windows系统，则必须下载Ruby。

在第7章中，有个例子需要精简字体使其体积更小。你需要使用一个基于Python的工具，名为pyftsubset。在类UNIX系统上，Python和Ruby类似，可能是开箱即用的。如果你使用的是Windows系统，则需要前往Python官网获取安装程序。

代码约定

本书中的代码是以一种大多数开发人员能接受的方式编写的。书中的所有源码都采用等宽字体，以区别于其他文本。在整本书的代码片段中，为了清晰起见，相关部分都进行了注释。对现有代码段的修改通常加粗显示。对于从GitHub下载的代码，缩进是使用Tab键完成的，你可以决定一个Tab字符对应多少个空格字符。我编写书中示例时，使用的是4格缩进，书中的代码片段也遵循了这个约定。

所有示例源代码都可以从图灵社区本书主页（https://www.ituring.com.cn/book/2011）下载。

作者在线

购买本书英文版的读者可以免费访问由Manning出版社维护的在线论坛，在这个论坛中，你可以针对本书发表评论、询问技术问题、从作者和其他用户那里得到帮助。要访问并订阅该论坛，请访问https://www.manning.com/books/web-performance-in-action。这个页面介绍了注册后如何访问论坛、可以得到什么帮助以及在论坛中的行为准则。

Manning致力于为读者提供一个平台，让读者之间以及读者和作者之间能进行有意义的对话。但我们并不强制作者参与，他们在论坛上的贡献是自愿且免费的。我们建议你尽量问作者一些有挑战性的问题，免得他失去参与的兴趣！

只要本书英文版仍然在售，读者就能从出版社的网站上访问作者在线论坛和之前讨论话题的存档。

电子书

扫描如下二维码，即可购买本书中文版电子版。