資源優(yōu)化

• 資源的壓縮與合并【見(jiàn)效最明顯的優(yōu)化方法】
• • 為什么要壓縮&合并
  • HTML壓縮
  • CSS壓縮
  • JS壓縮與混淆
  • CSS JS文件合并
• 圖片格式優(yōu)化【多種圖片格式，哪種最合適】
• • 圖片優(yōu)化的方案
  • 圖片格式比較
• 圖片加載優(yōu)化【突破大型網(wǎng)站圖片加載的瓶頸】
• • 圖片的懶加載（lazy loading）
  • 使用漸進(jìn)式圖片
  • 漸進(jìn)式圖片的優(yōu)點(diǎn)和不足
  • 漸進(jìn)式圖片的解決方案
  • 使用響應(yīng)式圖片
• 字體優(yōu)化
• • 什么是FOIT和FOUT
  • 使用font-display
  • 字體怎么引入進(jìn)來(lái)？使用CSS Font Loading API
  • 使用Ajax + Base64

資源的壓縮與合并【見(jiàn)效最明顯的優(yōu)化方法】

為什么要壓縮&合并

• 減少http請(qǐng)求數(shù)量
  請(qǐng)求越多，資源越多，所在網(wǎng)絡(luò)造成的開(kāi)銷就越大
• 減少請(qǐng)求資源的大小
  節(jié)省流量，節(jié)省資源的大小，是我們不變的挑戰(zhàn)

HTML壓縮

• 使用在線工具進(jìn)行壓縮
• 使用html-minifier等npm工具
  
  webpack去進(jìn)行html壓縮時(shí)，也是集成了html-minifier工具
  上圖可以看到初始時(shí)候的大小，壓縮后的大小，節(jié)省高達(dá)30%，右邊也會(huì)把壓縮選項(xiàng)列出來(lái)，想壓縮到什么樣的情況，根據(jù)需要把不同的情況進(jìn)行勾選或者反選

CSS壓縮

• 使用在線工具進(jìn)行壓縮
• 使用clean-css等npm工具
  前面講的html-minifier已經(jīng)包含了clean-css
  

JS壓縮與混淆

• 使用在線工具進(jìn)行壓縮
• 使用Webpack對(duì)JS在構(gòu)建時(shí)壓縮
  壓縮的同時(shí)做了混淆，所謂混淆，就是把它原來(lái)的變量名或者表達(dá)變成很難讓別人理解的形式，也達(dá)到了安全的一個(gè)目的

CSS JS文件合并

把若干資源合并成一個(gè)資源把它加載過(guò)來(lái)，這樣比較快，在網(wǎng)絡(luò)上可以達(dá)到節(jié)省的目的，比如有20個(gè)css，合成一個(gè)css一次性加載過(guò)來(lái)可能要比你20個(gè)分別加載要快，因?yàn)槊總€(gè)資源在請(qǐng)求時(shí)都要經(jīng)歷不同的階段，要進(jìn)行dns查找，tcp鏈接建立，這兩個(gè)可以復(fù)用，我們后面TTFB還有下載沒(méi)有辦法避免，下載20個(gè)資源分別下載和合成一個(gè)下載的下載量沒(méi)什么變化，這個(gè)不考慮，但是TTFB沒(méi)辦法避免，20個(gè)肯定要比1個(gè)稍微大一些，但是合并在一起帶來(lái)的問(wèn)題是后續(xù)的解析處理和你自己的維護(hù)帶來(lái)了一些麻煩，所以折中考慮一下問(wèn)題

• 若干小文件，maybe…
• 無(wú)沖突，服務(wù)相同的模塊，ok
• 優(yōu)化加載，no
  現(xiàn)在希望漸進(jìn)式加載，如果把css和js都合成一個(gè)，這兩個(gè)文件只有加載和解析完才能進(jìn)行渲染，這個(gè)時(shí)間會(huì)很長(zhǎng)，用戶會(huì)看到很長(zhǎng)時(shí)間的白屏
  我們現(xiàn)在會(huì)用很多緩存技術(shù)，如果文件全合成一個(gè)，其中修改了一點(diǎn)點(diǎn)會(huì)造成整個(gè)文件的過(guò)期，就需要緩存去重新的進(jìn)行更新，這也是極大的效率上的浪費(fèi)

圖片格式優(yōu)化【多種圖片格式，哪種最合適】

圖片優(yōu)化的方案

如何正確選擇圖片格式？不同的格式有不同的優(yōu)缺點(diǎn)，在不同場(chǎng)景中使用特定的圖片會(huì)有一定的優(yōu)勢(shì)
圖片的大小要選擇合適，不要傳一個(gè)過(guò)大的圖片到客戶端，然后再去進(jìn)行尺寸大小的調(diào)整，這樣過(guò)大的圖片在網(wǎng)絡(luò)上是一個(gè)浪費(fèi)，需要多大就傳多大的圖片
能適配不同屏幕的尺寸，我有不同的用戶屏幕，要去設(shè)計(jì)不同尺寸的圖片在不同屏幕上進(jìn)行顯示，保證在每個(gè)顯示器上都有合適尺寸的圖片來(lái)進(jìn)行合適的顯示
壓縮：對(duì)于圖片壓縮，一定要謹(jǐn)慎，當(dāng)對(duì)圖片進(jìn)行壓縮時(shí)對(duì)圖片的質(zhì)量也造成一定的損失，我們要根據(jù)我們網(wǎng)站的實(shí)際情況來(lái)看，攝影類網(wǎng)站圖片要追求精致感，電商網(wǎng)站追求圖片不高
圖片資源優(yōu)先級(jí)：重要的圖片先進(jìn)行加載
圖片懶加載
用一些工具：所有做的事情都不能手工去做，要有自動(dòng)化的解決方案，要利用一些工具幫我們做這些事

圖片格式比較

• JPEG/JPG的優(yōu)點(diǎn)
  很高的壓縮比，畫質(zhì)還可以很好的被保存，色彩還是極為豐富
  用得最多的一種圖片格式，它是一種有損壓縮的圖片，這個(gè)圖片它進(jìn)行了很好的壓縮，來(lái)減少本身的體積，本身的色彩感還很好，壓縮比很高，色彩還保存了很好，通常壓縮比達(dá)到50%時(shí)，還能保持60%的畫質(zhì)，所以jpg會(huì)經(jīng)常用于web開(kāi)發(fā)中，通常采用24位的存儲(chǔ)方式，2的24次方，大約是1萬(wàn)6千種顏色，所以畫質(zhì)色彩感非常好，下圖是專門對(duì)jpg圖片進(jìn)行壓縮的工具
  
• JPEG/JPG的使用場(chǎng)景
  當(dāng)需要展示比較大的圖片時(shí)，還想保留畫質(zhì)和色彩
• JPEG/JPG的缺陷
  如果圖片比較強(qiáng)調(diào)紋理或者邊緣，jpg不是特別合適，顯得有鋸齒感，或者很模糊，比如logo不會(huì)用jpg，會(huì)把邊緣表現(xiàn)得特別粗糙
• PNG的優(yōu)點(diǎn)
  可以做透明背景的圖片，最大的優(yōu)點(diǎn)是對(duì)jpg圖片的缺點(diǎn)進(jìn)行彌補(bǔ)
• PNG的使用場(chǎng)景
  想強(qiáng)調(diào)線條、紋理、邊緣這些細(xì)膩程度時(shí)，jpg做不好，png做得比較好
• PNG的缺陷
  因?yàn)楸Ａ袅诉@些比較細(xì)節(jié)的東西，所以本身體積相對(duì)會(huì)較大些，色彩上jpg和png時(shí)不相上下，png也有24位的格式，色彩豐富程度也是沒(méi)問(wèn)題的，所以經(jīng)常用png做一些小的圖片，比如圖標(biāo)，logo之類的，如果想對(duì)png的圖片進(jìn)行優(yōu)化，可以用下圖中的工具，通常quality設(shè)置在65%-80%之間是比較好的，這樣可以達(dá)到對(duì)圖片80%的壓縮比率，也能保證圖片的質(zhì)量
  
• WebP的優(yōu)點(diǎn)
  google提出的新的圖片格式,已經(jīng)推了幾年，普及程度不是特別高，跟png能有同樣的質(zhì)量，但是壓縮比率比png要高，也就是說(shuō)體積可以更小
  png壓縮到10kb，WebP可以壓縮到7，8kb，這差距不是特別明顯
• 支持WebP的瀏覽器
  WebP也要看下瀏覽器的兼容性，畢竟它不是一個(gè)標(biāo)準(zhǔn)，是google自己一家提出的，其他瀏覽器上不會(huì)特別支持
  
  svg圖片應(yīng)用也非常廣泛，有非常多的優(yōu)勢(shì)適合我們手機(jī)端進(jìn)行應(yīng)用

圖片加載優(yōu)化【突破大型網(wǎng)站圖片加載的瓶頸】

圖片的懶加載（lazy loading）

• 原生的圖片懶加載方案
  
  
  需要瀏覽器去進(jìn)行支持，自定義及可擴(kuò)展性不是特別好，還是需要第三方插件幫我嗎實(shí)現(xiàn)這些效果

• 第三方圖片懶加載方案
  verlok/lazyload
  yall.js
  Blazy

import {LazyLoadImage} from 'react-lazy-load-image-component';<LazyLoadImageclassName={this.props.classes.media}src={this.props.image}effect="blur"rel="preconnect"/>

使用漸進(jìn)式圖片

圖片不是一步到位就能加載出來(lái)的，剛開(kāi)始圖片不是特別清楚，逐漸變清楚些，到最后變成非常清楚的圖片，這實(shí)現(xiàn)的基礎(chǔ)得益于jpg本身格式的特點(diǎn)，

基線jpg，自上而下的行掃描的形式
漸進(jìn)式j(luò)pg，會(huì)從低像素到高像素的一個(gè)過(guò)程
這個(gè)圖片可以和美工要，他們?cè)趫D片制作和保存的時(shí)候?qū)嶋H上可以選擇這樣的格式

漸進(jìn)式圖片的優(yōu)點(diǎn)和不足

主要優(yōu)點(diǎn)始終可以讓用戶看到圖片的全貌，只不過(guò)剛開(kāi)始不太清晰，然后逐漸把它加載得更清楚，等待的時(shí)間和圖片本身的質(zhì)量和大小是有關(guān)系的

漸進(jìn)式圖片的解決方案

可以用這些工具生成我們需要的圖片，我們要自己幫自己

使用響應(yīng)式圖片

所有設(shè)備所有的屏幕尺寸進(jìn)行適配，不同的屏幕尺寸上都有一張合適的圖片給用戶達(dá)到最佳的視覺(jué)體驗(yàn)，如何做？肯定不希望用一張超大的圖加載到所有設(shè)備上，然后再根據(jù)屏幕尺寸去進(jìn)行縮放，這會(huì)造成浪費(fèi)，而且在手機(jī)端網(wǎng)絡(luò)情況本來(lái)不是特別好

• Srcset屬性的使用
  圖片源集合，寬度達(dá)到100像素使用lighthouse-100.jpg圖片，寬度達(dá)到200像素使用lighthouse-200.jpg圖片，根據(jù)不同的屏幕尺寸都有一張合適的圖片，瀏覽器會(huì)根據(jù)屏幕的寬度挑選其中一張最為合適的，如何算這張呢？還和Sizes有關(guān)，會(huì)根據(jù)設(shè)備的dpi（iphone6屏幕像素比dpi為2倍圖，iphonex為3倍圖）及窗口的實(shí)際大小，根據(jù)實(shí)際情況選擇合適的圖片，可以達(dá)到真正響應(yīng)式的圖片加載
• Sizes屬性的使用
• picture的使用
  兼容還不是很好
  

字體優(yōu)化

網(wǎng)頁(yè)上的內(nèi)容大部分以文字的形式展示給用戶，為了讓文字展示更漂亮，很多時(shí)候會(huì)使用自定義的字體，這些字體資源就會(huì)通過(guò)網(wǎng)絡(luò)加載到我們客戶端，其資源本身的大小會(huì)影響我們的加載和用戶體驗(yàn)

什么是FOIT和FOUT

• 字體未下載完成時(shí)，瀏覽器隱藏或自動(dòng)降級(jí)，導(dǎo)致字體閃爍
• Flash Of Invisible Text
  文字從看不到到看得到的閃爍變化過(guò)程，
• Flash Of Unstyled Text
  沒(méi)有經(jīng)過(guò)樣式渲染，文字開(kāi)始看上去一種樣式，后來(lái)經(jīng)過(guò)樣式渲染又變成另外一種樣式，這中間會(huì)有個(gè)變化和閃動(dòng)的過(guò)程，這就是我們字體遇到的常見(jiàn)的兩種問(wèn)題，這兩個(gè)問(wèn)題是不可避免的，因?yàn)樽煮w經(jīng)過(guò)網(wǎng)絡(luò)加載需要一定的時(shí)間，只要沒(méi)下載完成，瀏覽器必須做出一個(gè)選擇，要么等待下載完再給字體顯示出來(lái)，要么先有默認(rèn)的已有字體先顯示，等字體下載完成后，用新字體重新進(jìn)行渲染，所以字體的閃動(dòng)沒(méi)辦法避免

使用font-display

• auto
• block
  開(kāi)始不讓文字進(jìn)行顯示，3s之后字體下載完了用你的字體，3s之后字體還沒(méi)下載完，先用默認(rèn)的字體進(jìn)行顯示，直到你的字體下載完成之后再換成你的字體
• swap
  剛開(kāi)始就用默認(rèn)的字體進(jìn)行顯示，直到你的字體下載完成之后再換成你的字體，用戶從一開(kāi)始就可以很快看到你的文字，不會(huì)看到白屏，用戶體驗(yàn)會(huì)比較好，如果你的字體比較大，用默認(rèn)文字顯示的時(shí)間就比較長(zhǎng)，頁(yè)面很長(zhǎng)一段時(shí)間不是很漂亮
• fallback
  是對(duì)block的優(yōu)化，開(kāi)始不顯示的等待時(shí)間縮短了，只有100ms
• optional
  為手機(jī)端特別優(yōu)化的，瀏覽器可以判斷用戶網(wǎng)絡(luò)速度情況，如果速度比較好，那100ms之后就用你下載完的字體，如果判斷你的網(wǎng)絡(luò)情況不佳，預(yù)期很難在短時(shí)間內(nèi)把你的字體下載下來(lái)，我就用默認(rèn)的字體進(jìn)行顯示，有一個(gè)問(wèn)題，瀏覽器一旦做出了選擇就不會(huì)變化了，如果已經(jīng)使用默認(rèn)的字體，就不會(huì)換成你下載完的字體
  

字體怎么引入進(jìn)來(lái)？使用CSS Font Loading API

通常會(huì)使用FontFace引入進(jìn)來(lái)，很早的時(shí)候這個(gè)標(biāo)準(zhǔn)就被各個(gè)瀏覽器進(jìn)行支持

font-family：字體名稱
src：字體從哪加載，可以工程里通過(guò)本地加載字體，也可以來(lái)自u(píng)rl
unicode-range：可以做個(gè)拆分，本來(lái)字符集非常大，比如中文漢字成千上萬(wàn)，如果把所有的字體全放在一個(gè)字體文件里，那這個(gè)字體文件就會(huì)過(guò)大，我們網(wǎng)站上使用的字是有限的，通常不會(huì)使用整個(gè)漢字的字符集，所以這里就對(duì)一些高頻及常常使用的漢字進(jìn)行歸類，這樣會(huì)形成幾個(gè)片段，這里引了很多font-face，每一組里字符集都是不一樣的，還有個(gè)特點(diǎn)就是我們這個(gè)字體文字真的要用到的時(shí)候才會(huì)去下載這個(gè)字體，所以在進(jìn)行這樣有效的拆分之后，可以大大優(yōu)化字體的加載效率

使用Ajax + Base64

使用Base64把我們的字體進(jìn)行轉(zhuǎn)碼，然后嵌到css里或者js里，去進(jìn)行加載，我把字體放在后臺(tái)去進(jìn)行轉(zhuǎn)碼，轉(zhuǎn)碼之后通過(guò)異步請(qǐng)求的方式去獲取這個(gè)字體，通過(guò)Base64進(jìn)行轉(zhuǎn)換之后，使它達(dá)到統(tǒng)一的格式，這樣我們有些字體不用太多去考慮瀏覽器是不是支持你這樣的字體格式，解決了兼容性問(wèn)題；我們通過(guò)異步加載，可以推遲字體的加載時(shí)間；還有個(gè)主要的缺點(diǎn)，因?yàn)槟惆阉鳛锽ase64嵌到其他資源里，導(dǎo)致字體文件本身沒(méi)辦法有效的進(jìn)行緩存，它的緩存實(shí)際就依賴于css的緩存，過(guò)期和緩存都不可控，所以這不是作為最佳的推薦方案，但是是可以考慮的一個(gè)方案

• 解決兼容性問(wèn)題
• 缺點(diǎn)：緩存問(wèn)題

總結(jié)

以上是生活随笔為你收集整理的（五）资源优化 (经典性能优化解决方案)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。