Optimalizace Javascriptu pro Internet Explorer

Wednesday 13.3.2013 21:06:52, Jakuje

Kategorie: Javascript

O prohlížeči Internet Explorer bylo napsáno mnoho špatných věcí. V dnešní době je už naštěstí téměř ohroženým druhem, ale bohužel se najdou firmy, které nutí svým zaměstnancům jeho používání. I přesto, že existují jiné prohlížeče, lepší prohlížeče, rychlejší prohlížeče. Není toto „omezování osobní svobody“?

Tak tedy jsem dostal asi před měsícem za úkol optimalizovat webovou aplikaci Hodnocení materiálů pro Internet Explorer 8, který je 4 roky starý a, i přes velmi rozsáhlá vylepšení javascriptu od minulé verze, stále téměř nepoužitelný. Chybí mu především implementace rozšířených CSS selektorů, které pro dynamické formuláře využívám ve vrlké míře.

První testy

Přestože Internet Explorer 10 obsahuje mód kompatibility se staršími verzemi, nesimuluje jejich chyby a problémy dostatečně věrohodně. První testy v reálném prostředí vykazovaly časy na jednu akci asi 20 sekund, což bylo nepřípustné (pro zajímavost v režimu kompatibility IE7 jsem se dostal asi na minutu po optimalizacích).

Profiler

Tvůrci Internet Exploreru naštěstí mysleli na jeho slabinu – rychlost – a proto jej vybavili asi nejlepším profilerem, který jsem mezi prohlížeči našel. Po stisku F12 (a nějaké té chvíli čekání) se objeví okno podobné FireBugu, Opera Dragonfly a dalším, které umožňuje sledovat, ve kterých částech tráví skript nejvíce času, kolikrát je daná funkce volána či strom volání (call tree, v české verzi IE 8 nějak vtipně přeložené).

Selektory

Dle mého očekávání, script trávil nejvíce času zanořen v selektorech jQuery, které nemohl volat jako nativní funkce prohlížeče a které musel nějak simulovat. Většinou se jednalo o vyhledání uzlu v podstromu podle nekompletní hodnoty atributu, nebo podle třídy. Věci nad kterými se mi moc nechtělo přemýšlet, nebo jim dávat unikátní ID. Většina složitých selektorů šla přepsat na jednoduchý selektor podle ID, který je i v Internet Exploreru otázkou okamžiku (funkce document.getElementById()). Docela mě překvapila rychlost selektoru pro popisky formulářových prvků:

Zdrojový kód:
$('label[for="id"]')

Toto je stejně rychlé jako selektor podle ID, ale to dává smysl, protože se musí jednat o unikátní prvek.

Dále jsou velmi rychlé selektory podle jména tagu, naopak je problém se selektory podle jména třídy (document.getElementsByClassName() není v Internet Exploreru implementována) a s pseudoselektory typu :hidden, :selected a tak dále.

Zjednodušeně platí:

  • nejlepší je vyhledávat podle ID: $('#identifier')
  • pokud se vyhledává podle jména třídy, je rychlejší přidat jméno tagu: $('div.classname') namísto $('.classname')
  • vyhnout se pseudoselektorům, které vyžadují speciální režii

Po inspekci kódu jsem se dostal z 20 sekund na nějaké 2 až 3 na pomalejším počítači, což už je snesitelné, ale jsou zde ještě rezervy, kam by bylo možné pokračovat.

Diskuse:

:
:
:

 
    

Podbarvená pole označená hvězdičkou jsou povinná!