Ghost Defense-3)horoとghost移動(ブラウザのパフォーマンスを考慮したコードを記述)

ブラウザのレンダリング順序とパフォーマンスを考慮するコードを作成します.

🕹 要素をリアルタイムで移動

다음과 기능을 위해 요소를 계속해서 실시간으로 움직여야 한다.
- 키를 눌러 용사를 움직여야한다.
- 유령은 매 라운드마다 화면 위에서 아래로 이동해야한다.

📌 上部値と左側値の変更

この2つの最も簡単な方法は、jsで要素の上部と左側を動的に迅速に変更することです.
でも….ブラウザのパフォーマンスを考慮して、コードを書くときに最適な方法ですか?

📌 translate

topやleftではなく変換を使用してコードを記述することにします.
以前に学習したブラウザレンダリング手順を振り返ってみましょう.

🕹 ブラウザレンダリング手順

🕹 パフォーマンスの比較

topとleftを直接使ってゲーム全体を作り、性能を測定し、変換を使って再包装し、性能を測定すれば、これは非常に明確な比較になりますが、残念ながらできませんでした.
このプロジェクトだけに時間をかけすぎてはいけないし、ゲームの実施事項も規定されていないので、制作の時から始めました.
最初から規模を拡大するよりも、まずゲームの全過程を実現したほうがいい.
逆に,非常に簡単なコードを記述し,各コードの性能を励起イベントにより比較した.
mosemove eventでは、マウスが画面内を移動し、画像がカーソルに従って移動し、位置が変更されます.
次に、mousemoveイベントが発生するたびに要素の位置を変更する方法がどのようなパフォーマンスの違いをもたらすかを見てみましょう.

📌 topとleftの使用

📌 translateの使用

マウスを動かすだけでも大きな違いがあります.
Heroキーを押すたびに移動します
20ミリ秒ごとに1 pxの鬼場を移動したら?
ブラウザのパフォーマンスに大きな違いがあります.
また、上記のテストとは異なり、現在作成されているゲームの規模が大きいため、複雑なレンダリング段階では、パフォーマンスを最大限に考慮する必要があります.

🕹 変更するたびに位置と幅を検索

トップとleftを使って簡単な問題をtransformに変換するには、考慮すべきことが多くなります.
pageXoffsetのような座標では、移動要素の位置を特定できません.
getBoodingClientRect()を使用して位置情報を取得します.
位置を変更するたびに関数が呼び出されます.たとえば

- bullet이 이동할 때마다 ghost근처에 왔는지 판별하기
- ghostField가 이동할 때마다 화면 아래까지 도달했는지 판별하기

transformが使用されているため、各属性に変換属性値が付与されます.
変換が終了するたびに必要な関数を呼び出すためにtransitiononed eventを設定します.

🕹 完成時に実際のプロジェクトの性能を測定する

経験の悪い部分の比重は大きくないが、零細な発生が見られる.主にヒーローが発砲した時に発生したことについて、もう一度改造して改善したいと思います.

Reference

箱狐(組織)-ブラウザのパフォーマンスの最適化-レポートを生成しないCSSプロパティ