Как реализовать многопоточность в моем JavaScript?

Question

Мой сайт позволяет пользователям записывать холст, а также рисовать на холсте одновременно. если пользователи начнут записывать холст, а также начнут рисовать на холсте рисунок на холсте, он начнет лагировать. Мне говорят, что многопоточные веб-работники должны иметь возможность решить эту проблему. однако я не уверен, как мне начать.

Может ли кто-нибудь помочь мне, пожалуйста? что я должен положить в postmessage/onmessage?

var recordUrl; 
var audioUrl; 
var audioStream; 
var audiorecorder; 
var elementToShare = document.getElementById("elementToShare"); 
var recorder = RecordRTC(elementToShare, { 
    type: 'canvas' 
}); 

document.getElementById('start').onclick = function() { 

    /* 
    <script id="worker" type="javascript/worker"> 

    <!--M KY --> 
     multithreading 
     var blob = new Blob([document.getElementById('worker').textContent]); 
     var worker = new Worker(window.webkitURL.revokeObjectURL(blob)); 
     URL.revokeObjectURL(blob); 
     return worker; 

     worker.onmessage = function(event) { 

     } 

     worker.postnmessage = function(event) { 

     } 
     */ 
    $('#record').trigger('click'); 

    if (!audioStream) 
     navigator.getUserMedia(audioConstraints, function(stream) { 
      if (window.IsChrome) stream = new window.MediaStream(stream.getAudioTracks()); 
      audioStream = stream; 

      // "audio" is a default type 
      audiorecorder = window.RecordRTC(stream, { 
       type: 'audio', 
       bufferSize: typeof params.bufferSize == 'undefined' ? 16384 : params.bufferSize, 
       sampleRate: typeof params.sampleRate == 'undefined' ? 44100 : params.sampleRate, 
       leftChannel: params.leftChannel || false, 
       disableLogs: params.disableLogs || false 
      }); 
      audiorecorder.startRecording(); 
     }, function() {}); 
    else { 
     audio.src = URL.createObjectURL(audioStream); 
     audio.muted = true; 
     audio.play(); 
     if (audiorecorder) audiorecorder.startRecording(); 
    } 

    window.isAudio = true; 

    recorder.startRecording(); 
    document.getElementById('start').disabled = true; 
    setTimeout(function() { 
     document.getElementById('stop').disabled = false; 
    }, 1000); 
//worker.terminate(); 
// } 
}; 

холст код

<div id="cover"> 
           <!-- <canvas id="fakecanvas" width="890" height="1267" style="z-index: 2; position: absolute;left:18%"></canvas> --> 
           <canvas id="canvas" width="890" height="1267" style="z-index: 1; border:1px solid black; position: absolute;"></canvas> 
          </div>       
         </div> 
        </section>     
        <section id="section-2"> 
         <div style="width: 100%; height:5%; float:left;"> 
         <a id="capture2" onclick="capFunction2();"> 
          <input type="image" name="screenshot2" value="Save This Page" style="float: right; width:25px; height:25px;" src="img/camera.png"> 
         </a> 
         <script> 
         function downloadCanvas2(link, canvasId, filename) { 
          html2canvas([document.getElementById(canvasId)], { 
           onrendered: function(cvs2) { 
            //var canvasData = cvs2.toDataURL('image/png'); 
            var link = document.createElement("a"); 
            link.href = cvs2.toDataURL(); 
            link.download = filename; 
            link.click(); 
           } 
          }); 
         } 

         document.getElementById('capture2').addEventListener('click', function() { 
          var currentTime2 = new Date().YYYYMMDDHHMMSS(); 
          downloadCanvas2(this, 'viewer2', currentTime2 + '.jpg');  
          }, false); 
         </script> 

Answer 1

JavaScript однопоточен. Для каждого окна есть только один поток javascript, который часто называют «потоком обозревателя UI» («поток» не всегда является точным для всех браузеров).

Вопрос:

Как асинхронные события, как Ajax, SetTimeout происходит?

Браузер поставляется с внутренним циклом, называемым Event Loop, который проверяет очередь и обрабатывает & ее выполнение. Поэтому они запускаются только при открытии в процессе выполнения. Я могу написать длинную статью о том, как эта работа, но не вне контекста.

Так в чем же решение? Веб-работники?

Да, он может выполнить некоторые функции, которые выполняет многопоточность. Но он имеет ограничения

• Он не может получить доступ к DOM.

• Они не могут получить доступ к глобальным переменным или функциям js на главной странице .

• Доступ к некоторым объектам, как окна, документ & родителей ограничен

Таким образом, даже если вы хотите для того чтобы достигнуть многопоточности с веб-рабочих, которые могут понадобиться, чтобы изменить код и сделать его Event Driven программирования, а не кодирование данных.

Надеется, что это будет полезно для вас