css

  • この記事ではChromeのDevtool(開発ツール)を使ったパフォーマンスの調査方法についてご説明致します。アニメーションがカクカクする、画面がちらつくなどの問題が起こった場合にパフォーマンスの観点から問題を解決しましょう。 では、まずはRenderingパネルを用いた調査方法からご説明します。 方法1. Rendering(レンダリング)パネルで調査する はその名の通り、レンダリングに関連するパフォーマンスを調査するためのパネルです。ページ全体でアニメーションを多用していたり、スクロール時に画面下部の表示が遅れる場合などはこのパネルで調査します。 すると、Paint(ペイント)の処理に影響...
  • animationやtransitionを使ってCSSアニメーションを行った際に、アニメーションがカクついて困った経験はありませんか?そんな時は この記事ではwill-changeの使う際の実装方法についてご説明します。 will-changeのブラウザサポート状況(2019/3/10時点) Edge、IE以外の主要なブラウザで利用可能です。 will-changeって何してくれるの? will-changeを指定することによって、アニメーションのパフォーマンスを上げる事ができます。 アニメーションするプロパティーをwill-changeで指定することによって、ブラウザは事前にアニメーションの...
  • アニメーションで要素を動かす際に、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-5e80892d907d0850037177/] なぜスクロールにカクつ...
  • will-changeをサポートするブラウザが増えたことによって、will-changeを使ったアニメーションの最適化が少しずつ使われるようになってきました。しかし、 ここではChromeブラウザを使ってwill-changeの確認方法について解説したいと思います。 will-changeの使い方については以下の記事を御覧ください。 will-changeはブラウザ内部で何をしているのか? will-changeはLayer(レイヤー)を分離する事でアニメーションを最適化しています。Layerの分離は変更の際の計算量を少なくするために大変有効です。例えば、Layerを分離せず描写を行った場合に...
  • この記事の目的 YoutubeやVimeoなどをサイトに埋め込みたい場合、iframeを使用する事があると思います。iframeは画面幅で自動調節されませんが、このテクニックを使うことで 成果物 まずはこの記事でできる成果物のご紹介です。 Youtube こちらは実際に埋め込まれたYoutubeになります。 Vimeo Vimeoも大丈夫ですね。 iframeをレスポンシブにしよう! Imageタグの様にふるまうDivタグをつくるにはまず、iframeを2つのDivで囲みます。 iframeの幅はの部分で定義しています。 [crayon-5e80892d90a16125089308/] そして...

最新記事