| OLD | NEW |
|---|
| (Empty) | |
| 1 <!DOCTYPE html> |
| 2 <body> |
| 3 <script src="../resources/runner.js"></script> |
| 4 <style> |
| 5 span { |
| 6 border: 1px solid blue; |
| 7 } |
| 8 .changeTransform { |
| 9 position: absolute; |
| 10 transform: rotate(0); |
| 11 } |
| 12 </style> |
| 13 <script> |
| 14 // This test measures the lifecycle update performance of changing transforms |
| 15 // in large trees. |
| 16 |
| 17 function buildTree(parent, depth, arity, createElementCallback) { |
| 18 for (var child = 0; child < arity; child++) { |
| 19 var element = document.createElement('span'); |
| 20 parent.appendChild(element); |
| 21 createElementCallback(element, depth); |
| 22 if (depth > 1) |
| 23 buildTree(element, depth - 1, arity, createElementCallback); |
| 24 } |
| 25 } |
| 26 |
| 27 // Build a tall tree (depth=10) that is skinny (arity=2). A middle layer of |
| 28 // the tree should have the changeTransform class. |
| 29 buildTree(document.body, 11, 2, function(element, depth) { |
| 30 element.style.borderColor = 'red'; |
| 31 if (depth == 5) |
| 32 element.setAttribute('class', 'changeTransform'); |
| 33 }); |
| 34 |
| 35 // Build a short tree (depth=6) that is fat (arity=4). A middle layer of |
| 36 // the tree should have the changeTransform class. |
| 37 buildTree(document.body, 6, 4, function(element, depth) { |
| 38 element.style.borderColor = 'orange'; |
| 39 if (depth == 3) |
| 40 element.setAttribute('class', 'changeTransform'); |
| 41 }); |
| 42 |
| 43 var runCount = 0; |
| 44 var elementsToChange = document.getElementsByClassName('changeTransform'); |
| 45 PerfTestRunner.measureFrameTime({ |
| 46 run: function() { |
| 47 runCount += 10; |
| 48 for (var index = 0; index < elementsToChange.length; index++) |
| 49 elementsToChange[index].style.transform = 'rotate(' + runCount + 'deg)'; |
| 50 }, |
| 51 warmUpCount: 5, |
| 52 }); |
| 53 </script> |
| 54 </body> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2488913002:
Add lifecycle update microbenchmarks (Closed)
