Marek Fojtl, UI vývojář, marek.fojtl@firma.seznam.cz

aneb Jak jsme optimalizovali nový Email.cz

Javascript na steroidech

www.seznam.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í

Nový Email.cz

@marekfojtl

www.seznam.cz

Nový Email.cz – výpis zpráv

@marekfojtl

Základní rozvržení

Umožňuje zobrazení více zpráv na obrazovce

www.seznam.cz

Nový Email.cz – výpis zpráv

@marekfojtl

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

Nový Email.cz – výpis zpráv

@marekfojtl

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

Nový Email.cz – nastavení

@marekfojtl

Nastavení v modálním okně.

www.seznam.cz

Nový Email.cz – psaní zprávy

@marekfojtl

Psaní zprávy prošlo také redesignem.

www.seznam.cz

Nový Email.cz – adresář

@marekfojtl

Stávající adresář. Vyvíjí se nový.

www.seznam.cz

• Příliš dlouhé zpracovávání načtených dat a jejich zobrazení

• Pomalá odezva při zobrazení detailu zprávy

Jaké nastaly problémy

@marekfojtl

www.seznam.cz

• Architektura PC uživatele• Javascript => interpretovaný jazyk• Prohlížeč (neoptimalizovaný interpreter)• Neoptimální kód• Neoptimální algoritmus

Co obecně ovlivňuje výkon

@marekfojtl

www.seznam.cz

• 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ů

Oblasti, na které se zaměříme

@marekfojtl

www.seznam.cz

• 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

Metodika

@marekfojtl

www.seznam.cz

function inc(c) { return ++c; }var a=0;var b=0;

/* ========================= DUEL ========================= */b = ++a;

VSb = inc(a)

Volání funkcí

@marekfojtl

www.seznam.cz

Volání funkcí

@marekfojtl

Zdroj: http://jsperf.com/barcamp-vsetin-a

www.seznam.cz

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; } }

Procházení pole – cache prvků

@marekfojtl

www.seznam.cz

Procházení pole – cache prvků

@marekfojtl

Zdroj: http://jsperf.com/barcamp-vsetin-b

www.seznam.cz

Globální proměnné

@marekfojtl

Zdroj: http://jsperf.com/barcamp-vsetin-c

www.seznam.cz

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(" ");

Zřetězení vs Array.join

@marekfojtl

www.seznam.cz

Zřetězení vs Array.join

@marekfojtl

Zdroj: http://jsperf.com/join-vs-zretezeni/2

www.seznam.cz

• vytváření elementů mimo DOM• document.createDocumentFragment• node.innerHTML• pomocníci setTimeout a setInterval

Tipy při vytváření prvků DOMu

@marekfojtl

www.seznam.cz

• 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

Obecný přínos optimalizací

@marekfojtl

www.seznam.cz

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

Tipy na závěr

@marekfojtl

www.seznam.cz

Marek Fojtl, UI vývojář, marek.fojtl@firma.seznam.cz

Děkuji za pozornost

@marekfojtl