google maps spped improvements test functions

by ian_smithz

HTML

Hi Chris,

I have a concrete suggestion for how to implement feature-rich markers that considerably outperform V3 Markers: update the DOM in a big batch, not N times per marker.

Each time a node is added to a live DOM, the browser has to do work to place it in the layout.  The fastest way to do work in batches is to do it with innerHTML; the second fastest way is to add nodes to a document fragment and then add the fragment to the DOM.  The worst way is to add nodes one at a time directly to the live document, but that is what Google Maps is doing today!

function slow() {  
    for (i = 0; i < 1000; i++) {
      var elem = document.createElement("div");
      elem.appendChild(document.createTextNode(i));
      document.body.appendChild(elem);
    }
}

function faster() {
    var fragment = document.createDocumentFragment();
    for (var i = 0; i < 1000; i++) {
      var elem = document.createElement("div");
      elem.appendChild(document.createTextNode(i));
      fragment.appendChild(elem);
    }
    document.body.appendChild(fragment);
}

function fastest() {
    var buffer = [];
    for (i = 0; i < 1000; i++) {
      buffer.push("<div>");
      buffer.push(i);
      buffer.push("</div>");
    }
    document.body.innerHTML = buffer.join("");
}

I don't have access to the GMaps source, but it SEEMS as though GMaps may be doing DOM manipulation the wrong way when we use the DOMSubtreeModified event, available in Firefox and Google Chrome.

function measure() {
    var count = 0;
    document.addEventListener("DOMSubtreeModified", function() {count++});
    slow();
    console.log("slow: " + count);
    count = 0;
    faster();
    console.log("faster: " + count);
    count = 0;
    fastest();
    console.log("fastest: " + count);
}

When I run that, my log shows:

    slow: 1000
    faster: 1
    fastest: 2

OK, now take a look at this example: http://multimarker.googlecode.com/svn/trunk/fast-marker-overlay/maps-v3/example/mutation-events.html

On Google Chrome...