adardesign/box-recalc-style-slow.html

## box-recalc-style-slow.html
<!doctype html>
<html>

  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="author" content="" />
    <meta name="viewport" content="width=device-width">
    <title>Box Style Change</title>

    <style>
    html, body {
      background: #ECECEC;
    }

    body .box-container div{
      display: inline-block;
      width: 40px;
      height: 40px;
      background: #FFF;
      box-shadow: 0 1px 1px rgba(0,0,0,0.3);
      margin: 5px;
      position: relative;
      will-change: background-color;
    }

    body .box-container div.box {
      background-color: #777;
    }

    button {
      margin: 0 auto;
      padding: 20px;
      background: #CC0000;
      font-size: 20px;
      border: none;
      border-radius: 3px;
      box-shadow: 0 1px 1px rgba(0,0,0,0.3);
    }

    </style>
  </head>

  <body>

    <button>Click me</button>

    <main>
      <div class="box-container">


      </div>
    </main>

    <script>

    var container = document.querySelector('.box-container');
    var button = document.querySelector('button');

    for (var i = 0; i < 3000; i++) {
      var div = document.createElement('div');
      div.index = i;
      container.appendChild(div);
    }

    button.addEventListener('click', function() {
      document.querySelectorAll(".box-container div:nth-child(2n)").forEach( (ele) => ele.classList.toggle('box'));
    }, false);

    </script>
  </body>

</html>
	<!doctype html>
	<html>

	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="author" content="" />
	<meta name="viewport" content="width=device-width">
	<title>Box Style Change</title>

	<style>
	html, body {
	background: #ECECEC;
	}

	body .box-container div{
	display: inline-block;
	width: 40px;
	height: 40px;
	background: #FFF;
	box-shadow: 0 1px 1px rgba(0,0,0,0.3);
	margin: 5px;
	position: relative;
	will-change: background-color;
	}

	body .box-container div.box {
	background-color: #777;
	}

	button {
	margin: 0 auto;
	padding: 20px;
	background: #CC0000;
	font-size: 20px;
	border: none;
	border-radius: 3px;
	box-shadow: 0 1px 1px rgba(0,0,0,0.3);
	}

	</style>
	</head>

	<body>

	<button>Click me</button>

	<main>
	<div class="box-container">



	</div>
	</main>

	<script>

	var container = document.querySelector('.box-container');
	var button = document.querySelector('button');

	for (var i = 0; i < 3000; i++) {
	var div = document.createElement('div');
	div.index = i;
	container.appendChild(div);
	}

	button.addEventListener('click', function() {
	document.querySelectorAll(".box-container div:nth-child(2n)").forEach( (ele) => ele.classList.toggle('box'));
	}, false);

	</script>
	</body>

	</html>