divlayer_javascriptスキルの動作とパフォーマンスの最適化

これは、ページ構造が非常に複雑である場合や、コンピューターの構成が適切でない場合にも発生します。速度低下の理由を理解するために、いくつかのデモ比較を行った結果、mousemove イベントにタイマーを追加するとエクスペリエンスが向上することが最終的にわかりました。

コード全体の鍵となるのは、マウスが押されたときに開始されるタイマーです。これにより、Onmousemove イベントが 30 ミリ秒ごとに実行され、マウスが放されるとタイマーがクリアされます。

timer=setInterval(function(){flag=true;},30);

これにより、ブラウザが div レイヤーを描画する負担が軽減されます。ドラッグするたびに描画されます。実際には、移動するときは人間の目で変化を検出するには短すぎます。遅延間隔は経験に基づいて自分で設定できます。

コードをコピー コードは次のとおりです。

function Endrag(source,target){
ソース =typeof(ソース)=="オブジェクト" ? ソース:document.getElementById(ソース);
ターゲット=typeof(ターゲット)=="オブジェクト" ?
var x0= 0,y0=0,x1=0,y1=0,moveable=false,index=100;
var timer,flag=false;
source.onmousedown= function(e ){
e = e ? e : (window.event ? window.event : null);
y0 = e.clientY ; (parseInt(source.style.left))?0:parseInt(source.style.left);
y1 = isNaN(parseInt(source.style.top))?0:parseInt(source.style.top);
moveable = true;
//マウスが押されると、タイマーが動作を開始し、50 ミリ秒ごとに Mousemove イベントを実行します。
timer=setInterval(function(){flag=true;},30); 🎜> };
//ドラッグ;
source.onmousemove=function(e){
e = e ? e : (window.event ? window.event : null); ) {
if(flag){
i ;
flag=false;
target.style.left = (e.clientX x1 - x0 ) "px"; top = (e.clientY y1 - y0 ) "px";
}
}
} //ドラッグを停止します。
source.onmouseup=function (e){
if(moveable) {
moveable = false;
//alert(i);
}; source.onmouseout=function (e){
if(moveable) {
moveable = false;
//alert(i);
} ;
}