Se queremos executar uma função de forma assíncrona, o primeiro método em que pensamos seria definitivamente o Settimeout
Por exemplo: setTimeout (function (/* faça algo após 1s*/) {}, 1000}
E daí se você quiser executar uma função de forma assíncrona a mais rápida?
Será:
setTimeout (function ( /* faça algo o mais rápido possível* /) {}, 0}Infelizmente, para evitar a possibilidade de tocar o thread da interface do usuário no Nest Settimeout, o navegador define o intervalo de tempo de execução mínimo para o Settimeout, e o intervalo de tempo de execução mínimo para diferentes navegadores é diferente. O intervalo de tempo de execução real do setTimeout 0 no Chrome é de cerca de 12ms.
Então, se você deseja executar uma função de forma assíncrona de forma assíncrona, existe alguma maneira de acelerar?
Vamos dar uma olhada no lado do navegador, quais são os métodos de execução assíncronos comumente usados
SetImediate: Este método implementa a execução assíncrona mais rapidamente que o Settimeout 0, com um tempo de execução mais próximo de 0ms, mas apenas o IE/Node o suporta.
RequestanimationFrame: Este método é frequentemente usado ao fazer loops de animação. Este método será executado apenas quando o navegador atualizar a interface do usuário. A frequência máxima de atualização da interface do usuário geralmente é de 60fps; portanto, o quadro de requestanimação geralmente é mais lento que o Settimeout 0.
Além de usar funções assíncronas, existem alguns métodos que podem implementar chamadas assíncronas.
Use OnMessage:
Ao se comunicar com o IFRAME, o método onMessage é frequentemente usado, mas o que acontece se a mesma janela pós -maquiagem for dada a si mesma? De fato, é equivalente a executar uma função de forma assíncrona
Por exemplo:
var DOSTH = function () {} window.addeventListener ("mensagem", dosth, true); window.postMessage ("", "*");Além disso, você também pode usar tags de script para implementar a execução assíncrona de funções, como:
Var Nexcript = Document.CreateElement ("Script"); Newscript.onReadyStatechange = Dosth; Document.DocumentElement.appendChild (Deatcript);A adição de script ao documento também será executada em OnreadyStateChange, mas esse método só pode ser usado em navegadores no IE.
Então, quem é o mais rápido com esses métodos?
Testou,
Sob Chrome:
SetImediate: não está disponível.
Settimeout 0: 12ms
OnMessage: 6ms
ONRADESTATATECHANGE: Não suportado
Sob Chrome, o onMessage é mais rápido que o setTimeout 0.
Firefox:
SetImediate: não está disponível.
Settimeout 0: 7ms
OnMessage: 7ms
ONRADESTATATECHANGE: Não suportado
Sob Firefox, OnMessage e Settimeout 0 estão na mesma velocidade.
IE9:
SetImediate: não está disponível.
Settimeout 0: 11ms
OnMessage: 7ms 10ms
ONRADESTATATECHANGE: 2ms
No IE9, o tempo onreadystatechange é muito mais rápido que os outros dois.
No geral, SetImediate <ReadyStatechange
Portanto, podemos simplesmente encapsular um método para executar rapidamente a função assíncrona:
var setzerOtimeout = (function () {if (window.setImediate) {// ie10+ versão, use o SetImedieReTurn nativo Window.setImediate;} else if ("onreadyStatechange" no document.createElement ("script")) {return function () {/* versão usando o verso function () {/* versão usando onmessage*/}} else {return window.settimeout;}}) ();