Web Workerを使用することで負荷の大きな計算処理をWorker Thread（ワーカースレッド）で実行することができます。これによりMain Thread（メインスレッド）を空き状態にすることができるため、ブラウザのパフォーマンスが向上します。 この記事ではWeb Workerの仕組みと使い方をご説明します。 Web Workerって何？ ブラウザでは主にMain Thread（メインスレッド）、Worker Thread(ワーカースレッド)、Raster Thread(ラスタースレッド)、Compositor Thread(コンポジタースレッド)の４種類のスレッドがそれぞれ割り当てら...
-
- 3月 12, 2019アニメーションで要素を動かす際に、left、right、top、bottomを使用しているコードを見かけることがあります。 しかし、leftなどの位置調整を行うプロパティーはレンダリングのパフォーマンスの低下を起こすため、アニメーションには使ってはいけません。 この記事では使用例を交えながら、transform、opacityの使い方を見ていきましょう。 TransformとLeftを使ったアニメーションのパフォーマンス比較 まず、transformとleftをそれぞれ使用した際のパフォーマンスの比較を行います。ここでは、パフォーマンスを比較しやすくするために、以下の条件を用意しました。 これ...
- 3月 12, 2019この記事ではブラウザの仕組みを図解を用いてわかりやすくご説明します。 最近のブラウザは優秀なので、ブラウザの仕組みを理解していなくても、パフォーマンスの問題が発生することは少ないかもしれません。 しかし、アニメーションを多用するサイトやユーザーインタラクティブなサイトの場合、パフォーマンスの問題はとてもシビアです。 ブラウザの仕組みを知ることで、ブラウザのパフォーマンスを最大限に引き出す実装を行うことができます。 画面がなめらかに表示されないのはなぜ？ スクロールをしていてカクつく。またはアニメーションがカクカクしている時というのはブラウザがどういう状態なのでしょうか？ まずは、この状態を定量...
- 3月 12, 2019はじめに 近年、Webサイトはますます複雑になり、また肥大化しています。それに合わせてブラウザの計算量も増え、パフォーマンスが問題となるケースがしばしばあります。 特にアニメーションやスクロール時などのボトルネックになりやすい箇所について取り上げます。 パフォーマンスの問題はブラウザの仕組みと深く関わるため、基礎的な知識がないと問題の解消が難しい部分ですが、この記事ではブラウザの仕組みと照らし合わせながらわかりやすくご説明します。 前知識. Browserの仕組みを知るべし ケーススタディー
- 3月 8, 2019スクロールした際のパフォーマンスが悪い場合（スクロールがカクつく場合）にはpassive:trueの使用を検討しましょう。この記事ではイベントリスナーにpassive:trueというヒントを使うことで、スクロールをスムーズにする方法についてご説明します。 passive:trueの役割 passive:trueはevent.preventDefault();という関数をイベント内で読んでいないことをブラウザに教えてあげるために使用します。 具体的には次のように使用します。 passive:trueの使用例 [crayon-6637115da4f76696731668/] なぜスクロールにカクつ...