Optimize hint generation.

Use createElement() instead of directly manipulating innerHTML.

1 files changed, 12 insertions, 8 deletions

diff --git a/linkHints.js b/linkHints.js
index e72c3f7f..53a31f2b 100644
--- a/linkHints.js
+++ b/linkHints.js
@@ -319,7 +319,7 @@ var alphabetHints = {
     for (var i = 0, count = visibleElements.length; i < count; i++) {
       var marker = hintUtils.createMarkerFor(visibleElements[i]);
       marker.hintString = hintStrings[i];
-      marker.innerHTML = hintUtils.spanWrap(marker.hintString.toUpperCase());
+      hintUtils.spanWrap(marker, marker.hintString.toUpperCase());
       hintMarkers.push(marker);
     }
 
@@ -471,8 +471,7 @@ var filterHints = {
   },
 
   renderMarker: function(marker) {
-    marker.innerHTML = hintUtils.spanWrap(marker.hintString +
-                                          (marker.showLinkText ? ": " + marker.linkText : ""));
+    hintUtils.spanWrap(marker, marker.hintString + (marker.showLinkText ? ": " + marker.linkText : ""));
   },
 
   getHintMarkers: function(visibleElements) {
@@ -574,11 +573,16 @@ var hintUtils = {
   /*
    * Make each hint character a span, so that we can highlight the typed characters as you type them.
    */
-  spanWrap: function(hintString) {
-    var innerHTML = [];
-    for (var i = 0; i < hintString.length; i++)
-      innerHTML.push("<span class='vimiumReset'>" + hintString[i] + "</span>");
-    return innerHTML.join("");
+  spanWrap: function(marker, hintString) {
+    while (marker.childNodes.length > 0)
+      marker.removeChild(marker.lastChild);
+
+    for (var i = 0; i < hintString.length; i++) {
+      var span = document.createElement("span");
+      span.className = "vimiumReset";
+      span.textContent = hintString[i];
+      marker.appendChild(span);
+    }
   },
 
   /*