Web Perf Navigation Timing Intro

Transcript

1. Web Perf - Navigation Timing Introduction Haisheng, Wu Nov 09, 2012
2. AGENDA Quick Review of Network Panel W3C Navigation Interface HTML Parser and Render
3. QUICK REVIEW OF NETWORK PANEL FIREBUG V.S CHROME Blocking (Both but diff) DNS lookup (Firebug) SSL (Chrome)
4. QUESTIONS? Diff between DOMContentLoaded and onload
5. QUESTIONS? Diff between DOMContentLoaded and onload The busy indicator
6. QUESTIONS? Diff between DOMContentLoaded and onload The busy indicator What MDN says
7. QUESTIONS? Diff between DOMContentLoaded and onload The busy indicator What MDN says How Javascript Loading Works - DOMContentLoaded and OnLoad
8. QUESTIONS? Diff between DOMContentLoaded and onload The busy indicator What MDN says How Javascript Loading Works - DOMContentLoaded and OnLoad Parallel downloading?
9. W3C NAVIGATION INTERFACE OVERVIEW
10. WE LIKE THOSE EVENTS domLoading domInteractive domContentLoadedEventStart domContentLoadedEventEnd domComplete loadEventStart loadEventEnd The Time Difference between each of them??
11. HTML PARSER AND REST RENDER ENGINE Figure: Render Engine
12. HTML PARSER The parsing algorithm
13. HTML PARSER The parsing algorithm Non-trivial . . .
14. HTML PARSER The parsing algorithm Non-trivial . . . The output tree - the “parse tree” is a tree of DOM element and attribute nodes.
15. HTML PARSER The parsing algorithm Non-trivial . . . The output tree - the “parse tree” is a tree of DOM element and attribute nodes. when the parsing is finished
16. HTML PARSER The parsing algorithm Non-trivial . . . The output tree - the “parse tree” is a tree of DOM element and attribute nodes. when the parsing is finished mark the document as interactive
17. HTML PARSER The parsing algorithm Non-trivial . . . The output tree - the “parse tree” is a tree of DOM element and attribute nodes. when the parsing is finished mark the document as interactive start parsing scripts that are in “deferred” mode - those who should be executed after the document is parsed. The document state will be then set to “complete” and a “load” event will be fired.
18. PROCESSING SCRIPTS AND STYLE SHEETS SCRIPT scripts to be parsed and executed immediately when the parser reaches a <script> tag. The parsing of the document halts until the script was executed. If the script is external then the resource must be first fetched from the network. this is also done synchronously SPECULATIVE PARSING results to parallel download STYLESHEETS Firefox blocks all scripts when there is a style sheet that is still being loaded and parsed.
19. DEMO
20. WE LIKE THOSE EVENTS (REVISITED) domLoading HTML parsing domInteractive Finish parsing but loading sub-resources domContentLoadedEventStart execute scripts in “deferred” mode. execute scripts when document ready. What W3C says domContentLoadedEventEnd ??? domComplete ??? loadEventStart ajax load; anything in window.load; ect
21. THE REST Render Tree (Style Computation, ect.) Layout Paint
22. Further work debug with firebug firebug / chrome dev tool extension Understand Rendering / Layout / Paint stage.
23. REFERENCE Understanding and Optimizing Web Perf Metrics W3C - Navigation Timing How Browser Works Performance Tools Cuzillion