자바스크립트는 멀티스레드 언어인가요?-프런트엔드 Q&A-php.cn

Javascript는 멀티 스레드 언어가 아니라 단일 스레드 언어입니다. JavaScript는 브라우저 스크립팅 언어이며 해당 인터프리터는 단일 스레드이며 JavaScript의 주요 목적은 사용자와 상호 작용하고 DOM을 작동하는 것입니다. DOM은 단일 스레드만 가능하다고 결정합니다. 그렇지 않으면 매우 복잡한 동기화 문제가 발생합니다. .

자바스크립트는 멀티스레드 언어인가요?

이 튜토리얼의 운영 환경: Windows 7 시스템, JavaScript 버전 1.8.5, Dell G3 컴퓨터.

javascript는 멀티 스레드 언어가 아니라 단일 스레드 언어입니다. 브라우저의 JavaScript 인터프리터가 단일 스레드이기 때문에 JavaScript 언어도 멀티스레딩을 지원하지 않습니다.

JavaScript 언어의 주요 특징은 단일 스레드라는 것입니다. 즉, 한 번에 한 가지 작업만 수행할 수 있다는 의미입니다.

그럼 JavaScript는 왜 다중 스레드를 가질 수 없나요? 이렇게 하면 효율성이 향상될 수 있습니다.

JavaScript는 목적에 따라 단일 스레드입니다. 브라우저 스크립팅 언어인 JavaScript의 주요 목적은 사용자와 상호 작용하고 DOM을 조작하는 것입니다. 이는 단일 스레드만 가능하다는 것을 결정합니다. 그렇지 않으면 매우 복잡한 동기화 문제가 발생합니다.

멀티 코어 CPU의 컴퓨팅 성능을 활용하기 위해 HTML5는 JavaScript 스크립트가 여러 스레드를 생성할 수 있도록 허용하지만 하위 스레드는 기본 스레드에 의해 완전히 제어되며 DOM을 작동해서는 안 되는 Web Worker 표준을 제안합니다. . 따라서 이 새로운 표준은 JavaScript의 단일 스레드 특성을 변경하지 않습니다.

작업 대기열

단일 스레드는 모든 작업을 대기열에 넣어야 하며 이전 작업이 완료될 때까지 다음 작업이 실행되지 않음을 의미합니다. 이전 작업이 오래 걸리면 다음 작업은 기다려야 합니다.

계산량이 많아 큐가 발생하고 CPU가 너무 바쁘다면 잊어버리세요. 하지만 IO 장치(입출력 장치)가 매우 느리기 때문에(예: 데이터를 읽는 Ajax 작업 등) CPU가 유휴 상태인 경우가 많습니다. 네트워크에서) 진행하기 전에 결과가 나올 때까지 기다려야 합니다.

JavaScript 언어 설계자는 이때 메인 스레드가 IO 장치를 완전히 무시하고 대기 작업을 일시 중지하며 이후 작업을 먼저 실행할 수 있다는 것을 깨달았습니다. IO 장치가 결과를 반환할 때까지 기다린 다음 돌아가서 일시 중지된 작업을 계속 실행합니다.

그래서 모든 작업은 두 가지 유형으로 나눌 수 있습니다. 하나는 동기 작업(동기)이고 다른 하나는 비동기 작업(비동기)입니다.

동기 작업은 메인 스레드에서 실행 대기 중인 작업을 의미합니다. 다음 작업은 이전 작업이 완료된 후에만 실행될 수 있습니다.

비동기 작업은 메인 스레드에 들어가지 않고 "작업 대기열"에 들어가는 작업을 의미합니다. (작업 큐), "작업 큐"가 메인 스레드에 비동기 작업이 실행될 수 있음을 알리는 경우에만 작업이 실행을 위해 메인 스레드에 들어갑니다.

구체적으로 비동기 실행의 작동 메커니즘은 다음과 같습니다. (동기 실행의 경우에도 마찬가지입니다. 비동기 작업이 없으면 비동기 실행으로 간주될 수 있기 때문입니다.)

(1) 모든 동기 작업은 메인 스레드에서 실행되어 실행 컨텍스트 스택을 형성합니다.

(2) 메인 스레드 외에 "작업 대기열"도 있습니다. 비동기 작업에 실행 중인 결과가 있는 한 이벤트는 "작업 대기열"에 배치됩니다.

(3) "실행 스택"의 모든 동기화 작업이 완료되면 시스템은 "작업 대기열"을 읽어 그 안에 어떤 이벤트가 있는지 확인합니다. 해당 비동기 작업은 대기 상태를 종료하고 실행 스택에 들어가 실행을 시작합니다.

(4) 메인 스레드는 위의 세 번째 단계를 계속 반복합니다.

아래 그림은 메인 스레드와 작업 큐의 개략도입니다.

자바스크립트는 멀티스레드 언어인가요?

메인 스레드가 비어 있는 한 "작업 대기열"을 읽습니다. 이것이 JavaScript의 실행 메커니즘입니다. 이 과정이 계속 반복됩니다.

이벤트 및 콜백 기능

"작업 대기열"은 이벤트 대기열입니다(메시지 대기열로도 이해될 수 있음). IO 장치가 작업을 완료하면 이벤트가 "작업 대기열"에 추가됩니다. 관련 비동기 작업을 표현하면 "실행 스택"에 들어갈 수 있습니다. 메인 스레드는 "작업 대기열"을 읽습니다. 이는 그 안의 이벤트를 읽는다는 의미입니다.

"작업 대기열"의 이벤트에는 IO 장치 이벤트 외에도 일부 사용자 생성 이벤트(예: 마우스 클릭, 페이지 스크롤 등)도 포함됩니다. 콜백 함수가 지정되어 있는 한 이러한 이벤트는 발생 시 "작업 대기열"에 들어가고 기본 스레드가 읽을 때까지 기다립니다.

소위 "콜백 함수"(콜백)는 메인 스레드에 의해 중단되는 코드입니다. 비동기 작업은 콜백 함수를 지정해야 합니다. 메인 스레드가 비동기 작업 실행을 시작하면 해당 콜백 함수가 실행됩니다.

"작업 대기열"은 선입선출 데이터 구조입니다. 첫 번째 순위의 이벤트는 기본 스레드에서 먼저 읽혀집니다. 기본 스레드의 읽기 프로세스는 기본적으로 자동으로 실행 스택이 지워지자마자 "작업 대기열"의 첫 번째 이벤트가 자동으로 기본 스레드에 들어갑니다. 그러나 나중에 언급되는 "타이머" 기능으로 인해 메인 스레드는 먼저 실행 시간을 확인해야 합니다. 특정 이벤트는 지정된 시간 이후에만 메인 스레드로 반환될 수 있습니다.

이벤트 루프

메인 스레드는 "작업 대기열"에서 이벤트를 읽습니다. 이 프로세스는 순환적이므로 전체 작동 메커니즘을 이벤트 루프라고도 합니다.

이벤트 루프를 더 잘 이해하려면 아래 그림을 보세요.

자바스크립트는 멀티스레드 언어인가요?

위 그림에서 메인 스레드가 실행되면 힙과 스택이 생성됩니다. 스택의 코드는 다양한 외부 API를 호출하고 다양한 이벤트(클릭, 로드, 완료)를 추가합니다. 스택의 코드가 실행되는 동안 메인 스레드는 "작업 대기열"을 읽고 해당 이벤트에 해당하는 콜백 함수를 순서대로 실행합니다.

실행 스택(동기 작업)의 코드는 항상 "작업 대기열"(비동기 작업)을 읽기 전에 실행됩니다. 아래 예를 살펴보십시오.

    var req = new XMLHttpRequest();
    req.open(&#39;GET&#39;, url);    
    req.onload = function (){};    
    req.onerror = function (){};    
    req.send();

로그인 후 복사

위 코드의 req.send 메소드는 서버에 데이터를 보내는 Ajax 작업입니다. 이는 시스템이 현재 스크립트의 모든 코드를 읽을 때까지 "작업 대기열"을 읽지 않음을 의미합니다. 실행됩니다. 그러므로 다음의 글과 동일합니다.

 var req = new XMLHttpRequest();
    req.open(&#39;GET&#39;, url);
    req.send();
    req.onload = function (){};    
    req.onerror = function (){};

로그인 후 복사

즉, 콜백 함수를 지정하는 부분(onload 및 onerror)이 실행 스택의 일부이고 시스템이 항상 실행되기 때문에 send() 메서드 앞인지 뒤인지는 중요하지 않습니다. 읽기 전에 "작업 대기열"을 읽어보세요.

Timer

"작업 대기열"은 비동기 작업에 대한 이벤트를 배치하는 것 외에도 시간 제한 이벤트를 배치할 수도 있습니다. 즉, 특정 코드가 실행될 기간을 지정하는 것입니다. 이것을 정기적으로 실행되는 코드인 "타이머" 함수라고 합니다.

타이머 함수는 주로 setTimeout()과 setInterval() 두 함수로 완성되는데, 전자가 지정한 코드는 한 번만 실행되고 후자는 반복해서 실행된다는 차이점이 있습니다. 다음에서는 주로 setTimeout()에 대해 설명합니다.

setTimeout()은 두 개의 매개변수를 허용합니다. 첫 번째는 콜백 함수이고 두 번째는 실행을 지연하는 데 걸리는 시간(밀리초)입니다.

console.log(1);
setTimeout(function(){console.log(2);},1000);
console.log(3);

로그인 후 복사

위 코드의 실행 결과는 1, 3, 2입니다. 왜냐하면 setTimeout()이 두 번째 줄의 실행을 1000밀리초 이후까지 지연시키기 때문입니다.

setTimeout()의 두 번째 매개변수가 0으로 설정되면 현재 코드가 실행된 후(실행 스택이 지워짐) 지정된 콜백 함수가 즉시 실행된다는 의미입니다(0밀리초 간격)

 setTimeout(function(){console.log(1);}, 0);
console.log(2);

로그인 후 복사

실행 위 코드의 결과는 항상 2, 1입니다. 두 번째 줄이 실행된 후에만 시스템이 "작업 대기열"의 콜백 함수를 실행하기 때문입니다.

간단히 말하면, setTimeout(fn,0)의 의미는 메인 스레드의 가능한 가장 이른 유휴 시간에 실행될 작업, 즉 최대한 빨리 실행되도록 지정하는 것입니다. "작업 대기열" 끝에 이벤트를 추가하므로 동기화 작업과 "작업 대기열"의 기존 이벤트가 처리될 때까지 실행되지 않습니다.

HTML5 표준에서는 setTimeout()의 두 번째 매개변수의 최소값(최단 간격)이 4밀리초 이상이어야 한다고 규정하고 있습니다. 이 값보다 작으면 자동으로 증가합니다. 그 전에는 이전 브라우저에서 최소 간격을 10밀리초로 설정했습니다. 또한 이러한 DOM 변경(특히 페이지 재렌더링과 관련된 변경)은 일반적으로 즉시 실행되지 않고 16밀리초마다 실행됩니다. 이때 setTimeout()보다 requestAnimationFrame()을 사용하는 것이 효과가 더 좋습니다.

setTimeout()은 이벤트를 "작업 대기열"에만 삽입한다는 점에 유의해야 합니다. 메인 스레드는 지정된 콜백 함수를 실행하기 전에 현재 코드(실행 스택)가 완료될 때까지 기다려야 합니다. 현재 코드가 오래 걸리면 시간이 오래 걸릴 수 있으므로 setTimeout()에서 지정한 시간에 콜백 함수가 실행된다는 보장은 없습니다.

Node.js의 이벤트 루프

Node.js도 단일 스레드 이벤트 루프이지만 작동 메커니즘이 브라우저 환경과 다릅니다.

아래의 개략도를 봐주세요

자바스크립트는 멀티스레드 언어인가요? 위의 개략도에 따르면 Node.js의 동작 메커니즘은 다음과 같습니다.

(1) V8 엔진은 JavaScript 스크립트를 구문 분석합니다.

(2) 구문 분석된 코드는 Node API를 호출합니다.

(3) libuv 라이브러리는 Node API 실행을 담당합니다. 서로 다른 작업을 서로 다른 스레드에 할당하여 이벤트 루프(이벤트 루프)를 형성하고, 작업의 실행 결과를 비동기 방식으로 V8 엔진에 반환합니다.

(4) V8 엔진은 결과를 사용자에게 반환합니다.

두 가지 메서드 setTimeout 및 setInterval 외에도 Node.js는 "작업 대기열"과 관련된 두 가지 다른 메서드인 process.nextTick 및 setImmediate도 제공합니다. "작업 대기열"에 대한 이해를 심화하는 데 도움이 될 수 있습니다.

process.nextTick 메서드는 다음 이벤트 루프(메인 스레드가 "작업 대기열"을 읽음) 이전에 현재 "실행 스택"의 끝에서 콜백 함수를 트리거할 수 있습니다. 즉, 지정하는 작업은 항상 모든 비동기 작업보다 먼저 발생합니다. setImmediate 메소드는 현재 "작업 큐"의 끝에 이벤트를 추가합니다. 즉, 지정하는 작업은 항상 다음 이벤트 루프에서 실행되며 이는 setTimeout(fn, 0)과 매우 유사합니다. 아래 예를 참조하세요(StackOverflow를 통해).

 process.nextTick(function A() {
  console.log(1);
  process.nextTick(function B(){console.log(2);});
});
 
setTimeout(function timeout() {
  console.log(&#39;TIMEOUT FIRED&#39;);
}, 0)
// 1
// 2
// TIMEOUT FIRED

로그인 후 복사

上面代码中，由于process.nextTick方法指定的回调函数，总是在当前”执行栈”的尾部触发，所以不仅函数A比setTimeout指定的回调函数timeout先执行，而且函数B也比timeout先执行。这说明，如果有多个process.nextTick语句（不管它们是否嵌套），将全部在当前”执行栈”执行。

现在，再看setImmediate。

 setImmediate(function A() {
  console.log(1);
  setImmediate(function B(){console.log(2);});
});
 
setTimeout(function timeout() {
  console.log(&#39;TIMEOUT FIRED&#39;);
}, 0);

로그인 후 복사

上面代码中，setImmediate与setTimeout(fn,0)各自添加了一个回调函数A和timeout，都是在下一次Event Loop触发。那么，哪个回调函数先执行呢？答案是不确定。运行结果可能是1–TIMEOUT FIRED–2，也可能是TIMEOUT FIRED–1–2。

令人困惑的是，Node.js文档中称，setImmediate指定的回调函数，总是排在setTimeout前面。实际上，这种情况只发生在递归调用的时候。

 setImmediate(function (){
  setImmediate(function A() {
    console.log(1);
    setImmediate(function B(){console.log(2);});
  });
 
  setTimeout(function timeout() {
    console.log(&#39;TIMEOUT FIRED&#39;);
  }, 0);
});
// 1
// TIMEOUT FIRED
// 2

로그인 후 복사

上面代码中，setImmediate和setTimeout被封装在一个setImmediate里面，它的运行结果总是1–TIMEOUT FIRED–2，这时函数A一定在timeout前面触发。至于2排在TIMEOUT FIRED的后面（即函数B在timeout后面触发），是因为setImmediate总是将事件注册到下一轮Event Loop，所以函数A和timeout是在同一轮Loop执行，而函数B在下一轮Loop执行。

我们由此得到了process.nextTick和setImmediate的一个重要区别：多个process.nextTick语句总是在当前”执行栈”一次执行完，多个setImmediate可能则需要多次loop才能执行完。事实上，这正是Node.js 10.0版添加setImmediate方法的原因，否则像下面这样的递归调用process.nextTick，将会没完没了，主线程根本不会去读取”事件队列”！

 process.nextTick(function foo() {
  process.nextTick(foo);
});

로그인 후 복사

事实上，现在要是你写出递归的process.nextTick，Node.js会抛出一个警告，要求你改成setImmediate。

另外，由于process.nextTick指定的回调函数是在本次”事件循环”触发，而setImmediate指定的是在下次”事件循环”触发，所以很显然，前者总是比后者发生得早，而且执行效率也高（因为不用检查”任务队列”）。

【相关推荐：javascript学习教程】

위 내용은 자바스크립트는 멀티스레드 언어인가요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!