HTML5の雛型とJavaScriptの実行タイミング – browser-land

HTML5の雛型とJavaScriptの実行タイミング

 HTML5の雛型

今すぐにコピーして使えるHTML5 の雛形を紹介します。
必要最低限+使いやすさを加味したコードにしています。

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”utf-8″/>
<title>HTML5 template

<script>
 (function () {
 }());

 document.addEventListener(“DOMContentLoaded”, function(){
 }, false);

 window.onload = function() {
 }
</script>

<style>
</style>

</head>
<body>
 Hello World
</body>
</html>

(function () {}());
即時関数は、関数を定義すると同時に実行します。
この位置に記述する事でページの読込よりも先に実行されます。
以下のメリットを享受する事が出来ます。

* JavaScript面のメリット
画像、音声、動画などのメディアファイルを事前に読込む事で、ファイルの読込遅延によるエラーの回避し、2回目以降の読込が不要になる事でのパフォーマンスの向上が期待できます。

* CSS面のメリット
CSSカスタムプロパティ (変数) をページの読込前に設定する事で、スタイルの動的変更によるパフォーマンスの低下を最小限に抑える事が出来ます。

DOMContentLoaded
DOMContentLoadedイベントはDOMツリーの構築が完了した時点で発火されます。
CSSや画像等のメディアファイル、サブフレームの読み込みはまだ完了していません。
画像等への操作を行わない処理は、onloadよりも早く実行する事が出来ます。

onload
onLoadイベントはすべてのリソースの読込が完了した時点で発火されます。
全ての要素に処理を行う事が出来ます。

Browser-Land

: DATA

: BLOG

All
CSS
HTML5
JavaScript
WordPress

: MAIL


 

 

 

: PRAVACY POLICY

タイトルへ

サウンド設定

スクリーン設定

プレイ
データ
設定
停止
次へ
戻る
戻る
戻る
削除
再配置
戻る
戻る
メール
ブログ
Twitter
ポリシー
ユニット
武器
サークル
ボックス
コード
キング
ソルジャー
アーチャー
ウィザード
スペーサー
ギア
ホイール
クランク
フレームA
フレームB
レール
ウォール
ワイヤー
ゴム紐
カップ
大砲
弾倉
ウッド材
アイアン材
透過材
+5 deg.
-5 deg.
+45 deg.
-45 deg.
右回転
左回転
動力無し
Turn Right
Turn Left
Neutral
ロード
セーブ
バトル
ロード