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