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