scriptのdefer/asyncを理解し、ページの高速化方法を探る | ゆっくりと…
Yslow ルールでは、スクリプトはページの最後尾、つまり </body> 直前に置け、と言っています。なぜなら、スクリプトの読み込みや実行により、他のページ要素の読み込みやレンダリングがブロックされてしまうからです。 一方、古くは IE4 の時代から Microsoft はこの問題に対処するため、defer 属性という独自の解決策を実装してきました。これは HTML 4.01、XHTML 1.0、1.1 で仕様として採用され、HTML5 にも発展する形で引き継がれています。 IE 以外のブラウザも既に対応されており、IE の独自仕様という色合いが濃かった従来と異なり、これからは広く利用されていくのではないかと思います。 下のビデオは、スクリプトの位置と defer 属性のあり／なしによる、ページの読み込み／表示速度の違いを Pagetest.com でテストしてみたもので、明らかな差異が
script要素のdefer属性でパフォーマンスを向上｜Web制作 W3G
Updated 2013.10.15 / Published 2013.10.15 DOM構築が完了した時点でスクリプトを実行したいというタイミングは活用どころがとても多いのですが、2013年9月時点の最新ブラウザシェアを見てもInternet Explorer8以下が未だに25%以上もいることから、IE9からサポートしているDOMContentLoadedは使い難く、未だにイベントハンドラのonload属性やwindow.onloadといった画像の読み込みまで含めてしまうパフォーマンスの悪いタイミング操作でスクリプトの実行を行っている制作者は多くいるようです。 そこで、レンダリングができた時点で、スクリプトが実行されるようにUAに指示するための属性であるscript要素のdefer属性を紹介します。defer属性の付いたスクリプトファイルの実行は、DOMContentLoadedの前に行
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
