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

Question

我有一个自定义下拉菜单,可以包含数千个项目.这是最糟糕的情况,大部分时间都是数百或更少,而且速度非常快.

当菜单打开时,我已经延迟了元素(li)的插入,但是当它被打开时点击它会导致几秒钟的可察觉的延迟.

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

        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作为单独的create添加并附加到片段.

不幸的是IE(我们正在移动到IE11周围的圣诞节)是目标浏览器 - 企业内部网:-(

我试图减轻这一点的一件事就是插入第一个,比方说50个项目.所以打开菜单很快但滚动时,我必须再次加载50个批次到滚动点的后续项目.IE不够快,因此大多数时候你什么都看不到,当拖动滚动条时它会保持锁定,向前跳,锁定等因为当你试图滚动时innerHTML调用会阻塞整个浏览器.

我尝试过的另一种技术是插入前50个项目,然后以50毫秒的间隔加载剩余的50个块,以阻止所有内容.不幸的是,这会导致更糟糕的体验,因为页面响应性在上一个示例中滚动时会像在滚动时一样,但在这里您甚至不必滚动,它总是在添加所有项目之前执行.

我现在已经没想到了.如何让IE更快地工作？

Answer 1

先半途而废的回答：（对你来说）最长是8秒长。您可以做一个模态叠加，显示一个正在加载的动画 gif，在八秒的时间内从 0% 计数到 100%。如果您愿意，我可以将您链接到一些在 HTML5 画布中执行该动画的代码。这不是一个很好的解决方案，但它可以在页面加载时间很长的情况下为您的用户提供一些可查看的内容。

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

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