1 <!doctype html> 2 <html> 3 <head> 4 <style type="text/css"> 5 body { height: 1500px; } 6 #center { 7 position: fixed; 8 left: 40%;; 9 width: 50%; 10 height: 250px; 11 top: 25%; 12 background-color: grey; 13 -webkit-transform: scale(0.25, 0.25); 14 -webkit-transition: -webkit-transform 1s; 15 } 16 17 #drawer { 18 position: fixed; 19 top: 0; 20 left: 0; 21 height: 100%; 22 width: 120px; 23 background-color: red; 24 -webkit-transform: translate3d(-1000px, 0, 0); 25 -webkit-transition: -webkit-transform 1s; 26 } 27 28 </style> 29 <script> 30 'use strict'; 31 window.animationDone = false; 32 window.addEventListener('load', function() { 33 var centerEl = document.querySelector('#center'); 34 centerEl.style.webkitTransform = 'scale(1.0, 1.0)'; 35 console.time('Interaction.CenterAnimation/is_smooth'); 36 centerEl.addEventListener('transitionend', function() { 37 console.timeEnd('Interaction.CenterAnimation/is_smooth'); 38 var drawerEl = document.querySelector('#drawer'); 39 drawerEl.style.webkitTransform = 'translate3D(0, 0, 0)'; 40 console.time('Interaction.DrawerAnimation/is_smooth'); 41 drawerEl.addEventListener('transitionend', function() { 42 console.timeEnd('Interaction.DrawerAnimation/is_smooth'); 43 window.animationDone = true; 44 }); 45 }); 46 }); 47 </script> 48 </head> 49 <body> 50 <div id="center"> 51 This is something in the middle. 52 </div> 53 <div id="drawer"> 54 This is a drawer. 55 </div> 56 <script> 57 'use strict'; 58 var jankMs = 100; 59 function jankThread() { 60 console.time('Interaction.JankThreadJSRun/is_responsive'); 61 var startTime = window.performance.now(); 62 var currTime = startTime; 63 while (currTime - startTime < jankMs) { 64 var currTime = window.performance.now(); 65 } 66 console.timeEnd('Interaction.JankThreadJSRun/is_responsive'); 67 } 68 var drawer = document.getElementById('drawer'); 69 drawer.addEventListener('click', jankThread); 70 </script> 71 </body> 72 </html> 73
