Methods to mitigate insertion speed in Internet Explorer DOM

Question

I have a menu with custom dropdowns that can contain thousands of items. This is the worst case scenario, and most of the time it is hundreds or less, and all this is very fast.

I delay the insertion of elements (li) at the moment the menu opens, but this causes a noticeable delay for a couple of seconds when he clicked when it opens.

I am building a string of all list items in javascript and adding it using the same innerHtml destination. This is an innerHtml assignment that takes all the time. I also tried to use the fragment and add to it, and also use the fragment and add each element separately, all to no avail. Insert time below:

Text Li/InnerHTML Li/Inner/Fragment CreateLI/Fragment Chrome 13ms 40ms 48ms 138ms IE9 22ms 2402ms 2364ms 7934ms IE11 19ms 1952ms 2330ms 4208ms 

The first column inserts all the contents, but in the same way as text and new lines inside preliminary tags in one call to innerHtml. Unfortunately, li are necessary for modeling and events.

The second column adds all the content, but each of them is wrapped in li tags with one single call to innerHtml.

The third column, as described above, but using a fragment, then add it.

The fourth column is as above, but each li is added as a separate create file and added to the fragment.

Unfortunately, IE (we go to IE11 around xmas) is the target browser - the corporate intranet: - (

One thing I tried to soften is to simply insert the first, say, 50 elements. Therefore, the menu opens quickly, but when scrolling, I have to load the subsequent elements again in batches from 50 to the scroll point. IE is not fast enough, so most of the time you don’t see anything, and when you drag the scroll bar, it locks, jumps forward, blocking ect, because innerHtml calls block the entire browser when you try to scroll.

Another method I tried is to insert the first 50 elements and then load the remaining 50 pieces at 50 ms intervals so as not to block everything. Unfortunately, this leads to an even worse experience, because the responsiveness of the page stutters, as when scrolling in the previous example, but here you do not even need to scroll, it always does this until all the elements have been added.

Now I do not know. How can I get IE to work faster?

Answer 1

First, a semi-powerful answer: the maximum (for you) lasts 8 seconds. You can make a modal overlay that shows a downloadable animated gif that is calculated from 0% to 100% over an eight-second period. I can link you to some code that makes this animation in HTML5 canvas if you want. This is not a great solution, but it will give your users something to see while the page takes so long to load.

Perhaps the best answer: do what you suggested to yourself - load the first 50, and then load the next X to scroll or every X milliseconds (I like better) and just edit your CSS and other code to make sure the page isn’t makes the weird style of material wise, as you seem to experience in your tests.

The best answer: you say that this is a menu, but this is a menu. Therefore, you should cache it, and not load it every time. You create a cache text file every time the menu changes in the database. Uploading a text file to a page will take almost no time, and every programming language you work with can do this. How it works, you create a function that creates a .txt file containing pure HTML menu code, and then calls this function each time the menu update function is launched (after the database is updated, naturally).