justinbmeyer/performance-test.html

## performance-test.html

<body>
<script>

    class HelloWorld extends HTMLElement {
      constructor() {
        super();
        this.rendered = false;
        this.depth = 0;
      }
      connectedCallback(){
        this.render();
      }
      render(){
        if(this.rendered) { return; }
        this.rendered = true;
        if(this.depth < 10) {
          var ul = document.createElement("ul");
          var li = document.createElement("li");
          li.innerHTML = ""+ this.depth;
          ul.appendChild(li);
          for(let i  = 0; i < 2; i++) {
             var li = document.createElement("li");
             var hw = document.createElement("hello-world");
             hw.depth = this.depth + 1;
             hw.render(); // FAST
             li.appendChild(hw);
             ul.appendChild(li);
          }
          this.appendChild(ul);
          //this.offsetHeight;
        } else {
          this.innerHTML = "leaf"
        }
      }
    }


    customElements.define("hello-world", HelloWorld);
    var hw = document.createElement("hello-world");


    var now = new Date();


    hw.render(); // FAST
    document.body.appendChild(hw);

    console.log(new Date() - now);


</script>
</body>

	<body>
	<script>

	class HelloWorld extends HTMLElement {
	constructor() {
	super();
	this.rendered = false;
	this.depth = 0;
	}
	connectedCallback(){
	this.render();
	}
	render(){
	if(this.rendered) { return; }
	this.rendered = true;
	if(this.depth < 10) {
	var ul = document.createElement("ul");
	var li = document.createElement("li");
	li.innerHTML = ""+ this.depth;
	ul.appendChild(li);
	for(let i = 0; i < 2; i++) {
	var li = document.createElement("li");
	var hw = document.createElement("hello-world");
	hw.depth = this.depth + 1;
	hw.render(); // FAST
	li.appendChild(hw);
	ul.appendChild(li);
	}
	this.appendChild(ul);
	//this.offsetHeight;
	} else {
	this.innerHTML = "leaf"
	}
	}
	}


	customElements.define("hello-world", HelloWorld);
	var hw = document.createElement("hello-world");


	var now = new Date();



	hw.render(); // FAST
	document.body.appendChild(hw);

	console.log(new Date() - now);





	</script>
	</body>