bkardell · August 29, 2015 13:56
diff --git a/observer-confusion.html b/observer-confusion.html
 <!doctype html>
 <html>
  <head>
     <style>#gonnaputstuffhere { position:absolute; top:0; right:0; background-color:yellow!important; padding:5em; color:blue !important;}</style>
    <script>
      /* setup a mutation observer watching subtree of body and begin observing immediately...
        collect information about the total number of mutation records, as well as their type
      */
      var total = 0;
      var matrix = {};
      var nodeTypesMatrix = {};
      window.allchildrenobserved = [];
      var observer = new (window.webkitMutationObserver || MutationObserver)(function (mutations, observer) {
          var nodeType;
          total += mutations.length;
          mutations.forEach(function (mutation) {
            /* Keep track of a type'd cound with the matrix object */
            matrix[mutation.type] = matrix[mutation.type] || 0;
            /* Add one for the type, unless it is a childList, then add the length */
            if (mutation.addedNodes) {
                  for (var i=0; i<mutation.addedNodes.length; i++) {
                        nodeType = mutation.addedNodes[i].nodeType;
                        nodeTypesMatrix[nodeType] = nodeTypesMatrix[nodeType] || [];
                        console.log("%o",mutation.addedNodes[i]);
                        nodeTypesMatrix[nodeType]++;
                        matrix[mutation.type]++;
                  }
            } else {
                  matrix[mutation.type]++;
            }
          });
      });
      observer.observe(document.documentElement, { attributes: true, childList: true, subtree: true });
    </script>
  </head>
  <body>

    <div id="header">
      <div style="border: 1em solid blue; padding: 20% 20%; margin 5em;width: 50%;">
            <div>
                  <h1>What's this?</h1>
                  <p>This page connects a mutation observer -- attrs, childlist, subtree, all true immediately inside the head
                  and on document.documentElement itself and then the page itself has a whole buncha stuff.  
                  It collects information about what mutations it spotted while loading.
                  Since reporting observations is async, at the end of the doc it then
                  pauses 2 sec and inserts a yellow box positioned to the top right with a summary (it updates every 2 sec to make
                  sure it didn't miss something too....
                  </p>
                  <p><h1>So, why?</h1>
                  <ul>
                        <li>In chrome stable I get one set of numbers</li>
                        <li>in chrome canaray a moderately different set</li>
                        <li>In FF stable a radically different set.</li>
                        <li>In FF mobile a diff set still</li>
                        <li>In Safai I am getting nada <em>Update: After an upgrade to Mavericks Safari is now near parity to chrome</em>.</li>
                        <li>In Opera stable I get I get something very like chome stable - indistinquishable</li>
                        <li><em>None of the them seem to give me the same exact answer the name every single time.</li>
                  </ul>
                  </p>
            </div>
      </div>
    </div>
    <div><div><pre id="gonnaputstuffhere"></pre></div></div>
    <script>
      
      /*
      Even though this is the last thing in the page, STILL wait for the doc to report as parsed 
      */
      document.addEventListener("DOMContentLoaded", function () {
        /* ... and even then wait 2s before reporting jsut to be sure we're not getting any network
           or reporting bias...
        */
        var target = document.querySelector("#gonnaputstuffhere")
        setTimeout(function () {
            observer.disconnect();
            target.innerHTML =   "Got " + total + " records for "
                  + document.querySelectorAll("*").length + " elements<br>child mods:" 
                  + JSON.stringify(matrix, null, 4) + "<br>Types: " + JSON.stringify(nodeTypesMatrix, null, 4)
        }, 2000);
      }, false);
      
    </script>      

  </body>
 </html>
	<!doctype html>
	<html>
	<head>
	<style>#gonnaputstuffhere { position:absolute; top:0; right:0; background-color:yellow!important; padding:5em; color:blue !important;}</style>
	<script>
	/* setup a mutation observer watching subtree of body and begin observing immediately...
	collect information about the total number of mutation records, as well as their type
	*/
	var total = 0;
	var matrix = {};
	var nodeTypesMatrix = {};
	window.allchildrenobserved = [];
	var observer = new (window.webkitMutationObserver \|\| MutationObserver)(function (mutations, observer) {
	var nodeType;
	total += mutations.length;
	mutations.forEach(function (mutation) {
	/* Keep track of a type'd cound with the matrix object */
	matrix[mutation.type] = matrix[mutation.type] \|\| 0;
	/* Add one for the type, unless it is a childList, then add the length */
	if (mutation.addedNodes) {
	for (var i=0; i<mutation.addedNodes.length; i++) {
	nodeType = mutation.addedNodes[i].nodeType;
	nodeTypesMatrix[nodeType] = nodeTypesMatrix[nodeType] \|\| [];
	console.log("%o",mutation.addedNodes[i]);
	nodeTypesMatrix[nodeType]++;
	matrix[mutation.type]++;
	}
	} else {
	matrix[mutation.type]++;
	}
	});
	});
	observer.observe(document.documentElement, { attributes: true, childList: true, subtree: true });
	</script>
	</head>
	<body>

	<div id="header">
	<div style="border: 1em solid blue; padding: 20% 20%; margin 5em;width: 50%;">
	<div>
	<h1>What's this?</h1>
	<p>This page connects a mutation observer -- attrs, childlist, subtree, all true immediately inside the head
	and on document.documentElement itself and then the page itself has a whole buncha stuff.
	It collects information about what mutations it spotted while loading.
	Since reporting observations is async, at the end of the doc it then
	pauses 2 sec and inserts a yellow box positioned to the top right with a summary (it updates every 2 sec to make
	sure it didn't miss something too....
	</p>
	<p><h1>So, why?</h1>
	<ul>
	<li>In chrome stable I get one set of numbers</li>
	<li>in chrome canaray a moderately different set</li>
	<li>In FF stable a radically different set.</li>
	<li>In FF mobile a diff set still</li>
	<li>In Safai I am getting nada <em>Update: After an upgrade to Mavericks Safari is now near parity to chrome</em>.</li>
	<li>In Opera stable I get I get something very like chome stable - indistinquishable</li>
	<li><em>None of the them seem to give me the same exact answer the name every single time.</li>
	</ul>
	</p>
	</div>
	</div>
	</div>
	<div><div><pre id="gonnaputstuffhere"></pre></div></div>
	<script>

	/*
	Even though this is the last thing in the page, STILL wait for the doc to report as parsed
	*/
	document.addEventListener("DOMContentLoaded", function () {
	/* ... and even then wait 2s before reporting jsut to be sure we're not getting any network
	or reporting bias...
	*/
	var target = document.querySelector("#gonnaputstuffhere")
	setTimeout(function () {
	observer.disconnect();
	target.innerHTML = "Got " + total + " records for "
	+ document.querySelectorAll("*").length + " elements<br>child mods:"
	+ JSON.stringify(matrix, null, 4) + "<br>Types: " + JSON.stringify(nodeTypesMatrix, null, 4)
	}, 2000);
	}, false);

	</script>

	</body>
	</html>