You are on page 1of 47

2010127

::4.9s
:447,
320KB

Velocity 2010Google -- Dont Let Third Parties
Slow You Down


:
Third-party

Publisher site

% Impact

Digg

services.newsweek.com

14

Digg

realtalkny.uproxx.com

FriendConnect

www.artinstructionblog.com

10

FriendConnect

friendconnectdirectory.com/Food

30

FacebookConnect
FacebookConnect
TribalFusion
TribalFusion

truveo.com
www.huffingtonpost.com
www.xe.com
www.wareseeker.com

17
12
53
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
IEdefer<script>domReady.
domReady:

qq
baidu
youku
sohu
sina
163

qzone
tieba
video
news
sports
news

domReady
0.525s
0.599s
1.54s
3.185s
5.11s
8.38s

onload domReady/onload
0.83s
63.25%
0.753s
79.55%
1.86s
82.80%
3.7s
86.08%
7.2s
70.97%
12.32s
68.02%

domReady1.5s,onload50%
.
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);
}
Domscript,.
.

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,Firefoxscript.
scriptasync,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);
}

srciframelocation,.
iframe.

Iframed JS
:document.domain= "a.com",IE
iframesrc,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,.
iframedoc.open+write+close,
.


,.
,
??
inf.js:
1.js,2.js,3.js..(Gzip7k):
alimama_test.callback("1"); //23
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 script
script dom
timeout0+
timeout0+script dom
(PV)
dom(PV) /doc.write(%) script dom(PV)
/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%

46284

47940

103.58%

48388

104.55%

Others

PV,Script Dom Element

Script Dom Element


Domdoc.writejscallback

[script dom]
- [doc.write]

<0
(ms)

0~100

100~300

(ms)

(ms)

>300 >300(ms)
(ms) /PV(%)

IE6

14813 6821

6003

859

1130

7.63%

IE7

4427 2058

1712

320

337

7.61%

IE8

1958

723

115

151

7.71%

Others 47819 17324 21443

4452

4600

9.62%

4405

2971

4728

32.02%

IE6
[timeout0+script dom]
- [doc.write]

PV

969

14764 2660

IE7

4388

677

1082

941

1688

38.47%

IE8

1955

336

409

474

736

37.65%

8147 10268

21.51%

Others 47735 5943 23377

:script domdoc.write8%300ms,.
timeout0+script dom35%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]

IE6
IE7
IE8
Others
IE6
IE7
IE8
Others

All

<0
(ms)

0~100 100~300 300~500 500~1000 >1000


(ms)
(ms) (ms) (ms) (ms)

6045
5547
1827
1639
872
788
15368
14074
6029 2596 2448
1819 888 588
867 469 230
15332 11888 1956

476
157
88
524

108
45
19
312
128
45
23
225

123
53
27
304
123
44
28
216

>300
/All(%)

267 8.24%
90 10.29%
38 9.63%
678 8.42%
258 8.44%
97 10.23%
29 9.23%
523 6.29%

:Iframed JS doc.write9%300ms,

Dom Script Vs.Iframed JS


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

Stable by Default:

?
?

?,!


:doc.write,
doc.write.
in-linedocument.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)
}
}

FireFoxinsertAdjacentHTML! HTMLElement.
insertAdjacentHTML@W3C HTML5 insertAdjacentHTML@MSDN

IE
:Loading
DomIE.
Internet..
.
@MSDN

YUIonContentReady,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,
srciframe.

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.jsGzip11kGzip5k.


: ........
:
JSDOM(oo,modules,domready,jsonload)
(lang,selector)
:
KISSY

OOP

core

1.5K
Modules

mini
loader

kissyLite@kissy

--
inf.jsalimama_,
kissyLite.
:
inf.js()(2k).
11k6k,
.
,
2k.

JS - SPoF
inf.jsAPI.
,
,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.cookiecookie
.

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

You might also like