Html DOM node limits

Je travaille sur un émulateur de terminal pour avoir de l'amusement et avoir les bases du backend en cours d'exécution. Cependant, je continue à rencontrer des problèmes de performances sur le frontend.

Comme vous le savez probablement, chaque personnage d'une fenêtre de terminal peut avoir un style différent. (Couleur, toile de fond, gras, souligné, etc.). Donc, mon idée était d'utiliser un <span> pour chaque personnage dans la fenêtre d'affichage et d'appliquer un style en ligne si nécessaire, donc j'ai le degré de contrôle dont j'ai besoin.

Le problème est que la performance est horrible pour un rafraîchissement. Chrome peut le gérer sur mon PC avec environ 120 ops par seconde et Firefox avec 80. Mais l'explorateur Internet à peine obtient 6. Donc, après mon passage avec html, j'ai essayé d'utiliser une toile, mais le texte sur une toile est très lent. En ligne, je lis la mise en cache aide donc je implémente un cache pour chaque personnage et je peux appliquer des couleurs à la police bitmapped alors avec une opération composite. Cependant, ceci est beaucoup plus lent que DOM.

Ensuite, je suis retourné au dom et j'ai essayé d'utiliser document.createDocumentFragment mais il se comporte un peu plus mal que d'utiliser la norme.

• Meilleur ordre des attributs en HTML pour les requêtes DOM
• Interagissant rapidement avec un grand nombre d'éléments dans un conteneur (DOM, javascript)
• Javascript addEventListener – en utilisant pour créer un effet de mouseover?
• Le moyen le plus rapide d'ajouter / supprimer plusieurs éléments dans DOM
• Pourquoi cloneNode doit-il être utilisé lors de l'ajout d'un documentFragment?

Je n'ai aucune idée de l'endroit où commencer l'optimisation maintenant. Je pourrais garder une trace de ce que le personnage change quand, mais je vais encore courir dans cette lenteur lorsque le terminal reçoit beaucoup d'informations.

Je suis nouveau sur le DOM, donc je pourrais faire quelque chose de complètement faux …

Toute aide est appréciée!

Voici un jsperf avec quelques testcases:

Http://jsperf.com/canvas-bitma32p-cache-test/6

• Fichier de script Exectuing After Inline Script avec CDN ou domaine externe sur l'injection HTML
• JavaScript Element.value vs Element.getAttribute ("value")
• Changer la police après createTextNode ()
• Comment fonctionne form.reset ()?
• Vérifiez si un élément contient un élément enfant spécifique

 var div = document.getElementById("output"); var charCount = 50; var line, i, j; for (i = 0; i < charCount; i++) { line = ""; for (j = 0; j < charCount; j++) { line += "<span style=\"background-color:rgb(0,0,255);color:rgb(255,127,0)\">o</span>"; } div.insertAdjacentHTML("beforeend","<div>"+line+"</div>"); } 

 #output{font-family:courier; font-size:6pt;} 

 <div id="output"></div>