CSSアニメーションがJSによってブロックされるかどうかについての簡単な議論

CSSアニメーションがJSによってブロックされるかどうかについての簡単な議論

CSS のアニメーション部分は JS によってブロックされますが、transform のアニメーションは影響を受けません。

以下は、js ブロッキング アニメーションを有効にした margin-left 移動アニメーションのパフォーマンス チャートです。

<スタイル>
.walkabout-old-school {
  アニメーション: 3 秒のスライド マージン 線形無限;
}
 
@keyframes スライドマージン {
  {margin-left: 0;} から
  50% {左マージン: 100%;}
  {margin-left: 0;} へ
}
</スタイル>
<スクリプト>
関数kill() {
  var start = +新しい日付;
  while (+新しい日付 - 開始 < 2000){}
}
</スクリプト> 

上の図では、kill メソッドを実行した後、アニメーションが 2 秒間停止してから続行されることが明確にわかります。

上の図から、js を有効にしてから 2 秒以内に、レンダリング プロセスは kill 関数が実行されるまで待機してから実行されることがわかります。下の図を見ると、マージンの変更によって DOM が再レイアウトされ、kill 関数が実行されるまでレイアウトが開始されないことがわかります。につながる

次に、アニメーションとして変換を使用する要素を確認します

.walkabout-new-school {
  アニメーション: 3 秒スライド変換線形無限;
}
@keyframes スライド変換 {
  {transform: translatex(0);} から
  50% {transform: translatex(300px);}
  {transform: translatex(0);} へ
}

次の図は実行中の比較チャートです(青はマージン、緑は変換)

上の図から、transformの使用はkillメソッドにまったく影響されないことがわかります。デバッグチャートを見てみましょう。

ここでは、margin は頻繁にページのリフローをトリガーしますが、transform はトリガーせず、js はページのリフローをブロックすることがわかります。そのため、マージンアニメーションが停止します。

したがって、日常生活でアニメーションを使用する場合は、変換をより頻繁に使用すると、最高のページパフォーマンスと効果を実現できます。

CSSアニメーションがJSによってブロックされるかどうかについてのこの記事はこれで終わりです。CSSアニメーションがJSによってブロックされるというより関連性の高いコンテンツについては、123WORDPRESS.COMの以前の記事を検索するか、以下の関連記事を引き続き参照してください。皆様が今後とも123WORDPRESS.COMを応援してくれることを願っています!

<<:  Apple M1チップにnginxをインストールし、vueプロジェクトをデプロイする詳細な手順

>>:  MySQL ディープページング問題の解決の実践記録

推薦する

Nginx に lua-nginx-module モジュールをインストールする方法

ngx_lua_module は、lua パーサーを nginx に埋め込み、lua 言語で記述され...

JavaScript での HTML キャンバスとページ ストレージ テクノロジの使用に関する詳細な説明

目次1. JavaScriptはHTMLでキャンバスを使用する2. ページストレージ技術1. Jav...

自動ウェブページ更新と自動ジャンプのサンプルコード

ウェブページの自動更新: <head></head> の間に次のコードを追加...

MySQL インデックスのパフォーマンス最適化の問題に対する解決策

MySQL によって作成される最適化はインデックスを追加することですが、インデックスを追加しても目的...

mysql ルートユーザーを認証できず、Navicat リモート認証プロンプト 1044 の問題を解決します

まず解決策を見てみましょう #------------mysql の root ユーザーに権限を付与...

Vueはリストのシームレスなスクロールを実装します

この記事の例では、リストのシームレスなスクロールを実現するためのvueの具体的なコードを参考までに共...

MySql エラー 1698 (28000) の解決策

1. 問題の説明: MysqlERROR1698 (28000) の解決方法、新しくインストールされ...

React Fragment の紹介と詳しい使い方

目次序文フラグメントの動機React Fragment の紹介と使用<React.Fragme...

Docker-compose チュートリアルのインストールとクイックスタート

目次1. Compose の紹介2. ComposeとDockerの互換性3. Dockerをインス...

グローバルトーストコンポーネントをカプセル化するVueの完全な例

目次序文1. vue-cliを使う1. Toastコンポーネントを定義する2. main.jsで設定...

Linux での mysql-5.7.28 インストール チュートリアル

1. 公式ウェブサイトから Linux バージョンをダウンロードします: https://dev.m...

WeChatアプレット開発によりホームページポップアップボックスアクティビティガイダンス機能が実現

目次1. 需要2. データベース設計3.Javaバックグラウンド構成の実装4. WeChatアプレッ...

Linuxにgitをインストールする方法

1. はじめにGit は、規模の大小を問わずあらゆるプロジェクトを俊敏かつ効率的に処理するために使用...

Vueバインディングオブジェクトと配列変数を変更した後にレンダリングできない問題の解決策

プロジェクトシナリオ:ページ表示には <ul> タグがあります。リストデータを動的に表示...

Vuexの特性と機能の詳細な説明

目次Vuex とは何ですか? Vuexの5つの特性vuex の State 機能とは何ですか? vu...