ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • [HTML5] 웹워커 Web Worker 기초 상식과 개요
      프로그래밍/HTML5 Web 2016. 7. 13. 15:46
      반응형


      HTML5에 추가된 기능은 기존의 기능을 응용하여 대부분 구현할수 있는데 저번에 다룬 해시 변경 이벤트도 타이머로 구현할수 있으며 드래그와 드롭 기능도 jQuery와 같은 라이브러리로 구현이 가능합니다. 하지만 아무리 대체하려해도 기존의 기능으로는 구현할수 없는 것이 있는데 이것이 웹 워커(Web Worker) 입니다.


      코드 진행에 있어서 작은 실행 흐름 단위를 스레드라고 부르는데, 스레드를 여러개생성하면 동시에 여러 개의 코드를 병렬로 실행이 가능합니다. 하지만 자바스크립트의 경우에는 스레드를 별도로 생성할수 없으므로 한번에 하나의 코드만 실행합니다.






      이것을 보완하기 위해 비동기 입출력과 이벤트로 동시에 여러 가지 일을 하는 것처럼 개발을 할수 있습니다.

      다음의 코드는 XMLHttpRequest 객체로 네트워크 입출력을 수행합니다.


      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      32
      33
      34
      35
      <!DOCTYPE html>
       
      <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
      <head>
          <meta charset="utf-8" />
          <title>XMLHttpRequest</title>
       
       
          <!-- Code -->
          <script>
              //객체 생성
              var request = new XMLHttpRequest();
       
              //이벤트 연결
              request.onreadystatechange = function () {
                  if (request.readyState == 4) {
                      //웹브라우저가 요청을 완료하면 이 단위를 실행
                      alert(request.response);
                  }
              };
       
              //객체를 설정
              request.open('GET', 'XMLHttpRequest.html', true);
       
              //웹 브라우저에 웹 요청을 수행할것을 명령
              request.send();
       
              //출력
              console.log('요청을 보냄');
          </script>
      </head>
      <body>
       
      </body>
      </html>
      		cs


      결론적으로는 웹 페이지가 스레드를 나누는 것이 아니라 웹 브라우저에 요청하고 웹브라우저가 스레드를 나누어 요청을 완료하면 웹 페이지의 이벤트 큐에 이벤트를 저장합니다. 웹페이지는 현재 실행 중인 단위가 종료되면 대기중인 이벤트를 실행합니다.


      open() 메서드를 사용하거나 send() 메서드를 사용하면 내부에서 onreadystatechange 이벤트에 연결된 함수를 실행합니다. 이는 함수를 실행하는 단순한 동기 요청입니다.




      아래의 코드는 while문이 포함되어있어 현재 단위가 끝나지 않은 상황을 만들어 실행하지 못하게 하는 예제입니다.


      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      32
      33
      34
      35
      36
      37
      <!DOCTYPE html>
       
      <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
      <head>
          <meta charset="utf-8" />
          <title>One Thread Process Problems</title>
          
       
          <!-- 이 코드를 무한 반복으로 에러를 유발할수 있습니다!! 주의-->
          <!-- Code -->
          <script>
              //객체 생성
              var request = new XMLHttpRequest();
       
              //이벤트 연결
              request.onreadystatechange=function(){
                  if(request.readyState==4){
                      //웹 브라우저가 요청을 완료하면 이단위를 실행
                      alert(request.response);
                  }
              };
       
              // 객체 설정
              request.open('GET','OneThread.html',true);
       
              //웹브라우저에 웹요청 수행
              request.send();
       
              //정지
              while(true){}
       
          </script>
      </head>
      <body>
       
      </body>
      </html>
      		cs


      아래의 코드 또한 작동하지 않는데 현재 코드 진행을 끝내지 못했으므로 0초후에 실행하는 코드가 명시되어있음에도 불구하고 실행이 되지 않습니다.


      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      <!DOCTYPE html>
       
      <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
      <head>
          <meta charset="utf-8" />
          <title>OneThread Problem</title>
       
          <!-- Code -->
       
          <script>
              //0초후 코드를 실행
              setTimeout(function () {
                  for (var i = 0; i < 100; i++) {
                      console.log('A');
                  }
              }, 0);
       
              //정지
              while(true){}
       
          </script>
      </head>
      <body>
       
      </body>
      </html>
      		cs


      자바스크립트와는 달리 다른 프로그래밍 언어들인 C#의 경우에는 스레드를 나누면 병렬로 실행이 가능합니다. 다음으로는 UI스레드에 대해서 알아보도록 하겠습니다.

      반응형
      저작자표시 비영리 변경금지

      '프로그래밍 > HTML5 Web' 카테고리의 다른 글

      [CSS Grid] 1. 코스 소개  (0) 2018.07.14
      CSS Grid 공부를 시작하며  (0) 2018.07.14
      [HTML5] HashChange Event 해쉬 변경 이벤트 처리 PushState와 popState 메서드  (0) 2016.07.11
      [HTML5] Sammy.js 라이브러리에서 요청 매개변수 처리  (0) 2016.07.10
      [HTML5] Sammy.js 라이브러리로 히스토리 기능 사용 및 페이지 라우트  (0) 2016.07.10

      관련글 관련글 더보기

      댓글

    Designed by Tistory.

    티스토리툴바