Skip to content

Instantly share code, notes, and snippets.

@nolanlawson

nolanlawson/index.html

Created August 25, 2017 22:58
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save nolanlawson/15ff42d38ca87f3a5a66ebf8949b4e2d to your computer and use it in GitHub Desktop.
Save nolanlawson/15ff42d38ca87f3a5a66ebf8949b4e2d to your computer and use it in GitHub Desktop.
Download ZIP
Layout thrashing
Raw
index.html
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row align-items-start">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
<div class="row align-items-center">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
<div class="row align-items-end">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
</div>
<div>
<button type="button" id="theButton">Go</button>
<pre id="display"></pre>
</div>
<script>
(function () {
theButton.addEventListener('click', function () {
function doStuff(el) {
el.style.height = '0px'
el.getBoundingClientRect()
}
var el = document.querySelector('.container')
performance.mark('start')
for (var i = 0; i < 10000; i++) {
doStuff(el)
}
performance.mark('end')
performance.measure('total', 'start', 'end')
display.innerHTML += performance.getEntriesByType('measure').slice(-1)[0].duration + '\n'
})
})()
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment