この記事ではChromeのDevtool(開発ツール)を使ったパフォーマンスの調査方法についてご説明致します。アニメーションがカクカクする、画面がちらつくなどの問題が起こった場合にパフォーマンスの観点から問題を解決しましょう。 では、まずはRenderingパネルを用いた調査方法からご説明します。 方法１. Rendering（レンダリング）パネルで調査する はその名の通り、レンダリングに関連するパフォーマンスを調査するためのパネルです。ページ全体でアニメーションを多用していたり、スクロール時に画面下部の表示が遅れる場合などはこのパネルで調査します。 すると、Paint(ペイント)の処理に影響...
Learn Performance
-
- 3月 12, 2019animationやtransitionを使ってCSSアニメーションを行った際に、アニメーションがカクついて困った経験はありませんか？そんな時は この記事ではwill-changeの使う際の実装方法についてご説明します。 will-changeのブラウザサポート状況(2019/3/10時点) Edge、IE以外の主要なブラウザで利用可能です。 will-changeって何してくれるの？ will-changeを指定することによって、アニメーションのパフォーマンスを上げる事ができます。 アニメーションするプロパティーをwill-changeで指定することによって、ブラウザは事前にアニメーションの...
- 3月 12, 2019この記事ではIntersectionObserverの使い方を説明します。IntersectionObserverを使うと簡単にスクロールの非同期処理を実装することができます。 各ブラウザの対応状況 こちらは各ブラウザの対応状況です。IEはさておき、EdgeとSafariが一世代前のバージョンで対応していません。本格的に利用する場合はPolyfill*1を使用してください。 従来の実装とIntersectionObserverのメリット これまでのスクロール処理は以下のような処理をつらつら書く必要がありました。 [crayon-673f0311aa919982149831/] 従来の処理では様...
- 3月 12, 2019Webサイトを閲覧している時にスクロールがガタついたり、スクロール中にページの下の方が真っ白になっているサイトを見たことはありませんか？もしかしたら、それはホバーエフェクトによるものかもしれません。 問題点 スクロール中でもホバーエフェクトは有効なので、スクロールによってホバーが連続的に有効になるとブラウザに大きな負荷を与えてしまいます。 この動画ではホバーがブラウザに与える負荷について詳しく説明しています。（英語です。） 解決方法 スクロール開始時にbodyにpointer-eventsプロパティーを設定する事によって、スクロール中のホバーを無効にすることができます。 コードは次のとおりです...
- 記事の前半では実例を交えながらrequestAnimationFrameの仕組みと使い方をご説明します。 また、記事の後半ではrequestAnimationFrameを使った繰り返し処理、setTimeout、setIntervalのように時間指定を行って使用する方法もご説明します。 requestAnimationFrameとは Javascriptでアニメーションを行う時にrequestAnimationFrameを使うとパフォーマンスの低下を防ぐことができます。 簡単にいうと 基本文法 [crayon-673f0311aaa94058752932/] 言葉ではなかなか伝わりづらいので、...