【Chrome web.dev Live 2020總結(jié)】第2天第11集：網(wǎng)絡(luò)存儲

11.了解瀏覽器存儲

在用戶瀏覽器緩存關(guān)鍵資源可以大幅提升頁面瀏覽性能，增強頁面可用性，保證關(guān)鍵頁面脫機瀏覽。在存儲技術(shù)層出不窮的今天，如何選用合適的存儲技術(shù)至關(guān)重要。下面就談?wù)勅绾芜x取適合自己項目的存儲技術(shù)

11.1 常見的存儲技術(shù)

若想了解現(xiàn)行熱門的存儲技術(shù)，Chrome瀏覽器中F12->Application，查看左側(cè)的Storage即可

11.1.1 Local Storage

不推薦

Local Storage為同步的，可能阻塞主程序從而導(dǎo)致性能問題

11.1.2 Session Storage

不推薦

Session Storage與Local Storage類似，都是同步的，都可能導(dǎo)致性能問題。不同點在于Session Storage會跟隨會話，頁面會話結(jié)束對應(yīng)的Session Storage也會被清除

11.1.3 IndexedDB

適用于存儲少量，需要快速檢索的數(shù)據(jù)場景。

11.1.4 Web SQL

不推薦

對標(biāo)IndexedDB的競爭規(guī)范，不同點在于IndexedDB為索引表系統(tǒng)，Web SQL是關(guān)系型數(shù)據(jù)庫。Web SQL規(guī)范已于2010年廢棄

11.1.5 Cookies

不推薦

Cookie曾一度用于客戶端數(shù)據(jù)的存儲，隨著新技術(shù)的出現(xiàn)而逐漸廢棄。由于服務(wù)器指定Cookie后，瀏覽器的每次請求都會攜帶Cookie數(shù)據(jù)，會帶來額外的性能開銷（尤其是在移動環(huán)境下）

11.1.6 AppCache

不推薦

AppCache更新機制存在硬傷，存儲大小也不盡如人意。此特性已被廢棄

11.1.7 ServiceWorker的Cache API

適用于緩存靜態(tài)資源場景

請注意此特性IE不兼容。按照視頻的說法，IE不算主流瀏覽器，可以忽略

11.1.8 小結(jié)

雖存儲技術(shù)眾多，但視頻只推薦了其中兩種，一個是IndexedDB，一個是ServiceWorker

11.2 瀏覽器的存儲策略

11.2.1 存儲空間大小限制

Chrome

最多60%的總磁盤空間

IE10+

250MB，超過10MB會有提醒

Firefox

一個來源最多2GB

Safari

1GB，達到限制會提醒用戶增加

11.2.2 如何查看可用的存儲空間

通過StorageManager的相關(guān)API可以查看

代碼如下：

1 if?(navigator.storage?&&?navigator.storage.estimate)?{ 2 ??const?quota?=?await?navigator.storage.estimate(); 3 ??//?quota.usage?->?已使用大小 4 ??//?quota.quota?->?最大可用大小 5 ??const?percentageUsed?=?(quota.usage?/?quota.quota)?*?100; 6 ??console.log(`你已經(jīng)使用了可用存儲的${percentageUsed}%.`); 7 ??const?remaining?=?quota.quota?-?quota.usage; 8 ??console.log(`你還可以存儲?${remaining}?bytes.`); 9 }

運行結(jié)果：

11.2.3 瀏覽器自動清除存儲策略

當(dāng)存儲大小超過瀏覽器限制時，不同瀏覽器針對新的寫入會采取不同策略

Chrome

從最近使用最少源開始刪除，只至不再超過限制

IE10+

阻止新的數(shù)據(jù)寫入

Firefox

同Chrome

Safari

只存7天（已裝PWA除外）

存儲

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實的內(nèi)容，請聯(lián)系我們jiasou666@gmail.com 處理，核實后本網(wǎng)站將在24小時內(nèi)刪除侵權(quán)內(nèi)容。

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實的內(nèi)容，請聯(lián)系我們jiasou666@gmail.com 處理，核實后本網(wǎng)站將在24小時內(nèi)刪除侵權(quán)內(nèi)容。