JavaScriptドラッグ＆ドロップ効果シリーズ5——性能最適化
原文由来:[url]http://www.cainiao8.com/web/js_examples/22_tuozhuai 5.html
JavaScriptのドラッグの性能問題
適度な距離でドラッグすると、マウスのmousemoveイベントは100回以上発生する可能性があります.スクリプトをドラッグするには、mousemoveイベントに応答するだけで、リソースがかかりますか?資源管理器に聞いてみましょう.
説明します.私がテスト用のブラウザはFireFoxです.
まず、ドラッグしない場合、リソースマネージャは以下のようにスクリーンショットします.CPU占有率は0-2の間で跳ねています.0の時間は長いです.
[img]http://www.cainiao8.com/web/js_examples/tuozhuai_xingneng 1.jpg[img]
その後、引っ張り状態のCPU占有率を見てみます.スクリーンショットは11と表示されますが、実際には10-15の間で変動しています.しかも13、4の時間が多いです.これは速いスピードでドラッグする時の占有率ですが、ゆっくりドラッグしてもほぼ同じです.そして、一番速いスピードで最大距離のマウスを振ると、CPUの占有率は最高で22%になります.
[img]http://www.cainiao8.com/web/js_examples/tuozhuai_xingneng.jpg[img]
ドラッグ性能を最適化
ドラッグの性能を改善してもらえますか?私達はすでに資源の占有が多い原因を知っています.それを突破口にします.
私たちは、mousemoveごとにイベント応答関数を呼び出し、ミリ秒レベルでN回以上発生する可能性があることを知っています.もし私たちがmousemove事件を無視すればいいじゃないですか?もちろん永久に放っておくのではなく、一段ごとに時間が一回だけmousemoveに応答します.幸いなことに、JavaScriptはsetTimeout関数を提供しています.私たちはそれを使ってmousemoveを「黙らせる」ようにします.
修正部分のコードは以下の通りです.
性能テストの結果:スクリーンショットから見ると、CPU占有率は10で、あまり進歩していないようです.しかし、実際には、ドラッグの過程では5-13の間で変動しています.ほとんどの時間は10以下です.また、CPUの占有率は「力を入れてマウスを振る」としても、明らかに変化しません.性能の最適化はまだ一定の効果がある.
[img]http://www.cainiao8.com/web/js_examples/tuozhuai_xingneng.jpg[img]
調整遅延時間は40ミリ秒で、CPUの占有率はさらに下がります.私のコンピュータではどうしても10を超えません.また、明らかな遅延現象(一秒はまだ24フレームより大きい)は依然として見られない.だから私はこれが適当な遅延だと思います.完成したページを見てもいいです.
遅延を100ミリ秒に調整してみましたが、CPUの占有率は5を超えず、最大は7です.遅延現象は明らかです.
最後に私はまたIE 8でテストしました.性能の差がもっとはっきりしています.
JavaScriptドラッグシリーズ
1.JavaScriptドラッグ
2.JavaScriptドラッグ2——多元素、分離JS
3.JavaScriptドラッグ3——クイックドラッグの問題を解決する
4.JavaScriptドラッグ4——元素の位置を得る
5.JavaScriptドラッグ5——性能最適化
6.JavaScriptドラッグ6——エラーの修復
JavaScriptのドラッグの性能問題
適度な距離でドラッグすると、マウスのmousemoveイベントは100回以上発生する可能性があります.スクリプトをドラッグするには、mousemoveイベントに応答するだけで、リソースがかかりますか?資源管理器に聞いてみましょう.
説明します.私がテスト用のブラウザはFireFoxです.
まず、ドラッグしない場合、リソースマネージャは以下のようにスクリーンショットします.CPU占有率は0-2の間で跳ねています.0の時間は長いです.
[img]http://www.cainiao8.com/web/js_examples/tuozhuai_xingneng 1.jpg[img]
その後、引っ張り状態のCPU占有率を見てみます.スクリーンショットは11と表示されますが、実際には10-15の間で変動しています.しかも13、4の時間が多いです.これは速いスピードでドラッグする時の占有率ですが、ゆっくりドラッグしてもほぼ同じです.そして、一番速いスピードで最大距離のマウスを振ると、CPUの占有率は最高で22%になります.
[img]http://www.cainiao8.com/web/js_examples/tuozhuai_xingneng.jpg[img]
ドラッグ性能を最適化
ドラッグの性能を改善してもらえますか?私達はすでに資源の占有が多い原因を知っています.それを突破口にします.
私たちは、mousemoveごとにイベント応答関数を呼び出し、ミリ秒レベルでN回以上発生する可能性があることを知っています.もし私たちがmousemove事件を無視すればいいじゃないですか?もちろん永久に放っておくのではなく、一段ごとに時間が一回だけmousemoveに応答します.幸いなことに、JavaScriptはsetTimeout関数を提供しています.私たちはそれを使ってmousemoveを「黙らせる」ようにします.
修正部分のコードは以下の通りです.
function move(event){
event = event || window.event;
if(dragElement){
var x,y;
y = event.clientY - mouseY + objY;
x = event.clientX - mouseX + objX;
dragElement.style.top = y + "px";
dragElement.style.left = x + "px";
// ，
document.onmousemove = null;
setTimeout("document.onmousemove = move;",30);
}
} 性能テストの結果:スクリーンショットから見ると、CPU占有率は10で、あまり進歩していないようです.しかし、実際には、ドラッグの過程では5-13の間で変動しています.ほとんどの時間は10以下です.また、CPUの占有率は「力を入れてマウスを振る」としても、明らかに変化しません.性能の最適化はまだ一定の効果がある.
[img]http://www.cainiao8.com/web/js_examples/tuozhuai_xingneng.jpg[img]
調整遅延時間は40ミリ秒で、CPUの占有率はさらに下がります.私のコンピュータではどうしても10を超えません.また、明らかな遅延現象(一秒はまだ24フレームより大きい)は依然として見られない.だから私はこれが適当な遅延だと思います.完成したページを見てもいいです.
遅延を100ミリ秒に調整してみましたが、CPUの占有率は5を超えず、最大は7です.遅延現象は明らかです.
最後に私はまたIE 8でテストしました.性能の差がもっとはっきりしています.
JavaScriptドラッグシリーズ
1.JavaScriptドラッグ
2.JavaScriptドラッグ2——多元素、分離JS
3.JavaScriptドラッグ3——クイックドラッグの問題を解決する
4.JavaScriptドラッグ4——元素の位置を得る
5.JavaScriptドラッグ5——性能最適化
6.JavaScriptドラッグ6——エラーの修復