私は主にモバイルとタブレット向けのウェブサイトに取り組んでいます。ちょっとお聞きしたいのですが、間隔を少し長くしすぎると何か欠点はありますか? 今のところ、5000ミリ秒の1つの間隔を使用して現在の時間を取得して確認し、100ミリ秒の1つの間隔を使用してデバイスの幅が変化するかどうかを確認しています(応答目的のため)
先輩が、その間隔をできるだけ短くするようにすると、穴やラグなどが発生する可能性があると言っていたと聞きました。本当ですか?
私は主にモバイルとタブレット向けのウェブサイトに取り組んでいます。ちょっとお聞きしたいのですが、間隔を少し長くしすぎると何か欠点はありますか? 今のところ、5000ミリ秒の1つの間隔を使用して現在の時間を取得して確認し、100ミリ秒の1つの間隔を使用してデバイスの幅が変化するかどうかを確認しています(応答目的のため)
先輩が、その間隔をできるだけ短くするようにすると、穴やラグなどが発生する可能性があると言っていたと聞きました。本当ですか?
ここでの回答者はどちらも正しい考えを持っています.キャッシュされた値を継続的にチェックして比較することを避けるために、ブラウザーはサイズ変更時に通知することができます.これは非常に悪いパフォーマンスです. しかし、不必要な呼び出しに関する先輩の議論は依然として正しいでしょう。なぜなら、多くのブラウザーはサイズ変更アクション (特に IE) の間、サイズ変更を継続的に実行し、大きなオーバーヘッドを引き起こす可能性があるからです。
これらのパフォーマンスの問題を軽減する 2 つのアイデアの組み合わせは、「スロットリング」と呼ばれる手法を使用してイベントをリッスンしますが、応答を頻繁に起動するだけです。
これには優れたプラグインがあります: http://benalman.com/projects/jquery-throttle-debounce-plugin/
私の心の健全な制限は、1秒あたり6〜7回の呼び出しを超えないようにすることです。つまり、終了関数を150ミリ秒ごとに1回だけ実行できるようにします(@Tsunamisの回答に続きます):
$(window).resize($.throttle(150, function(){ /* do something */ }));
更新:
このページと、関連するすべてのリンクされた記事を確認してください: 特に Web ワーカー、非同期イベント、およびタイムアウト
間隔を使用する場合の主な欠点は、私が知っている現在のすべての JS 実装がシングル スレッドであることです。したがって、100 ミリ秒ごとに関数を呼び出し、500 ミリ秒ごとに別の関数を呼び出すように間隔を設定すると、間隔は同時に実行されません。2 番目の間隔で実行するコードで返された最初の間隔に大きく依存している場合、遅かれ早かれ問題が発生します。
もう 1 つの注意点は、間隔があまり正確ではないことです。100 ミリ秒は ~100 ミリ秒と見なされるべきであり、設定された間隔と実際の間隔の差が非常に大きくなる可能性があることを間違えないでください (100 ミリ秒の間隔は、簡単に 150 ミリ秒になる可能性があります)。
結論として、あなたのチーフは正しいです、できるだけ避けてください。ただし、インターバルを使用する以外に方法がない場合もあります。その場合、すべての間隔をリストし、最小の共通分母を見つけて、クロージャーを使用して「その時が来た」ときにさまざまな関数を呼び出す 1 つの大きな間隔を設定します。
var allIntervals = (function()
{
var interval100MS = function(){};
var interval200MS = function(){};//etc...
var timesCalled = 0;
var timer = setInterval(function()
{
if (++timesCalled%2)
{
return interval100MS();
}
interval100MS();
return interval200MS();
},100);
return timer;//<-- expose so you can clear the interval, of course
}());
これを展開して、追加の間隔を設定したり、メインの間隔時間を変更したり、特定の間隔を設定解除したりできるオブジェクトを返すことができます...
編集
間隔を使用しているという事実を見落としていました。それは必要ありません。window.onresize
または、それwindow.addEventListener('resize',handlerFunction,false);
を行います。舞台裏では、JS には、あらゆる種類の自作コードよりもはるかに効率的に物事を処理するイベント サイクル/ループがあります。
最高の開発者は、本質的に怠け者であるとよく言われます。彼らは、必要なことが以前に行われていないことを確認するためだけに、多くのトラブルを経験します。彼らが必要なことをする何かを見つけたら、同じことを自分で書くよりも、それを使うでしょう。
とにかく、回答の一番上にリンクを追加しました。ここにもう一度追加します。特にweb workerへの参照を確認してください。これは、時間を確認している場合に役立つ可能性があります (どのように/なぜ/何をしているのかわかりません)。
タスクを X 秒ごとに実行するように設定します。これらのタスクは CPU 時間を必要とし、Web サイトのパフォーマンスを低下させます。もちろん、それらのタスクで何をするかによって異なります。しかし、5000ms ではなく 1000ms ごとに行うと、パフォーマンスが低下します。したがって、間隔にはできるだけ高い値を選択することを常にお勧めします。
jQuery を使用している場合は、次のコードを使用してデバイス幅の変更を確認できます。これにより、独自の間隔の実装よりもパフォーマンスが低下します。
$(window).resize(function() { /* do something */ });