复杂的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中计算哪些div可见，因为你的div有绝对位置。

您可以尝试从第一列中没有 display：none 的所有单元格开始，以便浏览器计算高度，然后设置 display：block 仅限那些可见的＆＃34;。

当用户滚动时，使用javascript控制显示属性，因此浏览器仅计算和绘制视图中的单元格以及第一列上的单元格。

这听起来很复杂，而且即使在旧浏览器中它也会很快。