회전: JavaScript 정시 메커니즘 및 브 라 우 저 렌 더 링 메커니즘 에 대한 간단 한 설명

어젯밤 에 친구 가 문 제 를 가지 고 나 에 게 물 었 다.

a.onclick = function(){

    setTimeout(function() {

        //do something ...

    },0);

}; 
 //~~~           JS        ，         ，        ，             ，   ~

JavaScript API 문 서 는 setTimeout 의 두 번 째 매개 변 수 는 몇 밀리초 간격 으로 되 돌 리 는 방법 이 실 행 됩 니 다.그러면 여 기 는 0 밀리초 로 설정 하면 바로 실 행 될 것 으로 추정 된다. - -즉시 실 행 된 이상 왜 이 코드 의 작 가 는 가 까 운 것 을 버 리 고 먼 것 을 추구 합 니까?혹시 작가 가 코드 를 쓸 때 술 에 취 했 나 요?
 
분명히 아니 야!
 
이 문 제 는 David Flanagan 이 에서 설명 한 바 와 같이 setTimeout 의 지연 시간 이 0 으로 설정 되 었 을 때 리 셋 함 수 는 바로 실행 되 지 않 고 대기 열 에 들 어 갑 니 다.David Flanagan 은 '자 바스 크 립 트 권위 가이드' 에서 자 바스 크 립 트 대기 열의 구체 적 인 운영 방식 을 상세 하 게 설명 하지 않 았 습 니 다. 이제 이 문 제 를 대충 말씀 드 리 겠 습 니 다.
 
JavaScript 엔진 은 단일 스 레 드 모드 로 실 행 됩 니 다. 브 라 우 저 는 언제든지 하나의 JavaScript 스 레 드 만 실 행 됩 니 다.
이 문제 들 을 분명하게 말 하려 면 브 라 우 저 커 널 처리 타이머 (setTimeout, setInterval) 와 응답 브 라 우 저 이벤트 부터 말 해 야 합 니 다.
 
브 라 우 저 커 널 은 여러 스 레 드 의 비동기 실행 을 허용 합 니 다. 이 스 레 드 는 커 널 제어 하에 서로 협력 하여 동기 화 를 유지 합 니 다.특정한 브 라 우 저 커 널 의 실현 을 가정 하면 최소 세 개의 상주 스 레 드 가 있 습 니 다. 자바 script 엔진 스 레 드, 인터페이스 렌 더 링 스 레 드, 브 라 우 저 이벤트 트리거 스 레 드 입 니 다.그 밖 에 실행 이 끝나 면 종료 되 는 스 레 드 도 있 습 니 다. 예 를 들 어 Http 요청 스 레 드 등 이 비동기 스 레 드 는 서로 다른 비동기 사건 을 일 으 킬 수 있 습 니 다.
 
다음은 하나의 그림 을 통 해 단일 스 레 드 의 자바 스 크 립 트 엔진 이 다른 스 레 드 와 어떻게 상호작용 하 는 지 설명 한다.모든 브 라 우 저 커 널 (유행 하 는 브 라 우 저 커 널: Trident [IE 커 널], Gecko [Firefox 커 널], Presto [Opera 커 널], Webkit [Chrome, Safari] 등) 의 디 테 일 은 다 르 지만 호출 원 리 는 대동소이 하 다.
 
 
 
브 라 우 저의 자바 스 크 립 트 엔진 은 이벤트 에 기반 한 것 입 니 다.이 이 벤트 는 브 라 우 저 에서 보 내 는 여러 가지 작업 으로 볼 수 있 습 니 다. 예 를 들 어 setTimeout 을 호출 하여 작업 을 추가 할 수도 있 고 브 라 우 저 커 널 의 다른 스 레 드 에서 올 수도 있 습 니 다. 예 를 들 어 인터페이스 요소 마우스 클릭 이벤트, 정시 트리거 시간 도착 알림, 비동기 요청 상태 변경 알림 등 입 니 다.
코드 측면 에서 볼 때 작업 실 체 는 각종 리 셋 함수 입 니 다. JavaScript 엔진 은 작업 대기 열 에서 작업 이 오 기 를 기다 리 고 있 습 니 다.단일 스 레 드 관계 로 이 작업 들 은 줄 을 서서 하나씩 엔진 에 의 해 처리 되 어야 한다.
 
그래 픽 인터페이스 렌 더 링 스 레 드: ~ 인터페이스 에 reflow 또는 repaint 가 필요 할 때 그래 픽 인터페이스 렌 더 링 스 레 드 의 실행 을 촉발 합 니 다.
이 스 레 드 는 브 라 우 저 인터페이스 HTML 요 소 를 렌 더 링 하 는 것 을 책임 집 니 다. 인터페이스 가 다시 그 려 야 하거나 특정한 조작 으로 인해 환류 가 발생 할 때 이 스 레 드 는 실 행 됩 니 다.
나 는 오늘 자바 스 크 립 트 의 정시 체 제 를 중점적으로 설명 하고 싶 지만, 이 때 는 렌 더 링 스 레 드 를 말 할 필요 가 있 습 니 다. 왜냐하면 이 스 레 드 는 자바 스 크 립 트 엔진 스 레 드 와 서로 배척 하기 때 문 입 니 다!이 점 은 야후 전단 공 성 사 는 블 로그 에 이 문 제 를 상세 하 게 묘사 한 글 이 있다.이것 도 쉽게 이해 할 수 있 습 니 다. JavaScript 스 크 립 트 는 DOM 요 소 를 조작 할 수 있 기 때문에 이러한 요소 속성 을 수정 하 는 동시에 렌 더 링 인터페이스 를 수정 하면 렌 더 링 스 레 드 전후 에 얻 은 요소 데이터 가 일치 하지 않 을 수 있 습 니 다.
 ~~~렌 더 링 스 레 드 와 JS 스 레 드 는 서로 배척 합 니 다. JS 엔진 은 스 크 립 트 를 실행 할 때 렌 더 링 스 레 드 가 걸 린 상태 입 니 다.사실 이것 이 내 가 알 고 싶 은 것 이다.제 가 왜 JS 로 여러 번 특정한 요소 의 특정한 스타일 을 바 꾸 었 는 지 궁금 하기 때문에 중간 에 변화 하 는 과정 을 볼 수 없고 최종 결과 만 볼 수 있 습 니 다. (예 를 들 어 저 는 JS 로 div 의 배경 색 을 먼저 검은색 으로 바 꾸 고 hotpink 으로 바 꾸 었 습 니 다. 실제 JS 가 실 행 했 을 때 div 배경 색 이 검은색 으로 변 하 는 과정 을 볼 수 없습니다)
JavaScript 엔진 이 스 크 립 트 를 실행 하 는 동안 브 라 우 저 렌 더 링 스 레 드 는 모두 걸 린 상태 입 니 다. 즉, '동결' 되 었 습 니 다.
 
GUI 이벤트 트리거 라인:
JavaScript 스 크 립 트 의 실행 은 html 요소 이벤트 의 트리거 에 영향 을 주지 않 습 니 다. Time 1 시간 동안 사용 자 는 마우스 단 추 를 누 르 고 이 벤트 를 누 르 면 브 라 우 저 이벤트 의 트리거 스 레 드 에 포착 되 어 마우스 클릭 이 벤트 를 형성 합 니 다. JavaScript 엔진 스 레 드 에 있어 서 이 이 벤트 는 다른 스 레 드 에서 작업 대기 열 끝 에 비동기 로 전 달 됩 니 다. 엔진 이 Time 1 시의 작업 을 처리 하고 있 기 때문에 이 쥐 는구두점 격 사건 은 줄 을 선다.
 
정시 트리거 라인:
이 브 라 우 저 모델 의 정시 계산 기 는 자바 스 크 립 트 엔진 에 의 해 계산 되 는 것 이 아 닙 니 다. 자바 스 크 립 트 엔진 은 단일 스 레 드 이기 때문에 스 레 드 상태 에 있 으 면 시간 을 계산 할 수 없습니다. 외부 에 의존 하여 시간 을 계산 하고 트리거 해 야 하기 때문에 대기 열 에 있 는 정시 이벤트 도 비동기 이벤트 입 니 다.
그 러 자 친구 가 말 했다. 자 바스 크 립 트 가 단일 스 레 드 로 실행 되 는 이상 XML HttpRequest 의 비동기 링크 는 어떻게 된 것 일 까?
사실 비동기 요청 은 브 라 우 저 에서 스 레 드 를 새로 열 어 요청 합 니 다! 요청 한 상태 가 변경 되 었 을 때, 이전에 리 셋 이 설정 되 어 있 으 면, 이 비동기 스 레 드 는 상태 변경 이벤트 가 발생 하여 자바 스 크 립 트 엔진 의 처리 대기 열 에 놓 여 처 리 를 기다 리 고 있 습 니 다!
그래서 작업 이 처리 되 었 을 때 자바 스 크 립 트 엔진 은 항상 단일 스 레 드 로 리 셋 함 수 를 실행 합 니 다!
~ ~ ~ 분석 에 박 차 를 가 하 다.