前端性能相關(guān)簡(jiǎn)單的總結(jié)

1. 在進(jìn)行webpack的時(shí)候?qū)ξ募M(jìn)行打包加壓處理

2. 抽取公共的文件，對(duì)于lodash、react、react-dom等常用工具庫(kù)單獨(dú)抽取出來(lái)

3. 對(duì)于小于4k或者小于一定的圖片采用base64處理

4. 盡量減少http請(qǐng)求

5. 打包的時(shí)候使用tree-sharking去掉沒(méi)有依賴(lài)的文件

6. 圖片使用懶加載

7. 組件使用懶加載進(jìn)行處理

8. 合理使用ssr

9. 合理使用強(qiáng)緩存和協(xié)商緩存處理緩存文件

   • 強(qiáng)緩存cache-control和Expires
     Expires是http1.0的規(guī)定，返回格林時(shí)間，只要請(qǐng)求是沒(méi)有超過(guò)這個(gè)時(shí)間，就走緩存，如果客戶(hù)端時(shí)間大于緩存時(shí)間，緩存則失效
     cache-control返回是一個(gè)相對(duì)時(shí)間，如果在這個(gè)相對(duì)時(shí)間內(nèi)，比如Cache-Control:public,max-age=120,再去請(qǐng)求資源則走緩存資源，如果資源在相對(duì)時(shí)間內(nèi)有更新，會(huì)導(dǎo)致客戶(hù)端跟服務(wù)端資源不一致。
   • 協(xié)商緩存Last-Modifed、If-Modified-Since和Etag、if-None-Match兩組，當(dāng)Cache-Control: no-cache，則走協(xié)商緩存。
     Last-Modifed和If-modified-Since返回文件的修改時(shí)間, 返回資源時(shí)會(huì)把文件修改時(shí)間放在Last-Modifed中，當(dāng)再次請(qǐng)求資源時(shí)把返回的時(shí)間放在If-Modified-since中，服務(wù)端判斷文件修改時(shí)間是否相同，相同則告訴瀏覽器走緩存。
     Etag和If-None-match返回文件的修改唯一值，類(lèi)似于文件的hash值,只要文件有修改，就會(huì)發(fā)生變化，請(qǐng)求資源時(shí)服務(wù)端會(huì)把這個(gè)值放在Etag中返回，當(dāng)客戶(hù)端再次請(qǐng)求時(shí)放在If-None-Match中，服務(wù)端根據(jù)客戶(hù)端請(qǐng)求的If-None-Match跟當(dāng)前文件的值判斷，一致則走緩存，不一致則重新返回資源并攜帶新的唯一值。
     hack，可通過(guò)在請(qǐng)求資源時(shí)帶上時(shí)間戳從而取消使用緩存,例如

       http://127.0.0.1:8088/sockjs-node/info?t=1640916342492
   

10. 對(duì)于長(zhǎng)列表可使用virtual-dom進(jìn)行處理

11. 針對(duì)開(kāi)銷(xiāo)較大的loader使用cache-loader處理

12. 減少dom的操作

13. 對(duì)于css文件可以單獨(dú)抽取文件

14. 合理使用preload和prefetch加載資源文件

    • preload
      預(yù)加載資源，對(duì)于那些頁(yè)面大概率會(huì)用到的js文件可以使用preload
    • prefetch
      預(yù)請(qǐng)求資源，用于未來(lái)可能會(huì)被用到的資源使用，理論是在瀏覽器空閑的時(shí)候會(huì)去加載，當(dāng)后面瀏覽器真正使用到該資源時(shí)，可以直接從緩存中獲取。
      以上都是一些輔助工具和方法，還要搭配一些產(chǎn)品合理的設(shè)計(jì)和交互才能夠?qū)π阅苡幸欢ǖ奶嵘?/li>