Webサイト高速化技法（４）：難読化のメリット／デメリット
「難読化」という技術、ご存知でしょうか？
元々はソースコードが読める HTML/JavaScript の世界での流用や悪用、著作権被害などを防ぐために記号化し読みづらくすること、というものでした。ですが、最近は難読化したものを読みやすくするもの等も出てきており、あまり流用防止の為に難読化するというものを見なくなり、著名なライブラリが著作権対策の為に施しているもの以外では使われなくなってきたように思います。
難読化には別の使い道が
この難読化ですが、実はパフォーマンスに結構影響します。
- サイズが小さくなることで読み込み速度があがる（数%）
- 変数名が小さくなるのでローディングが速くなる（数%～数10%）
- メモリ使用量が小さくなるのでキャッシュ回数が減り実質速くなる
などでトータル20～30%速くなることもあります。
- サイズが小さくなることで読み込み速度があがる（数%）
これは想像できますね。サイズが小さくなる事は画像なども同じで表示速度に大きく影響します。
- 変数名が小さくなるのでローディングが速くなる（数%～数10%）
これは分かりますでしょうか？実はこれが一番スピードに影響します。
「a」と「b」を比較するのと、
「abcdefghijklmnopqrstuvwxyz」と「abcdefghijklmnopqrstuvwxyz2」を
比較するのは人間の目でも明らかなように、PCでも速度は大きく違います。
これらは初期ローディング時に自動最適化を行い、2回目以降はキャッシュを利用することで速く実行する技術も採用されてますので、2回目以降はそんなに変わらなくなってますが、初回は大きく影響します。
- メモリ使用量が小さくなるのでキャッシュ回数が減り実質速くなる
これはHDDへの1回のアクセスが減るとパフォーマンスに大きく影響します。
以前のブログにも書いてますので参考にしてください。
「CPUとメモリとHDD ～チューニングの前に～」
http://uehama.blogspot.com/2010/02/cpuhdd.html
以上のように、パフォーマンスの面で見るとメリットが大きいです。
しかしデメリットもあります
主に保守性に問題があります。まずデバッグが複雑になり、管理（特に修正）が煩雑になります。
対策としては、プレビューで管理する時はそのままにして、テストから本番に上げるタイミングで関数の中だけを難読化するのがおすすめです。JSファイル全体を難読化してしまうと、バージョン管理が相当むずかしくなります。function 毎に分けて難読化することで、それぞれを管理しやすくなりますし、何かあった時のデバッグもしやすくなります。
難読化はルールさえしっかりして、保守性を保つ事ができれば、やった方が断然オトクです。是非試してみて下さい。
それでは。
