課程簡介
專注于前端全鏈路的性能優(yōu)化
目標收益
培訓對象
正在從事傳統(tǒng)PC端Web頁面的技術開發(fā)人員。
希望從事移動端WebApp應用開發(fā)的技術人員。
對前端技術感興趣，希望從事這方面工作的人員。
掌握一些傳統(tǒng)的前端開發(fā)技術，想進一步學習移動端應用開發(fā)的人員。
課程大綱
| 1.圖片與頁面文件優(yōu)化 |
1.1如何為不同格式的圖片選擇合適的應用場景 1.2怎樣讓圖片加載得更快 1.3在服務器端進行圖片自動優(yōu)化的原理是什么 1.4怎樣精簡優(yōu)化HTML的代碼結構 1.5CSS的優(yōu)化應該遵循哪些原則 |
| 2.JavaScript 優(yōu)化 |
2.1如何提升JavaScript的執(zhí)行效率 2.2如何對JavaScript的緩存進行優(yōu)化 2.3如何選擇合適的模塊化加載方案 2.4怎樣才能減少瀏覽器的回流和重繪 2.5怎樣控制DOM大小并簡化DOM操作 |
| 3.靜態(tài)文件與構建工具優(yōu)化 |
3.1有哪些常用的壓縮工具 3.2怎樣打包才更合理 3.3版本號更新，你應該遵循哪些策略 3.4常用的前端構建工具有哪些？如何選型 3.5提升webpack打包效率的6個小技巧 |
| 4.頁面渲染優(yōu)化 |
4.1你是否清楚瀏覽器的渲染過程 4.2主流的頁面渲染技術架構和方案有哪些 4.3JSP是如何同步渲染出頁面的 4.4動態(tài)頁面靜態(tài)化要如何實施 4.5如何正確理解和實現(xiàn)前后端分離 |
| 5.服務端與網(wǎng)絡優(yōu)化 |
5.1如何合理配置CDN緩存 5.2主流的DNS優(yōu)化方法有哪些 5.3如何減少HTTP請求數(shù) 5.4減少Cookie大小的策略和益處 5.5緩存配置和優(yōu)化方案 5.6如何開啟和配置gzip壓縮 5.7如何開啟全站HTTPS 5.8升級HTTP2的好處有哪些？如何升級 |
| 6.前后端分離優(yōu)化性能 |
6.1前端分離前存什么問題 6.2如何解決分離前存在的問題 6.3中間件有哪些不可替代的優(yōu)勢 6.4前后端分離的應用方案有哪些 6.5什么是BigPipe？你了解它的工作原理嗎 |
| 7.研發(fā)流程優(yōu)化 |
7.1如何優(yōu)化前端團隊的研發(fā)流程 7.2前端和后端如何開展更高效的合作 7.3有哪些主流的技術方案？如何選型 7.4有哪些方案可供選擇？如何部署 7.5如何有效提升團隊整體的代碼質(zhì)量 |
| 8.全鏈路質(zhì)量監(jiān)控體系建設 |
8.1如何對HTML5的質(zhì)量做即時檢測 8.2如何進行HTML5的性能和錯誤監(jiān)控 8.3如何進行線上業(yè)務的基調(diào)監(jiān)控 8.4如何進行App的性能和錯誤監(jiān)控 |
|
1.圖片與頁面文件優(yōu)化 1.1如何為不同格式的圖片選擇合適的應用場景 1.2怎樣讓圖片加載得更快 1.3在服務器端進行圖片自動優(yōu)化的原理是什么 1.4怎樣精簡優(yōu)化HTML的代碼結構 1.5CSS的優(yōu)化應該遵循哪些原則 |
|
2.JavaScript 優(yōu)化 2.1如何提升JavaScript的執(zhí)行效率 2.2如何對JavaScript的緩存進行優(yōu)化 2.3如何選擇合適的模塊化加載方案 2.4怎樣才能減少瀏覽器的回流和重繪 2.5怎樣控制DOM大小并簡化DOM操作 |
|
3.靜態(tài)文件與構建工具優(yōu)化 3.1有哪些常用的壓縮工具 3.2怎樣打包才更合理 3.3版本號更新，你應該遵循哪些策略 3.4常用的前端構建工具有哪些？如何選型 3.5提升webpack打包效率的6個小技巧 |
|
4.頁面渲染優(yōu)化 4.1你是否清楚瀏覽器的渲染過程 4.2主流的頁面渲染技術架構和方案有哪些 4.3JSP是如何同步渲染出頁面的 4.4動態(tài)頁面靜態(tài)化要如何實施 4.5如何正確理解和實現(xiàn)前后端分離 |
|
5.服務端與網(wǎng)絡優(yōu)化 5.1如何合理配置CDN緩存 5.2主流的DNS優(yōu)化方法有哪些 5.3如何減少HTTP請求數(shù) 5.4減少Cookie大小的策略和益處 5.5緩存配置和優(yōu)化方案 5.6如何開啟和配置gzip壓縮 5.7如何開啟全站HTTPS 5.8升級HTTP2的好處有哪些？如何升級 |
|
6.前后端分離優(yōu)化性能 6.1前端分離前存什么問題 6.2如何解決分離前存在的問題 6.3中間件有哪些不可替代的優(yōu)勢 6.4前后端分離的應用方案有哪些 6.5什么是BigPipe？你了解它的工作原理嗎 |
|
7.研發(fā)流程優(yōu)化 7.1如何優(yōu)化前端團隊的研發(fā)流程 7.2前端和后端如何開展更高效的合作 7.3有哪些主流的技術方案？如何選型 7.4有哪些方案可供選擇？如何部署 7.5如何有效提升團隊整體的代碼質(zhì)量 |
|
8.全鏈路質(zhì)量監(jiān)控體系建設 8.1如何對HTML5的質(zhì)量做即時檢測 8.2如何進行HTML5的性能和錯誤監(jiān)控 8.3如何進行線上業(yè)務的基調(diào)監(jiān)控 8.4如何進行App的性能和錯誤監(jiān)控 |
近期公開課推薦
