Professional Documents
Culture Documents
::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
12.8
Google Analytics
<5
Google Doubleclick
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)
.
,
,.
doc.write
Iframed JS
,:
Script Defer
Script DOM Element
Iframed JS
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,!
,.
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
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
[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%
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%
: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)
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,
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/