什么是web前端
CS架構(gòu)訪問(wèn)的是本地的資源
Web前端是動(dòng)態(tài)地、增量地訪問(wèn)、加載資源的一個(gè)過(guò)程
請(qǐng)求過(guò)程中一些潛在的性能優(yōu)化點(diǎn) :joy:
- dns是否可以通過(guò)緩存減少dns查詢時(shí)間？
- 網(wǎng)絡(luò)請(qǐng)求的過(guò)程走最近的網(wǎng)絡(luò)環(huán)境？
- 相同的靜態(tài)資源是否可以緩存？
- 能否減少請(qǐng)求http請(qǐng)求大??？
- 減少http請(qǐng)求
-
服務(wù)端渲染
資源的合并與壓縮
目的：
- 減少http請(qǐng)求數(shù)量
- 減少請(qǐng)求資源的大小
常見(jiàn)方式
- html壓縮 （提升效果不太明顯）
- css壓縮
- js的壓縮和混亂
- 文件合并
- 開(kāi)啟gzip
壓縮
| html壓縮 | css壓縮 | JS壓縮 |
|---|---|---|
| 使用在線網(wǎng)站進(jìn)行壓縮 | 無(wú)效代碼刪除 | 無(wú)效字符的刪除 |
| nodejs提供了html-minifier工具 | css語(yǔ)義合并 | 剔除注釋 |
| 后端模板引擎渲染壓縮 | 代碼語(yǔ)義的縮減和優(yōu)化 | |
| 代碼保護(hù) |
其中，CSS壓縮和JS壓縮是比較重要的，JS的壓縮和混亂可以保護(hù)業(yè)務(wù)邏輯
合并
不合并文件的問(wèn)題
image
合并文件
問(wèn)題
- 首屏渲染問(wèn)題 （合并后JS文件較大）
- 使用框架的時(shí)候（如vue、react），頁(yè)面的渲染是依賴(lài)于JS的，如果合并的JS較大，那么首屏渲染時(shí)間會(huì)比較大（如果沒(méi)有使用SSR服務(wù)端渲染）
- 緩存失效問(wèn)題
建議合并場(chǎng)景
- 公共庫(kù)合并
- 不同頁(yè)面的合并
- 見(jiàn)機(jī)行事，隨機(jī)應(yīng)變
