웹 워 커 와 JS 의 비동기 프로 그래 밍 비교

한 문제 부터 말하자면

var t = true; 
setTimeout(function(){ t = false; }, 1000); 
while(t){ }
alert('end');

상기 코드 는 언제 alert "end" 를 물 었 습 니까? 
테스트: 정 답 은 영원히 alert 를 하지 않 는 다 는 것 이다.
해석: 자바 스 크 립 트 엔진 은 단일 스 레 드 입 니 다. 이벤트 트리거 대기 열 입 니 다.모든 임 무 는 촉발 시간 에 따라 선후 로 줄 을 서서 처리한다. 
상례 에서 줄 을 서 는 순서 상 태 는:

| var t=true ; | while(t){}; | alert(‘end’); |

1000 ms 이후 setTimeout 함수 도 대열 에 합류 했다. 
while (t) {} 무한 순환 으로 단일 스 레 드 를 막 았 습 니 다. 뒤쪽 코드 의 실행 시간 이 아무리 짧 아 도 뒤의 코드 는 실행 할 수 없 으 며 계속 막 혔 습 니 다.
브 라 우 저 스 레 드 브 라 우 저 에는 이렇게 많은 스 레 드 가 있 습 니 다.
UI 렌 더 링 스 레 드 (페이지 렌 더 링 에 사용),
javascript 엔진 스 레 드 (js 처리 에 사용),
GUI 이벤트 트리거 스 레 드 (대화 식 으로 사용).
가끔 열 리 는 스 레 드:
http 전송 스 레 드,
정시 트리거 스 레 드 (타이머)
그들 사이 의 관 계 는 무엇 입 니까?
(1) UI 렌 더 링 스 레 드 와 자바 script 엔진 스 레 드 의 상호 배척
javascript 은 페이지 의 DOM 을 조작 할 수 있 기 때문에 UI 렌 더 링 스 레 드 와 javascript 엔진 스 레 드 가 서로 배척 하지 않 으 면 UI 렌 더 링 스 레 드 에서 페이지 렌 더 링 을 하 는 동시에 javascript 엔진 스 레 드 를 DOM 으로 수정 하면 최종 적 으로 DOM 상태 가 일치 하지 않 는 현상 을 초래 할 수 있 습 니 다.따라서 자바 script 엔진 스 레 드 가 실 행 될 때 UI 렌 더 링 스 레 드 는 동결 상태 입 니 다.
(2) javascript 엔진 스 레 드 와 GUI 이벤트 트리거 스 레 드 (대화 용) 비동기
브 라 우 저 는 이벤트 트리거 스 레 드 를 열 고 사용자 동작 을 기다 리 며 이벤트 트리거 스 레 드 는 응답 이벤트 로 해석 되 며 자바 script 엔진 스 레 드 로 이동 하여 줄 을 서서 기다 리 며 자바 script 엔진 의 처 리 를 기다 리 고 있 습 니 다.
(3) javascript 엔진 스 레 드 와 http 전송 스 레 드 비동기
웹 페이지 get, post 등 요청, xhr 비동기 요청 은 http 전송 스 레 드 를 통 해 자바 script 엔진 으로 전송 하여 줄 을 서서 처 리 를 기다 리 고 있 습 니 다.
(4) javascript 엔진 스 레 드 와 정시 트리거 스 레 드 (타이머) 비동기
setTimeout (), setInterval () 은 단독 스 레 드 가 정시 에 스 레 드 를 촉발 하여 자바 script 엔진 으로 전송 하여 줄 을 서서 처 리 를 기다 리 고 있 습 니 다.
위 와 같은 모든 비동기 작업 은 서로 다른 브 라 우 저 할당 스 레 드 가 실 행 됩 니 다. 먼저 실 행 된 것 은 비동기 대기 열 에 넣 고 이벤트 의 폴 링 을 이용 하여 비동기 대기 열 에 있 는 리 셋 함 수 를 실행 합 니 다.
xhr 이 보 는 속임수 입 니 다. 테스트 를 해 보 겠 습 니 다.
클 라 이언 트 js 코드

//jquery   ajax  ，  http://localhost:3000/login  
 $.ajax({
        type: "post",
        url: "http://localhost:3000/login",
        dataType: "json",
        data:{ username: username, password: password },
        success: function(data){
            if(data){
               if(data.message=="i202"){
                   alert('    ，     ');
                   window.location.href="login";
               }else if(data.message=="i200"){
                    alert('    ');
                    window.location.href="index";
                }
                else{
                    alert('       ');
                   window.location.href="login";
                 }
            } else{
            }
        }
    });
    //         
    while(1){}

백 엔 드 Node. js 코드:

//   post   
router.post('/login', function (req, res, next) {    
    sleep(1000);
    res.send({status:"success", message:"i200"});     
});

/**
 *   sleep
 * @param sleepTime
 */
function sleep(sleepTime) {
    for(var start = +new Date; +new Date - start <= sleepTime; ) { }
}

프론트 데스크 는 영원히 alert ("로그 인 성공") 하지 않 습 니 다.브 라 우 저 는 http 스 레 드 를 통 해 xhr 응답 을 받 았 으 나 자바 script 스 레 드 로 이동 하여 실행 을 기다 리 고 있 습 니 다.javascript 단일 스 레 드, 한 번 에 하나의 작업 만 처리 할 수 있 습 니 다.첫 번 째 임 무 는 무한 순환 으로 뒤의 임 무 는 모두 막 혔 다.
xhr 비동기 프로 그래 밍 은 사실상 일종 의 속임수 이다.
타이머 시간 불허

 setTimeout(function () { while (true) { } }, 1000);
 setTimeout(function () { alert('end 2'); }, 2000);
 setTimeout(function () { alert('end 1'); }, 100);
 alert('end');

이 코드 를 실행 합 니 다.실행 결 과 는 alert (end) alert (end 1) 입 니 다.
앞의 두 타 이 머 는 약속 한 시간 에 실행 할 수 없습니다.
(2) 시간 불허 2

setTimeout(function(){  
   /*    ... */  
   setTimeout(arguments.callee, 10);  
}, 10);  

setInterval(function(){  
   /*   ... */  
 }, 10); 

두 개의 타이머 가 같은 기능 을 실현 하려 고 했 는데 10 초 에 한 번 씩 타 이 머 를 터치 합 니 다.
그러나 실제로 setTimeout 은 10ms 후에 야 js 실행 대기 열 에 가입 하여 줄 을 서서 기 다 렸 다.따라서 두 번 의 타이머 가 촉발 하 는 시간 간격 은 > 10ms 일 수 있 습 니 다.
setInterval 은 10s 마다 js 실행 대기 열 에 setInterval 이 벤트 를 추가 하여 실행 을 기다 리 고 있 습 니 다.앞의 setInterval 사건 은 이전의 사건 에 의 해 막 혀 서 몇 박자 늦게 실 행 될 수 있 습 니 다.그러면 두 번 의 정시 시간 이 촉발 되 지 않 은 시간 간격 은 < 10ms 일 수 있 습 니 다.
웹 워 커 야 말로 진정한 다 중 스 레 드 입 니 다. 테스트 해 보 세 요.
index.html