フロントエンド開発Blog

オレには鈍器がある

JavaScript , scriptタグ , テンプレート

scriptタグはJSのためだけのタグではない、ということに今更ながら感心しました。

テンプレート系のJavaScriptライブラリを導入するほどでもないけどJavaScriptでHTMLを作って突っ込みたいときってありますよね。そんな時、JavaScript内で

var html=_p+hoge+hogehoge+fugafuga ....

とやってたらさすがに面倒だし、HTMLはHTMLファイルに書きたい。

そんな時はscriptタグにテンプレートHTMLを記述しておいてそこにテキストなどデータを突っ込む形式を使うことが多々あります。

これだとパフォーマンス上の恩恵もありますね。

ページ表示初期はscriptタグ内の画像(imgやらcssの背景画像)は取得されず、HTMLとして描画された段階で必要になったら取得します。

たとえばECサイト制作などで、商品情報をAJAXで取得し、モーダルで表示するときとかにも使えそう。JSONデータをHTMLテンプレートに沿って突っ込む関数を作れば使いまわしもききますね。

後は、onloadのタイミングでは非表示のアコーディオン要素なども、クリックをトリガーなどにしてコンテンツ内に突っ込んで表示することで、コンテンツ内の画像を後読みにしてページ表示速度の向上が見込めます。

ページトップへ

関連ページ

ページトップへ