方法：JSを使用した非同期HTML / JSコードの置換

広告ネットワーク管理システムの主な目的は、これらのネットワークのコードをエンドユーザーサイトのコードに挿入することです。 一般に、このようなシステムは、さまざまな形式の広告の有効性をテストするA / Bから、いくつかのタイプの広告資料をいくつかのサイトに並行して配置したり、それらに追加の効果を追加する（主にアニメーション）など、幅広い問題を解決するために使用できます。 サイトでの広告の管理を簡素化し、分析プロセスをデバッグするには、すべてが必要です。これは最終的に、トラフィック販売時のオンライン広告からの収益の増加につながります。

同時に、一般的な場合、どのコードが広告システムに特に関連しており、どのコードがそうでないかを説明することは実際上不可能であるため、今日のトピックでは、より一般的なタスク-任意のHTML / JSコードをエンドユーザーサイトコードに導入することを検討します。

挑戦する

フォームのコンテナがあり、サーバーから受信し、HTMLマークアップとJSスクリプト（非同期または同期のいずれか）を含むコードをロードする必要があるとします。

タスクは、同じページに同時に存在するn個の同様のコンテナに対して、結果のソリューションの健全性を保証することです。

例で説明しましょう：

 : <script id=1> document.write("<" + "script id=2>" + "document.write(\"<\" + \"div>someresult1<\" + \"/div>\");" + "document.write(\"<\" + \"div>someresult2<\" + \"/div>\");" + "<" + "/script>"); document.write("<" + "script id=3 src='somescript1.js'>" + "<" + "/script>"); document.write("<" + "script id=4 src='somescript1.js'>" + "<" + "/script>"); document.write("<" + "script id=5>" + "document.write(\"<\" + \"div>someresult3<\" + \"/div>\");" + "document.write(\"<\" + \"div>someresult4<\" + \"/div>\");" + "<" + "/script>"); </script> somescript1.js: document.write("<" + "div>someresult1.1<" + "/div>"); document.write("<" + "script class='loaded' src='somescript2.js'>" + "document.write(\"<\" + \"div>someresult1.2<\" + \"/div>\")" + "<" + "/script>"); somescript2.js: document.write("<" + "div>someresult2.1<" + "/div>"); 

この場合、スクリプトsomescript1.jsとsomescript2.jsは、それぞれネストの第1レベルと第2レベルのスクリプトの例です。 さらに、 somescript1.jsは、読み込まれたスクリプトの本文にコードがある場合のシステムの動作をモデル化します。

開発するシステムは、次のコードをコンテナにロードする必要があります。

 <script id="1"> document.write("<" + "script id=2>" + "document.write(\"<\" + \"div>someresult1<\" + \"/div>\");" + "document.write(\"<\" + \"div>someresult2<\" + \"/div>\");" + "<" + "/script>"); document.write("<" + "script id=3 src='somescript1.js'>" + "<" + "/script>"); document.write("<" + "script id=4 src='somescript1.js'>" + "<" + "/script>"); document.write("<" + "script id=5>" + "document.write(\"<\" + \"div>someresult3<\" + \"/div>\");" + "document.write(\"<\" + \"div>someresult4<\" + \"/div>\");" + "<" + "/script>"); </script> <script id="2"> document.write("<" + "div>someresult1<" + "/div>"); document.write("<" + "div>someresult2<" + "/div>"); </script> <div>someresult1</div> <div>someresult2</div> <script id="3" src="somescript1.js"></script> <div>someresult1.1</div> <script class="loaded" src="somescript2.js"> document.write("<" + "div>someresult1.2<" + "/div>") </script> <div>someresult2.1</div> <script id="4" src="somescript1.js"></script> <div>someresult1.1</div> <script class="loaded" src="somescript2.js"> document.write("<" + "div>someresult1.2<" + "/div>") </script> <div>someresult2.1</div> <script id="5"> document.write("<" + "div>someresult3<" + "/div>"); document.write("<" + "div>someresult4<" + "/div>"); </script> <div>someresult3</div> <div>someresult4</div> 

解決策

さらに説明を簡単にするために、追加の用語を紹介します。

• 匿名スクリプトは、「src」属性の有無にかかわらずJSスクリプトです。
• ダウンロード可能なスクリプト -JSスクリプト。サードパーティのサーバーからロードされたため、空でない属性「src」を持ちます。
• 出力ポインタ-document.writeによって生成されたコンテンツが挿入される要素を示します。

HTMLコードを貼り付けても問題は発生しませんが、JSスクリプトを挿入すると、いくつかの落とし穴が見つかります。

• 同期スクリプトには、非同期モードでは機能しないdocument.writeが含まれている場合があります。
• スクリプトはダウンロードできるため、テキストを分析することはできません。
• ダウンロード可能なスクリプトはグローバルオブジェクトにのみアクセスするため、環境設定はグローバルのみになります。
• スクリプトは他のスクリプトを生成できます。 この場合、同期スクリプトはdocument.writeを使用する機能を保持する他の同期スクリプトを生成できます。

かなり明白な方法は、グローバルなdocument.writeを独自の関数に置き換えることです。これは同様の方法で機能します。

 document.write = function(html){ … }; 

ここで、一般に、1つの点を除いて、すべてが明確です：作業の結果、コードを正確にどこに挿入する必要がありますか？

JavaScriptはシングルスレッドです。つまり、匿名の同期スクリプトの場合、次のソリューションは単純に頼みます。サーバーからの応答を受信するときに、置換関数によって使用されるコンテナー（入力ポインター）のグローバル属性を設定します。 すべてのスクリプトが同期および匿名である場合、それらを順番に置き換える必要があります。これにより、出力ポインターが正しくシフトされると、正しい結果が得られます。

その結果、置換されたコードを処理するサイクル全体が、実行の流れに途切れることなく実装され、疑問が生じることはありません。

ヒューストン、問題があります

ダウンロード可能なスクリプトに遭遇した場合、すべてがそれほど簡単で単純ではありません。 このような状況では、現在のロード可能なスクリプトをロードして最終的に実行するまで、他のすべてのスクリプトの実行を停止することは論理的に思えます。 このスキームは、onloadイベントのおかげで機能することが保証されていますが、そのようなソリューションの速度は非常に遅いため、より良い方法を見つける必要があります。

そして、そのような解決策がありますが、それはInterner Explorerファミリーのブラウザでのみ動作します-これはonreadystatechangeイベントですおよび-必要に応じて-スクリプトの完了後に元の出力ポインターを復元します。 残念なことに、IE以外のブラウザを扱っている場合、この方法は使用できません。Microsoftの頭脳を除き、スクリプトのロード後、実行前に発生するイベントのサポートはどこにもないからです。

残る唯一の方法があります-document.writeを置き換える関数が、それがどのスクリプトから呼び出されるかを自分で決定できるようにするためです。 また、最新のブラウザ（IE11、Firefox、Chrome、Operaの最新バージョン）では、ダウンロード可能なスクリプトに対してこれが可能ですが、いくつかの注意事項があります。 このようなスクリプトはグローバル名前空間で実行されるため、読み込まれた各スクリプトに対して関数のコピーを作成することはできません。 これは、入力パラメータ（文字列）のみに基づいてdocument.writeの作業結果を挿入する場所を決定できることを意味しているように思われます。

これは一見しただけです。 実際、上記のすべてのブラウザーで、スプーフィングされたdocument.writeを呼び出したスクリプトのロード元のアドレスに到達することが可能です。 これはスタックを介して行われ、そこから探しているアドレスを取得し、このアドレスに目的のスクリプトを既にインストールできます。

別の難しさ

すべてがうまくいくようです-問題の優れた解決策を見つけましたが、再び困難が生じます。 まず、いくつかの同一のスクリプトがある場合、事前に決められた順序でそれらの代替実行を何らかの形で保証する必要があります。 2番目の点-スクリプトにdocument.writeの呼び出しが複数含まれている場合、標準の場合、各関数は最後に作成された要素ではなく「own」スクリプトの直後にデータを書き込むため、それぞれの結果の正確性を何らかの方法で保証する必要がありますスクリプトからの以前のdocument.write 。

特に、関数がトリガーされた後、このスクリプトから作成された最後の要素へのリンクも追加する必要があります。

最終段階

考えられるシナリオがもう1つあります。1つのコードと、匿名でダウンロード可能なスクリプトの存在です。 通常の条件下ではdocument.writeは置換なしの同期ストリームでのみ使用できるため、実行可能コードが通常の順次実行中と同じ結果を得るためには、すべてのスクリプトが順番に読み込まれて実行されるようにする必要があります。

匿名スクリプトの場合、これは明らかにそれ自体で発生します。ダウンロード可能なスクリプトの場合、ダウンロードの待機中にdocument.writeスプーフィングのフローを中断し、onloadイベントを介して復元する必要があります。

アクションのシーケンスを理解するために、トピックの最初から例を考えてみましょう。

コードを挿入する手段として、置換された独自のdocument.writeを使用することは論理的です。これは、結果を貼り付ける場所がすでにわかっているためです。 したがって、次の実行順序を取得します。

1. 挿入されたスクリプトはdocument.writeを呼び出して、最初の2つのテストdivを作成するスクリプト2を作成します。
2. スクリプト2はdocument.writeを呼び出してsomeresult1とsomeresult2を作成します。
3. スクリプト2の実行が終了すると、制御は元のdocument.writeに戻ります。 同時に、置換がグローバルであるという事実により、出力ポインターは作成されたsomeresult2を参照します。 したがって、スクリプト1は要素の作成を続けます。 これで、スクリプト3が作成され、ダウンロード可能なので、スクリプト3のonloadがトリガーされる前にdocument.writeの実行が中断されます。以前は、document.writeは同じロードパスの存在について他のすべてのスクリプトをチェックしてマークします。
4. スクリプト3が読み込まれ、document.writeが呼び出されます。このスクリプトから、ブラウザに応じて記述されたメソッドの1つがdocument.writeの出力ポインタを検出します。 IEでは、出力ポインタは、コードが実行される前にロードされるときに置き換えられます。 最新のブラウザでは、document.writeの呼び出し時にスタックを直接使用します。 残りの部分については、出力ポイントの知識は、スクリプトの実行順序の予測可能性（ブロッキング）によって提供されます。 Document.writeはsomeresult1.1を挿入し、スクリプト3に出力ポインターをマークします。
5. スクリプト3は、それを呼び出したスクリプトを定義するdocument.writeを呼び出し、前の呼び出しで作成されたマークに従って出力ポインターをシフトし、ロードされたスクリプトとsomeresult1.2を作成します。 ロードされたスクリプトがロードされ、スクリプトが起動されるまで、実行は中断されます。
6. ロードされたスクリプトはロードされ、document.writeを呼び出します。これは、出力ポインターを定義し、someresult2.1を作成します。
7. ロードされたスクリプトスクリプトonloadが起動し、スクリプト3のdocument.write処理コードに制御を返し、スクリプト3のonloadイベントを終了してトリガーし、スクリプト1に制御を返します。
8. スクリプト1はスクリプト4を作成します。これは、制御が戻る時点でdocument.writeのグローバル性が原因で、document.write関数によって実行される操作を考慮して出力ポインターが修正されます。 したがって、スクリプト4は、すでに作成されたコードの最後に表示されます。 document.writeの実行は、スクリプト3がまだ作成されていないことに注意して中断されます。
9. スクリプト4については、スクリプト3の手順全体が既に説明されています（4〜8項）。
10. 制御はスクリプト1に戻り、スクリプト5が作成されます。
11. スクリプト5はdocument.writeを呼び出してsomeresult3およびsomeresult4を作成します。
12. 管理はスクリプト1に戻ります。
13. スクリプト1が終了します。

外部から一目見ただけで、説明したシーケンスには複雑なものはないように見えますが、実行スレッドが6回中断されたことを覚えておく必要があります。

• スクリプト3および4をロードするには（明らかに、即座に、しかし正式にはこれもギャップであり、何かがそれに食い込むことができます）。
• スクリプト3と4の内部（例ではそれらの間にギャップはありませんが、これはダウンロード可能なスクリプトであり、その構造は一般に不明であるため）
• 2つのロードされたスクリプトと、2番目のスクリプトは正式ではありますが、実行にギャップがあります。

そして、主要なトリックは、document.writeを呼び出すときに常に正しい出力ポインターを使用することです。

おわりに

次に、 nコードを同時に挿入するために設計された最終アドインを検討します。 原則として、考慮されるアルゴリズムにはマルチスレッド化に対する明らかな禁忌はありません。スクリプトチェーンとさまざまなコンテナの現在の出力ポインタを格納する構造は、独自のものでなければならないということを予約する必要があります。 これは、 document.write関数だけでなく、コンテキストを準備するディスパッチャーで置き換え、その後でのみアナログdocument.writeを呼び出すことを意味しdocument.write 。

したがって、2つの実装スキームを提供できます：アナログdocument.writeはオブジェクトである必要があり、そのようなオブジェクトのnインスタンスを制御するディスパッチャーを使用するか、 nコンテキストの配列を格納し、ディスパッチャーはこのための現在のコンテキストへのポインターを単に設定しますdocument.write類似物。

したがって、サンプルコードをインストールしようとしているコンテナが2つあると仮定した場合、実行順序はほぼ同じになります。ただし、実行スレッドが中断した時点で、2番目のコンテナがくさび状になり、コンテキストまたは作業オブジェクトが変更されます。 たとえば、手順3の後、最初のコンテナについては2番目のコンテナの手順1と2が続きます。 ステップ3では、アルゴリズムは、まったく同じsrcを持つスクリプトがすでにロードされていることを検出し、実行を中止して、実行を待機する必要があります。 最初のコンテナはステップ5まで実行され、その後、待機中の2番目のコンテナに制御を渡し、ステップ3から引き続き実行されます。

将来、最初または2番目のコンテナのどちらかが次のブレークポイントまで実行を継続します（どちらが早く実行を終了するかに応じて）。 追加のシーケンスはすでに検討されており、新しいものではありません。

今日は以上です！ ご清聴ありがとうございました。コメントの質問にお答えします。