JQuery在Dom + Performance中緩存Ajax請求

Question

我正在創建一個應用程序，當單擊選項卡時，其內容通過ajax加載。 這樣做的原因是加快初始頁面加載，而不是加載不必要的選項卡內容。 選項卡包含表單項，其中值可以更改。

為了防止數據丟失，當加載一個標簽時，我給它一個額外的“ajaxed”類。 如果單擊選項卡“ajaxed”類不存在，則通過ajax加載內容，否則先前加載的內容將簡單地呈現給用戶。

Quesiton：在dom中緩存大量HTML會降低性能嗎？ 這是不好的做法嗎？ 這適用於無限滾動和其他類型的頁面，您只需添加越來越多的html。 這種方法的缺點是什么？

提前致謝。

Answer 1

這取決於您的應用領域。 緩存 DOM 中某些選項卡的內容肯定沒有壞處，只要這些選項卡中的dom元素數量有限。

事實上，使用選擇器來查找DOM中元素的腳本會隨着元素越多而越慢。 當訪問者使用帶有糟糕的JavaScript引擎的瀏覽器（如舊版Internet Explorer）時，這將更加明顯。 此外，內存消耗將隨着DOM元素的數量而增加。 因此，您不希望向DOM添加無限數量的項目。

對於無限滾動，一個好的做法是在向下滾動太遠時卸載/刪除項目，並在再次向上滾動時重新添加它們。

Answer 2

你的方法還可以。 除了從父元素中刪除它之外，您不能最小化附加dom的內存使用量。

關注無限滾動的第二部分，有很多哲學，但重點是只緩存足夠的數據，以提供完美的滾動體驗。 但是你需要“破壞”以前創建的數據表示的dom elments，比如“太遠了”。

Answer 3

像這樣的一般性問題的明顯答案是“它取決於”。 如果您正在嘗試解決已知的性能問題，這可能是一個合適的解決方案。 延遲內容加載可以使網站對用戶更敏感。 但是加載到頁面中的內容越多，dom就會越慢，自然而然。 因此，一種顯而易見的替代方法是為每個選項卡使用單獨的頁面（或頁面“部分”）。 這樣，一次只加載可見內容。 Ajax可用於呈現部分內容。 請記住，瀏覽器和服務器都將緩存內容，因此可能不需要額外的緩存或延遲加載策略。 但總是存在權衡取舍，因此它取決於您嘗試解決的問題的性質（在不同的網站場景中將需要不同的解決方案）。 可維護性可能是決定如何分區/加載頁面內容的另一個因素。

Answer 4

雖然與您的問題無關，但您使用此方法會丟失SEO，因為您沒有針對每個內容的唯一網址。 如果您的網站是內部網站，則可能不是問題。