- PDF Free Download

2010 12 7

: :4.9s :44 7, 320KB Velocity 2010 Google -- Don t Let Third Parties Slow You Down

: Third-party Publisher site % Impact Digg services.newsweek.com 14 Digg realtalkny.uproxx.com 9 FriendConnect www.artinstructionblog.com 10 FriendConnect friendconnectdirectory.com/food 30 FacebookConnect truveo.com 17 FacebookConnect www.huffingtonpost.com 12 TribalFusion www.xe.com 53 TribalFusion www.wareseeker.com 31 Google Adsence top 100 publishers 12.8 Google Analytics top 100 publishers <5 Google Doubleclick top 100 publishers 11.5

P3PC -- : P3PC.,. Performance of 3rd Party Content (P3PC) Project by Steve Souders

Page Speed JS doc.write YSlow Dom

?? <script> alimama_pid="mm_1_2_3";alimama_type=2; alimama_width=270;alimama_height=390; </script> <script src="http://a.alimama.cn/inf.js"></ script> inf.js document.write: <iframe(script) src="http://t.alimama.com/a?i=mm_1_1_1 &fv=10.1&rd=xyz&u=a.com%2fa.html"></iframe(script)>

? :. :. :.? <script> + doc.write

:HTML <script>, HTTP,.

doc.write, JS,. :Single Point of Failure(SPoF) Steve Souders :Frontend SPoF

.,,. doc.write

Iframed JS, : Script Defer Script DOM Element Iframed JS Steve Souders: Loading Scripts Without Blocking

Defer IE defer <script> domready. domready : domready onload domready/onload qq qzone 0.525s 0.83s 63.25% baidu tieba 0.599s 0.753s 79.55% youku video 1.54s 1.86s 82.80% sohu news 3.185s 3.7s 86.08% sina sports 5.11s 7.2s 70.97% 163 news 8.38s 12.32s 68.02% domready 1.5s, onload 50%. Script Defer,!

Script Dom Element function scriptdomelement(u) { var s = document.createelement('script'), h = document.getelementsbytagname('head') [0]; s.src = u; s.async = true; if(h)h.insertbefore(s,h.firstchild); } Dom script,..

Script Dom Element test.js, : var g = 1; : <script> function scriptdomelement(u) { var s = document.createelement('script'), h = document.getelementsbytagname('head')[0]; s.src = u; s.async = true; // if(h)h.insertbefore(s,h.firstchild); } scriptdomelement('test.js'); </script> <script> alert(typeof g); // undefined, Firefox 3.6 number </script>,. test.js,firefox script. script async, Opera. :Script

Iframed JS function iframedjs(s){ document.write("<iframe id= 'i'></iframe>"); var d = document.getelementbyid("i").contentwindow.document; d.write('<!doctype html><html><body><scr' + 'ipt src="'+s +'"></scr' + 'ipt></body></html>'); window.settimeout((function(){d.close();}),0); } src iframe location,. iframe.

Iframed JS :document.domain= "a.com",ie iframe src, javascript <iframe id= "testiframe" src= "javascript:void((function() {var d=document;d.open(); d.domain='a.com';d.write ('');d.close()})())" ></iframe>, javascript:. Firefox doc.write iframe,. iframe doc.open+write+close,.

,.,?? inf.js : 1.js,2.js,3.js..(Gzip 7k) : alimama_test.callback("1"); //2 3 callback,.

1 CASE1:Dom Script Element. : script document.write("<script src='1.js'></script>"); : Script Dom Element scriptdomelement("2.js"); : settimeout 0ms Script Dom Element settimeout((function(){ scriptdomelement("3.js"); }),0); PV

Script Dom Element doc.write (PV) script dom(pv) script dom /doc.write(%) timeout0+ script dom(pv) timeout0+script dom /doc.write(%) IE6 15435 15469 100.22% 15265 98.90% IE7 4613 4620 100.15% 4549 98.61% IE8 2021 2019 99.90% 2002 99.06% Others 46284 47940 103.58% 48388 104.55% PV, Script Dom Element

Script Dom Element Dom doc.write js callback PV [script dom] - [doc.write] [timeout0+script dom] - [doc.write] <0 (ms) 0~100 (ms) 100~300 (ms) >300 (ms) >300(ms) / PV(%) IE6 14813 6821 6003 859 1130 7.63% IE7 4427 2058 1712 320 337 7.61% IE8 1958 969 723 115 151 7.71% Others 47819 17324 21443 4452 4600 9.62% IE6 14764 2660 4405 2971 4728 32.02% IE7 4388 677 1082 941 1688 38.47% IE8 1955 336 409 474 736 37.65% Others 47735 5943 23377 8147 10268 21.51% :script dom doc.write 8% 300ms,. timeout0+script dom 35% 300ms..

2 CASE2:Dom Script Element Vs. Iframed JS. : script document.write("<script src='1.js'></script>"); : Script Dom Element scriptdomelement("2.js"); : Iframed JS iframedjs("3.js") PV

Iframed JS [script dom] - [doc.write] [iframed JS] - [doc.write] All <0 (ms) 0~100 (ms) 100~300 (ms) 300~500 500~1000 >1000 (ms) >300 /All(%) (ms) (ms) IE6 6045 5547 108 123 267 8.24% IE7 1827 1639 45 53 90 10.29% IE8 872 788 19 27 38 9.63% Others 15368 14074 312 304 678 8.42% IE6 6029 2596 2448 476 128 123 258 8.44% IE7 1819 888 588 157 45 44 97 10.23% IE8 867 469 230 88 23 28 29 9.23% Others 15332 11888 1956 524 225 216 523 6.29% :Iframed JS doc.write 9% 300ms,

Dom Script Vs.Iframed JS, SPoF ( ). JS.,8% doc.write JS300ms., 25013, 14404 Iframed JS.. Iframed JS

Stable by Default:

??!?,!

: doc.write, doc.write. in-line document.write. <script> document.write("<a style='display:none!important' id='a1'></a>"); insertasyncscript("http://adhost/?aid=a1"); </script>

: HTML? insertadjacenthtml. function show(shtml,anchor,container){ if(anchor){ anchor.insertadjacenthtml("beforebegin",shtml); }else if(container){ container. insertadjacenthtml("afterbegin",shtml); }else{ } } document.write(shtml) FireFox insertadjacenthtml! HTMLElement. insertadjacenthtml@w3c HTML5 insertadjacenthtml@msdn

IE : Loading Dom IE. Internet... @MSDN YUI oncontentready, nextsibling : Executes the callback as soon as the specified element is detected in the DOM with a nextsibling property (indicating that the element's children are available, determine if the content of the available element is safe to modify. ) YUI2 YUI3

CSS : CSS. Tag. Tag. IframedJS, src iframe.

Stable by Default 1. <script src="http://{host}/{path}?i={pid}"></script> 2. <script> document.write('<a style="display:none!important" id="t-a-{id}"></a>'); t_h = document.getelementsbytagname('head')[0]; t_s = document.createelement('script'); t_s.async = true; t_s.src = 'http://{host}/{path}?i={pid}'; if(t_h)t_h.insertbefore(t_s,t_h.firstchild); </script>

Fast by Default:

--, Banner.,. : inf.js Gzip 11k Gzip 5k.

:..... : JS DOM (oo,modules,domready,jsonload ) (lang,selector ) : OOP KISSY core Modules mini loader 1.5K kissylite@kissy

-- inf.js alimama_, kissylite. : inf.js ( ) ( 2k). 11k 6k,., 2k.

JS - SPoF inf.js API.,, in-line., CDN, SPoF( ),.

Mashuper, SPoF.

SPoF SPoF,. <script> doc.write show(shtml,anchor,container) J

?!, IFRAME! IFRAME,.

...

:.,.,.,.

:... Douglas Crockford:ADsafe Google:google-caja Facebook:FBML UIC:ADJail Nicholas C. Zakas

:,, doc.write doc.cookie cookie.

Thanks All! limu@taobao.com http://twitter.com/lenel_li http://limu.javaeye.com/