Archive for the ‘JavaScript’ Category

Benchmark des moteurs de javascript

décembre 16, 2008

J’avais déjà signalé l’existence d’un benchmark des moteurs de JavaScript dans le projet webkit (sunspider), le coeur du navigateur Safari. Le résultat est un temps moyen pour effectuer différentes fonctions JavaScript. Naturellement, on peut suspecter que ce benchmark favorise un peu le navigateur Safari. Mais ce dernier n’est que 4ème sur 8. Il est même repassé derrière Opera. Google Chrome est incontestablement premier et Internet Explore dernier.

Navigateur (version) Test SunSpider (en ms)
Google Chrome (0.2.154.29) 2,6
Firefox (3.0.4) 4,8
Opera (9.62) 6,1
Safari (3.2.1) 6,4
K-Meleon (1.5.1) 14,5
SeaMonkey (1.1.13) 19,9
Flock (1.2.7) 23,0
Internet Explorer (7) 42.4

Un second benchmark est disponible sur le site du projet V8, le moteur de JavaScript du navigateur. Ici, le résultat est un nombre relatif. Le principe est que plus ce chiffre est grand plus le moteur est performant. Ceci a l’avantage d’être indépendant de l’ordinateur sur lequel s’effectue le test. Là Google Chrome écrase ses concurrents. Cependant, le classement n’est pas exactement le même.

Navigateur (version) Benchmark V8
Google Chrome (0.2.154.29) 1773
Opera (9.62) 170
Firefox (3.0.4) 141
Safari (3.2.1) 133
K-Meleon (1.5.1) 72
Flock (1.2.7) 69
SeaMonkey (1.1.13) 58
Internet Explorer (7) 33

Les différentes versions du langage JavaScript

décembre 14, 2008

Cela fait plusieurs fois que je me suis posé la question s’il est correct de parler de différentes versions du langage script. Cette question m’est revenue suite à la visite du site BrowserHawk. Ce site teste les différentes capacités du navigateur web utilisé (détection du navigateur, temps de réponse). Il fournit une version langage JavaScript utilisé par le navigateur.

J’ai fais le test avec 8 navigateurs pour Windows que je considère comme « pertinents » : navigateur complet (pas une simple surcouche), mis à jour régulièrement. Ma liste est donc : Internet Explorer, Firefox, Safari, Flock, Google Chrome, K-Meleon, SeaMonkey et Opera. J’ai pris les dernières versions stables de ces navigateurs. Je suis toujours à la recherche d’autres navigateurs qui respectent les critères décrits précédemment. Voici les résultats obtenus :

Navigateur Version JS selon BrowserHawk
IE 7 1.5
Firefox 3 1.8
Safari 1.5
Flock 1.7
Google Chrome 1.8
K-Meleon 1.5
SeaMonkey 1.5
Opera 1.5

Les résultats montrent que les versions de JavaScript sont relativement récentes. Ils semblent cohérents (même résultat pour SeaMonkey et K-Meleon). Le second test est l’utilisation explicite de la version de Javascript dans une page Html comme ceci :


<script language= "JavaScript1.2">.../...</script>

ou autre manière plus standard (?)


<script type="text/javascript;version=1.2">
.../...
</script>

La seconde version de cette technique, ne fonctionne pas pour 3 navigateurs. Finalement, j’ai un gros doute sur l’interprétation de ce code. Signifie-t-il vraiment que le cette partie de script est interprétée si le navigateur supporte au moins cette version de JavaScript ? Opera ne serait-il pas un peu gros « vantard » ? Les résultats sont en fait très différents de BrowserHawk.

Navigateur BrowserHawk tag Javascript V1 tag Javascript V2
IE 7 1.5 1.3 ?
Firefox 3 1.8 1.8 1.8
Safari 1.5 1.7 ?
Flock 1.7 1.7 1.7
Google Chrome 1.8 1.7 ?
K-Meleon 1.5 1.7 1.7
SeaMonkey 1.5 1.7 1.7
Opera 1.5 2.0 1.5

Une meilleure solution serait de tester la version de JavaScript en utilisant des fonctionnalités spécifiques à chaque version. JavaScript est normalisé en tant que ECMAScript, et le site de la fondation Mozilla donne les correspondances dans le tableau qui suit. Ce qui pose la question des versions intermédiaires qui seraient spécifiées uniquement par Mozilla.

Version de Javascript Version de Firefox Version de ECMA
1.3 ECMA 262 édition2
1.5 1.0 ECMA 262 édition3
1.6 1.5
1.7 2
1.8 3.0
1.9.1 3.1
2.0 ECMA 262 édition4

Sur le site de Mozilla dit MDC « Mozilla Developer Center », on trouve plus ou moins difficilement les différences entre les versions successives JavaScript. Ce qui m’a permis d’écrire un script testant la version courante du JavaScript. Ce script permet de tester les version 1.0, 1.1, 1.2, 1.3, 1.5, 1.6, 1.7, 1.8 et 1.9.1. Ce script donne avec les 8 navigateurs de références.

Navigateur BrowserHawk tag Javascript V1 tag Javascript V2 test fonctionnalités
IE 7 1.5 1.3 ? 1.5
Firefox 3 1.8 1.8 1.8 1.8
Safari 1.5 1.7 ? 1.6
Flock 1.7 1.7 1.7 1.7
Google Chrome 1.8 1.7 ? 1.6
K-Meleon 1.5 1.7 1.7 1.7
SeaMonkey 1.5 1.7 1.7 1.7
Opera 1.5 2.0 1.5 1.6

Pour valider mon script, je l’ai testé avec les différentes version de Rhino. Il s’agit d’une implémentation en Java du moteur de JavaScript de Mozilla. Attention, il n’est pas utilisé dans les navigateurs Web comme Firefox mais est un reste d’un ancien projet abandonné d’un navigateur web en Java. La version Rhino 1.5R5 correspond à la version 1.5 du JavaScript, la version 1.6R7 correspond à la version 1.6 du JavaScript, et enfin 1.7R1 à la version 1.7. Ceci fonctionne correctement avec mon script. Utiliser Rhino pour exécuter du JavaScript est en effet simple. Il suffit d’utiliser la commande qui suit (test.js est mon script de test). Il existe une méthode main dans ce jar.


java -jar js.jar -f test.js

Au final, on voit qu’il existe un flou dans les différentes version du langage JavaScript mais qu’une version 1.3 ou 1.5 semble un compromis acceptable pour l’instant. Notons bien ici que je parle du coeur du langage et non de l’implémentation du DOM, l’accès aux éléments d’une page Web.

Voici le fichier test.js

function testVersion() {
var myArray = ['a', 'b', 'a', 'b', 'a'];
var res="";
var myNumber=2489.8237
var myString="eer";

//version 1.0
var version1_0=0;
if(Date.parse)
version1_0= version1_0+1;

res=res+"version 1.0 : "+version1_0+"/1 \n";

//version 1.1
var version1_1=0;
if(myArray.join)
version1_1= version1_1+1;

if(myArray.toString)
version1_1= version1_1+1;

if(myArray.reverse)
version1_1= version1_1+1;

if(myArray.sort)
version1_1= version1_1+1;

res=res+"version 1.1 : "+version1_1+"/4 \n";

//version 1.2
var version1_2=0;
if(myArray.concat)
version1_2= version1_2+1;

if(myArray.slice)
version1_2= version1_2+1;

if(myArray.pop)
version1_2= version1_2+1;

if(myArray.push)
version1_2= version1_2+1;

if(myArray.shift)
version1_2= version1_2+1;

if(myArray.splice)
version1_2= version1_2+1;

if(myArray.unshift)
version1_2= version1_2+1;

res=res+"version 1.2 : "+version1_2+"/7 \n";

//version 1.3
var version1_3=0;
if(myArray.push) {
var myArray2 = ['a', 'b', 'a', 'b', 'a'];
//V1.3 push retourne la taille du tableau.
i=myArray2.push('e','r');
if(i==7)
version1_3= version1_3+1;
}

if(myArray.splice) {
var myArray2 = ['a', 'b', 'a', 'b', 'a'];
myArray3=myArray2.splice(1,3,'z');
if(myArray3.length==3);
version1_3= version1_3+1;
}

//Boolean(new Boolean(false)) return false = 1.2 or -
//return true 1.3 or +
if(Boolean(new Boolean(false)))
version1_3= version1_3+1;

res=res+"version 1.3 : "+version1_3+"/3 \n";

//version 1.5
var version1_5=0;
if(myNumber.toFixed)
version1_5= version1_5+1;

if(myNumber.toExponential)
version1_5= version1_5+1;

if(myNumber.toPrecision)
version1_5= version1_5+1;

res=res+"version 1.5 : "+version1_5+"/3 \n";

//version 1.6
var version1_6=0;
if(myArray.indexOf)
version1_6= version1_6+1;

if(myArray.lastIndexOf)
version1_6= version1_6+1;

if(myArray.filter)
version1_6= version1_6+1;

if(myArray.forEach)
version1_6= version1_6+1;

if(myArray.every)
version1_6= version1_6+1;

if(myArray.map)
version1_6= version1_6+1;

if(myArray.some)
version1_6= version1_6+1;

res=res+"version 1.6 : "+version1_6+"/7 \n";

//version 1.7
var version1_7=0;
if(this.Iterator)
version1_7= version1_7+1;

res=res+"version 1.7 : "+version1_7+"/1 \n";

//version 1.8
var version1_8=0;
if(myArray.reduce)
version1_8= version1_8+1;

if(myArray.reduceRight)
version1_8= version1_8+1;

res=res+"version 1.8 : "+version1_8+"/2 \n";

//version 1.9.1
var version1_9_1=0;
if(myString.trim)
version1_9_1= version1_9_1+1;

if(myString.trimLeft)
version1_9_1= version1_9_1+1;

if(myString.trimRight)
version1_9_1= version1_9_1+1;

if(Object.getPrototypeOf)
version1_9_1= version1_9_1+1;

res=res+"version 1.9.1 : "+version1_9_1+"/4 \n";

print(res);

if(version1_9_1==4)
return "1.9.1";
else if(version1_8==2)
return "1.8";
else if(version1_7==1)
return "1.7";
else if(version1_6==7)
return "1.6";
else if(version1_5==3)
return "1.5";
else if(version1_3==3)
return "1.3";
else if(version1_2==7)
return "1.2";
else if(version1_1==4)
return "1.1";
else if(version1_0==1)
return "1.0";
else
return "inconnue";

}
testVersion();

Le test de performance JavaScript SunSpider

septembre 18, 2008

SunSpider est un test de performance du moteur de JavaScript. Ce test a été écrit par l’équipe de WebKit le moteur de rendu HTML présent dans les navigateurs sous Mac OS, comme Safari. Ce benchmark exécute 5 fois une série de tests et fournit une moyenne.

Le JavaScript est assez important pour les utilisateurs des applications web. En effet, le type de code est exécuté sur le client et non le serveur. L’importance de ce langage s’est accrue avec le Web 2.0. Cependant, la performance du moteur de JavaScript n’est qu’un élément dans le performance globale du navigateur web. Cela ne présume pas de la performance globale du navigateur.

Les résultats suivants ont été obtenus sur Windows Vista avec les navigateurs actifs, les plus courants dans leurs dernières versions stables. Google Chrome avec son tout nouveau moteur V8 obtient un résultat remarquable. Par contre celui d’Internet Explorer 7 est médiocre, en effet le moteur de JavaScript de ce navigateur est de conception ancienne et devrait être remplacé dans la version 8.

Navigateur Version Résultat
Google Chrome 0.2.149.29 3 301 ms
Firefox 3.01 5 558 ms
Safari 3.1.2 7 019 ms
Opera 9.52 7 931
K Melon 1.5 15 321 ms
SeaMonkey 1.1.11 21 422 ms
Flock 1.2.5 23 214 ms
IE 7 58 033 ms

Une petite fonctionnalité de Google Chrome

septembre 14, 2008

J’ai fait découvert une petite fonctionnalité de Google Chrome. Souvent, je tente de débugger du code Javascript avec une série de boite de dialogue « alert ». Cette méthode est loin d’être parfaite…
Google Chrome propose à la seconde boite de dialogue d’empêcher l’affichage des boites de dialogue suivantes.

Les autres navigateurs courants ne possède pas cette fonctionnalité. Une exception notable est Opera qui propose d’arrêter l’exécution des scripts dans la page, ce qui est un peu plus brutal que dans le cas de Google Chrome.

arret des boites de dialogue javascript

arret des boites de dialogue javascript

arrêt des scripts dans Opera

arrêt des scripts dans Opera

Le langage Javascript étendre les classes prédéfinies

août 12, 2007

Le langage JavaScript peut apparaître comme « exotique ». Il ne se base pas sur le principe de la programmation orientée objet classique comme celle du C++ ou du Java. Son principe est la programmation orienté objet par prototype. Je ne désire pas ici aller dans les détails de ce principe mais juste faire quelques illustration. Par exemple le mot clef « class » n’existe pas. En fait on ne définit que des objets qui éventuellement permettent de définir d’autres objets.

JavaScript est essentiellement utilisé pour créer des scripts dans les navigateurs web. Il faut bien distinguer dans ce cas le JavaScript le coeur du langage et du DOM un ensemble d’interfaces pour interagir avec le navigateur. Ici, je m’intéresse au JavaScript. Pour étudier ce langage, je travaille avec Rhino ce qui explique la présence de « print » dans le code.

L’exemple suivant montre comment étendre les classes prédéfinies dans le langage JavaScript comme l’objet String ou l’objet Date. il s’inspire fortement de deux d’articles de Thierry Templier publiés sur le site developpez.com .

function inheritance(destination, source) {
  for(var element in source) {
    destination[element]=source[element];
  }
}

inheritance(Date.prototype,{
  showWithSeparator: function(separator) {
    var year=1900+this.getYear();
    var month=this.getMonth()+1;
    var day=this.getDate();
    
    if(month<10)
      month="0"+month;
    
    if(day<10)
      day="0"+day;
    
    return day+separator+month+separator+year;
  }
});

var myDate=new Date(2005,12,23);
print(myDate.showWithSeparator("-"));

var myDate2=new Date(2005,2,3);
print(myDate2.showWithSeparator("/"));

Le moteur de JavaScript Rhino

juillet 23, 2007

Il existe deux implémentations du JavaScript dans le projet Mozilla, toutes deux provenant à l’origine de Netscape. D’une part l’implémentation en C appelée SpiderMonkey qui est la plus ancienne implémentation du JavaScript. Elle est utilisée par le moteur Gecko et donc par les navigateurs de la famille Mozilla-Firefox. La seconde implémentation écrite en Java est Rhino. Elle n’est pas utilisée par des navigateurs, les projets de navigateurs en Java ont tous disparu.
Cette implémentation va vous permettre d’apprendre le coeur du langage JavaScript qui est un langage assez particulier bien que sa syntaxe soit proche du C ou du Java. En effet le JavaScript est un langage « orienté objet par prototype » dont les concepts sont assez différents des langages orientés objet classiques. Par exemple en JavaScript, il existe bien la notion d’objet mais la notion de classe n’existe pas.

Comment utiliser Rhino? Tout d’abord, il ne faut pas oublier que Rhino est un programme Java et nécessite le JDK Il faut télécharger l’archive depuis le site de Mozilla, la décompresser sur le disque dans le répertoire de votre choix (dans l’exemple ce sera c:\rhino1_6R4). Vous pouvez utiliser Rhino en mode console ou comme débogueur.

Script DOS pour utiliser le debogueur

rem debug
set RHINO_HOME=c:\rhino1_6R4
@echo off
if exist %1 goto suite
echo error: usage %0 file.js
@echo off
goto fin
:suite
java -classpath %RHINO_HOME%\js.jar org.mozilla.javascript.tools.debugger.Main -f %1 
:fin


Script DOS pour utiliser la console JavaScript

rem Rhino shell
set RHINO_HOME=c:\rhino1_6R4
java -classpath %RHINO_HOME%\js.jar org.mozilla.javascript.tools.shell.Main

Dernier point, Rhino est une implémentation du JavaScript mais ne comporte pas le DOM qui est fourni par les navigateurs. Donc, le code testé par Rhino ne doit pas contenir les instructions provenant du DOM comme « window. », « document » et « alert ». Par contre pour évaluer le contenu d'une variable on peut utiliser la commande « print() », qui ne doit pas être évité dans un programme JavaScript destiné à être utilisé dans un navigateur (appel à l'imprimante).

DOM et Javascript

juillet 15, 2007

L’article suivant montre la différence qu’il y a entre le DOM et le Javascript (ou ECMAscript). Le DOM pour Document Object Model est un ensemble d’interfaces indépendantes de tout langage de programmation permettant d’interagir sur les pages web et obtenir de l’HTML dynamique (DHTML).

Cette indépendance n’a pas beaucoup d’importance pour les développeurs web qui n’utilisent que le langage JavaScript, par contre elle est importante pour les développeurs de navigateurs web et d’outils de développement.

Le problème du DHTML a été pendant longtemps l’existence de DOM différents suivant les navigateurs web, d’une part celle de Microsoft, d’autre part celle de Netscape. Vous souvenez sans doute des document.all (version Microsoft) et des document.layers (version Netscape). Le W3C a normalisé le DOM en introduisant une troisième version du DOM qui maintenant est supportée par tous les navigateurs récents. Il n’est plus utile d’utiliser les anciennes versions du DOM, mais vous pouvez encore des exemple de code javascript qui les utilisent.
Exemple de l’article en rouge il s’agit du DOM et en bleu il s’agit du javascript.

var anchorTags = document.getElementsByTagName("a");
for (var i = 0; i < anchorTags.length ; i++)
{
   alert("L'attribut href du " + i + "e élement est : " +  
   anchorTags[i].href + "\n");
}

Javascript et expressions régulières

décembre 14, 2006

Javascript contient un bon support des expressions régulières, appelées égalementparfois expressions rationnelles. A quoi peut servir ces expressions régulières ? A énormément de contrôles,et transformation des chaînes de caractères. De plus, comme java supporte également les expressions régulièresdonc les tests fait au niveau Javascript peuvent être fait à nouveau au niveau du serveur. Le site suivant donne une bonne illustration des possibilités de manipulation des expressions régulières par le Javascript.

Le débogueur de JavaScript pour Firefox

novembre 15, 2006

Le JavaScript est le langage de script intégré dans les navigateurs web. En fait, son nom est depuis longtemps ECMAScript. JavaScript est très important pour enrichir les applications web. Cependant, il faut noter qu’environ 10% des personnes désactivent le JavaScript. En plus son débugage est quelque chose de très délicat. Firefox possède une console JavaScript qui montre les erreurs grossières. Mais ce navigateur ne possède pas de débogueur par défaut. Par contre SeaMonkey en possède. Il est possible de télécharger ce débogueur. La version actuelle est la 0.9.87 et fonctionne correctement sur Firefox1.5.

Le site aidejavascript.com

novembre 1, 2006

Le site aidejavascript.com fournit de nombreux exemples et explications concernant le langage JavaScript (ou plutôt ECMAScript). Le site semble peut évoluer par exemple le forum ne contient pas beaucoup de réponses. Mais les articles ont été proprement écrits. Il est toujours intéressant d’avoir de l’aide sur cet horrible langage…