回首頁  
帳號
 
關於博碩 博碩好讀 校園圖書 MOCC認證 下載教學 元學堂

博碩好讀
  新書推薦
  出版預告
  名家名著
  iT達人祕笈
 

分類索引
 

出版總覽
 

讀者服務
  徵求作者
 
首頁 >> 書籍介紹
 
 
點我可放大圖片
 
書名：今晚來點Web前端效能優化大補帖：從效能優化掌握前端開發的底層邏輯 全彩版（iThome鐵人賽系列書）
書號：MP22513 作者：莫力全 Kyle Mo ISBN： 978-626-414-372-1
定價：NT$720元 印刷：彩色 頁數：400頁
書籍規格：17*23 上市日：2025/11/28 譯者：(無)
學習定位：初階 本書附件：網路下載範例檔  
前往購買 >> 蝦皮購物 類別：電腦技術  
       
快速前往 快速前往 快速前往        

 

 
    第二版全面升級成全彩印刷，閱讀上更加美觀舒適！
    內容也更新成最新技術，快速適應未來潮流！

    「前端效能優化」最全面的書籍！
    精通前端基礎和優化技術，為你打造高效能網站！

    本書內容改編自第 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，達到網站節流。

    【目標讀者】
    ✦想要了解各種效能優化技巧的前端開發者
    ✦想要更理解前端開發底層知識的開發者
    ✦想了解前端開發近期發展與未來趨勢的讀者

    【專業推薦】
    「這本書是 Kyle 在 AI 時代前，對於經典前端技術的集大成之作，而在 AI 時代的考驗下，這些內容仍是歷久彌新，仍舊佔據我們日常開發技術決策的要角。」

    John Liu
    Engineering Manager @Netskope



    「距離上次出版已隔數年，作者仍深耕於前端領域，持續探索新技術，並用清晰的文字，梳理出複雜概念背後的脈絡。更難能可貴的是，他更長期投入於社群，帶領許多台灣的新血投入產業、啟發更多人熱愛前端。」

    Lichin Lin
    Design Engineer @GitHub



    「前端效能優化是一個永無止境的主題，因為技術一直在進步，使用者的期待也一直在提高。但我一直相信與其追求每一個細節都優化到極致，不如先建立正確的效能觀念，知道什麼時候該優化以及該優化什麼。我真心推薦你好好讀這本書，而且一定要動手實作，親自驗證書中提到的技術。」

    高見龍
    五倍學院 創辦人 & 院長




    下載範例程式檔案

    本書的程式碼是由GitHub託管，可點選下面圖案前往下載：
 
    推薦序一
    推薦序二
    推薦序三
    第二版 自序

    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 Mo

    我是 Kyle，也可以叫我老莫，目前在資安外商擔任軟體工程師，主要專注在 Web 開發領域。有個目標是 32 歲不當軟體工程師（寫這段文字的當下我 28 歲），希望能在短暫的人生中多多體驗不同可能性。有熟悉身心靈領域的朋友跟我說我的靈魂是一條充滿生命熱力的「覺醒之蛇」。我來這裡是為了打破「循規蹈矩」的框架，並教會人們如何活得更真、愛得更自由。當然有目標是一回事，能否成功又是另外一回事了，但相信探索的過程會充滿有趣的故事，歡迎大家來跟我交流！

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

    ▍Email：
    [email protected]

    ▍Medium：
    https://medium.com/@oldmo860617

    ▍IG：
    kylemo.dev.life
 
    線上下載
 
 		  
     

博碩文化客服信箱
 

[email protected]
 
文教業務團隊
台北、新北、桃園、基隆、宜蘭、花蓮、金門
汪 玉 鳳
LINE ID：0925177716
0925-177716
[email protected]
助理分機 519
新竹、苗栗、台中、彰化、南投、雲林
嘉義、台南、高雄、屏東、台東、澎湖
林 月 玲
LINE ID：0926858627
0926-858627
[email protected]
助理分機 238
 

 

 
 

 

博碩文化股份有限公司 DrMaster Press Co., Ltd.
台灣新北市汐止區新台五路一段112號10樓A棟
Building A, 10F, No.112, Xintai 5th Rd., Sec.1,Xizhi Dist., New Taipei City 221, Taiwan
Tel：02-2696-2869　Fax：02-2696-2867　劃撥帳號：17484299

Copyright© DrMaster Press Co., Ltd. All Rights Reserved.