window.requestAnimationFrame兼容性封装，调节重新渲染，提高网页性能_html/css

来源：懂视网责编：小采时间：2020-11-27 16:12:12

window.requestAnimationFrame兼容性封装，调节重新渲染，提高网页性能_html/css

window.requestAnimationFrame兼容性封装，调节重新渲染，提高网页性能_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öller. fixes from Paul Irish a

推荐度：

点击下载本文 文档为doc格式

导读window.requestAnimationFrame兼容性封装，调节重新渲染，提高网页性能_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öller. fixes from Paul Irish a

// 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ö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); };}());

比较常用的使用场景：调节重新渲染，提高网页性能。（将某些代码放到下一次重新渲染时执行。）

（以下场景来自：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);

上面的代码使用循环操作，将每个元素的高度都增加一倍。可是，每次循环都是，读操作后面跟着一个写操作。这会在短时间内触发大量的重新渲染，显然对于网页性能很不利。

我们可以使用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：

最适用的场合还是网页动画。下面是一个旋转动画的例子，元素每一帧旋转1度。

var rAF = window.requestAnimationFrame;var degrees = 0;function update() { div.style.transform = "rotate(" + degrees + "deg)"; console.log('updated to degrees ' + degrees); degrees = degrees + 1; rAF(update);}rAF(update);

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

window.requestAnimationFrame兼容性封装，调节重新渲染，提高网页性能_html/css

推荐度：

点击下载本文 文档为doc格式

标签：页面 window html

热门焦点

window.requestAnimationFrame兼容性封装，调节重新渲染，提高网页性能_html/css

window.requestAnimationFrame兼容性封装，调节重新渲染，提高网页性能_html/css

window.requestAnimationFrame兼容性封装，调节重新渲染，提高网页性能_html/css

最新推荐

猜你喜欢

热门推荐