Asynchrone Skripte für asm.js
Jedes mittelgroße oder große Spiel sollte asm.js-Code als Teil eines asynchronen Skripts kompilieren, um dem Browser die maximale Flexibilität zu geben, den Kompilierungsprozess zu optimieren. In Gecko ermöglicht die asynchrone Kompilierung der JavaScript-Engine, das asm.js abseits des Hauptthreads zu kompilieren, während das Spiel geladen wird und den generierten Maschinen-Code zu cachen, sodass das Spiel bei folgenden Laden nicht erneut kompiliert werden muss (ab Firefox 28). Um den Unterschied zu sehen, schalten Sie javascript.options.parallel_parsing in about:config um.
Asynchron in Aktion setzen
Die asynchrone Kompilierung zu erhalten, ist einfach: Wenn Sie Ihr JavaScript schreiben, verwenden Sie einfach das async-Attribut, so wie hier:
<script async src="file.js"></script>
oder, um dasselbe über Skript zu tun:
const script = document.createElement("script");
script.src = "file.js";
document.body.appendChild(script);
(Skripte, die aus Skripten erzeugt werden, sind standardmäßig async.) Die standardmäßige HTML-Hülle, die Emscripten generiert, produziert Letzteres.
Wann ist async nicht async?
Zwei häufige Situationen, in denen ein Skript nicht async ist (wie vom HTML-Spezifikationsentwurf definiert), sind:
<script async>
// Inline JavaScript code
</script>
und
const script = document.createElement("script");
script.textContent = "// Inline JavaScript code";
document.body.appendChild(script);
Beide werden als 'Inline'-Skripte gezählt und werden sofort kompiliert und ausgeführt.
Was, wenn Ihr Code in einem JS-String ist? Anstatt eval oder innerHTML zu verwenden, die beide eine synchrone Kompilierung auslösen, sollten Sie ein Blob mit einer Objekt-URL verwenden:
const blob = new Blob([codeString]);
const script = document.createElement("script");
const url = URL.createObjectURL(blob);
script.onload = script.onerror = () => URL.revokeObjectURL(url);
script.src = url;
document.body.appendChild(script);
Das Setzen von src anstatt von innerHTML ist das, was dieses Skript asynchron macht.