Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Owning Web Performance with PhantomJS 2 - Fluent 2016

1.214 Aufrufe

Veröffentlicht am

Running a synthetic testing server or script to measure web performance is a great entry point into the world of automated web-page testing. We have an abundance of standardized APIs to measure every part of how the page renders in the browser. PhantomJS 2, released in 2015, gives us the ability to measure navigation timing APIs in an automated fashion.

Wesley Hales introduces the basics of creating a simple PhantomJS script that only extracts the performance data we need (from the W3C Navigation Timing API) and explains how this script can be Dockerized and run across many different nodes and regions of the Web. You’ll walk away with a new view on automated web-performance testing and the tools required to setup a simulated RUM network.

Veröffentlicht in: Ingenieurwesen
  • ➤➤ How Long Does She Want You to Last? Here's the link to the FREE report ♥♥♥ https://tinyurl.com/rockhardxx
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • ◆◆◆ https://tinyurl.com/rockhardxx
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier

Owning Web Performance with PhantomJS 2 - Fluent 2016

  1. 1. Owning Web Performance With PhantomJS 2 @wesleyhales
  2. 2. How long does it take the page to load? @wesleyhales
  3. 3. 1999 20152008 HTTP/1.1 WebSocket SSE HTTP/2 2006 2009 SPDY 2005 AJAX 2000 REST Delivering web resources to the browser @wesleyhales
  4. 4. @wesleyhales
  5. 5. Loading everything and presenting something to the user @wesleyhales
  6. 6. Web applications have become more complex… @wesleyhales
  7. 7. Like this… @wesleyhales
  8. 8. Understanding the basics @wesleyhales
  9. 9. @wesleyhales
  10. 10. Fast is good… Faster is better Google Dev Summit @wesleyhales
  11. 11. Performance Reality @wesleyhales
  12. 12. @wesleyhales
  13. 13. How do we measure web performance today? @wesleyhales
  14. 14. Date.now() || Date.getTime() • When did JavaScript execution begin? • <HEAD> vs. </BODY> • Get the current time • Profit • Example: Simple.html @wesleyhales
  15. 15. However… • JavaScript time is skewed by adjustments to the system clock • NTP adjustments, leap seconds, user configuration changes, and so on can cause time inaccuracies. • It can’t provide any data regarding the 
 server, network, and so on. @wesleyhales
  16. 16. Demo: Basic Loading and Blocking all-old.html @wesleyhales
  17. 17. DomContentLoaded • Document has been completely loaded and parsed. • Stylesheets, images, and subframes have not finished loading document.addEventListener('DOMContentLoaded', function () { console.log('DOMContentLoaded', new Date().getTime()); }); @wesleyhales
  18. 18. load || unload • Every modern framework and app uses it. • The load event is fired when a resource and its dependent resources have finished loading. • The load event is easy to measure. Unfortunately, it isn't a very good indicator of the actual end-user experience. window.addEventListener('load', function (event) {
  19. 19. readyState • "loading" while the document is loading • "interactive" once it is finished parsing (but still loading sub-resources) • "complete" once it has loaded document.onreadystatechange = function () { if (document.readyState == "interactive") { … }else if (document.readyState == "loading") { … }else if (document.readyState == "complete") { … } };
  20. 20. readyState == “complete” • This will usually include any activity that is triggered by javascript after the main page loads. document.onreadystatechange = function () { if (document.readyState == "interactive") { … }else if (document.readyState == "loading") { … }else if (document.readyState == "complete") { … } }; all-old.html (again) @wesleyhales
  21. 21. Loadreport.js (2012-2015)
  22. 22. Remember this… @wesleyhales
  23. 23. Enter Navigation Timing API (The starting point of Web Performance APIs) @wesleyhales
  24. 24. Navigation is about how user agents convert the requested HTML, CSS, and JavaScript into rendered pixels, which is one of the most critical steps for users to navigate a document. @wesleyhales
  25. 25. @wesleyhales
  26. 26. window.performance.timing process model @wesleyhales
  27. 27. http://www.w3.org/2015/10/webperf-all.html @wesleyhales
  28. 28. HRT • All measurements are at microsecond precision. • Does not depend on system clock • The idea of High Resolution Time is to provide a monotonic, uniformly increasing timestamp suitable for interval measurements • Example: perf.now.html performance.now() @wesleyhales
  29. 29. Demo: window.performance simple-new.html @wesleyhales
  30. 30. • Released Early 2015 • Headless Web Browser • Based on WebKit PhantomJS 2 @wesleyhales
  31. 31. PhantomJS 2 Feature Detect
  32. 32. Demo: Basic PhantomJS Scripts http://phantomjs.org/examples/ @wesleyhales
  33. 33. @wesleyhales
  34. 34. • Rewrite of loadreport.js • Leverages all implemented PhantomJS 2 Navigation Timing APIs • (shims resource timing) Speedgun.js
  35. 35. Demo: Speedgun.js @wesleyhales
  36. 36. speedgun.io @wesleyhales
  37. 37. Synthetic RUM • Use Speedgun.io as centralized server • All docker nodes send beacon with: • Current container CPU and memory usage • Yes, another demo... http://wesleyhales.com/blog/2015/04/24/Speedgun/
  38. 38. Synthetic RUM • The ability to execute a script (PhantomJS in this case) in a controlled, one at a time manner. • A REST api that allows master/slave communication and is publicly accessible. • A beacon that sends it’s availability to a centralized(parent) server. • Data storage of reports in a db that treats JSON as a first class citizen. http://wesleyhales.com/blog/2015/04/24/Speedgun/
  39. 39. http://w3c.github.io/perf-timing-primer/ W3C Performance Specs
  40. 40. Thanks!! • speedgun.io (github) • Navigation Timing API • Navigation Timing 2 • Resource Timing API @wesleyhales

×