複雜的HTML頁面緩慢

Question

對於網絡實習生的目的，我有一個相當複雜的html頁面，由大約5000個div組成，全部用絕對定位。

該頁面的源代碼大約爲1Mb，並且按預期工作，除了在滾動時非常緩慢的事實。

有什麼可以做得到更好的表現嗎？比如告訴瀏覽器只能看到可見或類似的內容？

聲明：我知道一個帶有5000個div的頁面並不是最優的，但它是唯一的解決方案，允許網絡上的任何人訪問這個表格而沒有額外的軟件，並且在創建這個表格時有足夠的靈活性。

Answer 1

下面的東西只是對抗症狀，你真的應該嘗試重新構造你的HTML。尤其是對於瀏覽器來說，如果它被迫重新計算5000個絕對定位元素的位置，沒有什麼可以優化的。

此外，您還需要測試以下每種技術，才能看到，如果它真的改善了有關本地瀏覽器陣列的某些內容。 （機會是，其中的一些技巧會適得其反在你的特殊的設置。）

• 通過this HTML5Rocks tutorial工作，看看，如果有什麼適用於您的設置。
• Disable pointer events on scroll，以便瀏覽器不需要檢查滾動元素的懸停狀態。
• 嘗試switch on hardware-accelerated rendering。
• 嘗試一個lazy image loading library，也可以用來加載任意元素。
• 在較新的瀏覽器中，嘗試應用will-change CSS property。儘管如此，不會幫助您使用Intranet舊版瀏覽器。

Answer 2

我相信你可以在javascript中計算divs是否可見，因爲你的div有絕對位置。

你可以嘗試啓動與不是在具有顯示第一列所有單元格：無，所以瀏覽器計算的高度，然後設置顯示：僅在那些「看得見的」塊。

當用戶滾動時，使用javascript控制顯示屬性，因此瀏覽器僅計算和繪製視圖中的單元格和第一列中的單元格。

這聽起來很複雜，它是，但即使在舊版瀏覽器中它也會很快。