files/ja/games/techniques/async_scripts/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

---
title: asm.js の非同期スクリプト
slug: Games/Techniques/Async_scripts
tags:
  - Games
  - JavaScript
  - asm.js
  - async
translation_of: Games/Techniques/Async_scripts
---
<div>{{GamesSidebar}}</div><div>{{IncludeSubnav("/ja/docs/Games")}}</div>

<div class="summary">
<p><span class="seoSummary">全ての中~大規模ゲームでは、コンパイル処理を最適化してブラウザを最大限柔軟にする、非同期スクリプトとして <a href="/ja/docs/Games/Tools/asm.js">asm.js</a> コードをコンパイルします。Gecko では、非同期コンパイルによって、ゲームのロード時に JavaScript エンジンがメインスレッド外で asm.js をコンパイルし、生成した機械語コードをキャッシュしてそれ以降のロード時にコンパイル不要となります(Firefox 28から)。違いを見るには、<code>about:config</code> で <code>javascript.options.parallel_parsing</code> を反転させてください。</span></p>
</div>

<h2 id="非同期を動作させる">非同期を動作させる</h2>

<p>非同期のコンパイルは簡単です: JavaScript を書く時に、単に<code> async</code> 属性を使います:</p>

<pre class="brush: js">&lt;script async src="file.js"&gt;&lt;/script&gt;</pre>

<p>あるいは、スクリプトで同じことを行います:</p>

<pre class="brush: js">var script = document.createElement('script');
script.src = "file.js";
document.body.appendChild(script);</pre>

<p>(スクリプトによって生成されるスクリプトはデフォルトで非同期です。)  デフォルトの HTML シェル Emscripten は、後者を生成します。</p>

<h2 id="非同期とそうでない時">非同期とそうでない時?</h2>

<p>スクリプトが非同期で *ない* 、よく似た状況 (<a href="http://www.w3.org/TR/html5/scripting-1.html">仕様に定義されている</a>通り) では次の通りです:</p>

<pre class="brush: js">&lt;script async&gt;code&lt;/script&gt;</pre>

<p>および</p>

<pre class="brush: js">var script = document.createElement('script');
script.innerHTML = "code";
document.body.appendChild(script);</pre>

<p>両方とも 'インライン' スクリプトと考えられ、コンパイルされて、すぐに実行されます。</p>

<p>コードが JS 文字列内にあった場合はどうでしょう? <code>eval</code> や <code>innerHTML</code>(両方とも同期コンパイルを起動します)を使う代わりに、 オブジェクトURLと一緒の Blob を使います:</p>

<pre class="brush: js">var blob = new Blob([codeString]);
var script = document.createElement('script');
var url = URL.createObjectURL(blob);
script.onload = script.onerror = function() { URL.revokeObjectURL(url); };
script.src = url;
document.body.appendChild(script);</pre>

<p><code>innerHTML</code> ではなく <code>src</code>　をセットすると、スクリプトが非同期になります。</p>