防詐3要訣：不聽信、不操作、掛斷電話 
內容簡介
升級全彩！內容更新！
本次改版除了將一些過時的內容更新，以及新增新的章節以外，也驗證了大部分的篇章概念是不會因為前端技術本身或是 AI 的發展而變成無用的知識。作者希望透過「前端效能優化」這個主題協助讀者掌握前端開發裡的「底層邏輯」，在快速變化的前端領域掌握不變的核心概念，培養能夠快速適應未來改變的扎實基底！
第二版全面升級成全彩印刷，閱讀上更加美觀舒適！
內容也更新成最新技術，快速適應未來潮流！
「前端效能優化」最全面的書籍！
精通前端基礎和優化技術，為你打造高效能網站！
本書內容改編自第 13 屆 2021 iThome 鐵人賽，Modern Web 組冠軍網路系列文章──《今晚，我想來點 Web 前端效能優化大補帖！》。本書彙整了網頁前端應用效能優化的各種技巧，並以此為出發點，延伸至許多前端領域必備的知識。搭配簡易圖文和範例檔實作，讓你打造高效能的前端應用，解決網站效能痛點，提升速度與使用者體驗，增加網站曝光率與流量！
本次改版除了將一些過時的內容更新，以及新增新的章節以外，也驗證了大部分的篇章概念是不會因為前端技術本身或是 AI 的發展而變成無用的知識。作者希望透過「前端效能優化」這個主題協助讀者掌握前端開發裡的「底層邏輯」，在快速變化的前端領域掌握不變的核心概念，培養能夠快速適應未來改變的扎實基底！
專注底層邏輯才能永不過時！
讓你增進網站效能的四劑大補帖
▍小細節讓效能UP
除了依賴指標，還要從對的地方著手！
▍前端開發心法
用對優化工具和技術，提升效能&使用者體驗。
▍深入技術原理
介紹前端技術原理，精通前端應用知識。
▍提供完整範例
跟著實作範例學習，強化前端優化技能！
【精彩內容】
•認識 Core Web Vitals、RAIL Model、Lighthouse 等指標和效能監測工具，找出效能不足的地方。
•建立前端必備知識：瀏覽器架構與渲染流程、網路與快取、JavaScript 記憶體管理機制，並學習正確的圖片資源、檔案壓縮與打包技術。
•在不同情境下使用正確的優化技術：Code Splitting、動態載入、Tree Shaking、模組化技巧、Web Workers 與 WebAssembly。
•使用 DevTool 檢測網站效能、實作 Debounce 與 Throttle，達到網站節流。
【目標讀者】
✦想要了解各種效能優化技巧的前端開發者
✦想要更理解前端開發底層知識的開發者
✦想了解前端開發近期發展與未來趨勢的讀者
下載範例程式檔案
本書的程式碼是由GitHub託管，可點選下面圖案前往下載：
https://github.com/kylemocode/f2e-performance-optimization-book-demo
產品目錄
推薦序二
推薦序三
第二版 自序
Ch00 寫在旅程之前，讓我們先理解底層邏輯
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
4-4 現代打包工具
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 面對大量請求，前端可以做些什麼？
Ch09 前端可觀測性Frontend Observability
9-1 什麼是 Frontend Observability？
9-2 前端可觀測性的獨特挑戰
9-3 前端可觀測性實作工具與策略
附錄 A 參考資源
作者介紹
我是 Kyle，也可以叫我老莫，目前在資安外商擔任軟體工程師，主要專注在 Web 開發領域。有個目標是 32 歲不當軟體工程師（寫這段文字的當下我 28 歲），希望能在短暫的人生中多多體驗不同可能性。有熟悉身心靈領域的朋友跟我說我的靈魂是一條充滿生命熱力的「覺醒之蛇」。我來這裡是為了打破「循規蹈矩」的框架，並教會人們如何活得更真、愛得更自由。當然有目標是一回事，能否成功又是另外一回事了，但相信探索的過程會充滿有趣的故事，歡迎大家來跟我交流！
2020 年於 Medium 發表〈今晚，我想來點 Web 前端效能優化大補帖！〉，分享許多前端知識及優化技巧。並於 2021 年以同主題參加 iThome 鐵人賽，獲得 Modern Web 組冠軍。
▍Email：
oldmo860617@gmail.com
▍Medium：
https://medium.com/@oldmo860617
▍IG：
kylemo.dev.life
規格
退貨說明
退貨須知：
- 依照消費者保護法的規定，您享有商品貨到次日起七天猶豫期(含例假日)的權益(請注意！猶豫期非試用期)，辦理退貨之商品必須是全新狀態(不得有刮傷、破損、受潮)且需完整(包含全部商品、配件、原廠內外包裝、贈品及所有附隨文件或資料的完整性等)。
- 請您以送貨廠商使用之包裝紙箱將退貨商品包裝妥當，若原紙箱已遺失，請另使用其他紙箱包覆於商品原廠包裝之外，切勿直接於原廠包裝上黏貼紙張或書寫文字。若原廠包裝損毀將可能被認定為已逾越檢查商品之必要程度，本公司得依毀損程度扣除回復原狀必要費用(整新費)後退費；請您先確認商品正確、外觀可接受，再行拆封，以免影響您的權利；若為產品瑕疵，本公司接受退貨。
依「通訊交易解除權合理例外情事適用準則」，下列商品不適用七日猶豫期，除產品本身有瑕疵外，不接受退貨：
- 易於腐敗、保存期限較短或解約時即將逾期。(如:生鮮蔬果、乳製品、冷凍冷藏食材、蛋糕)
- 依消費者要求所為之客製化給付。(如:客製印章、鋼筆刻字)
- 報紙、期刊或雜誌。
- 經消費者拆封之影音商品或電腦軟體。
- 非以有形媒介提供之數位內容或一經提供即為完成之線上服務，經消費者事先同意始提供。(如:電子書)
- 已拆封之個人衛生用品。(如:內衣褲、襪類、褲襪、刮鬍刀、除毛刀等貼身用品)
- 國際航空客運服務。
若您退貨時有下列情形，可能被認定已逾越檢查商品之必要程度而須負擔為回復原狀必要費用(整新費)，或影響您的退貨權利，請您在拆封前決定是否要退貨：
- 以數位或電磁紀錄形式儲存或著作權相關之商品(包含但不限於CD、VCD、DVD、電腦軟體等) 包裝已拆封者(除運送用之包裝以外)。
- 耗材(包含但不限於墨水匣、碳粉匣、紙張、筆類墨水、清潔劑補充包等)之商品包裝已拆封者(除運送用之包裝以外)。
- 衣飾鞋類/寢具/織品(包含但不限於衣褲、鞋子、襪子、泳裝、床單、被套、填充玩具)或之商品缺件(含購買商品、附件、內外包裝、贈品等)或經剪標或下水或商品有不可回復之髒污或磨損痕跡。
- 食品、美容/保養用品、內衣褲等消耗性或個人衛生用品、商品銷售頁面上特別載明之商品已拆封者(除運送用之包裝外一切包裝、包括但不限於瓶蓋、封口、封膜等接觸商品內容之包裝部分)或已非全新狀態(外觀有刮傷、破損、受潮等)與包裝不完整(缺少商品、附件、原廠外盒、保護袋、配件紙箱、保麗龍、隨貨文件、贈品等)。
- 家電、3C、畫作、電子閱讀器等商品，除商品本身有瑕疵外，退回之商品已拆封(除運送用之包裝外一切包裝、包括但不限於封膜等接觸商品內容之包裝部分、移除封條、拆除吊牌、拆除貼膠或標籤等情形)或已非全新狀態(外觀有刮傷、破損、受潮等)與包裝不完整(缺少商品、附件、原廠外盒、保護袋、配件紙箱、保麗龍、隨貨文件、贈品等)。
- 退貨程序請參閱【客服專區→常見問題→誠品線上退貨退款】之說明。
