Empêcher le fonctionnement prolongé de javascript de verrouiller le navigateur

Question

J'ai JavaScript qui effectue beaucoup de calculs et de lecture / écriture de valeurs depuis / vers le DOM. La page est énorme, ce qui finit souvent par verrouiller le navigateur pendant une minute (parfois plus avec IE) avec une utilisation du processeur à 100%.

Existe-t-il des ressources sur l'optimisation de JavaScript pour empêcher cela (tout ce que je peux trouver, c'est comment désactiver l'avertissement de script long de Firefox)?

Answer 1

si vous pouvez transformer votre algorithme de calcul en quelque chose qui peut être appelé de manière itérative, vous pouvez relâcher le contrôle du navigateur à intervalles fréquents en utilisant setTimeout avec une valeur de délai d'expiration court.

Par exemple, quelque chose comme ça ...

 function doCalculation()
{
   //do your thing for a short time

   //figure out how complete you are
   var percent_complete=....

   return percent_complete;
}

function pump()
{
   var percent_complete=doCalculation();

   //maybe update a progress meter here!

   //carry on pumping?
   if (percent_complete<100)
   {
      setTimeout(pump, 50);
   }
}

//start the calculation
pump();
 

Answer 2

Utilisez les délais d'attente.

En plaçant le contenu de vos boucles dans des fonctions distinctes et en les appelant à partir de setTimeout () avec un délai d’attente de 50 secondes environ, le javascript permet de contrôler le fil et de revenir un peu plus tard, permettant ainsi à l’UI d’obtenir une regarder dans.

Il y a un bon travail ici .

Answer 3

J'avais blogué sur dans-les performances du navigateur il y a quelques temps, mais permettez-moi de résumer celles liées à la DOM pour vous ici.

• Mise à jour le DOM aussi rarement que possible. Apportez vos modifications en mémoire les objets DOM et les ajouter en une seule fois pour les DOM.
• Utiliser innerHTML. Il est plus rapide que les méthodes du DOM dans la plupart des navigateurs.
• L'utilisation de la délégation régulière de la gestion des événements.
• Savoir quels appels sont chers, et de les éviter. Par exemple, dans jQuery $("div.className") sera plus cher que $("#someId").

Ensuite, il y a quelques liés à JavaScript lui-même:

• Boucle aussi peu que possible. Si vous avez une fonction qui recueille des nœuds DOM, et un autre qui les traite, vous êtes en boucle deux fois. Au lieu de cela, passer une fonction anonyme à la fonction qui recueille les nœuds, et de traiter les nœuds que vous êtes à la collecte.
• Utiliser les fonctionnalités natives lorsque cela est possible. Par exemple, forEach itérateurs.
• Utiliser setTimeout pour laisser le navigateur de respirer de temps en temps.
• Plus cher avec des fonctions qui ont idempotent sorties, mettre en cache les résultats de sorte que vous n'avez pas à le recalculer.

Il y a un peu plus sur mon blog (lien ci-dessus).

Answer 4

C'est encore un peu en bord de saignement, mais Firefox 3.5 a ces choses que l'on appelle des Web workers, je ne suis pas sûr au sujet de leur soutien dans d'autres navigateurs bien.

M. Resig a un article sur eux ici: http://ejohn.org/blog/web-workers/

Et le Recuit Simulé est probablement l'exemple le plus simple, si vous remarquez la filature logo Firefox n'a pas de gel, lorsque les threads sont en train de faire leurs demandes (donc pas de geler le navigateur).

Answer 5

Vous pouvez essayer d'effectuer de longs calculs dans les threads (voir http://stackoverflow.com/questions/30036/javascript-and-threads ), bien qu'ils ne soient pas très portables.

Vous pouvez également essayer d’utiliser un profileur Javascript pour rechercher les goulots d’étranglement liés aux performances. Firebug prend en charge le profilage javascript.