心理祭截止加碼
今晚來點Web前端效能優化大補帖:從效能優化掌握前端開發的底層邏輯 全彩版(iThome鐵人賽系列書)
(0)

今晚來點Web前端效能優化大補帖:從效能優化掌握前端開發的底層邏輯 全彩版(iThome鐵人賽系列書)

  • 定價:720
  • 優惠價:9648
  • 本商品單次購買10本85折612
  • 運送方式:
  • 臺灣與離島
  • 海外
  • 可配送點:台灣、蘭嶼、綠島、澎湖、金門、馬祖
  • 可配送點:台灣、蘭嶼、綠島、澎湖、金門、馬祖
載入中...
  • 分享
 

內容簡介

第二版全面升級成全彩印刷,閱讀上更加美觀舒適!
內容也更新成最新技術,快速適應未來潮流!
 
「前端效能優化」最全面的書籍!
精通前端基礎和優化技術,為你打造高效能網站!
 
  本書內容改編自第 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託管,可點選下面圖案前往下載:
  github.com/kylemocode/f2e-performance-optimization-book-demo
 
專業推薦
 
  「這本書是 Kyle 在 AI 時代前,對於經典前端技術的集大成之作,而在 AI 時代的考驗下,這些內容仍是歷久彌新,仍舊佔據我們日常開發技術決策的要角。」——John Liu(Engineering Manager @Netskope)
 
  「距離上次出版已隔數年,作者仍深耕於前端領域,持續探索新技術,並用清晰的文字,梳理出複雜概念背後的脈絡。更難能可貴的是,他更長期投入於社群,帶領許多台灣的新血投入產業、啟發更多人熱愛前端。」——Lichin Lin(Design Engineer @GitHub)
 
  「前端效能優化是一個永無止境的主題,因為技術一直在進步,使用者的期待也一直在提高。但我一直相信與其追求每一個細節都優化到極致,不如先建立正確的效能觀念,知道什麼時候該優化以及該優化什麼。我真心推薦你好好讀這本書,而且一定要動手實作,親自驗證書中提到的技術。」——高見龍(五倍學院 創辦人 & 院長)
 

作者介紹

作者簡介
 
莫力全 Kyle Mo
 
  我是 Kyle,也可以叫我老莫,目前在資安外商擔任軟體工程師,主要專注在 Web 開發領域。有個目標是 32 歲不當軟體工程師(寫這段文字的當下我 28 歲),希望能在短暫的人生中多多體驗不同可能性。有熟悉身心靈領域的朋友跟我說我的靈魂是一條充滿生命熱力的「覺醒之蛇」。我來這裡是為了打破「循規蹈矩」的框架,並教會人們如何活得更真、愛得更自由。當然有目標是一回事,能否成功又是另外一回事了,但相信探索的過程會充滿有趣的故事,歡迎大家來跟我交流!
 
  2020 年於 Medium 發表〈今晚,我想來點 Web 前端效能優化大補帖!〉,分享許多前端知識及優化技巧。並於 2021 年以同主題參加 iThome 鐵人賽,獲得 Modern Web 組冠軍。
 
  ▍Email:
  oldmo860617@gmail.com
 
  ▍Medium:
  medium.com/@oldmo860617
 
  ▍IG:
  kylemo.dev.life
 

目錄

推薦序一
推薦序二
推薦序三
第二版 自序

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

詳細資料

  • ISBN:9786264143721
  • 規格:平裝 / 400頁 / 17 x 23 x 1.88 cm / 普通級 / 全彩印刷 / 初版
  • 出版地:台灣

最近瀏覽商品

 

相關活動

  • 【自然科普、電腦資訊】AI時代的職場生存術:打開職場新思維,打造新世代職場競爭力,電子書85折起
 

購物說明

若您具有法人身份為常態性且大量購書者,或有特殊作業需求,建議您可洽詢「企業採購」。 

退換貨說明 

會員所購買的商品均享有到貨十天的猶豫期(含例假日)。退回之商品必須於猶豫期內寄回。 

辦理退換貨時,商品必須是全新狀態與完整包裝(請注意保持商品本體、配件、贈品、保證書、原廠包裝及所有附隨文件或資料的完整性,切勿缺漏任何配件或損毀原廠外盒)。退回商品無法回復原狀者,恐將影響退貨權益或需負擔部分費用。 

訂購本商品前請務必詳閱商品退換貨原則 

  • 心理祭截止(1/6-1/8)
  • 東立動漫節
  • 書評里程翻倍送