XUL Profiler ? Qu’est-ce donc ? Et bien c’est l’extension Firefox que j’ai pu développer chez Yoono. Elle a pour but de donner des pistes aux développeurs XUL (mais aussi aux développeurs Web) pour optimiser les performances de leurs applications.

Pour l’instant, cette extension permet de récolter deux informations :

• un callgraph Javascript : Chaque appel de fonction est consigné dans un arbre et classé par son temps d’exécution. On peut ainsi rapidement repérer les fonctions qui ralentissent le navigateur.
• une vidéo des rafraichissements de Firefox : Toutes les opérations de mise à jour graphique de firefox sont enregistrées dans une vidéo qui nous permet d’apprendre à optimiser notre Javascript ainsi que les CSS afin de soulager Firefox dans son travail de layout.

L’extension est disponible sur Mozilla addons

Voici quelques résultats sur des exemples simples.

Callgraph Javascript

(Fichier html de test)

function fun_root() {
  fun_A();
  fun_B();
  fun_C();
}
function fun_A() {
  dump("fun A");
}
function fun_B() {
  dump("fun B");
  var s="";
  fun_D();
  for(var i=0; i<1000; i++) {
    s+="CPU INTENSIVE FUNCTION";
    fun_D();
  }
  fun_D();
}
function fun_C() {
  dump("fun C");
}
function fun_D() {
  dump("fun D");
}

On voit ici la hiérarchie des appels entre les fonction grâce à la présentation sous forme d’arbre, et l’on peut conclure que la majorité du temps de calcul de ce script est effectué dans la fonction "fun_B".

Paint events

(Fichier html de test)

function delayEachInserts() {
  for(var i=0;i<20;i++) {
    window.setTimeout(insertItem,100*i,i);
  }
}
function insertItem(i) {
  var container=document.getElementById("container");
  var item=document.createElement("div");
  item.setAttribute("class","item");
  item.textContent="Item "+i;
  container.appendChild(item);
}
window.addEventListener("load",delayEachInserts,false);

  => Résutat

Cet exemple montre que lorsqu’on ajoute un élement DOM, Firefox est obligé de rafraichir son conteneur à chaque ajout.