U E D R , A S I H C RSS

html5/web-workers

WEB WORKERS

  • μ›Ή μ›Œμ»€ : μžλ°”μŠ€ν¬λ¦½νŠΈ μ½”λ“œλΌ λ°±κ·ΈλΌμš΄λ“œμ—μ„œ μ‹€ν–‰ν•˜κΈ° μœ„ν•œ 기술
  • μ›Œμ»€ : λ°±κ·ΈλΌμš΄λ“œμ—μ„œ μ‹€ν–‰λ˜λŠ” μ½”λ“œ, UI(DOM)κ³ΌλŠ” μ™„μ „νžˆ λΆ„λ¦¬λœ ν™˜κ²½μ—μ„œ λ™μž‘
    • ν˜„μž¬ λΈŒλΌμš°μ €μ™€ μ›Ήμ–΄ν”Œλ¦¬μΌ€μ΄μ…˜μ΄ 가진 μ„κ³„μƒμ˜ 문제둜 생겨남

  • ν˜„μž¬ μ›ΉλΈŒλΌμš°μ €λŠ” μ›ΉνŽ˜μ΄μ§€λΌ ν•˜λ‚˜μ˜ μŠ€λ ˆλ“œλ‘œ μ‹€ν–‰
    • μ²˜λ¦¬ν•  λ‚΄μš©μ΄ λ§Žμ•„μ§€λ©΄ μ‚¬μš©μžλŠ” νŽ˜μ΄μ§€λΌ μ‘°μž‘ν•  수 μ—†μŒ
    • 이 λ¬Έμ œλΌ ν•΄κ²°ν•˜κΈ° μœ„ν•΄ Web workersλΌ μ‚¬μš©
      • web workersκ°€ 메인 μŠ€λ ˆλ“œ(μ›Ή νŽ˜μ΄μ§€)μ™€λŠ” λ³„λ„μ˜ λ°±κ·ΈλΌμš΄λ“œ ν”„λ‘œμ„ΈμŠ€λ‘œ μžλ°”μŠ€ν¬λ¦½νŠΈ μ‹€ν–‰
      • 병렬 μ²˜λ¦¬κ°€λŠ₯

  • μ’…λ₯˜
    • 일 λŒ€ 일 : <μ›Œμ»€>, ν•˜λ‚˜μ˜ μ›Œμ»€ 객체와 ν•˜λ‚˜μ˜ λ°±κ·ΈλΌμš΄λ“œ ν”„λ‘œμ„ΈμŠ€κ°€ μΌλŒ€μΌλ‘œ λŒ€μ‘
    • λ‹€ λŒ€ 일 : <곡유 μ›Œμ»€>, μ—¬λŸ¬κ°œμ˜ μ›Œμ»€ 객체가 ν•˜λ‚˜μ˜ λ°±κ·ΈλΌμš΄λ“œ ν”„λ‘œμ„ΈμŠ€μ™€ λŒ€μ‘

μ›Œμ»€λΌ μ΄μš©ν•œ ν”„λ‘œκ·Έλž˜λ°

  • μ›Œμ»€λŠ” μƒμ„±μ‹œλΆ€ν„° UI와 λ‹€λ₯Έ μŠ€λ ˆλ“œμ—μ„œ λ™μž‘
    • UI와 μ›Œμ»€ μŠ€λ ˆλ“œλŠ” λ³€μˆ˜λΌ κ³΅μœ ν•  수 μ—†λ‹€.
    • λ”°λΌμ„œ μ›Œμ»€λŠ” DOM에 μ ‘κ·Όν•  수 μ—†λ‹€.

μ›Œμ»€μ˜ 생성

  • μ›Œμ»€ μΈν„°νŽ˜μ΄μŠ€ μƒμ„±μžμ— JavaScript μ†ŒμŠ€ 파일의 URL인수둜 μ „λ‹¬ν•˜λ©΄ μ†ŒμŠ€νŒŒμΌμ„ λ‚΄λ €λ°›μ•„ λ°±κ·ΈλΌμš΄λ“œμ—μ„œ μ‹€ν–‰ν•œλ‹€
  • μ§€μ—­λ³€μˆ˜, μ§€μ—­ν•¨μˆ˜μ΄λ€λ‘œ μ™ΈλΆ€μ—μ„œ 호좜 λΆˆκ°€!

 
 // workers.jsλΌ μ‹€ν–‰ν•˜μ—¬ μ›Œμ»€λΌ μƒμ„±
 var worker = new Worker("worker.js");

μ›Œμ»€μ™€μ˜ 톡신

  • μ›Œμ»€μ—κ²Œ 메세지 솑신
    • μ›Œμ»€μ™€μ˜ 메세지 톡신은 postMessage()λΌ μ΄μš©

 // μ›Œμ»€μ—κ²Œ 메세지 hello보냄
 worker.postMessage("hello");
 // μ›Œμ»€μ—μ„œμ˜ 메세지 처리
 onmessage = function(e){
 // 처리
};

  • μ›Œμ»€μ˜ 메세지 솑신

 // μ „μ—­ν•¨μˆ˜  postMessage μ‚¬μš©
 postMessage("hello");
 // μ›Œμ»€μ˜ 메세지 처리
 worker.onmessage = function(e){
 // 처리
};

μ›Œμ»€ 생성

  • μ›Œμ»€μƒμ„± : Worker 이용

 // worker.jsμ΄μš©ν•΄ 생성
 var worker = new Worker("worker.js");
  • 곡유 μ›Œμ»€ 생성 : SharedWorker 이용
    • 곡유 μ›Œμ»€λŠ” μœˆλ„μš°κ°€ 달라도 URLκ³Ό 이름이 κ°™μœΌλ©΄ 같은 ν”„λ‘œμ„ΈμŠ€ 곡유

 var worker1 = new SharedWorker("worker.js", "wk");
 var worker2 = new SharedWorker("worker.js", "wk");

μ›Œμ»€ 객체의 λ©”μ†Œλ“œ

  • onerror : μ—λŸ¬ ν¬μ°©ν•˜κΈ° μœ„ν•œ 이벀트 ν•Έλ“€λŸ¬
  • terminate() : μ›Œμ»€ κ°•μ œ μ’…λ£Œ
  • postMessage(message, ports) : μ›Œμ»€μ—κ²Œ 메세지 보냄
  • onmessage() : μ›Œμ»€λ‘œλΆ€ν„°μ˜ 메세지 μˆ˜μ‹ μ„ μœ„ν•œ 이벀트 ν•Έλ“€λŸ¬

μ›Œμ»€μ—μ„œ μ‚¬μš©κ°€λŠ₯ν•œ λ³€μˆ˜, λ©”μ„œλ“œ, μƒμ„±μž

  • window, documentμ‚¬μš© λΆˆκ°€
  • onmessage(), postMessage(), onconnect()λ“± μ‚¬μš©κ°€λŠ₯
  • (TODO : ν‘œ μΆ”κ°€ ν•„μš”)

Valid XHTML 1.0! Valid CSS! powered by MoniWiki
last modified 2021-02-07 05:31:41
Processing time 0.0447 sec