リサイズ時に複数のdivの幅を計算する最適な方法は何ですか？

Question

この例では、サイズ変更時にdivの束の幅を計算する方法を知る必要があります。

私はこれを可能な限り絶対に実行したいと思います。 1つのページでわずか10 divから10,000 divまでの極端な例のように思えます。ここで

が問題のjQueryのでは基本的な例です：

$justABunchOfParentDivs = $('.class-matching-500-elements-on-a-page'); 
$(window).resize(function() { 

    $justABunchOfParentDivs.each(function() { 
     $(this).attr('data-width', $(this).width()); 
    }); 

}); 

私はjQueryのソリューションを必要とするだけでなく、超高速です非jQueryのソリューションを参照してくださいしたいと思います。あなたはこのようなwindow.requestAnimationFrameを使用することができます少しパフォーマンスを向上させるために

Answer 1

：

$(window).resize(function() { 
    window.requestAnimationFrame(function() { 
    $justABunchOfParentDivs.each(function() { 
      $(this).attr('data-width', $(this).width()); 
    }); 
    }); 
}); 

これは、ブラウザが（FPSのためのより良い）ことを望んでいる場合にのみ、あなたのコードを発射します。 はまた、あなたが標準のAPIを使用してそれを実行するかどうか、それは同様にパフォーマンスが向上します。

$justABunchOfParentDivs = document.querySelectorAll('.class-matching-500-elements-on-a-page'); 

window.onresize = function() { 
    window.requestAnimationFrame(function() { 
    Array.prototype.forEach.call($justABunchOfParentDivs, function(element) { 
      element.setAttribute('data-width', element.offsetWidth); 
    }); 
    }); 
}; 

Answer 2

を最大の答えにデバウンスを追加しました。生のJavaScript：

var query = document.querySelectorAll('.class-goes-here'), 
    delay = 250, 
    timeout = false; 

window.addEventListener('resize', function() { 
    clearTimeout(timeout); 
    timeout = setTimeout(function() { 
     window.requestAnimationFrame(function() { 
      Array.prototype.forEach.call(query, function(element) { 
        element.setAttribute('data-width', element.offsetWidth); 
      }); 
     }); 
    }, delay); 
});