一智嚷、資源的壓縮與合并
1.為什么要壓縮和合并
減少http請(qǐng)求數(shù)量
減少請(qǐng)求資源大小
2.HTML壓縮
使用在線工具進(jìn)行壓縮
使用html-minifier等npm工具
3.CSS壓縮
使用在線工具壓縮
使用clean-css等npm工具
webpack配置
4.JS壓縮和混淆
使用在線工具壓縮
webpack有關(guān)配置
5.CSS砰奕、JS文件合并
若是若干個(gè)小文件域帐，可以考慮合并
無沖突样悟，服務(wù)相同的模塊仁讨，建議合并
有利于首屏呈現(xiàn)的優(yōu)先加載绽乔，其他的延遲加載 不建議合并
二复哆、圖片優(yōu)化
1.圖片格式優(yōu)化
（一）JPEG/JPG
優(yōu)點(diǎn)：很好的壓縮比瘦馍，畫質(zhì)也可以被很好的保存
使用場(chǎng)景：展示較大的圖片并較好的保存畫質(zhì)歼秽，比如首頁的輪播圖
缺點(diǎn)：由于壓縮比較高，若是比較追求紋理和邊緣那就不太合適情组，比如說logo就不太會(huì)用JPG
壓縮工具：github–imagemin
（二）PNG
優(yōu)點(diǎn)：相對(duì)于JPG來說燥筷，能更好的處理紋理和邊緣
使用場(chǎng)景：logo，圖標(biāo)等小圖片
缺點(diǎn)：由于注重紋理等院崇，體積會(huì)比較大肆氓，色彩與JPG不相上下
壓縮工具：imagemin–pngquant
（三）SVG
優(yōu)點(diǎn):svg是矢量圖形,改變大小不會(huì)失真
缺點(diǎn)：兼容性相對(duì)較差
使用場(chǎng)景：制作思維腦圖等
2.圖片加載優(yōu)化
（一）圖片懶加載
原理：一張圖片就是一個(gè)img標(biāo)簽，瀏覽器是否發(fā)起請(qǐng)求圖片是根據(jù)img的src屬性底瓣，所以實(shí)現(xiàn)懶加載的關(guān)鍵就是谢揪，在圖片沒有進(jìn)入可視區(qū)域時(shí)，先不給img的src賦值捐凭，這樣瀏覽器就不會(huì)發(fā)送請(qǐng)求了拨扶，等到圖片進(jìn)入可視區(qū)域再給src賦值。
原生的圖片懶加載方案
img的一個(gè)屬性
<img loading = 'lazy' src='' width='' height=''>
第三方插件懶加載方案
比如lazyload
（二）使用漸進(jìn)式圖片（要求美工制作）
上面的是JPG默認(rèn)的加載方式 從上至下加載
下面的是漸進(jìn)式的加載方式茁肠，從低像素到高像素
漸進(jìn)式圖片的優(yōu)點(diǎn)
優(yōu)點(diǎn)：始終讓用戶看到圖片的全貌患民，可能剛開始不太清晰，慢慢清晰
（三）使用響應(yīng)式圖片
所有屏幕尺寸進(jìn)行適配
img的srcset屬性
<img src="lighthouse-200.jpg" sizes="100vw" srcset="lighthouse-100.jpg 100w, lighthouse-200.jpg 200W, lighthouse-400.jpg 400w, lighthouse-800.jpg 800w lighthouse-1000.jgp 1000w" >
顧名思義是一個(gè)src的集合垦梆，100w 代表 寬度達(dá)到了100w 就使用light100.jpg這個(gè)src 以此類推
有一個(gè)注意點(diǎn)匹颤，剛開始瀏覽器不會(huì)把這些src都下載下來，而是瀏覽器會(huì)根據(jù)當(dāng)前瀏覽器的寬度下載某個(gè)最合適的src資源
mg的sizes屬性
100vw 窗口視圖的100%
給了sizes值之后奶赔，srcset會(huì)根據(jù)實(shí)際的sizes值 選取最合適的src資源
三惋嚎、字體優(yōu)化
1.字體出現(xiàn)的兩個(gè)問題
字體未下載完成時(shí)杠氢，瀏覽器隱藏或自動(dòng)降級(jí)站刑，導(dǎo)致字體閃爍
常見的兩個(gè)問題：
FOIT:flash of invisible text 文字從看不到到看到閃爍的過程
FOUT:flash of unstyled text 文字從沒有樣式到有樣式的閃爍過程
2.使用font-display控制瀏覽器的行為，屬性較新會(huì)有兼容問題
五個(gè)屬性
auto用瀏覽器自動(dòng)進(jìn)行選擇鼻百，沒有太大用處
block（阻塞）：3s等待绞旅，在前3s不顯示摆尝，如果3s之后期望字體下載完了，就用下載好的期望字體因悲，要是3s之后期望字體還沒有下載完堕汞，就用默認(rèn)字體，什么時(shí)候期望字體下載完了晃琳，在進(jìn)行替換
swap（交換）：剛開始加載就用默認(rèn)字體讯检，什么時(shí)候期望字體下載完成，在對(duì)默認(rèn)字體進(jìn)行替換
fallback：其實(shí)是對(duì)block的一種優(yōu)化卫旱，等待時(shí)間變?yōu)?00ms人灼，等待時(shí)間之后若期望字體下載完了，用期望字體顾翼，否則用默認(rèn)字體投放，什么時(shí)候期望字體下載完什么時(shí)候進(jìn)行替換
optional：手機(jī)端特別優(yōu)化的，等待時(shí)間100ms适贸，若100ms 期望字體下載完了就一直用期望字體灸芳，若沒下載完就一直用默認(rèn)字體，永不替換.
