2013年07月09日

2013 07.09 Tue


document.writeを使うと、挿入したスクリプトより下の全てのDOM要素はスクリプトの処理が完了するまでレンダリングがブロックされるという問題点があります。また、他の動的読み込みもブロックします。

結果として、ページの表示速度が遅くなる可能性が大きくなります。

document.writeを使用せず、document.getElementById('hoge').innerHTMLなど代替の記述を取れば簡単に済むのですが、ブログパーツや広告スクリプトなど自分で弄り様のない外部ファイルなどの場合は厄介です。


jQueryを利用してdocument.writeを非同期(動的)に読み込み書き出す記述をメモ。
 
<div class="a1"></div>
<div id="b1"></div>

<script type="text/javascript">
(function(){
var alts=[];
document._write=document.write; //document._writeに代入する
document.write=function(s){alts.push(s);};
$.getScript('//a1.js', function(){  //1つ目の外部スクリプトファイル
$('.a1').html(alts.join(''));  //表示させたいタグ
$.getScript('//b1.js', function(){  //2つ目の外部スクリプトファイル
$('#b1').html(alts.join(''));  //表示させたいタグ
document.write=document._write;  //document.writeに戻す
});   //2つ目閉じ
});    //1つ目閉じ
})();
</script>


初キャッシュ時にjQueryファイルを読み込むクッションが入りますが、レンダリングが止まることは無くなります。

このスクリプトの実行中は全てのdocument.writeが溜め込まれるので、他のdocument.writeを使用するスクリプトファイルを同時に読み込むと表示がおかしくなるので注意が必要です。


コチラのサイト様の案を参考にさせて頂きました
http://p2b.jp/index.php?UID=1153728573

お疲れさまでした。
参考になりましたらソーシャルメディアで共有してくださいませ。
posted by こさめ
edit  re
カテゴリ
インターネット>ブラウザ・WEBメール(24)
インターネット>Firefoxアドオン、設定(15)
インターネット>Proxomitronフィルター(32)
インターネット>ブログ、WEBサービス(53)
インターネット>アフィリエイト・ポイントサイト(27)
インターネット>楽天、ポイントあれこれ(5)
インターネット>Windows最適設定(32)
インターネット>インターネット設定(17)
インターネット>デスクトップ改造・拡張(7)
インターネット>セキュリティソフト(6)
ブログカスタマイズ>カテゴリー、記事一覧系(38)
ブログカスタマイズ>jQuery(Script)文字系(23)
ブログカスタマイズ>CSS(Script)デザイン(28)
ブログカスタマイズ>ブログパーツ(7)
ブログカスタマイズ>携帯モバイル系(3)
ブログカスタマイズ>SEO・アクセスアップ(31)
マルチメディア>Brackets(5)
マルチメディア>画像系ソフト(6)
マルチメディア>DVD・動画プレイヤー(15)
マルチメディア>動画編集ソフト(6)
マルチメディア>音楽再生プレイヤー(16)
マルチメディア>ネットラジオ配信・編集(3)
マルチメディア>P2Pテレビソフト(4)
マルチメディア>おもしろ動画・感動動画(25)
デザイン>フリー素材 画像(5)
デザイン>HP・ブログ フリー素材(6)
デザイン>イラスト(非素材)(8)
デザイン>作詞作曲編曲MP3(5)
雑記>PC部品・音楽機材(7)
雑記>映画・アニメ・漫画・芸能(14)
雑記>どうでもいい雑学知識(6)
雑記>ゲーム(6)
雑記>スマホ・携帯電話(6)
雑記>カーナビ・ETC(3)
雑記>ネット銀行とか(2)
雑記>18禁?ちょいエロネタ(3)

 (C) 2006 - kosame All rights.
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。