サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
Pixel 9
coding-memo.work
単体のアニメーションだとそれほど気にならない場合でも、表示範囲の中で複数のアニメーションが同時に走ったりする場合、負荷が増大して処理落ちなどを起こすことがあります。 レンダリング負荷を軽減するため試行錯誤をしたので、備忘録もかねて実施した内容をまとめました。 可読性や保守性など、よりクリーンなコードを目指す場合は不適切な書き方があるかもしれません。 コードは参考程度に見ていただき、各自の環境でデバッグのうえより適切なコードを選択していただければと思います。 パフォーマンスパネルでデバッグ今回はChromeのパフォーマンスパネルで検証をしました。 パフォーマンス計測後の詳細からJSファイルを参照すると、具体的な実行時間まで表示されるため重たい処理の特定に非常に重宝しました。 パフォーマンスパネルの使い方の詳細は以下をご参照ください。
※本記事はejsを利用していません。 代わりにHTMLファイルをejsと同等の機能を追加する(ハンドルバー化する)プラグイン vite-plugin-handlebars を利用しています。ejsは以下プラグイン vite-plugin-ejs を利用すると実装できるようです。 github.com GitHub – trapcodeio/vite-plugin-ejs: Vite: Use Ejs in your entypoints i.e index.html Vite: Use Ejs in your entypoints i.e index.html. Contribute to trapcodeio/vite-plugin-ejs …
このページを最初にブックマークしてみませんか?
『Web production note』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く