第1章 課程簡介 對課程做簡單的介紹。 1-1 課程簡介 第2章 資源合并與壓縮 通過本章，我們學習和理解了web前端的概念，以及性能優化的意義所在，并且通過實戰中的壓縮與合并，深入理解了減少http請求數和減少http請求資源大小兩個優化要點，并且通過實戰，幫助學生掌握如何通過網站進行壓縮與合并，如果使用半自動化的gulp腳本進行壓縮與合并，最終通過優化前后的性能對比，更加量化地去理解了性能... 2-1 資源合并與壓縮-http 清求的過程及潛在的性能優化點 2-2 資源合并與壓縮-html 壓縮 2-3 資源合并與壓縮-css 及 js壓縮 2-4 資源合并與壓縮-文件合并 2-5 資源合并與壓縮-實戰-在線工具壓縮 2-6 資源合并與壓縮-實戰-fis3 構建工具自動壓縮合并-流程 2-7 資源合并與壓縮-實戰-fis3 構建工具自動壓縮合并-實操 2-8 資源合并與壓縮-總結 第3章 圖片相關的優化 通過本章，幫助學員學習和掌握圖片相關的優化方法，理解不同圖片格式分別是什么以及如果在不同的業務場景中使用不同的圖片格式和圖片加載方式。 3-1 圖片相關的優化- 一張JPG圖片的解析過程 3-2 圖片相關的優化- png8、png24、png32之間的區別 3-3 圖片相關的優化- 不同格式圖片常用的業務場景 3-4 圖片相關的優化- 圖片壓縮幾種方法-雪碧圖、Image inline 3-5 圖片相關的優化- 圖片壓縮案例分析 3-6 圖片相關的優化- 圖片壓縮實戰（上） webp、inline-image 3-7 圖片相關的優化- 圖片壓縮實戰（下）雪碧圖、svg 第4章 css 和 js 的裝載與執行 通過本章，幫助學員理解css和js在頁面中的加載機制，讓學員能初步建立通過理解瀏覽器渲染機制進行代碼優化提升頁面訪問性能的概念，同時掌握css、js在裝載與執行階段的基礎優化。 4-1 css和js的裝載與執行-HTML 頁面加載渲染的過程 4-2 css和js的裝載與執行-HTML 演染過程的一些特點 4-3 css和js的裝載與執行-順序執行、并發加載 4-4 css和js的裝載與執行-css 阻塞和 js 阻塞 4-5 css和js的裝載與執行-依賴關系、js引入的方式 4-6 css和js的裝載與執行-加載和執行的一些優化點 4-7 css和js的裝載與執行-實戰-驗證對于某個域名瀏覽器并發數是有上限的 4-8 css和js的裝載與執行-實戰-驗證css加載不會阻塞后面的 js 并發加載 4-9 css和js的裝載與執行-實戰-async、defter 4-10 css和js的裝載與執行-實戰-動態異步引入js實操 4-11 css和js的裝載與執行-實戰-@import、link實操 4-12 css和js的裝載與執行-實戰-手機淘寶加載分析 第5章 懶加載與預加載 通過本章，幫助學員理解資源加載時機對前端性能優化的影響，同時實戰理解懶加載和預加載的實現機制。 5-1 懶加載與預加載-懶加載原理 5-2 懶加載與預加載-預加載原理 5-3 懶加載與預加載-懶加載、預加載使用場景 5-4 懶加載與預加載-懶加載原生 js 和 zepto.lazyload 5-5 懶加載與預加載-預加載原生 js 和 PreloadJS 實現 第6章 重繪與回流 通過本章，幫助學員理解高階的瀏覽器渲染機制，深入理解瀏覽器重繪與回流的機制，從而掌握如何深入地從代碼層面基于瀏覽器的渲染機制進行優化。 6-1 重繪與回流-css 性能讓 Javacript 變慢？ 6-2 重繪與回流-什么是重繪與回流 6-3 重繪與回流-避免重繪回流的兩種方法 6-4 重繪與回流-案例解析-重繪、回流及圖層 6-5 重繪與回流-案例解析- chrome 瀏覽器自動創建圖層 layer 6-6 重繪與回流- 實戰優化點總結 6-7 重繪與回流- 實戰演練 1 6-8 重繪與回流- 實戰演練 2 6-9 重繪與回流- 實戰演練 3 6-10 重繪與回流- 實戰演練 4 6-11 重繪與回流- 實戰演練 5 6-12 重繪與回流- 實戰演練 6 6-13 重繪與回流- 實戰演練 7 6-14 重繪與回流- 實戰演練 8 ,9 第7章 瀏覽器存儲 通過本章，幫助學員理解瀏覽器存儲的核心概念及其在關鍵業務中的應用，通過瀏覽器存儲，可以在瀏覽器端建立可控制的緩存機制，從而幫助用戶在自己的關鍵業務上進行相應的優化。 7-1 瀏覽器存儲-cookies 7-2 瀏覽器存儲-LocalStorage、SessionStorage 7-3 瀏覽器存儲-IndexedDB 7-4 瀏覽器存儲-案例解析 7-5 瀏覽器存儲-Service Workers產生