我有一个自定义下拉菜单，可以包含数千个项目。这是最糟糕的情况，大部分时间都是数百或更少，而且速度非常快。
当菜单打开时，我已经延迟了元素（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更快地工作？
答案 0 :(得分：1)
第一个半回答：最大值（对你而言）是8秒长。你可以做一个模态叠加，显示一个加载动画gif，在8秒钟内从0％到100％。我可以将您链接到一些代码，如果您愿意，可以在HTML5画布中执行该动画。这不是一个很好的解决方案，但是当页面需要很长时间才能加载时，它会给你的用户一些东西。
可以更好地回答：做你自己建议的事情 - 加载前50个，然后加载下一个X滚动或每X毫秒（我更喜欢前者），只需编辑你的CSS和其他代码，以确保页面并不会像你在测试中遇到的那样做出奇怪的东西风格。
最佳答案：你说这是一个自定义菜单，但它是一个菜单。因此，您应该缓存它而不是每次都重新加载它。每次在数据库中更改菜单时，都会创建缓存文本文件。将文本文件加载到页面中几乎不需要时间，您使用的每种编程语言都可以执行此操作。这样做的方法是你创建一个函数来构建一个包含菜单纯HTML的.txt文件，然后每次运行菜单更新函数时调用该函数（自然地更新数据库之后）。