JavaScriptを使用して

他のヒント

大きな欠点の1つは、ブラウザの非互換性です。すべてのブラウザがリソースをDOMに正しく取得して組み込むわけではないため、このアプローチを使用するのは危険です。これは、スクリプトよりもStyleSheetsに当てはまります。

別の問題は、保守性の1つです。クライアント側にDOM要素を追加するための連結および書き込み文字列は、メンテナンスの悪夢になる可能性があります。 CreateElementなどのDOMメソッドを使用して、意味的に要素を作成することをお勧めします。

明らかな利点の1つは、リソースの条件付き使用をはるかに簡単にすることです。ロードするリソースを決定するロジックを使用すると、ページの帯域幅の消費と全体的な処理時間が短縮されます。 jquery $ .getScript（）などのライブラリコールを使用して、スクリプトとdocument.writeをロードします。利点は、このようなアプローチがよりクリーンであり、リクエストが完了したときにコードを実行するか、失敗することもできることです。

まあ、私はこれに帽子をリングに投げることもできます...

Googleの閉鎖ライブラリ、base.jsを調べると、そのdocument.writeが使用されていることがわかります。 writeScriptTag_() 関数。これは、「閉鎖」が提供する依存関係管理システムの重要な部分であり、複雑なマルチファイルのライブラリベースJavaScriptアプリケーションを作成する際に大きな利点です。ファイル/コードの前提条件が読み込み順序を決定できるようにします。私たちは現在、この手法を使用しており、ほとんど問題を抱えていません。 TBH、ブラウザの互換性について単一の問題はありませんでした。IE6/7/8、FF3/2、Safari 4/5、およびChrome最新の問題で定期的にテストします。

私たちがこれまでに持っていた唯一の欠点は、リソースを2回読み込んだり、ロードしたりしないことによって引き起こされる問題を追跡するのが難しいことです。ロードリソースの行為はプログラマティックであるため、プログラマティックエラーの対象となり、タグをHTMLに直接追加するのとは異なり、正確な読み込み順序が何であるかを確認するのは難しい場合があります。ただし、この問題は、閉鎖やDojoなどの何らかの形の依存関係管理システムを備えたライブラリを使用することにより、主に克服できます。

編集： 私はこの性質にいくつかのコメントをしましたが、私の答えに要約するのが最善だと思いました：Dojo.Require（）とjQuery.getScript（）にはいくつかの問題があります（どちらもAjaxリクエストと評価を最終的に実行します）。

Ajaxを介してロードすると、クロススクリプトがないことを意味します。つまり、サイトからのものではないJavaScriptのロードはありません。あなたが含めたい場合、これは問題になります https://ajax.googleapis.com 説明にリストされているとおり。
評価されたスクリプトは、JavaScriptデバッガーのページスクリプトのリストに表示されず、デバッグが非常に困難になります。 FireBugの最近のリリースでは、評価されたコードが表示されますが、ファイル名が失われ、ブレークポイントを退屈に設定する行為が退屈です。 AFAIK、WebKit JavaScriptコンソール、IE8開発者ツール しない 評価されたスクリプトを表示します。

各HTMLファイルでスクリプト参照を繰り返す必要はないという利点があります。欠点は、ブラウザです しなければならない メインJavaScriptファイルが他のファイルをロードする前に、フェッチして実行します。

これらのスクリプトを複数のページで使用する場合、1つのスクリプトを含めることを忘れないでください。スペースを節約するだけで、1つのページを使用する必要があると考えることができるという利点の1つがあると思います。

Google PagesSpeedでは、物事が遅くなるため、この手法を使用することを非常に落胆させます。あなたの連続した負荷とは別に script.js 他のすべての前に、別のキャッチがあります：

最新のブラウザは投機パーサーを使用して外部リソースをより効率的に発見します[...]これらのリソースのレンダリング。

また、これは、可能であればヘッド要素をより短くするためにSEO会社による推奨として書かれている可能性があるため、一意のコンテンツはドキュメントのトップに近いものであり、より高いテキスト対HTML比を作成します。それは聞こえますが、これを行うのに非常に良い方法ではないように、すべてがまるであります。メンテナンスがより時間のかかるものになりますが、ヘッド要素のサイズを縮小するために完全に必要と思われる場合、JavaScriptを単一の.jsファイルとCSSに単一の.cssファイルに凝縮することがおそらくより良いアプローチです。

大きな不利な点は、その追加です scriptsは、これらのスクリプトが完全にダウンロードされて実行されるまで、ドキュメントの処理を一時停止します（ブラウザが使用できると考えているため document.write）。 - これは応答性を傷つけます。

今ではスクリプトタグを正しく配置することをお勧めします </body>. 。もちろん、これは100％可能ではありませんが、使用している場合 unobtrusve javascript （必要な場合）、すべてのスクリプトをドキュメントの最後に尊重できます。

HTML5はを思いつきました async メインドキュメントがロードされた後にのみスクリプトを実行するためにブラウザが実行することを提案する属性。これは、多くのブラウザでスクリプト挿入されたスクリプトの動作ですが、それらのすべてではありません。

アドバイスします に対して 使用 document.write どんな犠牲を払っても。それがなくても、これによりサーバーに対する1つの追加のリクエストが発生します。（たとえば、リクエストの数を非難するのが好きです CSSスプライト.)

そして、はい、先に述べた他の人が前述したように、スクリップが無効になっている場合、あなたのページはCSSなしで表示されます（これは潜在的に使用できなくなります）。

JavaScriptがそうな場合無効 - <script> and <link> 要素はまったく追加されません。
JavaScript INIT機能をページの下部に配置し（これは良い練習です）、CSSをJavaScriptにリンクすると、CSS負荷の前にある程度の遅延を引き起こす可能性があります（壊れたレイアウトが短時間表示されます）。

ライセンス： CC-BY-SA と帰属

所属していません StackOverflow