Comment mesurer le temps d'analyse JavaScript

Question

Dans notre entreprise, nous combinons chaque fichier Javascript en un gros fichier Javascript minifié et compressé (d'environ 700 ko mais en augmentation). Je cherche à évaluer les différences de performance entre l'utilisation d'un gros fichier Javascript pour chaque page (minifié et compressé) et l'utilisation de plusieurs fichiers Javascript, un pour chaque page.

Une différence évidente est que le gros fichier Javascript peut être mis en cache par les navigateurs après avoir été chargé lors de la première requête de la page et crée peu de surcharge par la suite, tandis que lors de l'utilisation de plusieurs fichiers js, il y aura au moins une requête get non mise en cache sur chaque page différente. Ainsi, je troquerais un chargement initial de page plus lent contre des chargements initiaux de page successifs plus lents.

Afin de déterminer quand le chargement initial de page lent (en utilisant un gros fichier Javascript) deviendra suffisamment problématique pour justifier le travail de découpage du fichier combiné en fichiers plus petits et de changer notre procédure de construction, j'aimerais savoir combien de temps il faut pour que le code soit analysé, afin d'estimer le temps total de chargement et d'analyse.

Jusqu'à présent, ma méthode a été d'ajouter une balise de script à une page de test qui prend le temps actuel, ajoute un script assez important avec du Javascript et mesure à nouveau le temps comme suit :

var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script')
script.setAttribute('type', 'text/javascript');
script.src = 'chemin/700kbCombineFile.js';
start_time = new Date().getTime();
head.appendChild(script);

À la fin de 700kbCombineFile.js, j'ai ajouté :

console.log(new Date().getTime() - start_time)

Ensuite, je soustrais le temps de transfert réseau obtenu à partir de Firebug et j'obtiens environ 700ms pour un fichier de 700 ko et environ 300ms pour un fichier de 300 ko.

Cette approche a-t-elle du sens ? Pourquoi pas ? Y a-t-il un meilleur moyen/des outils pour faire cela ?

Answer 1

Je pense console.time("Parsetime")

et console.timeEnd("Parsetime")

vous donne une mesure plus précise que l'objet Date,
Article sur la précision du temps en javascript

Answer 2

Le temps nécessaire pour analyser le JavaScript variera considérablement d'un navigateur à l'autre.

Ce que vous avez est la meilleure méthode que je puisse penser pour mesurer le temps d'analyse, cependant, je remettrais en question si c'est la meilleure mesure pour juger quelle approche est la plus efficace.

Personnellement, je considérerais le temps nécessaire pour que l'événement load sur la window se déclenche, à partir du moment où la page a été demandée, comme une meilleure mesure pour décider quelle approche adopter.

Le temps nécessaire pour télécharger la page est important, et un fichier toujours mis en cache après le premier chargement n'est vrai que dans un monde parfait.