Created
May 3, 2017 13:58
-
-
Save shlomisas/b57ea9fc44b596c0838cb4c3b46df309 to your computer and use it in GitHub Desktop.
Simulate reflow
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Simulate reflow/layout (500 DIV's)</title> | |
| <style> | |
| #holder{ | |
| margin-top: 20px; | |
| border: 1px solid; | |
| width: 300px; | |
| opacity: 0.5; | |
| display: none; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>Simulate reflow/layout (500 DIV's)</h1> | |
| <div> | |
| <div><a id="badMode" href="?run">Simulate bad reflow</a></div> | |
| <div><a id="goodMode" href="?run&good">Simulate optimized reflow</a></div> | |
| <div id="result"></div> | |
| </div> | |
| <div id="holder"> | |
| <div>Generated DOM elements</div> | |
| <div id="generatedElements"></div> | |
| </div> | |
| <script> | |
| (function () { | |
| const run = window.location.search.indexOf('run') > -1; | |
| if(!run) return; | |
| function _log() { | |
| console.log(...arguments); | |
| } | |
| const holder = document.getElementById('holder'); | |
| holder.style.display = 'block'; | |
| const subHolder = document.getElementById('generatedElements'); | |
| const good = window.location.search.indexOf('good') > -1; | |
| const maxElements = 500; | |
| const elements = []; | |
| for (let i = 0; i < maxElements; i++) { | |
| const element = document.createElement('div'); | |
| element.innerText = `elem-${i}`; | |
| subHolder.appendChild(element); | |
| elements.push(element); | |
| } | |
| const start = Date.now(); | |
| // Experiment start! | |
| if(good){ | |
| _log('Start good mode..'); | |
| const heights = []; | |
| for (let i = 0; i < elements.length ; i++) { | |
| heights.push(elements[i].clientHeight); | |
| } | |
| for (let i = 0; i < elements.length ; i++) { | |
| elements[i].style.height = (heights[i] * 2) + 'px'; | |
| } | |
| }else{ | |
| _log('Start bad mode..'); | |
| for (let i = 0; i < elements.length ; i++) { | |
| const height = elements[i].clientHeight; | |
| elements[i].style.height = (height * 2) + 'px'; | |
| } | |
| } | |
| const message = `Total execution: ${Date.now() - start}ms`; | |
| _log(message); | |
| document.getElementById('result').innerText = message; | |
| })(); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment