HPB19 | HPB18 コンテンツ一覧
ホーム > HPB19 > HTML HTML4 と HTML5 の違い HTML5でパフォーマンスアップ
目次 | 元のページ 前のページ | 次のページ サイトマップ | ページEND

HTML HTML4 と HTML5 の違い HTML5でパフォーマンスアップ


HTML HTML4 と HTML5 の違い HTML5でパフォーマンスアップ



HTML5では、HTML4に比べて、簡素な記述で済ますことができたり、script要素にscript要素に新たに加わった async属性を用いることで、画面の表示パフォーマンスをアップさせることができます

以下、HTML4 と HTML5 での重要な相違点について説明します





DTD



記述を簡略化できるようになりました


Ver. 記述
HTML4 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML5 <!DOCTYPE html>




METAタグ charset



記述を簡略化できるようになりました


Ver. 記述
HTML4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
HTML5 <meta charset="utf-8">




script 要素 type 属性



記述を省略できるようになりました


Ver. 記述
HTML4 <script type="text/javascript"><script>
HTML5 <script></script>




script 要素 async 属性



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

async属性を指定していない場合、広告等がスクリプトが使用されていると、広告の読み出しが終わるまでページをスクロールしたりできず、ユーザフレンドリではありませんでしたが、この async属性を指定し、それに対応したブラウザを使用した場合、ページのコンテンツ部分の読み込み操作は、劇的に早くなることが期待されます


Ver. 記述 説明
HTML4 <script src="sample.js"></script> sample.jsが全て読み込まれ、実行終了するまで、一切の操作ができません
HTML5 <script src="sample.js" async></script> sample.jsは裏で読み込まれ、本体とは非同期に実行されます




script 要素 defer 属性



script要素に、HTML4からサポートされている defer属性は、「レンダリングができた時点で、スクリプトを実行する」という動作指定で、defer属性の付いたスクリプトファイルの実行は、DOMContentLoadedの前に行われるため、DOMContentLoadedやwindow.onloadよりもパフォーマンス向上が計れます

async と defer を同時に指定すると、ブラウザが asyncをサポートしていれば async属性動作を、asyncをサポートしていないならdefer属性の動作を行います


Ver. script要素 defer属性 記述 説明
HTML4
HTML5
<script src="sample.js" defer></script> HTML sample.jsは、ページのレンダリングができた時点で実行されます
<script src="sample.js" defer="defer"></script> XHTML

Ver. sample.js 記述
HTML4
HTML5
function load(){
    /* DOM構築完了時に実行したいスクリプト */
};
(function(){
    /* 旧Presto版Operaにのみwindow.operaが存在、Blink版Operaにwindow.operaは存在しない
       タッチデバイスでかつwindow.matchMediaをサポートしていないのは、iOS4以前とAndroid2.3以前だけ */
    if(window.opera || (document.ontouchstart !== undefined && ! window.matchMedia)){
        document.addEventListener("DOMContentLoaded", load, false);
    }else{
        load();
    }
})();

script要素のdefer属性でパフォーマンスを向上 」 より


目次 | 元のページ 前のページ | 次のページ サイトマップ | ページTOP
ホーム > HPB19 > HTML HTML4 と HTML5 の違い HTML5でパフォーマンスアップ
   

© 2014 abhp.net All Rights Reserved.




参考情報
HTML5のscript要素でasync, deferを使ってパフォーマンスアップ - IT-Walker on hatena
script要素のdefer属性でパフォーマンスを向上
scriptのdefer-asyncを理解し、ページの高速化方法を探る ゆっくりと…

ページTOP
ページTOP
ページTOP
ページTOP
ページTOP
ページTOP