I ran into a serious performance issue when my JS code runs under IE (10, 11). This is 10 times slower compared to other browsers.
I did some profiling, and it seems that innerHTML and createElement very slow.
I tried to optimize the use of createDocumentFragment , which even speeds up my code in other browsers, but the performance in IE remains intact.
Here is the code
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="content"></div> <script> function a() { var CNT = 100000; var start, end, time; start = window.performance.now(); var frag = document.createDocumentFragment(); for (var i = 0, l = CNT; i < l; ++i) { var el = document.createElement('div'); el.innerHTML = i; frag.appendChild(el); } document.body.appendChild(frag); end = window.performance.now(); time = end - start; console.log('time', time); } a(); </script> </body> </html>
I tried to optimize the use of string concatenation to avoid expensive DOM operations, which made it much faster, but still very slow compared to other browsers.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="content"></div> <script> function a() { var CNT = 100000; var start, end, time; start = window.performance.now(); var frag = document.createDocumentFragment(); var content = ''; for (var i = 0, l = CNT; i < l; ++i) { content += '<div>' + i + '</div>'; } var holder = document.createElement('div'); holder.innerHTML = content; frag.appendChild(holder); document.body.appendChild(frag); end = window.performance.now(); time = end - start; console.log('time', time); } a(); </script> </body> </html>
Is there a way to quickly make a dynamic DOM in IE? I need to create fairly large DOM trees using Javascript with some templates, and IE performance is just a killer in this case.
Any help?
source share