デトックスしたい。
デトックス (detox) とは、体内に溜まった毒物を排出させることである。 この呼び名は "detoxification"、解毒の短縮形である。
[http://ja.wikipedia.org/wiki/デトックス][1]
[1]: http://ja.wikipedia.org/wiki/%E3%83%87%E3%83%88%E3%83%83%E3%82%AF%E3%82%B9
何をデトックスするかというと、JSとCSS.
JSとCSSに頼りすぎていて、あまりにも太ってきています。
直近5年でサイズ推移のグラフ作ったら年率1.5倍ほど成長しているでしょう。
JSはjQueryだけで簡単に100KBいくし、お流行りになられたBootstrapさんはCSSだけで123KB.
合計で~220KBほどいきます。
ところで、ここに193KBのWebPがありますが、これは2448×3264のiPhoneで撮った写真です。
https://dl.dropboxusercontent.com/u/7817937/photo1.raw.q70.webp
2448x3264の画像が、193KB
で、jQueryとBootstrapを合わせれば、~220KB.
iPhoneで撮った生写真より、CSSとJSのほうが重いのは絶対おかしい
最近、JSとCSSが太ってるのが普通になってきてるので、この辺に関する感覚が麻痺しています。
また、ついでにいえば、CSSとJSはページロードで毎回パースさせているわけだから、電池を無駄に消費させてます。
ふつうの範囲ならいいです。でも、9割方使ってないjQueryやBootstrapをまるまるロードするのは、電池泥棒といってもいい蛮行でしょう。
また、重いページはユーザを待たせている意識を持ちたいです。
ページのスピードに関しては、コードや開発フローに現れにくいこともあり、あまり重要視されることがありません。
ですが、遅いページはウェイターのなかなか来ないレストランと同じです。
遅いのはそれ自体がバグ、といってもいいでしょう。
こんな感じで、よくよく考えると、CSSとJSはおおよそユーザのやりたいこととは関係がないですから、完全なオーバヘッドです。
というわけで色々捨てることにしました。
色々捨てるとブラウザ互換性について気の病む感じになりますが、そもそも~IE9を考えなければほぼ全て同じ動きをします。
そして、今現在~IE9でも動くようにサービスを作っている奇特な人は稀でしょう。
というわけで、Normalize.cssも不要です。捨てましょう。
(pixel単位でデザインが一致しなければ納得出来ない人はそもそもWebデザインに向いてないので、DTPに行った方が良いです。)
というわけで、最近絶賛CSS/JS解雇中。
Angular重すぎるので使いたくないです。
jQueryは大分前に辞めました。Zepto使ってますが解雇予定。
最低限は欲しいのでtinyquery.js(https://github.com/kaiinui/tinyquery.js )を書いて使っています。(あまりにもminimalすぎるのでいろいろ足す予定)
Normalize.cssも上記の通り外しました。
むしろ考えることが少なくなってスッキリとします。
いうほどjQuery必要な操作してないことに気付きます。
余分な装飾は常に悪です。
すぐクラッシュする虚弱なAndroidブラウザちゃんにも優しい。
ところで自前スクロールに一言言いたい
TwitterとGmailの自前スクロールクソ過ぎる。
いきなり異常なスピードで下にスクロールしたりする。
しかもすぐクラッシュする。特にTwitter!!!お前は!!
頼むからおとなしくoverflow:scroll;-webkit-overflow-scrolling:touch;使ってほしい。
あとクライアントMVCは
せめてCompressed 40KB代になって欲しい。
このままだと重過ぎて、GmailとかのAppCache使うような重度のSPAでしか割に合わない感ある。
処理重すぎるので、メインスレッドをブロックしないWeb Workerで動くようにもしたい。
宗教上の理由によりgzipped 14KB以上のJS/CSSを扱えないので死活問題です。
References