網(wǎng)絡(luò)優(yōu)化
- 減少請(qǐng)求文件數(shù)侍芝，資源合并（雪碧圖、SVG（Iconfont）埋同、JS/CSS文件合并）
- 減少資源體積竭贩，資源壓縮（精簡(jiǎn)代碼；壓縮JS/CSS莺禁、圖片WebP格式留量、開啟Gzip）
- 提高網(wǎng)絡(luò)傳輸（緩存、PWA哟冬、CDN楼熄、HTTP2多路復(fù)用）
- DNS優(yōu)化：使用瀏覽器DNS緩存 、計(jì)算機(jī)DNS緩存浩峡、 服務(wù)器DNS緩存可岂，防止DNS迭代查詢；使用Keep-Alive特性來減少DNS查找頻率翰灾；使用較少的域名（服務(wù)器主機(jī)）來減少DNS查找的數(shù)量缕粹；DNS預(yù)解析
圖片相關(guān)
- 懶加載、預(yù)加載纸淮、漸進(jìn)式加載平斩、精靈圖、iconfont咽块、WebP
重排與重繪 / 瀏覽器渲染優(yōu)化
- CSS引入放<body>前面绘面，提前生成CSS rule
- JS引入放<body>后面，不堵塞渲染
- 對(duì)于復(fù)雜的動(dòng)畫：
display: none;或position: absolute;減少對(duì)Render Tree的干擾，提升painting速度
框架優(yōu)化
- 使用路由實(shí)現(xiàn)單頁應(yīng)用
- 前端路由使用路由懶加載揭璃，減小文件體積晚凿，提高首屏渲染速度
- 狀態(tài)管理，redux/vuex
- 服務(wù)端渲染(SSR)瘦馍，提高首屏渲染速度
- 線上環(huán)境使用引用線上專用js文件
體驗(yàn)優(yōu)化
- 先顯示框架再異步請(qǐng)求加載數(shù)據(jù)
- 加載或跳轉(zhuǎn)時(shí)使用loading動(dòng)畫
