fpsdisplay.html 1.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950
  1. <!DOCTYPE html>
  2. <html>
  3. <!--
  4. Copyright 2011 The Closure Library Authors. All Rights Reserved.
  5. Use of this source code is governed by the Apache License, Version 2.0.
  6. See the COPYING file for details.
  7. -->
  8. <head>
  9. <title>FPS Display</title>
  10. <script type="text/javascript" src="../base.js"></script>
  11. <script type="text/javascript">
  12. goog.require('goog.debug.FpsDisplay');
  13. goog.require('goog.string');
  14. </script>
  15. <body>
  16. <div id="fpsdisplay"></div>
  17. <button onclick="doSomethingExpensive()">Do something expensive and watch FPS decrease</button>
  18. <button onclick="stop()">Stop expensive action</button>
  19. <button onclick="display()">Alert FPS</button>
  20. <div id="output"></div>
  21. </body>
  22. <script>
  23. var fpsDisplay = new goog.debug.FpsDisplay();
  24. fpsDisplay.render(document.getElementById('fpsdisplay'));
  25. var handle;
  26. function doSomethingExpensive() {
  27. var output = document.getElementById('output');
  28. var appender = function() {
  29. output.innerHTML += goog.string.repeat('<div>a </div>', 20);
  30. // Force layout.
  31. var b = output.offsetHeight;
  32. }
  33. handle = window.setInterval(appender, 20);
  34. }
  35. function stop() {
  36. window.clearInterval(handle);
  37. }
  38. function display() {
  39. alert(fpsDisplay.getFps());
  40. }
  41. </script>
  42. </html>