JavaScript에서 멀티 스레딩 및 비동기를 수행하는 다른 방법
HTML5 JavaScript 이전에는 페이지 당 하나의 스레드 만 실행할 수있었습니다.
와 비동기 실행 시뮬레이션 일부 해키 방법 있었다 수율은 , setTimeout(), setInterval(), XMLHttpRequest또는 이벤트 핸들러 (예와 본 게시물 마지막 참조 수율 및 setTimeout()).
그러나 HTML5에서는 이제 Worker Threads를 사용하여 함수 실행을 병렬화 할 수 있습니다. 다음은 사용 예입니다.
실제 멀티 스레딩
멀티 스레딩 : JavaScript 작업자 스레드
HTML5 에는 Web Worker Threads가 도입되었습니다 ( 브라우저 호환성 참조 ).
참고 : IE9 및 이전 버전은이를 지원하지 않습니다.
이 작업자 스레드는 페이지 성능에 영향을주지 않으면 서 백그라운드에서 실행되는 JavaScript 스레드입니다. Web Worker 에 대한 자세한 내용은 설명서 또는 이 자습서를 참조하십시오 .
다음은 MAX_VALUE로 계산되고 현재 계산 된 값을 페이지에 표시하는 3 개의 Web Worker 스레드가있는 간단한 예입니다.
//As a worker normally take another JavaScript file to execute we convert the function in an URL: http://stackoverflow.com/a/16799132/2576706
function getScriptPath(foo){ return window.URL.createObjectURL(new Blob([foo.toString().match(/^\s*function\s*\(\s*\)\s*\{(([\s\S](?!\}$))*[\s\S])/)[1]],{type:'text/javascript'})); }
var MAX_VALUE = 10000;
/*
* Here are the workers
*/
//Worker 1
var worker1 = new Worker(getScriptPath(function(){
self.addEventListener('message', function(e) {
var value = 0;
while(value <= e.data){
self.postMessage(value);
value++;
}
}, false);
}));
//We add a listener to the worker to get the response and show it in the page
worker1.addEventListener('message', function(e) {
document.getElementById("result1").innerHTML = e.data;
}, false);
//Worker 2
var worker2 = new Worker(getScriptPath(function(){
self.addEventListener('message', function(e) {
var value = 0;
while(value <= e.data){
self.postMessage(value);
value++;
}
}, false);
}));
worker2.addEventListener('message', function(e) {
document.getElementById("result2").innerHTML = e.data;
}, false);
//Worker 3
var worker3 = new Worker(getScriptPath(function(){
self.addEventListener('message', function(e) {
var value = 0;
while(value <= e.data){
self.postMessage(value);
value++;
}
}, false);
}));
worker3.addEventListener('message', function(e) {
document.getElementById("result3").innerHTML = e.data;
}, false);
// Start and send data to our worker.
worker1.postMessage(MAX_VALUE);
worker2.postMessage(MAX_VALUE);
worker3.postMessage(MAX_VALUE);
<div id="result1"></div>
<div id="result2"></div>
<div id="result3"></div>
세 개의 스레드가 동시성으로 실행되고 현재 값을 페이지에 인쇄하는 것을 볼 수 있습니다. 그들은 분리 된 스레드로 백그라운드에서 실행되기 때문에 페이지를 고정시키지 않습니다.
멀티 스레딩 : 여러 iframe 사용
이를 달성하는 또 다른 방법은 여러 개의 iframe 을 사용하는 것입니다. 각 iframe 은 스레드를 실행합니다. 우리는 줄 수있는 iframe이 URL과에 의해 일부 매개 변수 iframe이이 결과를 얻고 (뒷면을 인쇄하기 위해 자신의 부모와 통신 할 수 iframe이이 같은 도메인에 있어야합니다).
이 예제는 모든 브라우저에서 작동하지 않습니다! iframe은 일반적으로 기본 페이지와 동일한 스레드 / 프로세스로 실행되지만 Firefox와 Chromium은 다르게 처리하는 것으로 보입니다.
코드 스 니펫은 여러 HTML 파일을 지원하지 않으므로 여기에 다른 코드를 제공합니다.
index.html :
//The 3 iframes containing the code (take the thread id in param)
<iframe id="threadFrame1" src="thread.html?id=1"></iframe>
<iframe id="threadFrame2" src="thread.html?id=2"></iframe>
<iframe id="threadFrame3" src="thread.html?id=3"></iframe>
//Divs that shows the result
<div id="result1"></div>
<div id="result2"></div>
<div id="result3"></div>
<script>
//This function is called by each iframe
function threadResult(threadId, result) {
document.getElementById("result" + threadId).innerHTML = result;
}
</script>
thread.html :
//Get the parameters in the URL: http://stackoverflow.com/a/1099670/2576706
function getQueryParams(paramName) {
var qs = document.location.search.split('+').join(' ');
var params = {}, tokens, re = /[?&]?([^=]+)=([^&]*)/g;
while (tokens = re.exec(qs)) {
params[decodeURIComponent(tokens[1])] = decodeURIComponent(tokens[2]);
}
return params[paramName];
}
//The thread code (get the id from the URL, we can pass other parameters as needed)
var MAX_VALUE = 100000;
(function thread() {
var threadId = getQueryParams('id');
for(var i=0; i<MAX_VALUE; i++){
parent.threadResult(threadId, i);
}
})();
멀티 스레딩 시뮬레이션
단일 스레드 : setTimeout ()을 사용하여 JavaScript 동시성을 에뮬레이션
'순진한'방법은 다음 setTimeout()과 같이 함수를 차례로 실행하는 것입니다 .
setTimeout(function(){ /* Some tasks */ }, 0);
setTimeout(function(){ /* Some tasks */ }, 0);
[...]
그러나이 방법 은 각 작업이 하나씩 실행되므로 작동하지 않습니다 .
다음과 같이 함수를 재귀 적으로 호출하여 비동기 실행을 시뮬레이션 할 수 있습니다.
var MAX_VALUE = 10000;
function thread1(value, maxValue){
var me = this;
document.getElementById("result1").innerHTML = value;
value++;
//Continue execution
if(value<=maxValue)
setTimeout(function () { me.thread1(value, maxValue); }, 0);
}
function thread2(value, maxValue){
var me = this;
document.getElementById("result2").innerHTML = value;
value++;
if(value<=maxValue)
setTimeout(function () { me.thread2(value, maxValue); }, 0);
}
function thread3(value, maxValue){
var me = this;
document.getElementById("result3").innerHTML = value;
value++;
if(value<=maxValue)
setTimeout(function () { me.thread3(value, maxValue); }, 0);
}
thread1(0, MAX_VALUE);
thread2(0, MAX_VALUE);
thread3(0, MAX_VALUE);
<div id="result1"></div>
<div id="result2"></div>
<div id="result3"></div>
보시다시피이 두 번째 방법은 매우 느리고 메인 스레드를 사용하여 기능을 실행하기 때문에 브라우저를 정지시킵니다.
단일 스레드 : 수율로 JavaScript 동시성 에뮬레이션
Yield 는 ECMAScript 6 의 새로운 기능으로 Firefox 및 Chrome의 가장 오래된 버전에서만 작동합니다 (Chrome에서는 chrome : // flags / # enable-javascript-harmony에 나타나는 Experimental JavaScript 를 활성화해야 함).
yield 키워드는 생성기 함수 실행을 일시 중지시키고 yield 키워드 다음에 나오는 표현식의 값은 생성자의 호출자에게 반환됩니다. return 키워드의 생성기 기반 버전으로 생각할 수 있습니다.
생성기를 사용하면 함수 실행을 일시 중단하고 나중에 다시 시작할 수 있습니다. 발전기는 trampolining 이라는 기술로 기능을 예약하는 데 사용할 수 있습니다 .
예를 들면 다음과 같습니다.
var MAX_VALUE = 10000;
Scheduler = {
_tasks: [],
add: function(func){
this._tasks.push(func);
},
start: function(){
var tasks = this._tasks;
var length = tasks.length;
while(length>0){
for(var i=0; i<length; i++){
var res = tasks[i].next();
if(res.done){
tasks.splice(i, 1);
length--;
i--;
}
}
}
}
}
function* updateUI(threadID, maxValue) {
var value = 0;
while(value<=maxValue){
yield document.getElementById("result" + threadID).innerHTML = value;
value++;
}
}
Scheduler.add(updateUI(1, MAX_VALUE));
Scheduler.add(updateUI(2, MAX_VALUE));
Scheduler.add(updateUI(3, MAX_VALUE));
Scheduler.start()
<div id="result1"></div>
<div id="result2"></div>
<div id="result3"></div>