javascript - Internet Explorer DOM 插入速度的缓解技术

Question

我有一个带有自定义下拉列表的菜单，其中可以包含数千个项目。这是最糟糕的情况，大多数时候是数百个或更少，而且速度都非常快。

我已将元素 (li) 的插入延迟到菜单打开时，但这会导致在打开菜单时单击它时出现几秒钟的明显延迟。

我在 javascript 中构建了一个包含所有列表项的字符串，并使用单个 innerHtml 赋值添加它。一直都是 innerHtml 赋值。我也尝试过使用片段并附加到片段以及使用片段并分别附加每个项目都无济于事。插入时间如下:

        Text  Li/InnerHTML  Li/Inner/Fragment  CreateLI/Fragment
Chrome  13ms      40ms            48ms               138ms

IE9     22ms      2402ms          2364ms             7934ms

IE11    19ms      1952ms          2330ms             4208ms

第一列是在单个 innerHTML 调用中插入所有内容，但只是插入 pre 标记内的文本和新行。不幸的是，样式和事件等需要 li。

第二列是在单个 innerHTML 调用中添加所有内容，但每个内容都包含在 li 标签中。

第三列如上，但使用片段然后附加它。

第四列如上，但每个 li 都作为单独的创建添加到片段中。

不幸的是，目标浏览器是 IE(我们将在圣诞节前后迁移到 IE11)- 公司内部网 :-(

我试图减轻这种情况的一件事是只插入第一个，比如 50 个项目。所以打开菜单很快，但在滚动时，我必须以 50 个为一组再次加载后续项目，直到滚动点。 IE 不够快，所以大多数时候您什么都看不到，并且在拖动滚动条时它会一直锁定、向前跳转、锁定等，因为在您尝试滚动时 innerHTML 调用会阻止整个浏览器。

我尝试过的另一种技术是插入前 50 个项目，然后以 50 毫秒的间隔加载剩余的 50 个 block ，以免阻塞所有内容。不幸的是，这会导致更糟糕的体验，因为页面响应会像上一个示例中滚动时那样断断续续，但在这里您甚至不必滚动，它总是滚动直到所有项目都被添加。

我现在没主意了。我怎样才能让 IE 运行得更快？

Answer 1

首先给出半评估的答案:(对您而言)最长为 8 秒。您可以做一个模态叠加层，显示加载动画 gif，在八秒内从 0% 计数到 100%。如果您愿意，我可以将您链接到一些在 HTML5 Canvas 中执行该动画的代码。这不是一个很好的解决方案，但它可以在页面加载时间过长时为您的用户提供一些东西。

可以说是更好的答案:按照您对自己的建议进行操作 - 加载前 50 个，然后滚动加载下一个 X 或每 X 毫秒加载一次(我更喜欢前者)，然后编辑您的 CSS 和其他代码以确保页面不会像您在测试中遇到的那样以明智的方式做奇怪的事情。

最佳答案:你说是自定义菜单，其实就是菜单。因此，您应该缓存它而不是每次都重新加载它。每次在数据库中更改菜单时，您都会创建缓存文本文件。将文本文件加载到页面中几乎不需要时间，而且您使用的每种编程语言都可以做到。它的工作方式是创建一个函数来构建一个包含纯 HTML 菜单的 .txt 文件，然后在每次运行菜单更新函数时调用该函数(自然是在更新数据库之后)。