HTML　HTML4 と HTML5 の違い　HTML5でパフォーマンスアップ　-　やさしいホームページの作り方

DTD

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

Ver.	記述
HTML4	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://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

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


目次　｜　元のページ	前のページ　｜　次のページ	サイトマップ　｜　ページTOP

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