前端性能相關(guān)簡單的總結(jié)
在進(jìn)行webpack的時(shí)候?qū)ξ募M(jìn)行打包加壓處理
抽取公共的文件环戈，對(duì)于lodash、react拄显、react-dom等常用工具庫單獨(dú)抽取出來
對(duì)于小于4k或者小于一定的圖片采用base64處理
盡量減少http請(qǐng)求
打包的時(shí)候使用tree-sharking去掉沒有依賴的文件
圖片使用懶加載
組件使用懶加載進(jìn)行處理
合理使用ssr
-
合理使用強(qiáng)緩存和協(xié)商緩存處理緩存文件
- 強(qiáng)緩存cache-control和Expires
Expires是http1.0的規(guī)定召烂，返回格林時(shí)間，只要請(qǐng)求是沒有超過這個(gè)時(shí)間舰讹，就走緩存，如果客戶端時(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)致客戶端跟服務(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返回文件的修改唯一值，類似于文件的hash值,只要文件有修改实抡，就會(huì)發(fā)生變化欠母，請(qǐng)求資源時(shí)服務(wù)端會(huì)把這個(gè)值放在Etag中返回，當(dāng)客戶端再次請(qǐng)求時(shí)放在If-None-Match中吆寨，服務(wù)端根據(jù)客戶端請(qǐng)求的If-None-Match跟當(dāng)前文件的值判斷赏淌，一致則走緩存，不一致則重新返回資源并攜帶新的唯一值啄清。
hack猜敢，可通過在請(qǐng)求資源時(shí)帶上時(shí)間戳從而取消使用緩存,例如
http://127.0.0.1:8088/sockjs-node/info?t=1640916342492 - 強(qiáng)緩存cache-control和Expires
對(duì)于長列表可使用virtual-dom進(jìn)行處理
針對(duì)開銷較大的loader使用cache-loader處理
減少dom的操作
對(duì)于css文件可以單獨(dú)抽取文件
-
合理使用preload和prefetch加載資源文件
- preload
預(yù)加載資源，對(duì)于那些頁面大概率會(huì)用到的js文件可以使用preload - prefetch
預(yù)請(qǐng)求資源盒延，用于未來可能會(huì)被用到的資源使用缩擂，理論是在瀏覽器空閑的時(shí)候會(huì)去加載，當(dāng)后面瀏覽器真正使用到該資源時(shí)添寺，可以直接從緩存中獲取胯盯。
以上都是一些輔助工具和方法，還要搭配一些產(chǎn)品合理的設(shè)計(jì)和交互才能夠?qū)π阅苡幸欢ǖ奶嵘?/li>
- preload
