SlideShare a Scribd company logo
Többszálúság a
 böngészőben, avagy
merjünk-e Javascriptben
    programot írni?

                          Farkas Máté
        Budapest.js meetup 2010.04.14.
A Javascript nem erre való!




      http://weblabor.hu//blogmarkok/104451#comment-67266
A legnagyobb hátrány:
• Amíg Javascriptben számítást
  végzünk, semmi más nem
  történhet a böngészőben
• Kivétel jelenleg: Opera
• És majd a Webkit 2 alapú
  böngészők
A megoldás: Web Worker
• A Google Gears-féle WorkerPool
  szabványosítása, a HTML 5 része
• A Worker egy teljesen különálló
  folyamatként dolgozik, csak a
  létrehozójával tud kommunikálni,
  és vele is csak üzenet küldéssel
index.html




hello.js
Használati előnyök
• A böngésző „lefagyasztása nélkül”
  tudunk hosszabb számításokat
  végezni
• Kihasználhatóak a több magos
  processzorok
• demo
Többszálú teljesítmény




http://www.yafla.com/dforbes/Web_Workers_and_You__A_Faster_More_Powerful_JavaScript_World/
Böngésző támogatás
• Chrome: minden worker új process
• Safari: minden worker új szál
• Firefox: nem string értékek
  küldése/fogadása is lehet
• Opera: nem támogatja
• Internet Explorer: nem támogatja
A Javascript lassú.
PHP 5.2: 5,26 sec
Perl 5.10: 3,26 sec
Google Chrome 5: ??? sec
Google Chrome 5: 0,05 sec
Egy másik teszt
Többszálú javascript
Böngésző támogatás 2
• A HTML 5 Worker nem kompatíbilis
  a Gears-féle WorkerPool-lal
• Volt több próbálkozás szimulálni
  ezt a viselkedést (jsworker, ie-web-
  worker), de egyik sem kielégítő
emulatedWorker.js
• Elég ezt betölteni, és a Worker
  API-t használó Javascript futni
  fog minden böngészőben…
• … de ettől nem lesz többszálú…
• … és komolyabb adatszerkezetek-
  nél bonyolult az üzengetés
objectWorker.js
• Egy intuitív absztrakció a
  Workerek használatához
• (Típusjelzéssel ellátott) objektumok
  küldése/fogadása
• Eljárás hívás
Az objectWorker használata
A worker.js
Bonyolult? – Nem, sőt!
Na és az Internet Explorer?
Összefoglalás
• Kis odafigyeléssel ma már írhatunk
  programot Javascriptben
• Weboldalak esetén egyszerűen
  küldhetjük háttérbe a számítási
  feladatokat
• Worker-képes böngészővel teher-
  mentesíthető a szerverünk
Köszönöm a figyelmet!



                         Farkas Máté
       Budapest.js meetup 2010.04.14.
Forráskódok, források
• HTML 5 Web Workers http://www.whatwg.org/specs/web-
  workers/current-work/
• Mozilla MDC https://developer.mozilla.org/En/DOM/Worker

• http://www.yafla.com/dforbes/Web_Workers_and_You__A_Faster
  _More_Powerful_JavaScript_World/
• http://ejohn.org/blog/how-javascript-timers-work/

• Forráskódok: http://fmate14.try.hu/2010/bpjs-objectWorker/
• objectWorker és emulatedWorker:
  http://code.google.com/p/object-worker/

More Related Content

KEY
A webes űrlapok csodálatos világa
PDF
Bobor Szabolcs: A webes űrlapok csodálatos világa
PDF
StreamProxy - University of Pannonia
PDF
Budapest.rb 2011/01 - Rails Deployment
PPT
CSS előfeldolgozók
PPSX
Dokumentáljunk, de hogyan?
PPS
Flight of passion
PPTX
Note making and note taking pract
A webes űrlapok csodálatos világa
Bobor Szabolcs: A webes űrlapok csodálatos világa
StreamProxy - University of Pannonia
Budapest.rb 2011/01 - Rails Deployment
CSS előfeldolgozók
Dokumentáljunk, de hogyan?
Flight of passion
Note making and note taking pract

Viewers also liked (8)

PPTX
What Do "Cage-Free" and "Free-Range" Egg Labels Mean?
PDF
Allarangen fiber infomöte 3 september 2015
PDF
2015 deep market research report on global purified terephthalic acid industry
PDF
Conoscere il percorso del Nordic Walking Park di Brenzone sul Garda
PPTX
Servicio de desarrollo de Apps para iPhone, Android y Kindle ofrecido por App...
PDF
Proyecto escuela comunidad
PPT
Osztályozzunk!
ODP
El mundo subdesarrollado
What Do "Cage-Free" and "Free-Range" Egg Labels Mean?
Allarangen fiber infomöte 3 september 2015
2015 deep market research report on global purified terephthalic acid industry
Conoscere il percorso del Nordic Walking Park di Brenzone sul Garda
Servicio de desarrollo de Apps para iPhone, Android y Kindle ofrecido por App...
Proyecto escuela comunidad
Osztályozzunk!
El mundo subdesarrollado
Ad

Similar to Többszálú javascript (20)

PPTX
Szerver oldali fejlesztés korszerű módszerekkel C# nyelven
PPTX
Webkonf 2013
PPTX
Webapplication development with HTML5 and GWT
PDF
Nagy Péter: Google App Engine. Programozzunk felhőt
PPTX
Fejlesztési kihívások a pénzügyi szektorban
DOC
Cgi röviden ajmar
PPTX
Enterprise java evolució, avagy java ee (
PPTX
Enterprise java evolució, avagy java ee (
PPTX
Szoftver tesztelés
PDF
Budapest.rb 201010
ODP
A Firefox-on túl is Mozilla
PPTX
Webalkalmazások teljesítményoptimalizálása
PDF
PHP alkalmazások minőségbiztosítása
KEY
Mi a baj a Drupaloddal
KEY
Responsive Webdesign Drupallal
PPTX
CMS en túli webes megoldások
PPTX
Webes alkalmazások optimalizálása
PPTX
Atszokás Oracle-ről PostgreSQL-re
PDF
HTML5 esettanulmányok
PDF
Dcourse ctools
Szerver oldali fejlesztés korszerű módszerekkel C# nyelven
Webkonf 2013
Webapplication development with HTML5 and GWT
Nagy Péter: Google App Engine. Programozzunk felhőt
Fejlesztési kihívások a pénzügyi szektorban
Cgi röviden ajmar
Enterprise java evolució, avagy java ee (
Enterprise java evolució, avagy java ee (
Szoftver tesztelés
Budapest.rb 201010
A Firefox-on túl is Mozilla
Webalkalmazások teljesítményoptimalizálása
PHP alkalmazások minőségbiztosítása
Mi a baj a Drupaloddal
Responsive Webdesign Drupallal
CMS en túli webes megoldások
Webes alkalmazások optimalizálása
Atszokás Oracle-ről PostgreSQL-re
HTML5 esettanulmányok
Dcourse ctools
Ad

More from Máté Farkas (8)

PPT
Object Oriented JavaScript
PPT
Git és/vagy Subversion
PPT
Egyszálú JavaScript
PPT
ECMAScript 5 Classes
PPT
Use strict
PPTX
IEEE-754
PPTX
Automatikus pontosvessző beszúrás a JavaScriptben
PPS
CSS előfeldolgozók
Object Oriented JavaScript
Git és/vagy Subversion
Egyszálú JavaScript
ECMAScript 5 Classes
Use strict
IEEE-754
Automatikus pontosvessző beszúrás a JavaScriptben
CSS előfeldolgozók

Többszálú javascript

Editor's Notes

  • #3: Kezdetben volt a HTML…
  • #4: 10ms timeout és 10ms interval. A Dropped-nél másodjára került volna bele. Megemlíteni, honnan van.
  • #5: Demo: natív módban
  • #7: Fibonacci az MDC oldalán
  • #8: Meg kell különböztetni a weboldalt és a web alkalmazást!
  • #11: Most hagyjuk egy kicsit a workereket!
  • #17: Jsworker: globális scope-ba teszi az importScripts dolgokat. Ie-web-worker: külön api. Mindkettő csak próbálkozás volt, nem tartják karban.