讀了《速度與激情：以網站效能提升使用者體驗》

今晚用了四個小時，讀完了《速度與激情：以網站效能提升使用者體驗》這本書，總體評三星半的分，不是很高，因為書裡提到的很多都已在應用或理解，當然，還是有一些收穫的。

全書圍繞著 Web 效能，第一章就提到了效能即使用者體驗，提到了很多資料來舉證。
接著第二章提到速度的重要性和影響因素，讀到這裡，很期待複習一遍“瀏覽器如何渲染內容”，不過書裡寫的有些粗糙，只用了兩頁就說完了。

核心是後面幾章。

---

關於圖片格式

一直有疑問有些網頁的圖片是從上往下慢慢載入顯示的，而有些則是首先顯示一張馬賽克式的圖片，接著馬賽克慢慢變小圖片變清晰。才知道這是 JPEG 格式的兩種形式：基線式*和漸進式。用 PS 儲存為網路格式時預設是基線式格式，可以勾選 Progressive（交錯） 建立漸進式 JPEG 圖片。當然在測試時我也發現漸進式會使圖片大小增加大概 30% ，也會增加裝置耗電量，Safari 移動版不支援漸進式 JPEG ，因此使用還是要仔細考慮。

優化HTML和CSS

這一章主要對可訪問性有所感觸，因為前段時間剛好聽說：在美國，所有上線網站都需要支援無障礙訪問。而在國內，這一特性並沒有得到很好的支援，當然也沒有法律上的條文規定。要使使用者可以無障礙訪問，就要儘量適用語義化標籤，新的 HTML5 增加了如 nav、aside、header、footer 等很多語義化的標籤可供使用。另外，還可以通過優化層次結構，使其對瀏覽器、搜尋引擎、讀屏器都有更明顯的意義。是時候放棄 div + css 佈局了。

關於效能評估

再次感受到了 Chrome 開發者工具的強大。以前只知道 Elements 是當前頁面原始碼，可以檢視佈局和修改 CSS ； Console 不用說；Sources 是載入的所有資源，可以檢視原始碼、js、css、圖片檔案等； Network 可以檢視網路資源載入情況； Application裡面可以訪問 Cookie、Storage等應用儲存。

當然以上在這本書上並沒有提到，而提到的是我們（至少是目前的我）很少會看的 Timeline 和 Audits ： Timeline （時間線）展示了瀏覽器渲染的幀率，可以通過修改程式碼找出那裡影響了Web效能；Audits（審查） 則更加強大，它可以直接自動分析當前站點，得出相關的建議，比如它會提示你那些 CSS 規則沒有用過，CSS 和 JS 檔案的放置地方、 Cookie 大小等。

除了 Chrome 自帶的開發者工具，還可以使用 YSlow ，這是一個瀏覽器外掛，可提供類似的功能。

權衡

最後主要提到了效能與美的權衡，找到平衡點巴拉巴拉小魔仙。

---

這本書正文只有 130 頁左右，內容不多，可能不到一個半天就可以看完。先記錄這些了。