Even+Faster+Web+Sites_Google在web前端方面的经验.pptVIP

Ensure scripts execute in order: necessary when scripts have dependencies IE: /cuzillion/?ex=10017 FF: /cuzillion/?ex=10018 Avoid scripts executing in order: faster – first script back is executed immediately /cuzillion/?ex=10019 ensure/avoid ordered execution load scripts without blocking || down-loads domains can differ existing scripts browser busy ensures order size (bytes) normal Script Src no yes yes IE,FF IE,FF ~50 XHR Eval IE,FF no no no no ~500 XHR Injection IE,FF no yes no no ~500 Script in Iframe IE,FF no no IE,FF no ~50 Script DOM Element IE,FF yes yes FF FF ~200 Script Defer IE yes yes IE,FF IE ~50 document.write Script Tag IE* yes yes IE,FF IE ~100 *Only other document.write scripts are downloaded in parallel (in the same script block). and the winner is... XHR Eval XHR Injection Script in iframe Script DOM Element Script Defer Script DOM Element Script Defer Script DOM Element Script DOM Element (FF) Script Defer (IE) XHR Eval XHR Injection Script in iframe Script DOM Element (IE) XHR Injection XHR Eval Script DOM Element (IE) Managed XHR Injection Managed XHR Eval Script DOM Element Managed XHR Injection Managed XHR Eval Script DOM Element (FF) Script Defer (IE) Managed XHR Eval Managed XHR Injection Script DOM Element (FF) Script Defer (IE) Managed XHR Eval Managed XHR Injection different domains same domains no order preserve order no order no busy show busy show busy no busy preserve order load scripts without blocking dont let scripts block other downloads you can still control execution order, busy indicators, and onload event What about inline scripts? synchronous JS example: menu.js script src=menu.js type=text/javascript/script script type=text/javascript var aExamples = [ [couple-normal.php, Normal Script Src], [couple-xhr-eval.php, XHR Eval], ... [managed-xhr.php, Managed XHR] ]; function init() { EFWS.Menu.createMenu(examplesbtn, aExamples); } init(); /script asynchronous JS example: menu.js script typ