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

莫力全 Kyle Mo

  • 出版商: 博碩文化
  • 出版日期: 2022-09-16
  • 定價: $650
  • 售價: 7.8$507
  • 語言: 繁體中文
  • 頁數: 368
  • ISBN: 6263332212
  • ISBN-13: 9786263332218
  • 相關分類: 使用者經驗 UX網頁設計
  • 銷售排行: 👍 2022 年度 繁體中文書 銷售排行 第 10 名
    🥇 2022/9 繁體中文書 銷售排行 第 1 名

    立即出貨(限量)

  • 今晚來點 Web 前端效能優化大補帖:一次搞定指標 × 工具 × 技巧,打造超高速網站(iThome鐵人賽系列書)-preview-1
  • 今晚來點 Web 前端效能優化大補帖:一次搞定指標 × 工具 × 技巧,打造超高速網站(iThome鐵人賽系列書)-preview-2
  • 今晚來點 Web 前端效能優化大補帖:一次搞定指標 × 工具 × 技巧,打造超高速網站(iThome鐵人賽系列書)-preview-3
  • 今晚來點 Web 前端效能優化大補帖:一次搞定指標 × 工具 × 技巧,打造超高速網站(iThome鐵人賽系列書)-preview-4
  • 今晚來點 Web 前端效能優化大補帖:一次搞定指標 × 工具 × 技巧,打造超高速網站(iThome鐵人賽系列書)-preview-5
  • 今晚來點 Web 前端效能優化大補帖:一次搞定指標 × 工具 × 技巧,打造超高速網站(iThome鐵人賽系列書)-preview-6
  • 今晚來點 Web 前端效能優化大補帖:一次搞定指標 × 工具 × 技巧,打造超高速網站(iThome鐵人賽系列書)-preview-7
  • 今晚來點 Web 前端效能優化大補帖:一次搞定指標 × 工具 × 技巧,打造超高速網站(iThome鐵人賽系列書)-preview-8
  • 今晚來點 Web 前端效能優化大補帖:一次搞定指標 × 工具 × 技巧,打造超高速網站(iThome鐵人賽系列書)-preview-9
  • 今晚來點 Web 前端效能優化大補帖:一次搞定指標 × 工具 × 技巧,打造超高速網站(iThome鐵人賽系列書)-preview-10
  • 今晚來點 Web 前端效能優化大補帖:一次搞定指標 × 工具 × 技巧,打造超高速網站(iThome鐵人賽系列書)-preview-11
  • 今晚來點 Web 前端效能優化大補帖:一次搞定指標 × 工具 × 技巧,打造超高速網站(iThome鐵人賽系列書)-preview-12
  • 今晚來點 Web 前端效能優化大補帖:一次搞定指標 × 工具 × 技巧,打造超高速網站(iThome鐵人賽系列書)-preview-13
  • 今晚來點 Web 前端效能優化大補帖:一次搞定指標 × 工具 × 技巧,打造超高速網站(iThome鐵人賽系列書)-preview-14
  • 今晚來點 Web 前端效能優化大補帖:一次搞定指標 × 工具 × 技巧,打造超高速網站(iThome鐵人賽系列書)-preview-15
  • 今晚來點 Web 前端效能優化大補帖:一次搞定指標 × 工具 × 技巧,打造超高速網站(iThome鐵人賽系列書)-preview-16
  • 今晚來點 Web 前端效能優化大補帖:一次搞定指標 × 工具 × 技巧,打造超高速網站(iThome鐵人賽系列書)-preview-17
  • 今晚來點 Web 前端效能優化大補帖:一次搞定指標 × 工具 × 技巧,打造超高速網站(iThome鐵人賽系列書)-preview-18
  • 今晚來點 Web 前端效能優化大補帖:一次搞定指標 × 工具 × 技巧,打造超高速網站(iThome鐵人賽系列書)-preview-19
  • 今晚來點 Web 前端效能優化大補帖:一次搞定指標 × 工具 × 技巧,打造超高速網站(iThome鐵人賽系列書)-preview-20
  • 今晚來點 Web 前端效能優化大補帖:一次搞定指標 × 工具 × 技巧,打造超高速網站(iThome鐵人賽系列書)-preview-21
今晚來點 Web 前端效能優化大補帖:一次搞定指標 × 工具 × 技巧,打造超高速網站(iThome鐵人賽系列書)-preview-1

買這商品的人也買了...

相關主題

商品描述

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

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

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




目標讀者

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


下載範例程式檔案

本書的程式碼是由GitHub託管,可點選下面圖案前往下載:
    

作者簡介

莫力全 Kyle Mo

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

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

▍Email:
oldmo860617@gmail.com

▍Medium:
https://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 參考資源