console.log – devfrontend.info

Demo: console.time et console.timeEnd pour logguer les performances d’affichage du code JS.

<table>
<thead>
  <tr>
    <th>toto</th>
    <th>titi</th>
    <th>tutu</th>
    <th>tata</th>
    <th>tete</th>
    <th>tyty</th>
  </tr>
</thead>
</table>
<p id="01"></p>
<p id="02"></p>

<table>

<thead>

<tr>

</tr>

</thead>

</table>

console.time('getTableColumnsAmount01');
var getTableColumnsAmount01 = $('table thead tr th').length;
console.timeEnd('getTableColumnsAmount01');

console.time('getTableColumnsAmount02');
var getTableColumnsAmount02 = $('thead', 'table').find('th').length;
console.timeEnd('getTableColumnsAmount02');

$('#01').text('getTableColumnsAmount01: ' + getTableColumnsAmount01);
$('#02').text('getTableColumnsAmount02: ' + getTableColumnsAmount02);

console.time('getTableColumnsAmount01');

var getTableColumnsAmount01 = $('table thead tr th').length;

console.timeEnd('getTableColumnsAmount01');

console.time('getTableColumnsAmount02');

var getTableColumnsAmount02 = $('thead', 'table').find('th').length;

console.timeEnd('getTableColumnsAmount02');

$('#01').text('getTableColumnsAmount01: ' + getTableColumnsAmount01);

$('#02').text('getTableColumnsAmount02: ' + getTableColumnsAmount02);

Résultats du test en exécutant à plusieurs reprises ce code:

getTableColumnsAmount01: 1.489013671875ms
(index):36 getTableColumnsAmount02: 0.277099609375ms
(index):32 getTableColumnsAmount01: 1.7880859375ms
(index):36 getTableColumnsAmount02: 0.88916015625ms
(index):32 getTableColumnsAmount01: 1.0322265625ms
(index):36 getTableColumnsAmount02: 0.44189453125ms
(index):32 getTableColumnsAmount01: 0.926025390625ms
(index):36 getTableColumnsAmount02: 0.203125ms
(index):32 getTableColumnsAmount01: 1.050048828125ms
(index):36 getTableColumnsAmount02: 0.3740234375ms

Articles récents

Catégories

Archives

Méta

Étiquette : console.log

[javaScript] console.time et console.timeEnd pour logguer les performances d’affichage du code JS