| <!DOCTYPE html> |
| <style> |
| body { |
| display: grid; |
| grid: repeat(100, 30px) / repeat(100, 60px); |
| } |
| |
| span { |
| border: solid; |
| width: 60px; |
| height: 30px; |
| box-sizing: border-box; |
| contain: size layout; |
| line-height: 1; |
| } |
| |
| span:nth-child(2n) { |
| text-align: center; |
| } |
| |
| span:nth-child(3n) { |
| text-align: end; |
| } |
| </style> |
| <script src="../resources/runner.js"></script> |
| <script> |
| let textNodes = []; |
| |
| function populateData() { |
| for (let i = 0; i < 100*100; i++) { |
| let span = document.createElement('span'); |
| span.classList.add('cell'); |
| let textNode = document.createTextNode('' + (100 * Math.random()).toFixed(2)); |
| span.appendChild(textNode); |
| document.body.appendChild(span); |
| textNodes.push(textNode); |
| } |
| } |
| |
| function startTest() { |
| populateData(); |
| |
| PerfTestRunner.forceLayout(); |
| |
| PerfTestRunner.measureRunsPerSecond({ |
| description: "Measures performance of changing text nodes content.", |
| run: function() { |
| for (let i = 0; i < textNodes.length; i++) { |
| textNodes[i].data = '' + (100 * Math.random()).toFixed(2); |
| } |
| |
| PerfTestRunner.forceLayout(); |
| }, |
| }); |
| } |
| </script> |
| <body onload="startTest();"> |
| </body> |
