Javascript na steroidechaneb Jak jsme optimalizovali nový Email.czMarek Fojtl, UI vývojář, marek.fojtl@firma.seznam.cz
Nový Email.cz• Javascriptová aplikace (HTML5, CSS3)• JAK framework (http://jak.seznam.cz)• FastRPC (http://opensource.sezn...
Nový Email.cz – výpis zpráv                      Základní rozvržení                      Umožňuje zobrazení               ...
Nový Email.cz – výpis zpráv                      Rozšířené rozvržení                      Umožňuje uživateli číst         ...
Nový Email.cz – výpis zpráv                      Kancelářské rozvržení                      Rovněž umožňuje               ...
Nový Email.cz – nastavení                      Nastavení v modálním                      okně.www.seznam.cz               ...
Nový Email.cz – psaní zprávy                      Psaní zprávy prošlo také                      redesignem.www.seznam.cz  ...
Nový Email.cz – adresář                      Stávající adresář. Vyvíjí                      se nový.www.seznam.cz         ...
Jaké nastaly problémy• Příliš dlouhé zpracovávání načtených dat a jejich  zobrazení• Pomalá odezva při zobrazení detailu z...
Co obecně ovlivňuje výkon•   Architektura PC uživatele•   Javascript => interpretovaný jazyk•   Prohlížeč (neoptimalizovan...
Oblasti, na které se zaměříme•   Volání funkcí•   Procházení pole – cache prvků•   Zřetězení vs Array.join•   Globální pro...
Metodika•   Testovací platforma: http://jsperf.com•   Testovací stroj: Mac mini (Intel i7 2,3GHz)•   Operační systém: OS X...
Volání funkcífunction inc(c) { return ++c; }var a=0;var b=0;/* ========================= DUEL ========================= */...
Volání funkcí                Zdroj: http://jsperf.com/barcamp-vsetin-awww.seznam.cz                                       ...
Procházení pole – cache prvkůvar DATA=[10, 9, 8, 7, 6, 5, 4, 3, 2, 1];/* ========================= DUEL ==================...
Procházení pole – cache prvků                Zdroj: http://jsperf.com/barcamp-vsetin-bwww.seznam.cz                       ...
Globální proměnné                Zdroj: http://jsperf.com/barcamp-vsetin-cwww.seznam.cz                                   ...
Zřetězení vs Array.joinvar slova = ["Takže", "dobrý", "večer"];var veta = "";/* ========================= DUEL ===========...
Zřetězení vs Array.join                Zdroj: http://jsperf.com/join-vs-zretezeni/2www.seznam.cz                          ...
Tipy při vytváření prvků DOMu•   vytváření elementů mimo DOM•   document.createDocumentFragment•   node.innerHTML•   pomoc...
Obecný přínos optimalizací• User eXperience!• Šetření systémových prostředků klientských PC• Vytváření výkonnostních rezer...
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...
Děkuji za pozornostMarek Fojtl, UI vývojář, marek.fojtl@firma.seznam.czwww.seznam.cz                                      ...
Upcoming SlideShare
Loading in …5
×

Javascript na steroidech

818 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
818
On SlideShare
0
From Embeds
0
Number of Embeds
323
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Javascript na steroidech

  1. 1. Javascript na steroidechaneb Jak jsme optimalizovali nový Email.czMarek Fojtl, UI vývojář, marek.fojtl@firma.seznam.cz
  2. 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. 3. Nový Email.cz – výpis zpráv Základní rozvržení Umožňuje zobrazení více zpráv na obrazovcewww.seznam.cz @marekfojtl
  4. 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. 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. 6. Nový Email.cz – nastavení Nastavení v modálním okně.www.seznam.cz @marekfojtl
  7. 7. Nový Email.cz – psaní zprávy Psaní zprávy prošlo také redesignem.www.seznam.cz @marekfojtl
  8. 8. Nový Email.cz – adresář Stávající adresář. Vyvíjí se nový.www.seznam.cz @marekfojtl
  9. 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ávywww.seznam.cz @marekfojtl
  10. 10. Co obecně ovlivňuje výkon• Architektura PC uživatele• Javascript => interpretovaný jazyk• Prohlížeč (neoptimalizovaný interpreter)• Neoptimální kód• Neoptimální algoritmuswww.seznam.cz @marekfojtl
  11. 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. 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, 9www.seznam.cz @marekfojtl
  13. 13. Volání funkcífunction inc(c) { return ++c; }var a=0;var b=0;/* ========================= DUEL ========================= */b = ++a; VSb = inc(a)www.seznam.cz @marekfojtl
  14. 14. Volání funkcí Zdroj: http://jsperf.com/barcamp-vsetin-awww.seznam.cz @marekfojtl
  15. 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]; }} VSvar 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. 16. Procházení pole – cache prvků Zdroj: http://jsperf.com/barcamp-vsetin-bwww.seznam.cz @marekfojtl
  17. 17. Globální proměnné Zdroj: http://jsperf.com/barcamp-vsetin-cwww.seznam.cz @marekfojtl
  18. 18. Zřetězení vs Array.joinvar 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];} VSveta = slova.join(" ");www.seznam.cz @marekfojtl
  19. 19. Zřetězení vs Array.join Zdroj: http://jsperf.com/join-vs-zretezeni/2www.seznam.cz @marekfojtl
  20. 20. Tipy při vytváření prvků DOMu• vytváření elementů mimo DOM• document.createDocumentFragment• node.innerHTML• pomocníci setTimeout a setIntervalwww.seznam.cz @marekfojtl
  21. 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čtywww.seznam.cz @marekfojtl
  22. 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
  23. 23. Děkuji za pozornostMarek Fojtl, UI vývojář, marek.fojtl@firma.seznam.czwww.seznam.cz @marekfojtl

×