今晚來點 Web 前端效能優化大補帖：一次搞定指標 × 工具 × 技巧，打造超高速網站（iThome鐵人賽系列書）
莫力全 Kyle Mo
買這商品的人也買了...
-
0 陷阱！0 誤解！8 天重新認識 JavaScript！（iT邦幫忙鐵人賽系列書）$550$429 -
頂級網站技術長高度：前端工程進階大師指南$880$695 -
內行人才知道的系統設計面試指南$580$458 -
你所不知道的必學前端 Debug 技巧：即學即用！讓你 Debug 不求人 (iT邦幫忙鐵人賽系列書)$620$484 -
TypeScript 邁向專家之路：零基礎 JavaScript 打通 Angular、React 與 Vue.js 前端框架實戰 (Essential TypeScript: From Beginner to Pro)$880$695 -
資安這條路：領航新手的 Web Security 指南，以自建漏洞環境學習網站安全（iT邦幫忙鐵人賽系列書）$680$530 -
打造高速網站從網站指標開始：全方位提升使用者體驗與流量的關鍵$600$300 -
ASP.NET Core 6 實戰守則：超易懂的跨平台開發入門教學 (iT邦幫忙鐵人賽系列書)$600$468 -
Martin Fowler 的企業級軟體架構模式：軟體重構教父傳授 51個模式，活用設計思考與架構決策 (Patterns of Enterprise Application Architecture)$800$624 -
Web API 設計原則｜API 與微服務傳遞價值之道 (Principles of Web API Design: Delivering Value with APIs and Microservices)$520$411 -
Tailwind CSS 3.0 從零開始 – 入門到實戰$700$553 -
會動的演算法：61 個演算法動畫＋全圖解逐步拆解，人工智慧、資料分析必備$620$490 -
從 Hooks 開始，讓你的網頁 React 起來 (第二版)（iT邦幫忙鐵人賽系列書）$720$360 -
玩真的！Git ✕ GitHub 實戰手冊 - coding 實境、協同開發、雲端同步, 用最具臨場感的開發實例紮實學會！ (Git for Programmers)$580$458 -
Google 的軟體工程之道｜從程式設計經驗中吸取教訓 (Software Engineering at Google)$880$695 -
哎呀!不小心刻了一套 React UI 元件庫 : 從無到有輕鬆上手（iThome鐵人賽系列書）$650$325 -
你就是不寫測試才會沒時間：Kuma 的單元測試實戰 -- Java篇（iThome鐵人賽系列書）$650$507 -
看完這本就會懂！帶你無痛提升 JavaScript 面試力：精選 55道前端工程師的核心問題 × 求職加分模擬試題解析$680$530 -
和艦長一起 30 天玩轉 GitLab【第二版】（iT邦幫忙鐵人賽系列書）$650$507 -
OAuth 2.0 從入門到實戰：利用驗證和授權守護 API 的安全$600$468 -
哎呀！早知道就不會破版的 CSS 設計技巧：前端工程師防止佈局意外的必學密技（iThome鐵人賽系列書）【軟精裝】$660$330 -
React 思維進化：一次打破常見的觀念誤解，躍升專業前端開發者（iThome鐵人賽系列書）【軟精裝】$790$616 -
JavaScript 設計模式學習手冊, 2/e (Learning JavaScript Design Patterns: A JavaScript and React Developer's Guide, 2/e)$580$458 -
React 思維進化：一次打破常見的觀念誤解，躍升專業前端開發者（iThome鐵人賽系列書）【平裝】$750$495 -
前端測試指南：策略與實踐$650$507
相關主題
商品描述
精通前端基礎和優化技術，為你打造高效能網站！
本書內容改編自第 13 屆 2021 iThome 鐵人賽，Modern Web 組冠軍網路系列文章──《今晚，我想來點 Web 前端效能優化大補帖！》。本書彙整了網頁前端應用效能優化的各種技巧，並以此為出發點，延伸至許多前端領域必備的知識。搭配簡易圖文和範例檔實作，讓你打造高效能的前端應用，解決網站效能痛點，提升速度與使用者體驗，增加網站曝光率與流量！
四大重點
▍小細節讓效能UP
除了依賴指標，還要從對的地方著手！
▍前端開發必備心法
用對優化工具和技術，提升效能&使用者體驗。
▍深入技術原理
介紹前端技術原理，精通前端應用知識。
▍提供完整範例檔
跟著實作範例學習，強化前端優化技能！
精彩內容
●認識 Core Web Vitals、RAIL Model、Lighthouse 等指標和效能監測工具，找出效能不足的地方。
●建立前端必備知識：瀏覽器架構與渲染流程、網路與快取、JavaScript 記憶體管理機制，並學習正確的圖片資源、檔案壓縮與打包技術。
●在不同情境下使用正確的優化技術：Code Splitting、動態載入、Tree Shaking、模組化技巧、Web Workers 與 WebAssembly。
●使用 DevTool 檢測網站效能、實作 Debounce 與 Throttle，達到網站節流。
專業推薦
「不論是剛入門的工程師或者資深工程師，都可以在這本書得到不同階段的啟發並且應用在實戰當中。」
「作者將業界所交流的各式各樣經驗，在這本書中一次性地統整起來，不僅僅只是教你效能優化的技巧，甚至帶著你從歷史淵源、使用者面向、網路傳輸、渲染機制等不同角度來看效能。」
「前端領域的發展十分迅速，很難得有作者用心將這些知識整理成書，帶領讀者從發現問題開始，了解背後原因與需求、實作練習，以及在每章節附上延伸學習的資源。」
「這本書深入淺出說明效能優化的各道題目，篇篇精彩有趣。除了從遠古到現今的技術解析和優劣比較，並且圖文並茂、附上實戰實例，讀起來讓人欲罷不能。」
目標讀者
✦想要了解各種效能優化技巧的前端開發者
✦想要更理解前端開發底層知識的開發者
✦想了解前端開發近期發展與未來趨勢的讀者
下載範例程式檔案
本書的程式碼是由GitHub託管，可點選下面圖案前往下載：
作者簡介
莫力全 Kyle Mo
雜食性軟體工程師，任何有興趣的技術都想要親自嘗試與學習，其中又尤其熱愛 Web 前端技術。喜歡分享技術與經驗，一陣子沒寫技術文章就會感到全身不舒服。除了對軟體開發充滿興趣外，也是個籃球狂熱者，也許可以在各大籃球賽見到我的身影。
2020 年於 Medium 發表〈今晚，我想來點 Web 前端效能優化大補帖！〉，分享許多前端知識及優化技巧。並於 2021 年以同主題參加 iThome 鐵人賽，獲得 Modern Web 組冠軍。
▍Email：
oldmo860617@gmail.com
▍Medium：
https://medium.com/@oldmo860617
目錄大綱
推薦序一
推薦序二
推薦序三
推薦序四
序言
Ch01 認識前端效能優化與衡量指標 Planning And Metrics
1-1 前端效能優化為什麼如此重要？
1-2 效能的監控工具 ─ Performance Analyzers
1-3 衡量前端效能的重要指標：Core Web Vitals
1-4 從使用者的角度出發 ─ RAIL Model
Ch02 網頁資源優化 Assets Optimization
2-1 程式碼最佳化
2-2 圖片資源最佳化
2-3 檔案壓縮 File Compression
2-4 可適性服務 Adaptive Serving
Ch03 渲染流程優化 Render Process Optimization
3-1 瀏覽器的架構演進史
3-2 瀏覽器渲染引擎的運作機制
3-3 控制 Script 的載入時機 ─ Non-blocking Script
3-4 優化資源的載入時機 ─ Resource Hints
3-5 減輕渲染的負擔 ─ Virtualized List
3-6 延遲載入 Lazy Loading
3-7 CSS 也會影響效能！寫出高效能的 CSS
3-8 硬體加速 ─ CSS GPU Acceleration
Ch04 組建流程優化 Build Process Optimization
4-1 拆分應用的 Bundle ─ Code Splitting & Dynamic Import
4-2 移除用不到的程式碼 ─ Tree Shaking
4-3 犧牲支援度減少 Bundle Size ─ Polyfill-less Bundling Script
Ch05 快取與網路機制 Caching & Networking
5-1 前端必備快取知識 (1)：HTTP Cache
5-2 前端必備快取知識 (2)：Service Workers Cache
5-3 前端必備快取知識 (3)：CDN
5-4 運用 Service Workers ─ Application Shell Architecture
5-5 使用 Stale While Revalidate 提供更好的使用者體驗
5-6 極限加速！升級 HTTP 版本
Ch06 初探 Web Workers 與 WebAssembly
6-1 讓主執行緒喘口氣吧 ─ Web Workers
6-2 讓 Web 充滿更多可能性 ─ WebAssembly
Ch07 記憶體與渲染架構 Memory & Rendering Architecture
7-1 認識JavaScript 的記憶體管理機制
7-2 前端應用的各種渲染架構
Ch08 DevTool Debugging & 前端節流
8-1 善用DevTool 來監控網頁效能 ─ Runtime Performance Debugging
8-2 面對大量請求，前端可以做些什麼？
附錄 A 參考資源
