はてなブックマーク

スクロールした際のパフォーマンスが悪い場合（スクロールがカクつく場合）にはpassive:trueの使用を検討しましょう。この記事ではイベントリスナーにpassive:trueというヒントを使うことで、スクロールをスムーズにする方法についてご説明します。 passive:trueの役割passive:trueはevent.preventDefault();という関数をイベント内で読んでいないことをブラウザに教えてあげるために使用します。 具体的には次のように使用します。 passive:trueの使用例

記事の前半では実例を交えながらrequestAnimationFrameの仕組みと使い方をご説明します。 また、記事の後半ではrequestAnimationFrameを使った繰り返し処理、setTimeout、setIntervalのように時間指定を行って使用する方法もご説明します。 requestAnimationFrameとはJavascriptでアニメーションを行う時にrequestAnimationFrameを使うとパフォーマンスの低下を防ぐことができます。 簡単にいうとrequestAnimationFrameは渡した関数をブラウザの表示を邪魔しないタイミングで処理されるようにする関数です。 基本文法

animationやtransitionを使ってCSSアニメーションを行った際に、アニメーションがカクついて困った経験はありませんか？そんな時はwill-changeを使うことによって、カクついていたアニメーションをスムーズにすることができます。 この記事ではwill-changeの使う際の実装方法についてご説明します。 will-changeのブラウザサポート状況(2019/3/10時点)Edge、IE以外の主要なブラウザで利用可能です。 will-changeって何してくれるの？will-changeを指定することによって、アニメーションのパフォーマンスを上げる事ができます。 アニメーションするプロパティーをwill-changeで指定することによって、ブラウザは事前にアニメーションの準備を行い、その要素がアニメーションを行うのに最適な状態にします。ただし、will-changeを多用

この記事ではChromeのDevtool(開発ツール)を使ったパフォーマンスの調査方法についてご説明致します。アニメーションがカクカクする、画面がちらつくなどの問題が起こった場合にパフォーマンスの観点から問題を解決しましょう。 では、まずはRenderingパネルを用いた調査方法からご説明します。 方法１. Rendering（レンダリング）パネルで調査するRenderingパネルはその名の通り、レンダリングに関連するパフォーマンスを調査するためのパネルです。ページ全体でアニメーションを多用していたり、スクロール時に画面下部の表示が遅れる場合などはこのパネルで調査します。

この記事ではブラウザの仕組みを図解を用いてわかりやすくご説明します。 最近のブラウザは優秀なので、ブラウザの仕組みを理解していなくても、パフォーマンスの問題が発生することは少ないかもしれません。 しかし、アニメーションを多用するサイトやユーザーインタラクティブなサイトの場合、パフォーマンスの問題はとてもシビアです。 ブラウザの仕組みを知ることで、ブラウザのパフォーマンスを最大限に引き出す実装を行うことができます。 画面がなめらかに表示されないのはなぜ？スクロールをしていてカクつく。またはアニメーションがカクカクしている時というのはブラウザがどういう状態なのでしょうか？ まずは、この状態を定量的に説明するためFPS（フレームレート）から説明します。 FPSとはFrame Per Secondの略で1秒ごとの画面(フレーム)の切り替わる回数を表しています。 ブラウザでサイトを見た際には最高で6