Home > Internet > Movabletype > Javascriptは最後に・・・

Javascriptは最後に・・・

Posted by: oscar
2008-10-14 (火) 14:13
MovableType
Javascript, Movable Type, SetVarBlock, YSlow, 高速化
delicious count
hatebu user
Javascriptは最後に・・・

YSlow for Firebug使ってる方いると思うんですが、体感速度を上げる方法として、「CSSは最初に読み込み」「Javascriptは最後に読み込む」ってのがあるみたいです。
基本的な画面表示は先に終わらせるってことみたいです。

それで、スクリプトをまとめて、フッターの後・</body>の直前に置こうと思った場合に、問題になる点があります。

ひとつは、コメントフォームでのグリーティング表示部分。もう一つはウィジェット部にスクリプトが含まれるようなケースです。

このサイトでは、その様なテンプレートの途中で出現するJavascriptを、すべて変数にぶち込んでおいて、最後に出力されるようにしています。

方法は簡単です。ヘッダー内のスクリプトが書かれている部分を SetVarBlock タグで囲み変数に入れてしまいます。デフォルト・テンプレートだと「HTMLヘッダー」テンプレートモジュール内の以下の部分になります。

<script type="text/javascript" src="<$mt:Link template="javascript"$>"></script>

この部分を次のように囲みます。

<MTSetVarBlock name="LoadScript">
<script type="text/javascript" src="<$mt:Link template="javascript"$>"></script>
</SetVarBlock>

これで、後は</body>の直前に、<$MTVar name="LoadScript"$>で出力してやればよくなります。

さぁ、後はテンプレートの途中に出てくるJavascriptをどうするかです。
もちろん途中に出てくるスクリプトも、SetVarBlock タグで囲んじゃえばいいんです。

<MTSetVarBlock name="LoadScript" append="1">
    <script type="text/javascript">
    <!--
    mtAttachEvent("load", mtEntryOnLoad);
    mtAttachEvent("unload", mtEntryOnUnload);
    //-->
    </script>
</MTSetVarBlock>

そう、お馴染みの append="1" で変数に追加するのがポイントになります。
サイドバーのウィジェット内で使用しているJavascriptも、同様に追加しましょう。
こうする事で、ウィジェットで使用するJavascriptの記述を、ウィジェット外に移動させることなく、最後に読み込まれるように変更が可能になります。

後の問題は、スクリプト自身がその場に出力をするようなもの。
これは、display:none;したDIV内で、スクリプトに出力をさせて、その結果をinnerHTML使って、本来の場所に書き出すことで対応可能です。

また高速化という観点からいえば、可能なスクリプトはAjaxにより非同期で実行すると、体感速度が上がります。