![Proch叩zen鱈 pole cache prvk哲
var DATA=[10, 9, 8, 7, 6, 5, 4, 3, 2, 1];
/* ========================= DUEL ========================= */
var min=DATA[0];
for(var i=1; i<DATA.length; i++) {
if (DATA[i] < min) { min = DATA[i]; }
}
VS
var min=DATA[0];
for(var i=1, len=DATA.length; i<len; i++) {
var data = DATA[i];
if (data < min) { min = data; }
}
www.seznam.cz @marekfojtl](https://image.slidesharecdn.com/barcampvsetin2013-130123022540-phpapp01/85/Javascript-na-steroidech-15-320.jpg)
![Zetzen鱈 vs Array.join
var slova = ["Tak転e", "dobr箪", "veer"];
var veta = "";
/* ========================= DUEL ========================= */
veta = "";
for(var i=0, len=slova.length; i<len; i++) {
if (i) { veta += " "; }
veta += slova[i];
}
VS
veta = slova.join(" ");
www.seznam.cz @marekfojtl](https://image.slidesharecdn.com/barcampvsetin2013-130123022540-phpapp01/85/Javascript-na-steroidech-18-320.jpg)
Javascript na steroidech
- 1. Javascript na steroidech aneb Jak jsme optimalizovali nov箪 Email.cz Marek Fojtl, UI v箪voj叩, marek.fojtl@firma.seznam.cz
- 2. Nov箪 Email.cz Javascriptov叩 aplikace (HTML5, CSS3) JAK framework (http://jak.seznam.cz) FastRPC (http://opensource.seznam.cz/FastRPC) V箪voj v鱈ce ne転 3 roky (nov箪 backend i frontend) St叩le se vyv鱈j鱈 www.seznam.cz @marekfojtl
- 3. Nov箪 Email.cz v箪pis zpr叩v Z叩kladn鱈 rozvr転en鱈 Umo転uje zobrazen鱈 v鱈ce zpr叩v na obrazovce www.seznam.cz @marekfojtl
- 4. Nov箪 Email.cz v箪pis zpr叩v Roz邸鱈en辿 rozvr転en鱈 Umo転uje u転ivateli 鱈st detail zpr叩vy a m鱈t zobrazen箪 v箪pis zpr叩v souasn www.seznam.cz @marekfojtl
- 5. Nov箪 Email.cz v箪pis zpr叩v Kancel叩sk辿 rozvr転en鱈 Rovn転 umo転uje u転ivateli 鱈st detail zpr叩vy a m鱈t zobrazen箪 v箪pis zpr叩v souasn. Vhodn辿 pi otoen鱈 monitoru na v箪邸ku. www.seznam.cz @marekfojtl
- 6. Nov箪 Email.cz nastaven鱈 Nastaven鱈 v mod叩ln鱈m okn. www.seznam.cz @marekfojtl
- 7. Nov箪 Email.cz psan鱈 zpr叩vy Psan鱈 zpr叩vy pro邸lo tak辿 redesignem. www.seznam.cz @marekfojtl
- 8. Nov箪 Email.cz adres叩 St叩vaj鱈c鱈 adres叩. Vyv鱈j鱈 se nov箪. www.seznam.cz @marekfojtl
- 9. Jak辿 nastaly probl辿my P鱈li邸 dlouh辿 zpracov叩v叩n鱈 naten箪ch dat a jejich zobrazen鱈 Pomal叩 odezva pi zobrazen鱈 detailu zpr叩vy www.seznam.cz @marekfojtl
- 10. Co obecn ovlivuje v箪kon Architektura PC u転ivatele Javascript => interpretovan箪 jazyk Prohl鱈転e (neoptimalizovan箪 interpreter) Neoptim叩ln鱈 k坦d Neoptim叩ln鱈 algoritmus www.seznam.cz @marekfojtl
- 11. Oblasti, na kter辿 se zam鱈me Vol叩n鱈 funkc鱈 Proch叩zen鱈 pole cache prvk哲 Zetzen鱈 vs Array.join Glob叩ln鱈 promnn辿 Tipy pi vytv叩en鱈 HTML element哲 www.seznam.cz @marekfojtl
- 12. Metodika Testovac鱈 platforma: http://jsperf.com Testovac鱈 stroj: Mac mini (Intel i7 2,3GHz) Operan鱈 syst辿m: OS X 10.8, Windows 7 Prohl鱈転ee: Firefox 18, Chrome 24, Opera 12.11, Safari 6.0.2, Internet Explorer 10 RP, 9 www.seznam.cz @marekfojtl
- 13. Vol叩n鱈 funkc鱈 function inc(c) { return ++c; } var a=0; var b=0; /* ========================= DUEL ========================= */ b = ++a; VS b = inc(a) www.seznam.cz @marekfojtl
- 14. Vol叩n鱈 funkc鱈 Zdroj: http://jsperf.com/barcamp-vsetin-a www.seznam.cz @marekfojtl
- 15. Proch叩zen鱈 pole cache prvk哲 var DATA=[10, 9, 8, 7, 6, 5, 4, 3, 2, 1]; /* ========================= DUEL ========================= */ var min=DATA[0]; for(var i=1; i<DATA.length; i++) { if (DATA[i] < min) { min = DATA[i]; } } VS var min=DATA[0]; for(var i=1, len=DATA.length; i<len; i++) { var data = DATA[i]; if (data < min) { min = data; } } www.seznam.cz @marekfojtl
- 16. Proch叩zen鱈 pole cache prvk哲 Zdroj: http://jsperf.com/barcamp-vsetin-b www.seznam.cz @marekfojtl
- 17. Glob叩ln鱈 promnn辿 Zdroj: http://jsperf.com/barcamp-vsetin-c www.seznam.cz @marekfojtl
- 18. Zetzen鱈 vs Array.join var slova = ["Tak転e", "dobr箪", "veer"]; var veta = ""; /* ========================= DUEL ========================= */ veta = ""; for(var i=0, len=slova.length; i<len; i++) { if (i) { veta += " "; } veta += slova[i]; } VS veta = slova.join(" "); www.seznam.cz @marekfojtl
- 19. Zetzen鱈 vs Array.join Zdroj: http://jsperf.com/join-vs-zretezeni/2 www.seznam.cz @marekfojtl
- 20. Tipy pi vytv叩en鱈 prvk哲 DOMu vytv叩en鱈 element哲 mimo DOM document.createDocumentFragment node.innerHTML pomocn鱈ci setTimeout a setInterval www.seznam.cz @marekfojtl
- 21. Obecn箪 p鱈nos optimalizac鱈 User eXperience! eten鱈 syst辿mov箪ch prostedk哲 klientsk箪ch PC Vytv叩en鱈 v箪konnostn鱈ch rezerv pro n叩ronj邸鱈 v箪poty www.seznam.cz @marekfojtl
- 22. Tipy na z叩vr Kritick辿 b箪vaj鱈 cykly a asto se opakuj鱈c鱈 ud叩losti Profilov叩n鱈 Testujte na m辿n v箪konn箪ch stroj鱈ch Optimalizace vs itelnost k坦du D哲le転it辿 zejm辿na v mapov箪ch aplikac鱈ch, hr叩ch ... www.seznam.cz @marekfojtl
- 23. Dkuji za pozornost Marek Fojtl, UI v箪voj叩, marek.fojtl@firma.seznam.cz www.seznam.cz @marekfojtl