Date post: | 31-May-2015 |
Category: |
Technology |
Upload: | andrew-dupont |
View: | 3,354 times |
Download: | 0 times |
Defsi, cro-brows codg
.prototype
.wh
ialm
aly
yr co
MSIE
T fi ag JavaScript grief
#1:“My co wks Fifox, but
fails eryw else…”(peciay IE)
Fifox s Fibug, crse
Safi sWeb Inspecr
& Drosa
Opa sDragfly
hp://w.opa.com/products/dragfly/
Inet Expl s…★ Vual Stud★ Microst Script Ed★ Microst Script Debu
Ty a...★ Suck
Debug regi IE 6–7:
a. Do “fmal” bug if
’s yr g
b.Use a JavaScript s get tac prompt
c.Use MS Script Debu/Ed get ack trac
d.Do old-fhn“a” bug
#2:“OK, my co wks IE now,
but slow counicg by tegraph.”
Plu: Use Fibug prir
Pr-m’s prilg: msu elaps me betwn
y two co pots
var Timer = Class.create({ initialize: function() { this.startTime = new Date().valueOf(); }, end: function() { var endTime = new Date().valueOf(); return (this.startTime - endTime).toString(); } });
function doSomethingCostly() { var timer1 = new Timer(); // do something that takes forever... alert(timer1.end());}
Ce udy:zebra-ripg a tab
Two tts:1 rows 10 rows
var TableStriper = Class.create({ initialize: function(element) { var timer = new Timer(); this.element = $(element); this.element.select("tbody > tr:nth-child(even)") .invoke("addClassName", "row-even"); this.element.select("tbody > tr:nth-child(odd)") .invoke("addClassName", "row-odd");
alert(timer.end() + "ms"); }});
Revn 1
1 Rows 10 Rows
Safi
Fifox
IE
14ms 603ms
26ms 367ms
341ms 5268ms
:-(
var TableStriper = Class.create({ initialize: function(element) { var timer = new Timer(); this.element = $(element); // Why use two selectors? Use one and loop instead var trs = this.element.select("tbody > tr"); trs.each( function(tr, i) { tr.addClassName(i % 2 == 0 ? "row-odd" : "row-even"); });
alert(timer.end() + "ms"); }});
Revn 2
1 Rows 10 Rows
Safi
Fifox
IE
12ms 123ms
14ms 130ms
160ms 3245ms
:-(
var TableStriper = Class.create({ initialize: function(element) { var timer = new Timer(); this.element = $(element); // Eschew CSS selector syntax altogether var tbodies = this.element.getElementsByTagName("tbody"); for (var i = 0, tbody, trs; i < tbodies.length; i++) { tbody = tbodies[i]; trs = tbody.getElementsByTagName("tr"); for (var j = 0, tr; j < trs.length; j++) { tr = trs[j]; // filter out anything that isn't a direct child of the TBODY if (tr.parentNode !== tbody) continue; $(tr).addClassName(j % 2 == 0 ? "row-odd" : "row-even"); } } alert(timer.end() + "ms"); }});
Revn 3
1 Rows 10 Rows
Safi
Fifox
IE
5ms 53ms
13ms 143ms
160ms 31ms
:-(
Revn 4var TableStriper = Class.create({ initialize: function(element) { var timer = new Timer(); this.element = $(element); var tbodies = this.element.getElementsByTagName("tbody"); for (var i = 0, tbody, trs; i < tbodies.length; i++) { tbody = tbodies[i]; trs = tbody.rows; // there's a pre-defined collection for this for (var j = 0, tr; j < trs.length; j++) { tr = trs[j]; // OK, we'll stop "extending" elements now tr.className += j % 2 == 0 ? " row-odd" : " row-even"; } } alert(timer.end() + "ms"); }});
1 Rows 10 Rows
Safi
Fifox
IE
1ms 8ms
6ms 64ms
20ms 141ms
HOLY CRAP
So wt did we n?
Ls 1:Secr/$$ e opmiz, but
wh gh nos page, y’ brg s kns
Ls 2:“Extdg” emts slow,
do not sca lge no sult sets
$ Emt.extd e shrk-wrap f syacc sug
In morn browss, Emt.extd do nog; IE 6–7 s copy ce
meods muay
A Protype DOM lps use
Emt.extd tnay
Wa — sayg“D’t use Protype?”
We, y:Rch tsi
yr abrac wn ’s o coly
Ls #3:A lt b opmizn
go a lg way
A few l n-Protype co, wrt
ce, c mn hugepfmce gas
As always,opmizn si
lps pays f big
Ls 4:Once “fls” ft… op!
#3:“Now ’s py ft IE, but
if I a my page op wn I go lunch, IE’s froz by me
I get back.”
Memy aks
Not ju IE 6.0;IE 7.0 claims fix m, but ’s a li
Y c’t be su yr co ak-fe uil y try
al wld
Framewks c lpa lt, but ’s i
yr probm sol
Load yr page; wch memy usage ce
(’s nmal)
Now load page; if memy usage c
aga, ’s bad
A y seg expo no prop
fce n-primis?( “circul fce” ak)
A y signg es tsi Protype’s
e APIs?(e.g., emt.click)
(Protype’s e syem wi c up aft self, but if y
d’t use , y’ yr own)
A y cag Emt.place Emt.upde ctt
wh tacd lts?
If so, tach lts fir
foo.stopObserving("click", respondToFoo);// (detaches the respondToFoo listener)
foo.stopObserving("click");// (detaches all click listeners on foo)
foo.stopObserving();// (detaches _all_ listeners on foo)
Protype 1.6.[next]wi lp y t wh
FAL TT:L IE rug
ornight
#4:“My a pfms wrfuy
now, but my co lks likehum suffg.”
In or wds:“How do I kp my co mataab if s
a f a esespecial c?”
Wt if we cld kpa ugly cks
e place?
Func#wrap
Origal func
function getOffsetTop(element) { return element.offsetTop;}
Modifi func
getOffsetTop = getOffsetTop.wrap( function(proceed, element) { // IE will report incorrect values // unless we give the element "layout" if (!element.currentStyle.hasLayout == -1) element.style.zoom = 1;
return proceed(element); });
Only IE nds s modifi rsn
Y c kp “wra” funcs
e place
<script src="js/prototype.js" type="text/javascript"></script> <script src="js/main.js" type="text/javascript"></script> <!--[if IE]> <script src="js/ie-only.js" type="text/javascript"></script> <![endif]-->
BUT: L a lpful cot
// NOTE: Redefined in ie-only.jsfunction getOffsetTop(element) { return element.offsetTop;}
ALSO:Expla why y nd
wk
getOffsetTop = getOffsetTop.wrap( function(proceed, element) { // IE will report incorrect values // unless we give the element "layout" if (!element.currentStyle.hasLayout == -1) element.style.zoom = 1;
return proceed(element); });
In or wds,co d...
…n wre co adapts/dgs do quid msagg
#5:“G! My co lks gd I fl. How do I avoid er
vg do aga?”
EAT YR GETABS(wre un tts &funcal tts)
“Oh, I’d lo , but I wk UI lay, y c’t ay un-tt
tface… , yway, we e way o rapidly do tt-drin
lopmt… but y’ right, I’ tay wre a ful tts sn I get
some me…”
SPE ME YR EXCUS
Wre un tts f eryg c be
aum
Protype do ; script.aculo.us do ;
y c do , o
Wre funcal tts make si f
hums tt
QA wi buy y a py
Wre “diy” tts(row curbas
yr co)
Wt abt Senium?WIR?
(cd play hum put)
meh.
Qus?
hp://wdupt.nethp://protypejs.g