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