Améliorer la vitesse de réponse du client AJAX

L'émergence d'AJAX a considérablement modifié le mode de fonctionnement des clients d'applications Web. Il permet aux utilisateurs de se concentrer sur leur travail sans avoir à supporter les actualisations fastidieuses des pages. En théorie, la technologie AJAX peut réduire considérablement le temps d'attente pour les opérations des utilisateurs et économiser le trafic de données sur le réseau. Cependant, ce n’est pas toujours le cas. Les utilisateurs se plaignent souvent du fait que la vitesse de réponse des systèmes utilisant AJAX est réduite.
L'auteur est engagé dans la recherche et le développement d'AJAX depuis de nombreuses années et a participé au développement de dorado, une plate-forme AJAX relativement mature en Chine. D'après l'expérience de l'auteur, la cause première de ce résultat n'est pas AJAX. Souvent, la réduction de la vitesse de réponse du système est causée par une conception d’interface déraisonnable et des habitudes de programmation insuffisamment efficaces. Ci-dessous, nous analyserons plusieurs aspects auxquels il faut prêter attention lors du processus de développement AJAX.

 Bonne utilisation de la programmation client et des appels de procédures à distance.
La programmation côté client est principalement basée sur JavaScript. JavaScript est un langage de programmation interprété et son efficacité opérationnelle est légèrement inférieure à celle de Java. Dans le même temps, JavaScript s’exécute dans un environnement strictement restreint tel que le navigateur. Par conséquent, les développeurs doivent avoir une compréhension claire de la logique qui peut être exécutée côté client.
La manière dont la programmation côté client doit être utilisée dans les applications réelles dépend de l'expérience et du jugement du développeur. De nombreux problèmes ici ne peuvent qu’être compris. En raison de l'espace limité, nous résumons ici grossièrement les précautions suivantes :

 Évitez autant que possible l'utilisation fréquente d'appels de procédure distante, par exemple, évitez d'utiliser des appels de procédure distante dans des corps de boucle.
 Si possible, utilisez l'appel de procédure distante AJAX (appel de procédure distante asynchrone).
 Évitez de placer des opérations de données lourdes du côté client. Par exemple : de grands lots d'opérations de copie de données, des calculs nécessitant une grande quantité de parcours de données, etc.
 Améliorer la méthode de fonctionnement des objets DOM.
Dans la programmation côté client, les opérations sur les objets DOM sont souvent les plus susceptibles d'occuper du temps CPU. Pour le fonctionnement des objets DOM, la différence de performances entre les différentes méthodes de programmation est souvent très importante.
Voici trois morceaux de code avec exactement les mêmes résultats. Leur fonction est de créer un tableau 10x1000 dans la page Web. Cependant, leurs vitesses de course sont très différentes.
/* Code de test 1 - Temps pris : 41 secondes*/
var table = document.createElement("TABLE");
document.body.appendChild(table);
pour(var je = 0; je < 1000; je++){
var ligne = table.insertRow(-1);
pour(var j = 0; j < 10; j++){
var cellule = objRow.insertCell(-1);
cell.innerText = "( " + i + " , " + j + " )";
}
}

/* Code de test 2 - Temps pris : 7,6 secondes*/
var table = document.getElementById("TABLE");
document.body.appendChild(table);
var tbody = document.createElement("TBODY");
table.appendChild(tbody);
pour(var je = 0; je < 1000; je++){
var row = document.createElement("TR");
tbody.appendChild(ligne);
pour(var j = 0; j < 10; j++){
var cell = document.createElement("TD");
rangée.appendChild(cellule);
cell.innerText = "( " + i + " , " + j + " )";
}
}

/* Code de test 3 - temps pris : 1,26 seconde*/
var tbody = document.createElement("TBODY");
pour(var je = 0; je < 1000; je++){
var row = document.createElement("TR");
pour(var j = 0; j < 10; j++){
var cell = document.createElement("TD");
cell.innerText = "( " + i + " , " + j + " )";
rangée.appendChild(cellule);
}
tbody.appendChild(ligne);
}
var table = document.getElementById("TABLE");
table.appendChild(tbody);
document.body.appendChild(table);
La différence entre « Test Code 1 » et « Test Code 2 » ici est que différentes méthodes API sont utilisées lors de la création de cellules de tableau. La différence entre le « Code de test 2 » et le « Code de test 3 » réside dans l'ordre de traitement légèrement différent.
Nous ne pouvons pas analyser une si grande différence de performances entre "Test Code 1" et "Test Code 2". Ce que l'on sait actuellement, c'est que insertRow et insertCell sont des API spécifiques aux tables en DHTML, et createElement et appendChild sont des API natives du DOM du W3C. Le premier devrait être une encapsulation du second. Cependant, nous ne pouvons pas en conclure que l'API native du DOM est toujours meilleure que l'API spécifique aux objets. Il est recommandé d'effectuer quelques tests de base sur ses performances lorsque vous devez appeler fréquemment une API.
La différence de performances entre "Test Code 2" et "Test Code 3" vient principalement de la différence dans leur ordre de construction. L'approche du « Code de test 2 » consiste à créer d'abord l'objet