Javascript Performance Tips

Scripting Languages වලදි code එකේ speed එක තියෙන්නෙ ගොඩක් developer ගාවනේ. (JVM එකෙන් පොඩි අඩුපාඩු හදනවා). මගේ මුල්ම POST එකෙන් ලගකදි යාලුවෙක්(තඩී) කරපු Code එකක් ටිකක් optimize කරල Explain කරන්නම්.

එයාට ඕන උනේ Ajax එකකින් Combo Box එකක් populate කරගන්න.
මේ තියෙන්නෙ එයා ලියපු code එක. jquery ajax callback function එකක්.

  success: function(data) {  
       var x = JSON.parse(data);  
       for (var i = 0; i < x.length; i++) {  
         $('#dist_combo').append('<option>' + x[i]['name'] + '</option>')  
       }  
  }  

ok. දන් මොනවද අවුල් ?

1. loop එකක් ඇතුලෙ jquery selector එකක්.
    - එක හදපුගමන් මේක ok(not best). එත් තව ලස්සන tips ඉගෙනගන්න මෙක හදමු.

  success: function(data) {  
       var x = JSON.parse(data), dcmb = $('#dist_combo');  //select it just once
       for (var i = 0; i < x.length; i++) {  
         dcmb.append('<option>' + x[i]['name'] + '</option>')  
       }  
  }  

2. මේකෙ loop එක පුරාවටම නැවත නැවත x  වල length එක count වෙනව.
අපි loop එක ඇතුලෙදි x json එක අඩු වැඩි නොකරන නිසා, එකපාරින් length එක ගමු.

  success: function(data) {  
       var x = JSON.parse(data), dcmb = $('#dist_combo');  
       for (var i = 0,len = x.length; i < len; i++) {  //cache length (PHP same)
         dcmb.append('<option>' + x[i]['name'] + '</option>')  
       }  
  }  

3. jquery append() වලට වඩා innerHTML and jquery html() speed නිසා තනි String එකක් හදල දෙමු.

  success: function(data) {  
       var x = JSON.parse(data) , str = '';  
       for (var i = 0,len = x.length; i < len; i++) {  
         str += ('<option>' + x[i]['name'] + '</option>');  
       }  
       $('#dist_combo').html(str);  // or innerHTML as you like
  }  

4. දැන් මේක ටිකක් slow උනා. javascript string concatnation is bad.

  success: function(data) {  
       var x = JSON.parse(data) , str = [];  
       for (var i = 0,len = x.length; i < len; i++) {  
         str.push('<option>' + x[i]['name'] + '</option>');  // collect them
       }  
       $('#dist_combo').html(str.join());  //join array
     }  

දැන් සුපිරියි.

theory කියවනවට වඩා example එකකින් ඉගෙනගන්න එක හොදයි නේ.
 මේ කරපු දෙවල් තවත් speed+ලේසි කරන විදි තියනව (HTML Templating). ඒක next post එකකින් කියන්නම්.