【在線(xiàn)網(wǎng)課】Web前端性能優(yōu)化讓你頁(yè)面速度飛起來(lái)

讓你頁(yè)面速度飛起來(lái) Web前端性能優(yōu)化

從構(gòu)建、瀏覽器渲染、緩存、PWA、服務(wù)端優(yōu)化等多方面，梳理前端性能優(yōu)化的技術(shù)點(diǎn)、綜合分析技術(shù)的原理，根據(jù)不同的業(yè)務(wù)場(chǎng)景選擇合適的性能優(yōu)化點(diǎn)進(jìn)行應(yīng)用，最終為你的網(wǎng)站帶來(lái)顯著的速度提升和整體性能提升。

第1章 課程簡(jiǎn)介

對(duì)課程做簡(jiǎn)單的介紹。

第2章 資源合并與壓縮

通過(guò)本章，我們學(xué)習(xí)和理解了web前端的概念，以及性能優(yōu)化的意義所在，并且通過(guò)實(shí)戰(zhàn)中的壓縮與合并，深入理解了減少http請(qǐng)求數(shù)和減少http請(qǐng)求資源大小兩個(gè)優(yōu)化要點(diǎn)，并且通過(guò)實(shí)戰(zhàn)，幫助學(xué)生掌握如何通過(guò)網(wǎng)站進(jìn)行壓縮與合并，如果使用半自動(dòng)化的gulp腳本進(jìn)行壓縮與合并，最終通過(guò)優(yōu)化前后的性能對(duì)比，更加量化地去理解了性能...

第3章 圖片相關(guān)的優(yōu)化

通過(guò)本章，幫助學(xué)員學(xué)習(xí)和掌握?qǐng)D片相關(guān)的優(yōu)化方法，理解不同圖片格式分別是什么以及如果在不同的業(yè)務(wù)場(chǎng)景中使用不同的圖片格式和圖片加載方式。

第4章 css 和 js 的裝載與執(zhí)行

通過(guò)本章，幫助學(xué)員理解css和js在頁(yè)面中的加載機(jī)制，讓學(xué)員能初步建立通過(guò)理解瀏覽器渲染機(jī)制進(jìn)行代碼優(yōu)化提升頁(yè)面訪(fǎng)問(wèn)性能的概念，同時(shí)掌握css、js在裝載與執(zhí)行階段的基礎(chǔ)優(yōu)化。

第5章 懶加載與預(yù)加載

通過(guò)本章，幫助學(xué)員理解資源加載時(shí)機(jī)對(duì)前端性能優(yōu)化的影響，同時(shí)實(shí)戰(zhàn)理解懶加載和預(yù)加載的實(shí)現(xiàn)機(jī)制。

第6章 重繪與回流

通過(guò)本章，幫助學(xué)員理解高階的瀏覽器渲染機(jī)制，深入理解瀏覽器重繪與回流的機(jī)制，從而掌握如何深入地從代碼層面基于瀏覽器的渲染機(jī)制進(jìn)行優(yōu)化。

第7章 瀏覽器存儲(chǔ)

通過(guò)本章，幫助學(xué)員理解瀏覽器存儲(chǔ)的核心概念及其在關(guān)鍵業(yè)務(wù)中的應(yīng)用，通過(guò)瀏覽器存儲(chǔ)，可以在瀏覽器端建立可控制的緩存機(jī)制，從而幫助用戶(hù)在自己的關(guān)鍵業(yè)務(wù)上進(jìn)行相應(yīng)的優(yōu)化。

第8章 緩存優(yōu)化

通過(guò)本章，幫助學(xué)員掌握如何使用在線(xiàn)cdn提升靜態(tài)資源的加載速度，如果使用dns-prefetch，以及如何使用服務(wù)端緩存來(lái)進(jìn)行搭建，更加完善的資源請(qǐng)求緩存機(jī)制。

第9章 SSR（服務(wù)端渲染）

通過(guò)本章，幫助學(xué)員了解服務(wù)端渲染的核心概念，以及vue如何做服務(wù)端渲染，從而讓學(xué)員更加深入地理解渲染的性能消耗在性能優(yōu)化中的意義。