Přejít k navigační liště

Zdroják » Zprávičky » Zrychlete práci s Canvasem!

Zrychlete práci s Canvasem!

Zprávičky Webdesign

Vývojáři píšící aplikace v JavaScriptu znají pravidlo, které říká: Vyhněte se častým operacím s DOMem. Pokud potřebujete např. vytvořit větší množství entit, je lépe si je vytvořit „bokem“, a aktualizovat je nakonec a najednou.

Podobné pravidlo lze vztáhnout i na práci s pixely v canvasu, jak popsal ve svém článku Selim Arsever. Jeho postup je velmi jednoduchý – nejprve si vytvoří lokální kopii image.data, do ní provede potřebné změny, a výsledek přiřadí zpět. Tímto postupem (nazvaným „DOM detaching“, tedy „odpojení od DOMu“) dosáhl zrychlení o cca 40%. V článku naleznete i graf s porovnáním rychlosti různých variant v jednotlivých prohlížečích.

Zdroj: Ajaxian

Komentáře

Odebírat
Upozornit na
guest
9 Komentářů
Nejstarší
Nejnovější Most Voted
Inline Feedbacks
Zobrazit všechny komentáře
Sten

Starý dobrý double buffering :)

harvie

cim linejsi platforma, tim vetsi smysl double buffering ma… to neni treba overovat :-)

x

protoze js predava objekty referenci, a vtom image.data je objekt typu pole. viz priklad:

var a = [1,2];
b = a;
b[0] = 4;
alert(a + ' ' + b);

Ash

zrychlení asi spočívá v tom, že v tom druhém případě se pracuje přímo s polem data, kdežto bez toho se pracuje s objektem image v DOM, přes který se přistupuje k poli data.
mydata = foo vs. image.mydata = foo
tedy asi není totéž jako
mydata = foo vs. otherdata = foo

Ash

On trochu mate ten název „detaching“, protože o žádný detaching nejde, spíš o „direct access“.

x

dobre, pokud to je teda jak rikate vy a kolega dole, ze jde jen o urychleni dejme tomu na urovni pri prochazeni nejakeho stromu pameti, diky hodne volani ve smycce, a pokud plati ze js pouziva vzdy reference, tak je stejne nesmysl to nakonci nastavovat zpatky tu hodnotu na tu puvodni, jak tam pise, And here we attache it back.

__dark__

Přečetl jsem to, a celé mi to přijde jako nesmysl. Není to ani detach, ani double-buffer, je to obyčejné zkrácení cesty. Když napíšu v javascriptu ‚neco.neco.neco‘, tak se to musí pokaždé vyhodnotit, takže je logické, že zkrácením toho výrazu na ‚a = neco.neco.neco‘ dosáhnu o lepšího výkonu v hlavní smyčce. Pro některé je to asi objevení ameriky.
Spíš mě zaráží, že autor plní pixely úplně opačným směrem (což pro sběrnici určitě dobré není) a ve smyčce má chybu, pixel na souřadnici [0, 0] se nepřekreslí…

Strategie a AI jako klíč. Do Prahy přijely špičky technologického světa

WebExpo 2025 ukázalo, jak se tvoří budoucnost. Třídenní technologická konference WebExpo 2025 přivedla do Prahy světové i české experty, kteří nabídli inspiraci napříč obory. Hlavním tématem byla propojenost disciplín, význam AI a potřeba otevřenosti vůči novým výzvám – včetně podpory legální imigrace. Ukázalo se, že inovace vznikají nejen v Silicon Valley, ale i tam, kde se nebojíme myslet jinak.

Přístupnost není jen o splnění norem: nový pohled na inkluzivní design

Přístupnost a inkluze možná nepatří mezi nejžhavější témata digitálního světa – dokud o nich nezačne mluvit Vitaly Friedman. Na WebExpo 2024 předvedl, že inkluzivní design není jen o splněných checkboxech, ale hlavně o lidech. S energií sobě vlastní obrátil zažité přístupy naruby a ukázal, že skutečně přístupný web je nejen možný, ale i nezbytný.

Efektivnější vývoj UI nebo API: Co si odnést z WebExpo 2025?

Různé
Komentáře: 0
Jak snadno implementovat moderní uživatelské rozhraní? Které funkce brzdí rychlost vašeho webu? A kdy raději sami přibrzdit, abychom využitím AI nepřekročili etické principy? Debatu aktuálních dev témat rozdmýchá sedmnáctý ročník technologické konference WebExpo, která proběhne v Praze od 28. do 30. května. Který talk či workshop si rozhodně nenechat ujít? Toto je náš redakční výběr z vývojářských hroznů.