Learn Performance

  • この記事ではChromeのDevtool(開発ツール)を使ったパフォーマンスの調査方法についてご説明致します。アニメーションがカクカクする、画面がちらつくなどの問題が起こった場合にパフォーマンスの観点から問題を解決しましょう。 では、まずはRenderingパネルを用いた調査方法からご説明します。 方法1. Rendering(レンダリング)パネルで調査する はその名の通り、レンダリングに関連するパフォーマンスを調査するためのパネルです。ページ全体でアニメーションを多用していたり、スクロール時に画面下部の表示が遅れる場合などはこのパネルで調査します。 すると、Paint(ペイント)の処理に影響...
  • animationやtransitionを使ってCSSアニメーションを行った際に、アニメーションがカクついて困った経験はありませんか?そんな時は この記事ではwill-changeの使う際の実装方法についてご説明します。 will-changeのブラウザサポート状況(2019/3/10時点) Edge、IE以外の主要なブラウザで利用可能です。 will-changeって何してくれるの? will-changeを指定することによって、アニメーションのパフォーマンスを上げる事ができます。 アニメーションするプロパティーをwill-changeで指定することによって、ブラウザは事前にアニメーションの...
  • この記事ではIntersectionObserverの使い方を説明します。IntersectionObserverを使うと簡単にスクロールの非同期処理を実装することができます。 各ブラウザの対応状況 こちらは各ブラウザの対応状況です。IEはさておき、EdgeとSafariが一世代前のバージョンで対応していません。本格的に利用する場合はPolyfill*1を使用してください。 従来の実装とIntersectionObserverのメリット これまでのスクロール処理は以下のような処理をつらつら書く必要がありました。 [crayon-5e809d6b430b0656644774/] 従来の処理では様...
  • Webサイトを閲覧している時にスクロールがガタついたり、スクロール中にページの下の方が真っ白になっているサイトを見たことはありませんか?もしかしたら、それはホバーエフェクトによるものかもしれません。 問題点 スクロール中でもホバーエフェクトは有効なので、スクロールによってホバーが連続的に有効になるとブラウザに大きな負荷を与えてしまいます。 この動画ではホバーがブラウザに与える負荷について詳しく説明しています。(英語です。) 解決方法 スクロール開始時にbodyにpointer-eventsプロパティーを設定する事によって、スクロール中のホバーを無効にすることができます。 コードは次のとおりです...
  • 記事の前半では実例を交えながらrequestAnimationFrameの仕組みと使い方をご説明します。 また、記事の後半ではrequestAnimationFrameを使った繰り返し処理、setTimeout、setIntervalのように時間指定を行って使用する方法もご説明します。 requestAnimationFrameとは Javascriptでアニメーションを行う時にrequestAnimationFrameを使うとパフォーマンスの低下を防ぐことができます。 簡単にいうと 基本文法 [crayon-5e809d6b4369a445910514/] 言葉ではなかなか伝わりづらいので、...
  • Web Workerを使用することで負荷の大きな計算処理をWorker Thread(ワーカースレッド)で実行することができます。これによりMain Thread(メインスレッド)を空き状態にすることができるため、ブラウザのパフォーマンスが向上します。 この記事ではWeb Workerの仕組みと使い方をご説明します。 Web Workerって何? ブラウザでは主にMain Thread(メインスレッド)、Worker Thread(ワーカースレッド)、Raster Thread(ラスタースレッド)、Compositor Thread(コンポジタースレッド)の4種類のスレッドがそれぞれ割り当てら...
  • アニメーションで要素を動かす際に、left、right、top、bottomを使用しているコードを見かけることがあります。 しかし、leftなどの位置調整を行うプロパティーはレンダリングのパフォーマンスの低下を起こすため、アニメーションには使ってはいけません。 この記事では使用例を交えながら、transform、opacityの使い方を見ていきましょう。 TransformとLeftを使ったアニメーションのパフォーマンス比較 まず、transformとleftをそれぞれ使用した際のパフォーマンスの比較を行います。ここでは、パフォーマンスを比較しやすくするために、以下の条件を用意しました。 これ...
  • この記事ではブラウザの仕組みを図解を用いてわかりやすくご説明します。 最近のブラウザは優秀なので、ブラウザの仕組みを理解していなくても、パフォーマンスの問題が発生することは少ないかもしれません。 しかし、アニメーションを多用するサイトやユーザーインタラクティブなサイトの場合、パフォーマンスの問題はとてもシビアです。 ブラウザの仕組みを知ることで、ブラウザのパフォーマンスを最大限に引き出す実装を行うことができます。 画面がなめらかに表示されないのはなぜ? スクロールをしていてカクつく。またはアニメーションがカクカクしている時というのはブラウザがどういう状態なのでしょうか? まずは、この状態を定量...
  • はじめに 近年、Webサイトはますます複雑になり、また肥大化しています。それに合わせてブラウザの計算量も増え、パフォーマンスが問題となるケースがしばしばあります。 特にアニメーションやスクロール時などのボトルネックになりやすい箇所について取り上げます。 パフォーマンスの問題はブラウザの仕組みと深く関わるため、基礎的な知識がないと問題の解消が難しい部分ですが、この記事ではブラウザの仕組みと照らし合わせながらわかりやすくご説明します。 前知識. Browserの仕組みを知るべし ケーススタディー
  • スクロールした際のパフォーマンスが悪い場合(スクロールがカクつく場合)にはpassive:trueの使用を検討しましょう。この記事ではイベントリスナーにpassive:trueというヒントを使うことで、スクロールをスムーズにする方法についてご説明します。 passive:trueの役割 passive:trueはevent.preventDefault();という関数をイベント内で読んでいないことをブラウザに教えてあげるために使用します。 具体的には次のように使用します。 passive:trueの使用例 [crayon-5e809d6b44073528357023/] なぜスクロールにカクつ...

最新記事