在dom中放置數據屬性可以使用多少數據？

有時候我想在頁面上放入大量的數據以避免對動態內容進行額外的AJAX調用。我想知道如果有這種表現的話我應該謹慎的。在dom中放置數據屬性可以使用多少數據？

來源

2013-05-03 idbentley

是的，你的頁面會更大，加載時間會更長。至少使用AJAX將允許使用諸如spin.js之類的東西來防止用戶認爲該頁面根本沒有加載。 – Stephen 2013-05-03 22:09:57

整潔。所以，在html5中沒有硬性限制。這當然是一個部分答案，但並未解決問題的性能影響部分。 – idbentley 2013-05-03 22:10:07

@Stephen這是真的，但是，多少太多了。添加幾千字節到頁面可能不會影響頁面加載時間足夠重要，我會想。一旦頁面被加載，我對性能效果更感興趣。 – idbentley 2013-05-03 22:11:42

的HTML5 spec具有在屬性上的數據量沒有限制：

...生成的DOM樹的深度沒有限制，或者在標籤名的長度，屬性名稱，屬性值，文本節點等

它需要以呈現頁面依賴於內容的長度，因此任何添加的內容，例如存儲在屬性中大量的數據的時間，將導致頁面加載速度較慢。如果數據量很大，使用javascripts getAttribute()獲取數據可能也會變慢。

使用ajax或/和服務器端存儲解決方案，您可以根據需要檢索數據，在許多情況下比在HTML中存儲所有內容更快。

多少太多了？這取決於你對數據做什麼，什麼樣的數據等，幾乎不可能回答。您作爲開發人員將不得不根據用例來決定等。

來源

2013-05-03 22:12:51 adeneo

明確的答案：取決於;）它主要取決於您在頁面上放置了多少數據。你必須做一個數據包裝頁面的初始頁面加載方程與初始加載+另一個服務器往返。有時候，它會更好 - 可能是更好的體驗 - 快速提供某種基本/部分頁面，並在需要時加載額外的內容（參見延遲加載）。

性能測試會給你正確的答案。

但除此之外：爲什麼要在dom中存儲數據？這不是存儲客戶端數據的最佳場所。爲什麼不使用Javascript變量？

來源

2013-05-03 22:17:03

爲什麼要在dom中存儲數據？由於數據在模板繪製時可用，而不是在JavaScript編譯時。 – idbentley 2013-05-03 22:18:02

你可以使用隱藏的元素來存儲數據而不是屬性，這應該減少與屬性相比需要花費的轉義和引用的數量。如果您保存了十幾個小的請求，最好在呼叫者在線時一次傳輸所有信息;它還能夠更好地進行gzip壓縮，以便從中創建一個令牌池的十幾個文件進行通用分組。通過捆綁信息，您可以獲得ajax無法提供的頁內內容的搜索引擎優化功能，並且在點差連接上它更好。 – dandavis 2013-05-03 22:37:37

在dom中放置數據屬性可以使用多少數據？

回答

相關問題