window.requestAnimationFrame の互換性カプセル化、再レンダリングの調整、Web ページのパフォーマンスの向上_html/css_WEB-ITnose

// http://paulirish.com/2011/requestanimationframe-for-smart-animating/// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating// requestAnimationFrame polyfill by Erik M&ouml;ller. fixes from Paul Irish and Tino Zijdel// MIT license(function() {    var lastTime = 0;    var vendors = ['ms', 'moz', 'webkit', 'o'];    for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {        window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];        window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame']                                    || window[vendors[x]+'CancelRequestAnimationFrame'];    }     if (!window.requestAnimationFrame)        window.requestAnimationFrame = function(callback, element) {            var currTime = new Date().getTime();            var timeToCall = Math.max(0, 16 - (currTime - lastTime));            var id = window.setTimeout(function() { callback(currTime + timeToCall); },               timeToCall);            lastTime = currTime + timeToCall;            return id;        };     if (!window.cancelAnimationFrame)        window.cancelAnimationFrame = function(id) {            clearTimeout(id);        };}());

一般的な使用シナリオ: 再レンダリングを調整して Web ページのパフォーマンスを向上させます。 (次回の再レンダリング時に実行されるコードをいくつか入れます。)

(次のシーンは http://www.ruanyifeng.com/blog/2015/09/web-page-performance-in- Depth から取得したものです) .html )

シナリオ 1:

function doubleHeight(element) {  var currentHeight = element.clientHeight;  element.style.height = (currentHeight * 2) + 'px';}elements.forEach(doubleHeight);

上記のコードは、ループ操作を使用して各要素の高さを 2 倍にします。ただし、ループを通過するたびに、読み取り操作の後に書き込み操作が続きます。これにより、短期間に大量の再レンダリングがトリガーされ、明らかに Web ページのパフォーマンスに非常に悪影響を及ぼします。

window.requestAnimationFrame() を使用して読み取り操作と書き込み操作を分離し、すべての書き込み操作を次の再レンダリングに含めることができます。

function doubleHeight(element) {  var currentHeight = element.clientHeight;  window.requestAnimationFrame(function () {    element.style.height = (currentHeight * 2) + 'px';  });}elements.forEach(doubleHeight);

シナリオ 2:

ページ スクロール イベント (scroll) のリスニング関数は、window.requestAnimationFrame() を使用して次の再レンダリングまで延期するのに非常に適しています。

$(window).on('scroll', function() {   window.requestAnimationFrame(scrollHandler);});

シーン 3:

最も適した機会は Web アニメーションです。以下は、要素がフレームごとに 1 度回転する回転アニメーションの例です。

りー