2008/08/31
RailsでJavascriptのソースが現れる位置をHTMLの最後(</body>の直前)へ持って行く
HTML内へJavascriptを書くときの位置として、体感読み込み時間を減らす目的で推奨されているのは、HTMLの最後(</body>の直前)へ書くことのようです。静的なHTMLであれば比較的やりやすいのですが、ヘッダやフッタが複数のテンプレートファイルに分かれていることが普通の動的HTMLだと、利用しているテンプレートエンジンやフレームワークによっては難しい場合があります。
Railsでは、capture helperを使えば簡単に実現できたのでメモ書きしておきます。
レイアウトテンプレート
<html>
<body>
<%= @content_for_layout %>
<!-- 共通のJSファイルを読み込む -->
<script type="text/javascript" src="http://other.host/a.js"></script>
<script type="text/javascript" src="http://other.host/b.js"></script>
<% if @content_for_javascript %>
<%= @content_for_javascript %>
<% end %>
</body>
</html>
Action側のテンプレート
<% @content_for_javascript = capture do %>
<script type="text/javascript">
alert("Page specific javascript is executed");
</script>
<% end %>
<div id="main">
ページの内容
</div>
出力内容
<html>
<body>
<div id="main">
ページの内容
</div>
<!-- 共通のJSファイルを読み込む -->
<script type="text/javascript" src="http://other.host/a.js"></script>
<script type="text/javascript" src="http://other.host/b.js"></script>
<script type="text/javascript">
alert("Page specific javascript is executed");
</script>
</body>
</html>
こうすることで、共通のJavascriptソースはlayoutテンプレートへ、そのActionだけで使われるJavascriptソースはaction側のテンプレートへと分けて書き込みながら、最終的なHTMLとしてはすべてのJavascriptソースを</body>の直前へ集約させることができました。
ラベル: Javascript, rails