關于本書

本書旨在幫助你創建更加快速的網站，你在本書中學到的技術也能夠用于提升已有網站的性能。

讀者對象

本書主要（但不只）關注在客戶端提升網站性能。這意味著本書面向熟練掌握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致力于為讀者提供一個平臺，讓讀者之間以及讀者和作者之間能進行有意義的對話。但我們并不強制作者參與，他們在論壇上的貢獻是自愿且免費的。我們建議你盡量問作者一些有挑戰性的問題，免得他失去參與的興趣！

只要本書英文版仍然在售，讀者就能從出版社的網站上訪問作者在線論壇和之前討論話題的存檔。

電子書

掃描如下二維碼，即可購買本書中文版電子版。