Created
April 29, 2016 21:35
-
-
Save mcdado/35d8ccb3d5c165c28ed6f70ffca68948 to your computer and use it in GitHub Desktop.
Test case for Safari: typing performance with huge amount of input fields on page
This file contains hidden or 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"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <title>Test case for huge amount of input fields on page</title> | |
| <!-- Bootstrap: Latest compiled and minified CSS --> | |
| <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> | |
| <!-- Bootstrap: Optional theme --> | |
| <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous"> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <h1>Hello, <span>world!</span></h1> | |
| <p>Generate list with this many inputs:</p> | |
| <div class="container"> | |
| <div class="col-xs-6"> | |
| <div class="input-group"> | |
| <input id="set" type="text" class="form-control" placeholder="5000"> | |
| <span class="input-group-btn"> | |
| <button id="go" class="btn btn-default" type="button">GO!</button> | |
| </span> | |
| </div> | |
| </div> | |
| </div> | |
| <p id="result"></p> | |
| <div id="main-table" class="container"> | |
| </div> | |
| </div> | |
| <script type="text/javascript"> | |
| function generateRowsWithInputs(max) { | |
| var mainTable = document.getElementById('main-table'); | |
| if (typeof max === 'undefined') { | |
| max = 5000; | |
| } | |
| // Create a superfluosly adorned DOM structure | |
| for (var i = 0; i < max; i += 1) { | |
| var row = document.createElement('div'); | |
| var columnLabel = document.createElement('div'); | |
| var columnField = document.createElement('div'); | |
| var label = document.createTextNode('Field ' + i.toString()); | |
| var field = document.createElement('input'); | |
| row.className = 'row'; | |
| columnLabel.className = 'col-xs-1 text-right'; | |
| columnField.className = 'col-xs-11'; | |
| field.type = 'text'; | |
| field.style.width = '100%'; | |
| columnLabel.appendChild(label); | |
| columnField.appendChild(field); | |
| row.appendChild(columnLabel); | |
| row.appendChild(columnField); | |
| mainTable.appendChild(row); | |
| } | |
| var result = document.getElementById('result'); | |
| result.innerHTML = 'There are now ' + i.toString() + ' fields on this page'; | |
| } | |
| var setField = document.getElementById('set'); | |
| var goButton = document.getElementById('go'); | |
| setField.addEventListener('keydown', function (event) { | |
| var _this = this; | |
| if (event.keyCode !== 13) { | |
| return; | |
| } | |
| if (_this.value !== '' && parseInt(_this.value, 10)) { | |
| generateRowsWithInputs(_this.value); | |
| } | |
| }); | |
| goButton.addEventListener('click', function (event) { | |
| var _field = document.getElementById('set'); | |
| if (_field.value !== '' && parseInt(_field.value, 10)) { | |
| generateRowsWithInputs(_field.value); | |
| } else if (_field.value === '') { | |
| generateRowsWithInputs(); | |
| } | |
| }); | |
| document.addEventListener('DOMContentLoaded', function () { | |
| var hello = document.querySelector('h1 span'); | |
| hello.innerHTML = navigator.userAgent; | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment