IE poor performance

Web Tips Q & ACategory: Krajee PluginsIE poor performance
Nils Huhta asked 4 weeks ago

Hi, thanks for a great plugin, it works like a charm…
This is just a question…
Has somebody else (or You)  recognised that IE11 (maybe 10 also) loads/view the img preview very slowly  ?
I think that the issue is that IE11 loads img src (base 64 data stream) with poor performance.
I tested a 3.5 Mb image, 0.5 sec in Chrome, the same image in IE11 30+ sec
I even tested without file-input, only JS FileReader and add doom “img” dynamic in small test html page, the same result, so this is not a bug in file-input, but is there a workaround ?
 
 

Nils Huhta replied 4 weeks ago

Hmm, sorry for posting 3 times….

2 Answers
Nils Huhta answered 3 weeks ago

Interesting, this works with same performance in all browsers….
 
https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL

Nils Huhta answered 3 weeks ago

The performance problem in IE is that it is slow to add a new DOOM (img src) with large base64 src, it is faster to first add a img with src=”” and then add the base64 src, like this (same performance in all browsers including IE)

 var span = document.createElement('span'); 
span.innerHTML = [''].join('');
document.getElementById('list').insertBefore(span, null);
var image = document.getElementById("the_image") image.src = e.target.result;
Nils Huhta replied 3 weeks ago

some code was removed when posting, span.innerHTML should of course be an array adding the img with id=”the_image” , but hopefully the main point is clear, IE is slow to parse and add the new doom object if the base64 src is added directly, much faster if first create the DOOM and then just point src to base64….

Login or register to contribute or comment.

Login   Register