Some knowledge of the web development process is required for this post…
Some of you Internet Explorer users may have noticed that while using the sifter or creating a marker the icon selector was way is slow. Well, not anymore – we’ve introduced some upgrades yesterday, so be sure to clear your cache and enjoy fast loading of the icon selector.
Why was is slow? Was the server taking too long to respond with the icons? Were the images taking too long to load?
It turns out to be neither. The problem was string concatenation. Yes, after the information about the possible icons are retrieved from the server and before the images of each icon are loaded, the HTML list of icons is constructed. The code was doing that was very inefficient – going through each icon and concatenating it onto a very long string. IE constructs a new string every time that happens. That means if there are 100 characters for every item in the list, and 100 icons in the list, that’s
100 + 200 + 300 + 400 + … + 10000 = 505,000 character operations!
That’s too much. So after discovering this issue, I switched to a more efficient method for concatenating the strings. I put the HTML string for each row into an array. Then I used the array.join(” “) function in javascript to put them all together. My guess is that the time for this operation is proportional to the number of characters involved. Using the same assumptions as above, that’s 100 x 100 = 10,000. It seems like a lot, but your computer can do this very quickly. That’s fifty times as fast as the way we were doing it before!
So for all you javascript programmers out there, there is a moral: if you has a large number of strings that you want to concatenate, use array.join(” “) instead of looping through the values. Thanks to that, you can enjoy a better experience on Stickymap!