HTML5のscript要素でasync, deferを使ってパフォーマンスアップ

2009-10-06 HTML5のscript要素でasync, deferを使ってパフォーマンスアップ

JavaScriptの高速化手法を紹介する、Googleのプロジェクト「speed」がリニューアルしたと言うので見てたら、「HTML5でパフォーマンスアップ」てなタイトルがあったので「なぬ？」と思って読んでみました。

HTML5使ってもそんな効力得られないだろう・・・と思って読んでみたら、「HTML5の記法を使えばnバイト節約」みたいなチョコザイな手法が主だったのでちょっと苦笑(^^;

とはいえ、script要素に今度から加わるasync属性について等は、日本語で説明されている記事がほとんどないので、全体的に要約しておきます（あくまで翻訳ではなくて要約。時間がないので超適当です。正確なところは原文を読んでください）。

DTD

HTML4までは以下のように書かなきゃいけなかったDOCTYPEですが

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

HTML5ならこうです。短くなったね！

<!DOCTYPE html>

METAタグのcharset指定

HTML4までは以下のように書かなきゃいけなかったcharset指定ですが

<meta http-equiv="content-type" content="text/html; charset=utf-8">

HTML5ならこう。短くなったね！

<meta charset="utf-8">

type属性

script要素、style要素に指定するtype属性(<script type='text/javascript'>、<style type='text/css'>)ですが、HTML5ではデフォルト値が定められたので、省略しても動作しますよ。だから、

<script type="text/javascript"><script>

と書いてたところを、HTML5なら次のように書いてもOKです。短くなったね！

<script></script>

script要素のasync,defer属性

script要素にasync属性を指定すると、「非同期で読み込み、読み込み終わり次第実行する」と言う動作をします。なので、ページのレンダリングをブロックすることなくスクリプトを実行できます。asyncはHTML5から加わった属性です。

<!-- a.jsは裏で読み込まれて実行される -->
<script src="a.js" async></script>

またdefer属性を指定すると、ページの読み込みが完了してからスクリプトが実行されます。body.onloadで実行されるのとほぼ同様？defer属性は、HTML5以前からあったようです（未調査）。

<!-- a.jsはページの読み込みが終わってから実行される -->
<script src="a.js" defer></script>

asyncとdeferを同時に指定すると、ブラウザasyncをサポートしているならその動作を、asyncをサポートしていないならdefer時の動作を行わせることが出来ます。asyncをサポートしていない古いブラウザ上でも、非同期でJavaScript実行されるように代替動作をさせることが出来る訳です。（ただし、読み込み中ページはブロックする）

Permalink | コメント(0) | トラックバック(1) | 10:09

IT-Walker on hatena

2009-10-06 HTML5のscript要素でasync, deferを使ってパフォーマンスアップ