【JavaScript】webサイトのレスポンスが悪くなってしまう前に知っておきたかった記事まとめ。【JavaScript】webサイトのレスポンスが悪くなってしまう前に知っておきたかった記事まとめ。【JavaScript】webサイトのレスポンスが悪くなってしまう前に知っておきたかった記事まとめ。コメントはまだありませんwebサイトにダイナミックな仕掛けを施したい!と思った時って、JavaScriptやjQueryを使って「scroll」や「resize」のイベントで発火する処理を書いたりしますよね。それで、いくつかのエフェクトを実装した後に、「あれ、サイトがもっさりしてる」と感じた経験ありませんか。そんな経験がある方にはきっと活きる。JavaScriptやjQueryの処理を改善するために知っておきたいTipsを紹介します。resizeイベントの負荷を抑制するjQueryを高速に動作させるためのポイント5つおわりブラウザに思い通りのスタイリングが描写される仕組みJavaScriptをバリバリにチューニングする記事や、描写遅延が起こっている理由に触れる前に、どうやってブラウザにCSSなどの描写が反映されるのかを教えてくれる記事を紹介します。これを知ってるかどうかで、局地的だけじゃなくてもう少し広い視野で速度改善に取り組めるようになります。APIの呼び出しに集約され、多数のビットマップが出力されます。これらのビットマップはGPUにアップロードされ、合成されることにより、スクリーン上に最終的な絵が表示されます。忘れがちですが、JavaScriptのonscrollや、CSSのhoverなどでのエフェクトの時には裏側でその描写を切り替えるたびにプログラムが再描写を繰り返しています。animationの処理などがブラウザのメモリを圧迫するのはこのためです。だいたいどれくらいのレベルをクリアしていれば及第点なのか。それに関しては、CACOOのテックブログがとても参考になります。Web描画パフォーマンスの改善1回の画面更新(1フレーム)を16.6msecで処理できれば非常にスムーズに見えることになります。これが目標になります。60フレーム/秒で動かせれば、よく言うところの「ぬるぬる動く」ってレベル感になれます。ちなみに、「じゃあ、今どれくらいの速度で描写できるか?」については、上記CACOOテックブログ中で、Chromeのデベロッパーツールを利用した確認方法が紹介されています。webサイトのもっさり感を作り出している原因JavaScriptがページの読み込み時間を遅くする理由トップ10JavaScriptのメソッドなどから、ページの読み込み時間に影響を与える可能性の高いものを紹介してくれています。全てではありせんが参考になります。項目だけ紹介しておきます。行き過ぎたロギングとモニタリングJavaScriptやjQueryの処理を早くする方法についての個人的な優良記事ここからは、より技術的な解説やコードを含む記事の紹介です。冒頭でもお伝えした「onscroll」や「resize」など、JavaScriptやjQueryのメソッドの中でも、重いと言われる処理の改善方法について紹介されています。JavaScriptを高速化する6つのテクニック実用的なJavaScriptのテクニックを紹介してくれています。それぞれのハックに対して各ブラウザの実行時間の比較を検証してくれているので、とても参考になります。見出しだけ紹介しておきます。関数呼び出しを避けるnewを使わずに括弧を使うループを展開するローカル変数としてキャッシュして使う評価式の記述方法を工夫する必要がないなら使わないWebフロントエンドに従事するお前らはいい加減高頻度イベントとレイアウトとスタイリングの付き合い方を考えろ少し攻撃的な言い方ですが、おっしゃっていることは至極まとも。touchmoveなどのイベントで発火するコードの悪い例の紹介と、対策を紹介してくれています。ユーザーの体感速度を高めるためのJavaScriptチューニング(前編)コードの実行速度も大事ですが、それと同じくらい重要な「ユーザーの体感する時間を早くする」手法について紹介されています。恥ずかしながら、この記事で紹介されている「defer」の存在を僕は知りませんでした。resizeイベントの負荷を抑制するscrollイベントなどに使える、間引きして発火するサンプルコードを紹介してくれています。jQueryを高速に動作させるためのポイント5つjQueryのレスポンスを早くするTipsの中でも、すぐに実装できる簡単なものを中心に紹介してくれています。おわりJavaScriptは、本当勉強すればするほど「奥が深いな〜」と驚愕します。僕はwebの学校に行った経験があるのですが、そこで教えてもらった知識ってまるで網羅的ではなかったんだなぁと痛感してます。コメントをキャンセルメールアドレスが公開されることはありません。コメントデータの処理方法の詳細はこちらをご覧ください。