uu59 · January 2, 2016 11:39
diff --git a/test.html b/test.html
 <!DOCTYPE html> 
 <html>
 <head> 
  <meta charset="utf-8" />
  <title></title>
 </head> 
 <body>
  <h1>optimize addItems()</h1>
  <p>
    <a href="https://codeiq.jp/magazine/2014/01/4344/">https://codeiq.jp/magazine/2014/01/4344/</a>
  </p>
  <p>
    Click any button and see your Developer Tools.
  </p>

  <button onclick="time('addItems')">addItems</button>
  <button onclick="time('step1')">step1</button>
  <button onclick="time('step2')">step2</button>
  <button onclick="time('step3')">step3</button>
  <button onclick="time('step4')">step4</button>
  <button onclick="time('stepX')">stepX(mine)</button>
  <button onclick="all_call()">all</button>
  <ul id="output"></ul>

  <script>
    var button = document.querySelector('button'),
        ul = document.querySelector('#output'),
        itemCount = 0;

    var times = 100; // original post is 10

    function all_call() {
      ["addItems", "step1", "step2", "step3", "step4", "stepX"].forEach(function(fn){
        ul.innerHTML = "";
        time(fn);
      });
    }

    function time(label){
      var fn = eval(label);
      console.time(label);
      fn();
      console.timeEnd(label);
    }

    function addItems() {
      for ( var i = 0; i < times; i++ ) {
        itemCount++;
        ul.innerHTML += '<li><article class="item">'
                      + '<h1 class="title">アイテム' + itemCount + '</h1>'
                      + '<p class="detail">詳細' + itemCount + '</p>'
                      + '</article></li>';
      }
    }
    function step1() {
      for ( var i = 0; i < times; i++ ) {
        itemCount++;

        var li = document.createElement('li'),
            article = document.createElement('article'),
            h1 = document.createElement('h1'),
            p = document.createElement('p');

        article.className = 'item';
        h1.className = 'title';
        h1.textContent = 'アイテム' + itemCount;
        p.className = 'detail';
        p.textContent = '詳細' + itemCount;

        article.appendChild(h1);
        article.appendChild(p);
        li.appendChild(article);
        ul.appendChild(li);
      }
    }

    function step2() {
      var df = document.createDocumentFragment();
      for ( var i = 0; i < times; i++ ) {
        itemCount++;

        var li = document.createElement('li'),
            article = document.createElement('article'),
            h1 = document.createElement('h1'),
            p = document.createElement('p');

        article.className = 'item';
        h1.className = 'title';
        h1.textContent = 'アイテム' + itemCount;
        p.className = 'detail';
        p.textContent = '詳細' + itemCount;

        article.appendChild(h1);
        article.appendChild(p);
        li.appendChild(article);
        df.appendChild(li);
      }
      ul.appendChild(df);
    }

    var step3 = (function(){
      var template = document.createElement('li'),
        article = document.createElement('article'),
        h1 = document.createElement('h1'),
        p = document.createElement('p');

      article.className = 'item';
      h1.className = 'title';
      p.className = 'detail';

      article.appendChild(h1);
      article.appendChild(p);
      template.appendChild(article);
      return function(){
        var df = document.createDocumentFragment();
        for ( var i = 0; i < times; i++ ) {
          itemCount++;
          var li = template.cloneNode(true);
          li.getElementsByClassName('title')[0].textContent = 'アイテム' + itemCount;
          li.getElementsByClassName('detail')[0].textContent = '詳細' + itemCount;
          df.appendChild(li);
        }
        ul.appendChild(df);
      }
    })();

    var step4 = (function(){
      var template = document.createElement('li'),
        article = document.createElement('article'),
        h1 = document.createElement('h1'),
        p = document.createElement('p');

      article.className = 'item';
      h1.className = 'title';
      p.className = 'detail';

      article.appendChild(h1);
      article.appendChild(p);
      template.appendChild(article);

      return function(){
        var df = document.createDocumentFragment();
        for ( var i = 0; i < times; i++ ) {
          itemCount++;
          h1.textContent = 'アイテム' + itemCount;
          p.textContent = '詳細' + itemCount;
          df.appendChild(template.cloneNode(true));
        }
        ul.appendChild(df);
      }
    })();

    function stepX() {
      var html = "";
      for ( var i = 0; i < times; i++ ) {
        ++itemCount;
        html += '<li><article class="item">'
                      + '<h1 class="title">アイテム' + itemCount + '</h1>'
                      + '<p class="detail">詳細' + itemCount + '</p>'
                      + '</article></li>';
      }
      ul.innerHTML = html;
    }
 </script>
 </body></html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<title></title>
	</head>
	<body>
	<h1>optimize addItems()</h1>
	<p>
	<a href="https://codeiq.jp/magazine/2014/01/4344/">https://codeiq.jp/magazine/2014/01/4344/</a>
	</p>
	<p>
	Click any button and see your Developer Tools.
	</p>

	<button onclick="time('addItems')">addItems</button>
	<button onclick="time('step1')">step1</button>
	<button onclick="time('step2')">step2</button>
	<button onclick="time('step3')">step3</button>
	<button onclick="time('step4')">step4</button>
	<button onclick="time('stepX')">stepX(mine)</button>
	<button onclick="all_call()">all</button>
	<ul id="output"></ul>

	<script>
	var button = document.querySelector('button'),
	ul = document.querySelector('#output'),
	itemCount = 0;

	var times = 100; // original post is 10

	function all_call() {
	["addItems", "step1", "step2", "step3", "step4", "stepX"].forEach(function(fn){
	ul.innerHTML = "";
	time(fn);
	});
	}

	function time(label){
	var fn = eval(label);
	console.time(label);
	fn();
	console.timeEnd(label);
	}

	function addItems() {
	for ( var i = 0; i < times; i++ ) {
	itemCount++;
	ul.innerHTML += '<li><article class="item">'
	+ '<h1 class="title">アイテム' + itemCount + '</h1>'
	+ '<p class="detail">詳細' + itemCount + '</p>'
	+ '</article></li>';
	}
	}
	function step1() {
	for ( var i = 0; i < times; i++ ) {
	itemCount++;

	var li = document.createElement('li'),
	article = document.createElement('article'),
	h1 = document.createElement('h1'),
	p = document.createElement('p');

	article.className = 'item';
	h1.className = 'title';
	h1.textContent = 'アイテム' + itemCount;
	p.className = 'detail';
	p.textContent = '詳細' + itemCount;

	article.appendChild(h1);
	article.appendChild(p);
	li.appendChild(article);
	ul.appendChild(li);
	}
	}

	function step2() {
	var df = document.createDocumentFragment();
	for ( var i = 0; i < times; i++ ) {
	itemCount++;

	var li = document.createElement('li'),
	article = document.createElement('article'),
	h1 = document.createElement('h1'),
	p = document.createElement('p');

	article.className = 'item';
	h1.className = 'title';
	h1.textContent = 'アイテム' + itemCount;
	p.className = 'detail';
	p.textContent = '詳細' + itemCount;

	article.appendChild(h1);
	article.appendChild(p);
	li.appendChild(article);
	df.appendChild(li);
	}
	ul.appendChild(df);
	}

	var step3 = (function(){
	var template = document.createElement('li'),
	article = document.createElement('article'),
	h1 = document.createElement('h1'),
	p = document.createElement('p');

	article.className = 'item';
	h1.className = 'title';
	p.className = 'detail';

	article.appendChild(h1);
	article.appendChild(p);
	template.appendChild(article);
	return function(){
	var df = document.createDocumentFragment();
	for ( var i = 0; i < times; i++ ) {
	itemCount++;
	var li = template.cloneNode(true);
	li.getElementsByClassName('title')[0].textContent = 'アイテム' + itemCount;
	li.getElementsByClassName('detail')[0].textContent = '詳細' + itemCount;
	df.appendChild(li);
	}
	ul.appendChild(df);
	}
	})();

	var step4 = (function(){
	var template = document.createElement('li'),
	article = document.createElement('article'),
	h1 = document.createElement('h1'),
	p = document.createElement('p');

	article.className = 'item';
	h1.className = 'title';
	p.className = 'detail';

	article.appendChild(h1);
	article.appendChild(p);
	template.appendChild(article);

	return function(){
	var df = document.createDocumentFragment();
	for ( var i = 0; i < times; i++ ) {
	itemCount++;
	h1.textContent = 'アイテム' + itemCount;
	p.textContent = '詳細' + itemCount;
	df.appendChild(template.cloneNode(true));
	}
	ul.appendChild(df);
	}
	})();

	function stepX() {
	var html = "";
	for ( var i = 0; i < times; i++ ) {
	++itemCount;
	html += '<li><article class="item">'
	+ '<h1 class="title">アイテム' + itemCount + '</h1>'
	+ '<p class="detail">詳細' + itemCount + '</p>'
	+ '</article></li>';
	}
	ul.innerHTML = html;
	}
	</script>
	</body></html>
No results found