HTMLの文字列をXHRで動的に取得してきて、それをdocument.bodyなんかに突っ込む場合があると思います。
その時に文字列中にscriptタグが含まれる場合、elm.innerHTML = html;ってしてもscriptは実行されません。
jQuery.fn.loadはそのへんが考慮されていてscriptも実行してくれます。で、どうやってるのかなーとコード読んでみたのでそのメモ。
- 取得したHTML文字列を一旦div.innerHTMLに入れる
- div.childNodesをfragmentに順番にappendChildする
- fragmentからquerySelectorAll('script')でscriptタグの一覧を取得する
- scriptタグを捜査
- src指定されているものはXHR(sync)でJSのコードを取得してscriptタグを作ってdocument.headに追加して実行
- src指定じゃないものはtextContentでJSのコードを取得してscriptタグを作ってdocument.headに追加して実行
という感じになってました。 へーと思いながら見てたんですが、JSのコード取得をsyncで順番に行っているのでsrc指定のJSが大量に含まれているとjQuery.fn.loadの時間がすごく掛かりそう(UIをブロックする)
というわけでJSのコードを非同期で並列取得する版を作れば捗りそう。
