最近、HTML5を高速化する方法が流行ってますね。

HTML5でアプリ！と言ってもやはりネイティブに比べると格段に遅いです。 とくに相対的にスマホやタブレットアプリの処理では顕著だと思います。 ブラウザベースなので、基本どうやってもネイティブには勝てないと思いますが、それでも現状より速くする手法は色々ありますよね。

サイバーエージェントの中の人、「HTML5 Web Applicationのつくりかた」の記事も参考にちょっとメモしてみました。

小さな画像はbase64で直接埋め込み

小さな画像はCSSに直接画像をbase64で埋め込む。

みたいな

画像をbase64に変換するには、プログラミングするもよし、ツールを使うもよし。

ちなみにPHPだったら、

CSS Sprite

いわゆる１枚画像で座標を指定して、画像をパーツを表示する手法 ゲームのテクスチャでよく使われる手法ですね。

ちなみに、Adobe Fireworks CS6からは標準で書き出し機能が搭載されました。 （それ以前は機能拡張で対応） CSSスプライト書き出し機能の使い方

Canvasタグ

これは言わずもがな。 ただ、高機能な分面倒かな？と

var ctx = canvas.getContext('2d');
var img = new Image();
img.src = '画像URL';
$("#sample").attr('width', img.width);
$("#sample").attr('height', img.height);
ctx.drawImage(img, 0, 0, img.width, img.height);

※jQuery利用

画像サイズを取得して、Contextに描画する際にサイズ指定します。 事前にサイズがわかってる場合はCanvasにサイズ指定すればいいですが、それってどうよ？と個人的には思います。

SVG（AiファイルをCanvasに埋め込む）

MacBookPro Retinaの登場によりこれから、高解像度にも柔軟に対応する必要がでてきました。 そこで登場するのが恐らくSVGの技術かと。

Ai→Canvasっていうプラグインを使うと、ベジェ曲線とかパス情報データを書き出してくれます。 で、これをCanvas の Context に直接わりあてる何とも合理的な方法です。

JSON x gzip圧縮

転送データをJSONにしたり、圧縮をかける事によりデータ転送を減らすようにしてます。 （流石はソーシャルの中の人）

gzip転送する場合は、Apacheで mod_deflat を有効にする必要があります。

まぁ、普通のサービス運営ではここまでする機会はないとは思いますが、知っておく知識ではありますね。

CSS拡張のメタ言語Sass

SassはCSSを拡張して、効率よくコーディングできるメタ言語です。 ※「Sassを覚えよう！」、「Sass、そしてSassy CSS (SCSS)」などを参考

環境構築は「Scout」を利用します。 OSX専用なら「Codekit」ってのもあります。

Sassは、それだけでトピックが長くなりそうなので割愛（と言うか勉強中）

PNG画像最適化

OptiPNGで必要の無い情報を削除し、画像容量を軽量化します。 画像数が多い場合には有利。

window.onhashchange

ちょっと高速化から話がずれますが、ブラウザ上でローカル処理をするとURLリンクが活用できません。 window.onhashchange を利用してページ遷移の履歴みたいに利用します。

http://hoge.com/page1#1

みたいな。 これでネット検索でアクセスした時に同じ結果を出す事ができます。

改行、空白などを削除

これも画像とは関係ないですが、HTMLの軽量化になるかと。 ただファイルアップする度にやる必要があるので、自動化する仕組みを作っておかないと忘れがちな作業ではありますが・・・。