Optimizing the Critical Rendering Path Velocity SC 2013优化关键的渲染路径速度2013.pptxVIP

WebRTC;Impact of 1-second delay - Strangeloop;Speed is a feature.;@igrigorik;@igrigorik;Networking constraints...;Outbound data-flow (4G);The (short) life of a web request;;TCP Congestion Control Avoidance...;Lets fetch 40 KB over a new TCP connection;Breaking the 1000 ms time to glass mobile barrier... ~50% of the budget is in network latency overhead 100-200 ms RTTs for DNS, TCP, TLS, HTTP Must account for TCP slow start Best case scenario: one RTT render * ~14 KB of data, delivered in one roundtrip no time or place for redirects, eliminate them!;Whats the critical rendering path?;Lets try a simple example...;HTML bytes are arriving on the wire...;DOM construction is complete... waiting on CSS!;First CSS bytes arrive... still waiting on CSS!;Finally, we can construct the CSSOM!;@igrigorik;Performance rules to keep in mind...;Err, wait. Did we forget something?;;JavaScript performance pitfalls...;(1) Stream the HTML to the client Allows early discovery of dependent resources (e.g. CSS / JS / images) (2) Get CSS down to the client as fast as you can Unblocks paints, removes potential JS waiting on CSS scenario (3) Eliminate blocking JavaScript Faster DOM construction, faster DCL and paint! Do you need scripts in your critical rendering path? ;Recipe for Instant Mobile Site;@igrigorik;html head link rel=stylesheet href=all.css script src=application.js/script /head body div class=main Here is my content. /div div class=leftnav Perhaps there is a left nav bar here. /div ... /body /html ;html head style .main { ... } .leftnav { ... } /* ... any other styles needed for the initial render here ... */ /style script // Any script needed for initial render here. // Ideally, there should be no JS needed for the initial render /script /head body div class=main Here is my content. /div div class=leftnav Perhaps there is a left nav bar here. /div script function run_after_onload() { load(stylesheet, remainder.css) load(j