js 스레드 메커니즘 및 이벤트 메커니즘에 대한 자세한 소개(그림 및 텍스트)

 document.getElementById('btn').onclick = function () {
      var start = Date.now()
      console.log('启动定时器前...')
      setTimeout(function () {
        console.log('定时器执行了', Date.now() - start)
      }, 200)
      console.log('启动定时器后...')
      // 做一个长时间的工作
      for (var i = 0; i <p style="text-align: center;"><span class="img-wrap"><img src="https://img.php.cn//upload/image/139/417/140/1539669885863938.png" title="1539669885863938.png" alt="js 스레드 메커니즘 및 이벤트 메커니즘에 대한 자세한 소개(그림 및 텍스트)"></span><br>사실 타이머는 625ms가 지날 때까지 실행되지 않습니다. 타이머는 실제 타이밍 실행을 보장하지 않습니다. 일반적으로 약간 지연되거나 오랫동안 지연될 수 있습니다(예: 위의 예) </p><p><strong>2. 콜백 함수가 별도의 스레드에서 실행되는 건가요? </strong></p><p><strong>타이머 콜백 함수가 메인 스레드에서 실행되는 </strong>, 구체적인 구현 방법은 아래에서 소개하겠습니다. </p><p><strong> 4. 브라우저 이벤트 루프(폴링) 모델 </strong></p><p><strong>1 JavaScript가 단일 스레드인 이유#🎜🎜 ## 🎜🎜#</strong></p>JavaScript 언어의 주요 특징은 단일 스레드, 즉 동시에 한 가지 작업만 수행할 수 있다는 것입니다 <p>. 그렇다면 JavaScript는 왜 다중 스레드를 가질 수 없습니까? 이렇게 하면 효율성이 향상될 수 있습니다. <strong></strong>JavaScript의 단일 스레드는 그 목적과 관련이 있습니다. 브라우저 스크립팅 언어인 JavaScript의 주요 목적은 사용자와 상호 작용하고 DOM을 조작하는 것입니다. 이는 단일 스레드만 가능하다는 것을 결정합니다. 그렇지 않으면 매우 복잡한 동기화 문제가 발생합니다. 예를 들어 JavaScript에 두 개의 스레드가 동시에 있다고 가정해 보겠습니다. 한 스레드는 특정 DOM 노드에 콘텐츠를 추가하고 다른 스레드는 해당 노드를 삭제합니다. 이 경우 브라우저는 어떤 스레드를 사용해야 합니까? </p><p>그래서 JavaScript는 탄생부터 단일 스레드를 사용했으며 이는 이 언어의 핵심 기능이 되었으며 앞으로도 변하지 않을 것입니다. </p>멀티 코어 CPU의 컴퓨팅 성능을 활용하기 위해 <p>HTML5는 JavaScript 스크립트가 여러 스레드를 생성할 수 있지만 하위 스레드는 메인 스레드에 의해 완전히 제어되는 Web Worker 표준을 제안합니다. DOM<br>을 운영할 수 없습니다. 따라서 이 새로운 표준은 JavaScript의 단일 스레드 특성을 변경하지 않습니다. <strong></strong></p>2.Event Loop<p><strong></strong>JavaScript의 모든 작업은 두 가지 유형으로 나눌 수 있습니다. 하나는 동기 작업이고 다른 하나는 비동기 작업입니다( 다양한 브라우저 이벤트, 타이머, Ajax 등). </p> 동기 작업은 메인 스레드에서 실행 대기 중인 작업을 의미합니다. 비동기 작업은 메인 스레드에 들어가지 않고 "작업 대기열"에 들어가는 작업을 의미합니다. "(작업 대기열), "작업 대기열"이 메인 스레드에 비동기 작업이 실행될 수 있음을 알리는 경우에만 작업이 실행을 위해 메인 스레드에 진입합니다 <p>. <strong></strong> 구체적으로 비동기 실행의 동작 메커니즘은 다음과 같습니다. (동기 실행의 경우에도 마찬가지입니다. 비동기 작업이 없으면 비동기 실행으로 간주될 수 있기 때문입니다.) </p><p> (1) 모든 동기 작업은 메인 스레드에서 실행되어 실행 컨텍스트 스택(실행 컨텍스트 스택) . </p><p> (2) 메인 스레드 외에 "작업 대기열"도 있습니다. 비동기 작업에 실행 결과가 있는 한 이벤트는 "작업 대기열"에 배치됩니다. </p><p> (3) "실행 스택"의 모든 동기화 작업이 완료되면 시스템은 "작업 대기열"을 읽어 그 안에 어떤 이벤트가 있는지 확인합니다. 해당 비동기 작업은 대기 상태를 종료하고 실행 스택에 들어가 실행을 시작합니다. </p><p> (4) 메인 스레드는 위의 세 번째 단계를 계속 반복합니다. </p><p></p>메인 스레드는 "작업 대기열"에서 이벤트를 읽습니다. 이 프로세스는 연속적입니다. loop 이므로 전체 작동 메커니즘을 이벤트 루프라고도 합니다. <p><strong></strong></p><p   style="max-width:90%"><span class="img-wrap"><img src="https://img.php.cn//upload/image/280/170/433/1539669867171806.png" title="1539669867171806.png" alt="js 스레드 메커니즘 및 이벤트 메커니즘에 대한 자세한 소개(그림 및 텍스트)">다음 예는 매우 좋습니다. 이벤트 루프 설명 : </span></p><pre class="brush:php;toolbar:false">    setTimeout(function () {
      console.log('timeout 2222')
      alert('22222222')
    }, 2000)
    setTimeout(function () {
      console.log('timeout 1111')
      alert('1111111')
    }, 1000)
    setTimeout(function () {
      console.log('timeout() 00000')
    }, 0)//当指定的值小于 4 毫秒，则增加到 4ms（4ms 是 HTML5 标准指定的，对于 2010 年及之前的浏览器则是 10ms）
    function fn() {
      console.log('fn()')
    }
    fn()
    console.log('alert()之前')
    alert('------') //暂停当前主线程的执行, 同时暂停计时, 点击确定后, 恢复程序执行和计时
    console.log('alert()之后')

<input>
<button>计算</button>
<script>
  // 1 1 2 3 5 8    f(n) = f(n-1) + f(n-2)
  function fibonacci(n) {
    return n<=2 ? 1 : fibonacci(n-1) + fibonacci(n-2)  //递归调用
  }
  var input = document.getElementById(&#39;number&#39;)
  document.getElementById(&#39;btn&#39;).onclick = function () {
    var number = input.value
    var result = fibonacci(number)
    alert(result)
  }
</script>

var worker = new Worker('work.js');

  var input = document.getElementById('number')
  document.getElementById('btn').onclick = function () {
    var number = input.value
    //创建一个Worker对象
    var worker = new Worker('worker.js')
    // 绑定接收消息的监听
    worker.onmessage = function (event) {
      console.log('主线程接收分线程返回的数据: '+event.data)
      alert(event.data)
    }
    // 向分线程发送消息
    worker.postMessage(number)
    console.log('主线程向分线程发送数据: '+number)
  }
    console.log(this) // window

//worker.js文件
function fibonacci(n) {
  return n<p>这样当分线程在计算时，用户界面还可以操作，而且更早拿到计算后数据，响应速度更快了。</p><p style="text-align: center;"><img src="https://img.php.cn//upload/image/673/101/817/1539670027106347.gif" title="1539670027106347.gif" alt="js 스레드 메커니즘 및 이벤트 메커니즘에 대한 자세한 소개(그림 및 텍스트)"><span class="img-wrap"></span></p><p><strong>3. Web Workers的缺点</strong></p>