0

「Degrading Script Tags」http://ejohn.org/blog/degrading-script-tags/と Script DOM Element の組み合わせは、外部 JavaScript を非同期的にロードし、インライン コードと結合するための優れたパターンです。

Steve Souders は、この組み合わせについて次の記事でうまく説明しています。

基本的に、ページ上のスクリプトは、外部スクリプトが読み込まれると、外部スクリプトによってトリガーされます。外部スクリプトがダウンロードされたときに実行されるスクリプトがイベント ハンドラーを追加しようとするとどうなるのだろうと思っていました。DOM の読み込みが完了していない可能性があるため、イベント ハンドラーの追加が失敗する可能性があります。

ただし、Steve Souders の記事は非常に詳細で、Lazy Loading についても説明しています。つまり、ページが読み込まれるまで外部スクリプトはダウンロードされません (DOM に追加されるスクリプト要素は window.onload 内で行われるため)。これにより、イベント ハンドラーの追加が確実に機能するようになります。

すべてがうまくいっているように見えるかもしれませんが、ちょっとした問題が残っています。ページが読み込まれるのを待っていると、ユーザーはページと対話し、イベント ハンドラーが追加される前にページを離れる可能性さえあります。

私のニグルは有効な懸念事項ですか?もしそうなら、それを解決するための堅牢な方法はありますか?

ありがとう、ポール

4

1 に答える 1

0

読み込み中にスクリプト要素を DOM に追加できます。インライン スクリプトで head 要素への参照を取得し、アセットを挿入するだけです。このようにして、DOM のレンダリング中にブラウザーが外部スクリプトをロードするようにトリガーします。

その通りです。挿入されたスクリプトがメモリに読み込まれるからといって、DOMContentLoaded イベントが発生したわけではないからです。すべての外部アセットがロードされたときに発生するコールバックで DOM 関連の何かを行うには、そのイベントをリッスンする必要があります。

于 2013-07-19T11:53:44.957 に答える