How to avoid to crash a browser? - facebook

Question

I need a way to get the friend ids of a user.
I written this code but my browser crashes ( maybe because I have 2500 friends ):
var query = FB.Data.query('SELECT uid2 FROM friend WHERE uid1 = me()');
query.wait(function(rows) {
var i;
for(i=0;i<rows.length;i++){
document.getElementById('friends').innerHTML += i + ') ' + rows[i].uid2 + '<br />';
}});
Is there a less CPU consuming approach ?

Answer 1

At VERY least, compile all your HTML in a variable and then pass it to DOM in one .innerHTML assignment. Right now your forcing page redraw two times per each of your 2500 friends because browser needs to update its own internal understanding of page on innerHTML read in += and then once again on writing back.
query.wait(function(rows) {
var i;
var html = "";
for(i=0;i<rows.length;i++){
html += i + ') ' + rows[i].uid2 + '<br />';
}
document.getElementById('friends').innerHTML = html
}
You can also use some other approaches, like storing generated strings in an array and then joining them together and assigning to HTML, but that's just optimizing around JS immutable strings and garbage collector. Some JS engines may eventually do this much better that you'd do by hand. Doing innerHTML assignment once, however, is almost guaranteed to be huge speed increase, because it literally means "regenerate everything and then apply a little bit and encode everything back again" and there's hardly any way to automatically optimize doing this inside loop inside JS+HTML engines junction.