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
současně
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 současně.
Vhodné při otočení
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í načtených dat a jejich
zobrazení
• Pomalá odezva při zobrazení detailu zprávy
www.seznam.cz @marekfojtl
10. Co obecně ovlivňuje 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ů
• Zřetězení vs Array.join
• Globální proměnné
• Tipy při vytváření HTML elementů
www.seznam.cz @marekfojtl
12. Metodika
• Testovací platforma: http://jsperf.com
• Testovací stroj: Mac mini (Intel i7 2,3GHz)
• Operační systém: OS X 10.8, Windows 7
• Prohlížeče: 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
18. Zřetězení vs Array.join
var slova = ["Takže", "dobrý", "večer"];
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. Zřetězení vs Array.join
Zdroj: http://jsperf.com/join-vs-zretezeni/2
www.seznam.cz @marekfojtl
20. Tipy při 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!
• Šetření systémových prostředků klientských PC
• Vytváření výkonnostních rezerv pro náročnější
výpočty
www.seznam.cz @marekfojtl
22. Tipy na závěr
• 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
