FE.B-前端性能優(yōu)化

tyheist 發(fā)布于2019-08-26 13:31 / 2542人閱讀

摘要：緩存長緩存隨機(jī)名字長緩存策略可并行請求數(shù)避免重定向，一次重定向至少瀏覽器緩存不超過數(shù)據(jù)不安全存取防止出錯(cuò)關(guān)閉瀏覽器失效合理減少視覺交互反饋節(jié)流，防抖視覺欺詐分頁預(yù)加載資源圖片，慎用編碼響應(yīng)式圖像字體異步加載異步加載其他系列二

http 緩存

http1.0: expires,last-modified
http1.1 E-tag,cache-control
html no-cache

css、js md5/timestmap/version +長緩存

image 隨機(jī)名字+長緩存

cookie http-only
mtu策略 package 1.5kb
可并行請求數(shù)
避免重定向，一次重定向至少600ms

瀏覽器緩存

localStorage:不超過5M,數(shù)據(jù)不安全,存取trycatch防止出錯(cuò)
sessionStorage:關(guān)閉瀏覽器失效
service worker（pwa）:install,activate,message,fetch,push,sync(serviceworke.rs)
合理減少header cookie

視覺交互

34-137ms 65ms 54ms 反饋
節(jié)流，防抖
throttle & debounce
setTimeout & requestAnimationFrame
lazyload & preload
react lazy suspense
視覺欺詐
分頁預(yù)加載

資源

圖片 bpg ，webp,慎用base64編碼, 響應(yīng)式圖像

字體 font-spider,preconnect

JS 異步加載,tree shaking, code splitting

html dns-prefetch

css 異步加載

其他

web worker
WebAssembly 系列（二）JavaScript Just-in-time (JIT) 工作原理
前端性能監(jiān)控錯(cuò)誤上報(bào)

測試代碼的性能
http://jsben.ch/
https://benchmarkjs.com/
https://github.com/jsperf/jsp...

參考資料

瀏覽器渲染優(yōu)化
前端性能清單
前端性能優(yōu)化 2019 年度總結(jié)
前端性能上報(bào)
performance-developers.google.cn
[2017專題] 性能優(yōu)化
2019 前端性能優(yōu)化年度總結(jié)

GPU云服務(wù)器云服務(wù)器前端性能優(yōu)化前端開發(fā)性能優(yōu)化性能優(yōu)化前端優(yōu)化

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/108976.html

相關(guān)文章

FE.B-前端性能優(yōu)化

摘要：緩存長緩存隨機(jī)名字長緩存策略可并行請求數(shù)避免重定向，一次重定向至少瀏覽器緩存不超過數(shù)據(jù)不安全存取防止出錯(cuò)關(guān)閉瀏覽器失效合理減少視覺交互反饋節(jié)流，防抖視覺欺詐分頁預(yù)加載資源圖片，慎用編碼響應(yīng)式圖像字體異步加載異步加載其他系列二 http 緩存 http1.0: expires,last-modifiedhttp1.1 E-tag,cache-controlhtml no-cache c...

Anshiii 2019-08-30 15:55 評論0 收藏0
FE.B-前端性能優(yōu)化

摘要：緩存長緩存隨機(jī)名字長緩存策略可并行請求數(shù)避免重定向，一次重定向至少瀏覽器緩存不超過數(shù)據(jù)不安全存取防止出錯(cuò)關(guān)閉瀏覽器失效合理減少視覺交互反饋節(jié)流，防抖視覺欺詐分頁預(yù)加載資源圖片，慎用編碼響應(yīng)式圖像字體異步加載異步加載其他系列二 http 緩存 http1.0: expires,last-modifiedhttp1.1 E-tag,cache-controlhtml no-cache c...

Scliang 2019-08-02 14:13 評論0 收藏0
FE.B-在線學(xué)習(xí)網(wǎng)站 “麥**院” 課程爬蟲實(shí)現(xiàn)

摘要：個(gè)人理解，對于一個(gè)按課程付費(fèi)為主要收入的在線學(xué)習(xí)網(wǎng)站，課程就是變現(xiàn)的全部家當(dāng)，如果安全措施做得不到位，那前期收集視頻教程的錢算是打水漂了。本文描述方法由于2016年年初官方網(wǎng)站升級，固不可重現(xiàn)。背景最近興起的互聯(lián)網(wǎng)+教育，導(dǎo)致了很多在線學(xué)習(xí)網(wǎng)站的誕生，但是由于很多開發(fā)者圖方便，網(wǎng)站安全措施做的不規(guī)范，導(dǎo)致很多課程資源不夠安全。個(gè)人理解，對于一個(gè)按課程付費(fèi)為主要收入的在線學(xué)習(xí)網(wǎng)站，...

Xufc 2019-06-27 15:22 評論0 收藏0
FE.B-理解瀏覽器的同源策略與跨域方案

摘要：方案瀏覽器設(shè)置一級域名。場景完全不同源的網(wǎng)站，需要窗口通信方案父子窗口互相寫互相監(jiān)聽子窗口寫后跳回同域父窗口讀瀏覽器跨文檔通信場景請求非同源地址方案架設(shè)服務(wù)器代理參考資料瀏覽器同源政策及其規(guī)避方法阮一峰前端常見跨域解決方案全跨域幾種方式同源概念：協(xié)議，域名，端口相同。目的：保證用戶信息的安全，防止惡意的網(wǎng)站竊取數(shù)據(jù)。限制的行為： Cookie、LocalStorage 和 In...

oujie 2019-08-30 15:55 評論0 收藏0
FE.B-理解瀏覽器的同源策略與跨域方案

摘要：方案瀏覽器設(shè)置一級域名。場景完全不同源的網(wǎng)站，需要窗口通信方案父子窗口互相寫互相監(jiān)聽子窗口寫后跳回同域父窗口讀瀏覽器跨文檔通信場景請求非同源地址方案架設(shè)服務(wù)器代理參考資料瀏覽器同源政策及其規(guī)避方法阮一峰前端常見跨域解決方案全跨域幾種方式同源概念：協(xié)議，域名，端口相同。目的：保證用戶信息的安全，防止惡意的網(wǎng)站竊取數(shù)據(jù)。限制的行為： Cookie、LocalStorage 和 In...

ghnor 2019-08-02 13:56 評論0 收藏0