scriptのdefer/asyncを理解し、ページの高速化方法を探る | ゆっくりと…
Yslow ルールでは、スクリプトはページの最後尾、つまり </body> 直前に置け、と言っています。なぜなら、スクリプトの読み込みや実行により、他のページ要素の読み込みやレンダリングがブロックされてしまうからです。 一方、古くは IE4 の時代から Microsoft はこの問題に対処するため、defer 属性という独自の解決策を実装してきました。これは HTML 4.01、XHTML 1.0、1.1 で仕様として採用され、HTML5 にも発展する形で引き継がれています。 IE 以外のブラウザも既に対応されており、IE の独自仕様という色合いが濃かった従来と異なり、これからは広く利用されていくのではないかと思います。 下のビデオは、スクリプトの位置と defer 属性のあり／なしによる、ページの読み込み／表示速度の違いを Pagetest.com でテストしてみたもので、明らかな差異が
6. script with defer (IE bug) - async/defer属性とDOM構築
実行結果 Hello World! マークアップ <p id="result"> Hello <script src="D.js" defer></script> <script src="E.js" defer></script> <script src="F.js" defer></script> World! </p> 解説 script[defer] doesn’t work in IE<=9 で報告されている「IE9 以下で jquery.js と jquery-ui.js をそれぞれ defer 属性付きで読み込んだ際に起きるバグ」を単純化して再現しました。 発生原因は innerHTML を介して既存 DOM に 直接 HTML を挿入することと推定されており、本例では D.js、E.js、F.js を次のようなコードにして、スクリプトの実行が途中でストールしてしまう様子を再
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
