この記事ではChromeのDevtool(開発ツール)を使ったパフォーマンスの調査方法についてご説明致します。アニメーションがカクカクする、画面がちらつくなどの問題が起こった場合にパフォーマンスの観点から問題を解決しましょう。 では、まずはRenderingパネルを用いた調査方法からご説明します。 方法１. Rendering（レンダリング）パネルで調査する はその名の通り、レンダリングに関連するパフォーマンスを調査するためのパネルです。ページ全体でアニメーションを多用していたり、スクロール時に画面下部の表示が遅れる場合などはこのパネルで調査します。 すると、Paint(ペイント)の処理に影響...
CSS
-
- 3月 12, 2019animationやtransitionを使ってCSSアニメーションを行った際に、アニメーションがカクついて困った経験はありませんか？そんな時は この記事ではwill-changeの使う際の実装方法についてご説明します。 will-changeのブラウザサポート状況(2019/3/10時点) Edge、IE以外の主要なブラウザで利用可能です。 will-changeって何してくれるの？ will-changeを指定することによって、アニメーションのパフォーマンスを上げる事ができます。 アニメーションするプロパティーをwill-changeで指定することによって、ブラウザは事前にアニメーションの...
- 3月 12, 2019アニメーションで要素を動かす際に、left、right、top、bottomを使用しているコードを見かけることがあります。 しかし、leftなどの位置調整を行うプロパティーはレンダリングのパフォーマンスの低下を起こすため、アニメーションには使ってはいけません。 この記事では使用例を交えながら、transform、opacityの使い方を見ていきましょう。 TransformとLeftを使ったアニメーションのパフォーマンス比較 まず、transformとleftをそれぞれ使用した際のパフォーマンスの比較を行います。ここでは、パフォーマンスを比較しやすくするために、以下の条件を用意しました。 これ...
- 3月 12, 2019この記事ではブラウザの仕組みを図解を用いてわかりやすくご説明します。 最近のブラウザは優秀なので、ブラウザの仕組みを理解していなくても、パフォーマンスの問題が発生することは少ないかもしれません。 しかし、アニメーションを多用するサイトやユーザーインタラクティブなサイトの場合、パフォーマンスの問題はとてもシビアです。 ブラウザの仕組みを知ることで、ブラウザのパフォーマンスを最大限に引き出す実装を行うことができます。 画面がなめらかに表示されないのはなぜ？ スクロールをしていてカクつく。またはアニメーションがカクカクしている時というのはブラウザがどういう状態なのでしょうか？ まずは、この状態を定量...
- 3月 12, 2019はじめに 近年、Webサイトはますます複雑になり、また肥大化しています。それに合わせてブラウザの計算量も増え、パフォーマンスが問題となるケースがしばしばあります。 特にアニメーションやスクロール時などのボトルネックになりやすい箇所について取り上げます。 パフォーマンスの問題はブラウザの仕組みと深く関わるため、基礎的な知識がないと問題の解消が難しい部分ですが、この記事ではブラウザの仕組みと照らし合わせながらわかりやすくご説明します。 前知識. Browserの仕組みを知るべし ケーススタディー