더 빠른 비동기식 실행(setTimeout 다중 브라우저)

만약 비동기적으로 함수를 실행하려면, 우리가 가장 먼저 생각하는 방법은 틀림없이 setTimeout일 것이다. 예를 들어 setTimeout(function(/* 1s 후에 무엇을 할 것인가 */) {}, 1000}
그럼 함수를 가장 빠르게 비동기적으로 수행해야 한다면?다음이 될 수 있습니까?

setTimeout(function( /*   */){},0}

안타깝게도 브라우저는 setTimeout 플러그인에 ui 라인이 끊길 수 있는 상황을 피하기 위해 setTimeout에 최소한의 실행 시간 간격을 설정했습니다. 브라우저마다 최소 실행 시간 간격이 다릅니다.chrome에서 setTimeout 0의 실제 실행 시간 간격은 대략 12ms 정도입니다.그렇다면 함수를 가장 빨리 다른 단계로 실행하려면 속도를 높일 수 있는 방법이 없을까요?
먼저 브라우저 쪽에서 어떤 비동기적인 실행 방법이 있는지 봅시다
setImmediate: 이 방법은 setTimeout 0보다 빠른 비동기 실행을 실현하고 실행 시간은 0ms에 가깝지만 IE/node만 지원합니다.
request Animation Frame: 애니메이션 순환을 할 때 이 방법을 자주 사용합니다. 이 방법은 브라우저가 ui를 리셋할 때만 실행됩니다. ui를 리셋하는 빈도는 최대 60fps이기 때문에 request Animation Frame은 일반적으로 set Timeout 0보다 느립니다.
비동기 함수를 사용하는 것 외에 또 일부 방법은 비동기 호출을 실현할 수 있다
onmessage 이용: iframe와 통신할 때 onmessage 방법을 자주 사용하지만, 같은 윈도우postMessage가 자신에게 있다면 어떨까요?사실 비동기적으로 하나의 기능을 실행한 셈이다. 예를 들어

var doSth = function(){}
window.addEventListener("message", doSth, true);
window.postMessage("", "*");



또한 script 라벨을 이용하여 함수의 비동기적인 실행을 실현할 수 있다. 예를 들어:


var newScript = document.createElement("script");
newScript.onreadystatechange = doSth;
document.documentElement.appendChild(newScript);


스크립트를 문서에 추가하면onreadystatechange를 실행하지만 이 방법은 IE 브라우저에서만 사용할 수 있습니다.
그럼 이 몇 가지 방법은 누가 가장 빠릅니까?
테스트를 해봤는데,
chrome 아래:
setImmediate: 사용할 수 없습니다.setTimeout 0:12ms onmessage:6ms onreadystatechange: 지원되지 않음
chrome에서 onmessage가 setTimeout 0보다 빠릅니다.
Firefox 아래:
setImmediate: 사용할 수 없습니다.setTimeout 0:7ms onmessage:7ms onreadystatechange: 지원되지 않음
Firefox에서 onmessage와 setTimeout 0은 속도가 비슷합니다.
IE9:
setImmediate: 사용할 수 없습니다.setTimeout 0:11ms onmessage:7ms 10ms onreadystatechange:2ms
IE9에서 onreadystatechange의 시간은 다른 두 가지보다 훨씬 빠르다.
전체적으로 setImmediate < readystatechange < onmessage < setTimeout 0 < requestAnimationFrame 때문에 우리는 비동기적인 기능을 신속하게 실행하는 방법을 간단하게 봉인할 수 있다.

var setZeroTimeout = (function(){
if(window.setImmediate){
//IE10+ ， setImmediate
return window.setImmediate;
}
else if("onreadystatechange" in document.createElement("script")){
return function(){/*  onreadystatechange  */}
}
else if(window.postMessage){
return function(){/*  onmessage  */}
}
else {
return window.setTimeout;
}

})();