今晚來點Web前端效能優化大補帖：一次搞定指標×工具×技巧，打造超高速網站(iThome鐵人賽系列書)

活動訊息

2025金石堂希望書包—500元幫助一個弱勢孩子安心上學！馬上認購↓↓↓

父親節倒數！現在準備還來得及！全館滿1200元回饋金幣3倍，參展商品再送100點金幣 前往會場 ↓↓↓

用閱讀開啟視野，讓書成為照亮你人生的光
【金石堂選書】本月推薦您這些好書👉 快來看看

7/10上市！遊戲主機／組合包／遊戲片／周邊配件現貨熱賣中！

內容簡介

針對「前端效能優化」技巧最全面的中文書籍！

 

精通前端基礎和優化技術，為你打造高效能網站！

 

本書內容改編自第 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　

 

作者

莫力全 Kyle Mo

 

雜食性軟體工程師，任何有興趣的技術都想要親自嘗試與學習，其中又尤其熱愛 Web 前端技術。喜歡分享技術與經驗，一陣子沒寫技術文章就會感到全身不舒服。除了對軟體開發充滿興趣外，也是個籃球狂熱者，也許可以在各大籃球賽見到我的身影。

 

2020 年於 Medium 發表〈今晚，我想來點 Web 前端效能優化大補帖！〉，分享許多前端知識及優化技巧。並於 2021 年以同主題參加 iThome 鐵人賽，獲得 Modern Web 組冠軍。

 

▍Email：

oldmo860617@gmail.com

 

▍Medium：

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 參考資源

 

配送方式

• 台灣
  • 國內宅配：本島、離島
  • 到店取貨：
    不限金額免運費
    
• 海外
  • 國際快遞：全球
  • 港澳店取：
    

詳細資料

詳細資料

• • 語言
  • 中文繁體
  • 裝訂
  • 紙本平裝
• • ISBN
  • 9786263332218
  • 分級
  • 普通級
• • 頁數
  • 368
  • 商品規格
  • 23*17*2
• • 出版地
  • 台灣
  • 適讀年齡
  • 全齡適讀
• • 注音
  • 級別

中文書＞電腦資訊＞網頁開發＞JavaScript／jQuery

商品評價

寫評價