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

Pocket

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

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

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

(僕がためになった記事のまとめですので、網羅的ではありません><)

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

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

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

不必要な描画を避ける方法

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

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

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

Web描画パフォーマンスの改善

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

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

webサイトのもっさり感を作り出している原因

JavaScriptがページの読み込み時間を遅くする理由トップ10

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

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

  • IEの遅いCSSセレクタ
  • 同一オブジェクトに対する多重のCSS検索
  • 多過ぎるXHR(XmlHttpRequests)
  • 負荷の高いDOM操作
  • 多過ぎるJavaScriptファイル
  • 巨大なDOM
  • イベントハンドラの過度なバインディング
  • 外部サービスの実行による速度低下
  • 過度なビジュアル効果
  • 行き過ぎたロギングとモニタリング

JavaScriptやjQueryの処理を早くする方法についての個人的な優良記事

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

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

JavaScriptを高速化する6つのテクニック

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

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

  • 関数呼び出しを避ける
  • newを使わずに括弧を使う
  • ループを展開する
  • ローカル変数としてキャッシュして使う
  • 評価式の記述方法を工夫する
  • 必要がないなら使わない

Webフロントエンドに従事するお前らはいい加減高頻度イベントとレイアウトとスタイリングの付き合い方を考えろ

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

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

ユーザーの体感速度を高めるためのJavaScriptチューニング(前編)

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

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

scroll, resizeイベントの負荷を抑制する

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

jQueryを高速に動作させるためのポイント5つ

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

おわり

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

本当、、、面白いなーw

SNSでもご購読できます。