기능을 비동기 적으로 실행하려면 첫 번째 방법은 확실히 Settimeout입니다.
예를 들면 : settimeout (function (/* 1s 후에 무언가를 수행하십시오*/) {}, 1000}
그렇다면 기능을 가장 빠르게 실행하려면 어떻게해야합니까?
될 것인가 :
settimeout (function ( /* 가능한 한 빨리 무언가를하십시오* /) {}, 0}불행히도, 설정 타임 아웃에서 UI 스레드를 방해 할 가능성을 피하기 위해 브라우저는 Settimeout의 최소 실행 시간 간격을 설정하고 다른 브라우저의 최소 실행 시간 간격이 다릅니다. Chrome에서 Settimeout 0의 실제 실행 시간 간격은 약 12ms입니다.
따라서 가능한 한 비동기 적으로 비동기식으로 함수를 실행하려면 속도를 높일 수있는 방법이 있습니까?
일반적으로 사용되는 비동기 실행 방법은 브라우저 측면을 살펴 보겠습니다.
SetImmediate :이 방법은 Settimeout 0보다 비동기 실행을 구현하고 실행 시간은 0ms에 가깝지만 IE/Node 만 지원합니다.
requestAnimationFrame :이 메소드는 종종 애니메이션 루프를 수행 할 때 사용됩니다. 이 방법은 브라우저가 UI를 새로 고칠 때만 실행됩니다. UI를 새로 고치는 최대 주파수는 일반적으로 60fps이므로 RequestAnimationFrame은 일반적으로 Settimeout 0보다 느립니다.
비동기 기능을 사용하는 것 외에도 비동기 호출을 구현할 수있는 몇 가지 방법이 있습니다.
OnMessage 사용 :
iframes와 통신 할 때 OnMessage 메소드가 종종 사용되지만 동일한 창 사후 관리자가 자체적으로 제공되면 어떻게됩니까? 실제로 기능을 비동기로 실행하는 것과 같습니다.
예를 들어:
var dosth = function () {} window.addeventListener ( "message", dosth, true); window.postmessage ( "", "*");또한 스크립트 태그를 사용하여 다음과 같은 기능의 비동기 실행을 구현할 수도 있습니다.
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 (winde function () {/* 버전 OnMessage*/}} else {return Window.setTimeout;}} ();