Owning Web Performance with PhantomJS 2 - Fluent 2016
•
3 gostaram•1,504 visualizações
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.
Recomendados
Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (20)
Destaque
Destaque (16)
Semelhante a Owning Web Performance with PhantomJS 2 - Fluent 2016
Semelhante a Owning Web Performance with PhantomJS 2 - Fluent 2016 (20)
Mais de Wesley Hales
Mais de Wesley Hales (6)
Último
Último (20)
Owning Web Performance with PhantomJS 2 - Fluent 2016
- 1. Owning Web Performance With PhantomJS 2 @wesleyhales
- 2. How long does it take the page to load? @wesleyhales
- 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. @wesleyhales
- 5. Loading everything and presenting something to the user @wesleyhales
- 6. Web applications have become more complex… @wesleyhales
- 9. @wesleyhales
- 10. Fast is good… Faster is better Google Dev Summit @wesleyhales
- 12. @wesleyhales
- 13. How do we measure web performance today? @wesleyhales
- 14. Date.now() || Date.getTime() • When did JavaScript execution begin? • <HEAD> vs. </BODY> • Get the current time • Profit • Example: Simple.html @wesleyhales
- 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. Demo: Basic Loading and Blocking all-old.html @wesleyhales
- 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. 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. 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. 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
- 23. Enter Navigation Timing API (The starting point of Web Performance APIs) @wesleyhales
- 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. @wesleyhales
- 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
- 30. • Released Early 2015 • Headless Web Browser • Based on WebKit PhantomJS 2 @wesleyhales
- 31. PhantomJS 2 Feature Detect
- 33. @wesleyhales
- 34. • Rewrite of loadreport.js • Leverages all implemented PhantomJS 2 Navigation Timing APIs • (shims resource timing) Speedgun.js
- 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. 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/
- 40. Thanks!! • speedgun.io (github) • Navigation Timing API • Navigation Timing 2 • Resource Timing API @wesleyhales