| <!DOCTYPE html> |
| <html> |
| |
| <head> |
| <title>Performance Lifecycle Timing Demo</title> |
| <style> |
| body { |
| background-color: rgb(255, 255, 255); |
| color: #0047ab; |
| font-size: 50px; |
| } |
| </style> |
| </head> |
| |
| <body> |
| <script> |
| var lifecycleTiming = performance.getEntriesByType("lifecycle")[0]; |
| |
| function LogInfo(state, time) { |
| var message = state + ": " + time; |
| console.log(message); |
| document.getElementById('info').innerHTML += message + ".\n"; |
| } |
| |
| function handleVisibilityChange() { |
| if (document.visibilityState == "visible") { |
| ReportPerformanceLifecycleTimingInfo(); |
| } |
| } |
| |
| function ReportPerformanceLifecycleTimingInfo() { |
| if (lifecycleTiming.appBlur != 0) { |
| LogInfo("Blur time", lifecycleTiming.appBlur); |
| } |
| if (lifecycleTiming.appConceal != 0) { |
| LogInfo("Conceal time", lifecycleTiming.appConceal); |
| } |
| if (lifecycleTiming.appReveal != 0) { |
| LogInfo("Reveal time", lifecycleTiming.appReveal); |
| } |
| if (lifecycleTiming.appFocus != 0) { |
| LogInfo("Focus time", lifecycleTiming.appFocus); |
| } |
| if (lifecycleTiming.appFreeze != 0) { |
| LogInfo("Freeze time", lifecycleTiming.appFreeze); |
| } |
| if (lifecycleTiming.appUnfreeze != 0) { |
| LogInfo("Unfreeze time", lifecycleTiming.appUnfreeze); |
| } |
| } |
| |
| document.addEventListener("visibilitychange", handleVisibilityChange); |
| |
| window.onload = function () { |
| LogInfo("Performance Now", window.performance.now()); |
| LogInfo("Start time", lifecycleTiming.appStart); |
| }; |
| |
| </script> |
| <div> |
| <span id='info' style='white-space: pre; background-color:#00FF00'></span> |
| </div> |
| </body> |
| |
| </html> |
