Day2 Episode 11: Storaged for the we

[沒有子分類]

【Chrome web.dev Live 2020 總結】Day2 Episode 11: Storage for the we

§ 11.了解瀏覽器存儲

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

§ 11.1 常見的存儲技術

若想了解現行熱門的存儲技術，Chrome瀏覽器中F12->Application，查看左側的Storage即可

image.png

§ 11.1.1 Local Storage

不推薦??

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

§ 11.1.2 Session Storage

不推薦??

Session Storage與Local Storage類似，都是同步的，都可能導致性能問題。不同點在于Session Storage會跟隨會話，頁面會話結束對應的Session Storage也會被清除

§ 11.1.3 IndexedDB??

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

§ 11.1.4 Web SQL

不推薦??

對標IndexedDB的競爭規范，不同點在于IndexedDB為索引表系統，Web SQL是關系型數據庫。Web SQL規范已于2010年廢棄

§ 11.1.5 Cookies

不推薦??

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

§ 11.1.6 AppCache

不推薦??

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

§ 11.1.7 ServiceWorker的Cache API??

適用于緩存靜態資源場景

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

§ 11.1.8 小結

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

§ 11.2 瀏覽器的存儲策略

§ 11.2.1 存儲空間大小限制

Chrome

最多60%的總磁盤空間

IE10+

250MB，超過10MB會有提醒

Firefox

一個來源最多2GB

Safari

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

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

通過StorageManager的相關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(`你已經使用了可用存儲的${percentageUsed}%.`);

7

const remaining = quota.quota - quota.usage;

8

console.log(`你還可以存儲 ${remaining} bytes.`);

9

}

運行結果：

image.png

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

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

Chrome

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

IE10+

阻止新的數據寫入

Firefox

同Chrome

Safari

只存7天（已裝PWA除外）

視頻

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。