【JavaScript】webサイトのレスポンスが悪くなってしまう前に知っておきたかった記事まとめ。

webサイトにダイナミックな仕掛けを施したい！と思った時って、JavaScriptやjQueryを使って「scroll」や「resize」のイベントで発火する処理を書いたりしますよね。

それで、いくつかのエフェクトを実装した後に、「あれ、サイトがもっさりしてる」と感じた経験ありませんか。

そんな経験がある方にはきっと活きる。JavaScriptやjQueryの処理を改善するために知っておきたいTipsを紹介します。

（僕がためになった記事のまとめですので、網羅的ではありません＞＜）

この記事の目次

ブラウザに思い通りのスタイリングが描写される仕組み

JavaScriptをバリバリにチューニングする記事や、描写遅延が起こっている理由に触れる前に、
どうやってブラウザにCSSなどの描写が反映されるのかを教えてくれる記事を紹介します。

これを知ってるかどうかで、局地的だけじゃなくてもう少し広い視野で速度改善に取り組めるようになります。

基本的に、描画されるすべての要素は、実行可能なSkia APIの呼び出しに集約され、多数のビットマップが出力されます。これらのビットマップはGPUにアップロードされ、合成されることにより、スクリーン上に最終的な絵が表示されます。

忘れがちですが、JavaScriptのonscrollや、CSSのhoverなどでのエフェクトの時には裏側でその描写を切り替えるたびにプログラムが再描写を繰り返しています。なのでanimationの処理などがブラウザのメモリを圧迫するのはこのためです。

じゃあ、だいたいどれくらいのレベルをクリアしていれば及第点なのか。それに関しては、CACOOのテックブログがとても参考になります。

1回の画面更新(1フレーム)を16.6msecで処理できれば非常にスムーズに見えることになります。
60フレーム/秒、16.6msec/フレームこれが目標になります。

60フレーム/秒で動かせれば、よく言うところの「ぬるぬる動く」ってレベル感になれます。
ちなみに、「じゃあ、今どれくらいの速度で描写できるか？」については、上記CACOOテックブログ中で、Chromeのデベロッパーツールを利用した確認方法が紹介されています。

JavaScriptのメソッドなどから、ページの読み込み時間に影響を与える可能性の高いものを紹介してくれています。もちろん全てではありせんが参考になります。

項目だけ紹介しておきます。

ここからは、より技術的な解説やコードを含む記事の紹介です。

冒頭でもお伝えした「onscroll」や「resize」など、JavaScriptやjQueryのメソッドの中でも、重いと言われる処理の改善方法について紹介されています。

実用的なJavaScriptのテクニックを紹介してくれています。それぞれのハックに対して各ブラウザの実行時間の比較を検証してくれているので、とても参考になります。

見出しだけ紹介しておきます。

少し攻撃的な言い方ですが、おっしゃっていることは至極まとも。scrollやmousemove, touchmoveなどのイベントで発火するコードの悪い例の紹介と、対策を紹介してくれています。

一言でいうと、高頻度イベントのデータを使う場合は描画ロジックを分けろ　です。

コードの実行速度も大事ですが、それと同じくらい重要な「ユーザーの体感する時間を早くする」手法について紹介されています。

恥ずかしながら、この記事で紹介されている「defer」の存在を僕は知りませんでした。。。

scrollイベントなどに使える、間引きして発火するサンプルコードを紹介してくれています。

jQueryのレスポンスを早くするTipsの中でも、すぐに実装できる簡単なものを中心に紹介してくれています。

JavaScriptは、本当勉強すればするほど「奥が深いな〜」と驚愕します。。。　僕はwebの学校に行った経験があるのですが、そこで教えてもらった知識ってまるで網羅的ではなかったんだなぁと痛感してます。

本当、、、面白いなーｗ