LoginSignup
20
20

More than 5 years have passed since last update.

JSとCSS太りすぎてるのでデトックスしたい

Last updated at Posted at 2014-06-26

デトックスしたい。

デトックス (detox) とは、体内に溜まった毒物を排出させることである。 この呼び名は "detoxification"、解毒の短縮形である。
http://ja.wikipedia.org/wiki/デトックス

何をデトックスするかというと、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

20
20
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
20
20