window.requestAnimationFrame 兼容性封装,调节重新渲染,提高网页性能

// 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);
时间: 2024-10-10 04:52:40

window.requestAnimationFrame 兼容性封装,调节重新渲染,提高网页性能的相关文章

提高网页性能的九大技巧

第一条,DOM 的多个读操作(或多个写操作),应该放在一起.不要两个读操作之间,加入一个写操作. 第二条,如果某个样式是通过重排得到的,那么最好缓存结果.避免下一次用到的时候,浏览器又要重排. 第三条,不要一条条地改变样式,而要通过改变 class,或者 csstext 属性,一次性地改变样式. // bad var left = 10; var top = 10; el.style.left = left + "px"; el.style.top = top + "px&q

HTTP/2 服务器推送(Server Push)教程(HTTP/2 协议的主要目的是提高网页性能,配置Nginx和Apache)

HTTP/2 协议的主要目的是提高网页性能. 头信息(header)原来是直接传输文本,现在是压缩后传输.原来是同一个 TCP 连接里面,上一个回应(response)发送完了,服务器才能发送下一个,现在可以多个回应一起发送. 服务器推送(server push)是 HTTP/2 协议里面,唯一一个需要开发者自己配置的功能.其他功能都是服务器和浏览器自动实现,不需要开发者关心. 本文详细介绍服务器推送的原理和配置方法. 一.传统的网页请求方式 下面是一个非常简单的 HTML 网页文件index.

OutputCache缓存优化asp.net代码 提高网页性能

对于asp.net编写的网页来说,使用缓存是一种非常重要也是很常用的优化技术,它可以大大减轻服务器的负载压力,优化这些网页的性能,在网与使用 .NET Framework 的任何其他功能相比,适当地使用缓存可以更好地提高站点的性能.同时,在网页加速显示上也起了很大的作用. OutputCache以声明的方式控制 ASP.NET 页或页中包含的用户控件的输出缓存策略. 语法: <%@ OutputCache Duration="#ofseconds"   Location=&quo

网页性能管理详解:浅谈chrome-Timeline及window.requestAnimationFrame()方法

你遇到过性能很差的网页吗? 这种网页响应非常缓慢,占用大量的CPU和内存,浏览起来常常有卡顿,页面的动画效果也不流畅. 你会有什么反应?我猜想,大多数用户会关闭这个页面,改为访问其他网站.作为一个开发者,肯定不愿意看到这种情况,那么怎样才能提高性能呢? 本文将详细介绍性能问题的出现原因,以及解决方法. 一.网页生成的过程 要理解网页性能为什么不好,就要了解网页是怎么生成的. 网页的生成过程,大致可以分成五步. HTML代码转化成DOM CSS代码转化成CSSOM(CSS Object Model

动画优化之window.requestAnimationFrame()

requestAnimationFrame解决了浏览器不知道javascript动画什么时候开始.不知道最佳循环间隔时间的问题. 编写动画循环的关键,是要知道延迟时间多长合适.一方面,循环时间必须足够短,这样才能保证动画效果更平滑流畅:另一方面,循环还要足够长,这样才能保证浏览器有能力渲染产生的变化.大多数显示器的刷新频率是60Hz,相当于每秒钟重绘60次.大多数浏览器都会对重绘操作加以限制,不超过显示器的重绘频率,因为即使超过了这个频率,用户体验也不会有提升. 因此最平滑动画的最佳循环间隔是1

window.requestAnimationFrame() ,做逐帧动画,你值得拥有

window.requestAnimationFrame() 方法告诉浏览器您希望执行动画,并请求浏览器调用指定的函数在下一次重绘之前更新动画.该方法使用一个回调函数作为参数,这个回调函数会在浏览器重绘之前调用. 如果你想做逐帧动画的时候,你应该用这个方法.这就要求你的动画函数执行会先于浏览器重绘动作.通常来说,被调用的频率是每秒60次,但是一般会遵循W3C标准规定的频率.如果是后台标签页面,重绘频率则会大大降低. 基本语法: requestID = window.requestAnimatio

requestAnimationFrame兼容性扩展

/** * requestAnimationFrame兼容性扩展,两方面工作: * 1.把各浏览器前缀进行统一 * 2.在浏览器没有requestAnimationFrame方法时将其指向setTimeout方法 * */ (function() { var lastTime = 0; var vendors = ["webkit", "moz"]; for (var x = 0; x < vendors.length && !window.r

Window.requestAnimationFrame()动画更新

概述 Window.requestAnimationFrame()方法告诉浏览器你希望执行动画,并且再下一次重绘之前要求浏览器调用一个特定的函数去更新动画.该方法把一个回调函数作为参数,该回调函数会在浏览器下一次重绘之前执行. 注意:如果你想在浏览器下次重绘之前继续更新下一帧动画,那么回调函数自身必须再次调用Window.requestAnimationFrame() 当你准备更新你的动画的时候,你应该调用该方法.这会要求你的动画函数在浏览器下次重绘之前被调用.回调的频率一般是60次/秒,但通常

window.requestAnimationFrame与Tween.js配合使用实现动画缓动效果

window.requestAnimationFrame 概述 window.requestAnimationFrame()这个方法是用来在页面重绘之前,通知浏览器调用一个指定的函数,以满足开发者操作动画的需求.这个方法接受一个函数为参,该函数会在重绘前调用. 注意: 如果想得到连贯的逐帧动画,函数中必须重新调用 requestAnimationFrame(). 如果你想做逐帧动画的时候,你应该用这个方法.这就要求你的动画函数执行会先于浏览器重绘动作.通常来说,被调用的频率是每秒60次,但是一般