0人評分過此書
針對「前端效能優化」技巧最全面的中文書籍！
精通前端基礎和優化技術，為你打造高效能網站！
本書內容改編自第 13 屆 2021 iThome 鐵人賽，Modern Web 組冠軍網路系列文章──《今晚，我想來點 Web 前端效能優化大補帖！》。本書彙整了網頁前端應用效能優化的各種技巧，並以此為出發點，延伸至許多前端領域必備的知識。搭配簡易圖文和範例檔實作，讓你打造高效能的前端應用，解決網站效能痛點，提升速度與使用者體驗，增加網站曝光率與流量！
四大重點
▍小細節讓效能UP
除了依賴指標，還要從對的地方著手！
▍前端開發必備心法
用對優化工具和技術，提升效能&使用者體驗。
▍深入技術原理
介紹前端技術原理，精通前端應用知識。
▍提供完整範例檔
跟著實作範例學習，強化前端優化技能！
精彩內容
●認識 Core Web Vitals、RAIL Model、Lighthouse 等指標和效能監測工具，找出效能不足的地方。
●建立前端必備知識：瀏覽器架構與渲染流程、網路與快取、JavaScript 記憶體管理機制，並學習正確的圖片資源、檔案壓縮與打包技術。
●在不同情境下使用正確的優化技術：Code Splitting、動態載入、Tree Shaking、模組化技巧、Web Workers 與 WebAssembly。
●使用 DevTool 檢測網站效能、實作 Debounce 與 Throttle，達到網站節流。
專業推薦
「不論是剛入門的工程師或者資深工程師，都可以在這本書得到不同階段的啟發並且應用在實戰當中。」
──── Verybuy Fashion 資深前端技術總監│Bingo Yang
「作者將業界所交流的各式各樣經驗，在這本書中一次性地統整起來，不僅僅只是教你效能優化的技巧，甚至帶著你從歷史淵源、使用者面向、網路傳輸、渲染機制等不同角度來看效能。」
──── 適才科技技術長 & Web 實驗室社群發起人│KK
「前端領域的發展十分迅速，很難得有作者用心將這些知識整理成書，帶領讀者從發現問題開始，了解背後原因與需求、實作練習，以及在每章節附上延伸學習的資源。」
──── Design engineer@PicCollage│Lichin
「這本書深入淺出說明效能優化的各道題目，篇篇精彩有趣。除了從遠古到現今的技術解析和優劣比較，並且圖文並茂、附上實戰實例，讀起來讓人欲罷不能。」
────《 打造高速網站從網站指標開始 》、技術部落格「Summer。桑莫。夏天」作者│Summer
目標讀者
✦想要了解各種效能優化技巧的前端開發者
✦想要更理解前端開發底層知識的開發者
✦想了解前端開發近期發展與未來趨勢的讀者
精通前端基礎和優化技術，為你打造高效能網站！
本書內容改編自第 13 屆 2021 iThome 鐵人賽，Modern Web 組冠軍網路系列文章──《今晚，我想來點 Web 前端效能優化大補帖！》。本書彙整了網頁前端應用效能優化的各種技巧，並以此為出發點，延伸至許多前端領域必備的知識。搭配簡易圖文和範例檔實作，讓你打造高效能的前端應用，解決網站效能痛點，提升速度與使用者體驗，增加網站曝光率與流量！
四大重點
▍小細節讓效能UP
除了依賴指標，還要從對的地方著手！
▍前端開發必備心法
用對優化工具和技術，提升效能&使用者體驗。
▍深入技術原理
介紹前端技術原理，精通前端應用知識。
▍提供完整範例檔
跟著實作範例學習，強化前端優化技能！
精彩內容
●認識 Core Web Vitals、RAIL Model、Lighthouse 等指標和效能監測工具，找出效能不足的地方。
●建立前端必備知識：瀏覽器架構與渲染流程、網路與快取、JavaScript 記憶體管理機制，並學習正確的圖片資源、檔案壓縮與打包技術。
●在不同情境下使用正確的優化技術：Code Splitting、動態載入、Tree Shaking、模組化技巧、Web Workers 與 WebAssembly。
●使用 DevTool 檢測網站效能、實作 Debounce 與 Throttle，達到網站節流。
專業推薦
「不論是剛入門的工程師或者資深工程師，都可以在這本書得到不同階段的啟發並且應用在實戰當中。」
──── Verybuy Fashion 資深前端技術總監│Bingo Yang
「作者將業界所交流的各式各樣經驗，在這本書中一次性地統整起來，不僅僅只是教你效能優化的技巧，甚至帶著你從歷史淵源、使用者面向、網路傳輸、渲染機制等不同角度來看效能。」
──── 適才科技技術長 & Web 實驗室社群發起人│KK
「前端領域的發展十分迅速，很難得有作者用心將這些知識整理成書，帶領讀者從發現問題開始，了解背後原因與需求、實作練習，以及在每章節附上延伸學習的資源。」
──── Design engineer@PicCollage│Lichin
「這本書深入淺出說明效能優化的各道題目，篇篇精彩有趣。除了從遠古到現今的技術解析和優劣比較，並且圖文並茂、附上實戰實例，讀起來讓人欲罷不能。」
────《 打造高速網站從網站指標開始 》、技術部落格「Summer。桑莫。夏天」作者│Summer
目標讀者
✦想要了解各種效能優化技巧的前端開發者
✦想要更理解前端開發底層知識的開發者
✦想了解前端開發近期發展與未來趨勢的讀者
- 推薦序一
- 推薦序二
- 推薦序三
- 推薦序四
- 序言
-
Chapter 01 認識前端效能優化與衡量指標 Planning And Metrics
-
1-1 前端效能優化為什麼如此重要？
-
1-2 效能的監控工具—— Performance Analyzers
-
1-3 衡量前端效能的重要指標：Core Web Vitals
-
1-4 從使用者的角度出發—— RAIL Model
-
-
Chapter 02 網頁資源優化 Assets Optimization
-
2-1 程式碼最佳化
-
2-2 圖片資源最佳化
-
2-3 檔案壓縮 File Compression
-
2-4 可適性服務 Adaptive Serving
-
-
Chapter 03 渲染流程優化 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
-
-
Chapter 04 組建流程優化 Build Process Optimization
-
4-1 拆分應用的 Bundle—— Code Splitting ＆ Dynamic Import
-
4-2 移除用不到的程式碼—— Tree Shaking
-
4-3 犧牲支援度減少 Bundle Size—— Polyfill-less Bundling Script
-
-
Chapter 05 快取與網路機制 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 版本
-
-
Chapter 06 初探 Web Workers 與 WebAssembly
-
6-1 讓主執行緒喘口氣吧—— Web Workers
-
6-2 讓 Web 充滿更多可能性—— WebAssembly
-
-
Chapter 07 記憶體與渲染架構 Memory ＆ Rendering Architecture
-
7-1 認識 JavaScript 的記憶體管理機制
-
7-2 前端應用的各種渲染架構
-
-
Chapter 08 DevTool Debugging ＆ 前端節流
-
8-1 善用 DevTool 來監控網頁效能—— Runtime Performance Debugging
-
8-2 面對大量請求，前端可以做些什麼？
-
- Appendix A 參考資源
- 出版地 ： 臺灣
- 語言 ： 繁體中文
評分與評論
請登入後再留言與評分
EPUB
PDF
PDF
PDF
