菜单

网页性能管理详解

2018年12月20日 - Html/Html5

网页性能管理详解

2015/09/17 · HTML5,
JavaScript ·
性能

原文出处:
阮一峰   

你遇见了性分外不同的网页为?

这种网页响应异常慢,占用大量之CPU和内存,浏览起时爆发卡顿,页面的动画片效果呢非通畅。

图片 1

你会面生出什么反应?我臆想,大多数用户会关闭是页面,改吧访其他网站。作为一个开发者,肯定不乐意看看那种景观,怎么样才能提升性能为?

本文将详细介绍性问题之面世因,以及缓解智。

你遇见了性特别不同的网页为?

同一、网页生成的进程

若是精晓网页性能为何不佳,就设了然网页是怎转移的。

图片 2

网页的更动过程,大致可分为五步。

HTML代码转化成DOM CSS代码转化成CSSOM(CSS Object Model)
结合DOM和CSSOM,生成一蔸渲染树(包含每个节点的视觉信息)
生成布局(layout),即将有渲染树的有节点开展平面合成
将布局绘制(paint)在屏幕上

1
2
3
4
5
HTML代码转化成DOM
CSS代码转化成CSSOM(CSS Object Model)
结合DOM和CSSOM,生成一棵渲染树(包含每个节点的视觉信息)
生成布局(layout),即将所有渲染树的所有节点进行平面合成
将布局绘制(paint)在屏幕上

旋即五步里面,第一步到第三步都挺快,耗时的凡第四步和第五步。

“生成布局”(flow)和”绘制”(paint)这点儿步,合称为”渲染“(render)。

图片 3

这种网页响应万分慢,占用大量之CPU和内存,浏览起时来卡顿,页面的动画效果呢未通畅。

其次、重排与重绘

网页生成的早晚,至少会渲染一不良。用户访问的长河遭到,还会见不断重复渲染。

以下三栽情况,会招网页又渲染。

复渲染,就待更转布局及更绘制。前者名”重排”(reflow),后者称”重绘”(repaint)。

需要注意的凡,”重绘”不自然需”重排”,比如改变有网页元素的水彩,就只是会晤接触”重绘”,不谋面触发”重排”,因为布局尚未改观。不过,”重排”必然造成”重绘”,比如改变一个网页元素的地方,就碰面同时触发”重排”和”重绘”,因为布局改变了。

图片 4

其三、对于性的熏陶

重排和重绘会不断触发,这是不可逆袭的。不过,它们分外耗资源,是引致网页性能低下的根本原因。

加强网页性能,就是只要大跌”重排”和”重绘”的频率和本,尽量少接触重新渲染。

前方提到,DOM变动与体变动,都相会触发重新渲染。然而,浏览器已经老智能了,会尽量把拥有的改变集中在共,排成一个队,然后五回性执行,尽量防止多次重渲染。

JavaScript

div.style.color = ‘blue’; div.style.marginTop = ’30px’;

1
2
div.style.color = ‘blue’;
div.style.marginTop = ’30px’;

点代码中,div元素有有限独样式变动,不过浏览器就碰面接触一差重排和重绘。

假如写得不好,就会见硌两软重排和重绘。

JavaScript

div.style.color = ‘blue’; var margin = parseInt(div.style.marginTop);
div.style.marginTop = (margin + 10) + ‘px’;

1
2
3
div.style.color = ‘blue’;
var margin = parseInt(div.style.marginTop);
div.style.marginTop = (margin + 10) + ‘px’;

地点代码对div元素设置背景观未来,第二履要求浏览器为有拖欠因素的岗位,所以浏览器不得不就重排。

相似的话,样式的刻画操作下,假使发生脚这么些性的朗读操作,都会见引发浏览器就还渲染。

JavaScript

offsetTop/offsetLeft/offsetWidth/offsetHeight
scrollTop/scrollLeft/scrollWidth/scrollHeight
clientTop/clientLeft/clientWidth/clientHeight getComputedStyle()

1
2
3
4
offsetTop/offsetLeft/offsetWidth/offsetHeight
scrollTop/scrollLeft/scrollWidth/scrollHeight
clientTop/clientLeft/clientWidth/clientHeight
getComputedStyle()

故,从性能角度考虑,尽量不要管读操作以及描绘操作,放在一个讲话里面。

JavaScript

// bad div.style.left = div.offsetLeft + 10 + “px”; div.style.top =
div.offsetTop + 10 + “px”; // good var left = div.offsetLeft; var top =
div.offsetTop; div.style.left = left + 10 + “px”; div.style.top = top +
10 + “px”;

1
2
3
4
5
6
7
8
9
// bad
div.style.left = div.offsetLeft + 10 + "px";
div.style.top = div.offsetTop + 10 + "px";
 
// good
var left = div.offsetLeft;
var top  = div.offsetTop;
div.style.left = left + 10 + "px";
div.style.top = top + 10 + "px";

相似的平整是:

体制表越简单,重排和重绘就更加快。
重排与重绘的DOM元素层级更加强,成本就一发强。
table元素的重新排与重绘成本,要高于div元素

1
2
3
样式表越简单,重排和重绘就越快。
重排和重绘的DOM元素层级越高,成本就越高。
table元素的重排和重绘成本,要高于div元素

您汇合爆发啊影响?我猜,大多数用户会倒闭这个页面,改吗看其他网站。作为一个开发者,肯定不甘于看到这种气象,那么怎么样才能提高性也?

季、提高性的九只技巧

暴发有艺,可以落浏览器还渲染的频率和资金。

先是久是高达亦然省说到的,DOM
的大都单读操作(或五只勾操作),应该放在同。不要少于独读操作中,插手一个状操作。

老二修,即便某个样式是透过重排得到的,那么极端好缓存结果。避免下一致不善以的时候,浏览器又比方重排。

其三长条,不要一条条地改变样式,而假若因而变更class,或者csstext属性,一遍性地转移样式。

JavaScript

// bad var left = 10; var top = 10; el.style.left = left + “px”;
el.style.top = top + “px”; // good el.className += ” theclassname”; //
good el.style.cssText += “; left: ” + left + “px; top: ” + top + “px;”;

1
2
3
4
5
6
7
8
9
10
11
// bad
var left = 10;
var top = 10;
el.style.left = left + "px";
el.style.top  = top  + "px";
 
// good
el.className += " theclassname";
 
// good
el.style.cssText += "; left: " + left + "px; top: " + top + "px;";

季条,尽量采用离线DOM,而休是实在的网面DOM,来改变元素样式。比如,操作Document
Fragment对象,完成后再行将此目标在DOM。再依,使用 cloneNode()方法,在仿制的节点上拓展操作,然后再度用克隆的节点替换原始节点。

第五长达,先将元素如为 display: none
(需要1不佳重排和重绘),然后对这节点开展100涂鸦操作,最后再复苏呈现(需要1次等重排和重绘)。这样一来,你固然因而半不成重复渲染,取代了可能大及100次于的还渲染。

第六长达,position属性为absolute或fixed的要素,重排的开销会相比粗,因为不用考虑其对另外因素的影响。

第七修,只当必要之时光,才将元素的display属性为可见,因为不可见的因素不影响还排与重绘。其它,visibility
: hidden 的元素就针对重新排起震慑,不影响重绘。

第八漫长,使用虚拟DOM的脚本库,比如React等。

第九修,使用
window.requestAnimationFrame()、window.requestIdleCallback()这点儿单主意调节重新渲染(详见后文)。

正文将详细介绍性问题的出现由,以及缓解模式。

五、刷新率

有的是时,密集的再一次渲染是力不从心避免的,比如scroll事件的回调函数和网页动画。

网页动画的各级一样轴(frame)都是一致欠好还渲染。每秒低于24帧的卡通片,人眼睛就可以感受及停顿。一般的网页动画,需要达成每秒30幅到60帧的频率,才可以相比较流利。假如会及每秒70幅甚至80幅,就会合尽流畅。

图片 5

大多数彰显器的基础代谢频率是60Hz,为了与系统一样,以及省电力,浏览器会自动按那些频率,刷新动画(如果得以形成的口舌)。

图片 6

为此,假如网页动画能够就每秒60轴,就会以及呈现器同步刷新,达到最佳的视觉效果。这象征,一秒中进行60不好更渲染,每一次重复渲染之岁月不克超越16.66皮秒。

图片 7

同等秒之内会好微次重复渲染,那一个目的即深受称呼”刷新率”,英文为FPS(frame
per second)。60次又渲染,就是60FPS。

如出一辙、网页生成的历程

万一通晓网页性能为何欠好,就设打听网页是怎么转移的。

图片 8

网页的生成过程,大致可分成五步。

  1. HTML代码转化成DOM
  2. CSS代码转化成CSSOM(CSS Object Model)
  3. 整合DOM和CSSOM,生成一株渲染树(包含每个节点的视觉音讯)
  4. 转变布局(layout),即将有渲染树的备节点举办平面合成
  5. 以布局绘制(paint)在屏幕上

及时五步里面,第一步到第三步都很急匆匆,耗时底凡第四步和第五步。

“生成布局”(flow)和”绘制”(paint)这有限步,合称为”渲染”(render)。

图片 9

六、开发者工具的提姆eline面板

Chrome浏览器开发者工具的提姆eline面板,是翻开”刷新率”的一级工具。这无异于节介绍咋样使此家伙。

首先,按下 F12 打开”开发者工具”,切换至提姆eline面板。

图片 10

左上角有一个灰的圆点,那是录制按钮,按下其会成为黄色。然后,在网页上进展一些操作,再以平糟按钮完成录制。

Timeline面板提供零星种查看方:横条的凡”事件格局”(伊芙nt
Mode),显示重新渲染之各类风波所耗费的日子;竖条的凡”帧形式”(Frame
Mode),呈现每一样轴的光阴耗费在哪儿。

先期看”事件格局”,你可以从中认清,性能问题来在何人环节,是JavaScript的推行,仍旧渲染?

图片 11

今非昔比之颜色代表不同之轩然大波。

图片 12

青色:网络通信同HTML解析 肉色:JavaScript执行
粉色:样式总结和布局,即再排 肉色:重绘

1
2
3
4
蓝色:网络通信和HTML解析
黄色:JavaScript执行
紫色:样式计算和布局,即重排
绿色:重绘

哪一种色块相比较多,就评释性耗费在这边。色块越长,问题更为丰硕。

图片 13

图片 14

帧情势(Frames
mode)用来查阅单个帧的耗时情况。每帧的色柱低度越来越低越好,表示耗时少。

图片 15

你可以看来,帧格局有有限漫长水平的参考线。

图片 16

脚的如出一辙久是60FPS,低于这长达线,可以达到每秒60帧;下面的同长条是30FPS,低于这漫漫线,可以上每秒30潮渲染。要是色柱都领先30FPS,那些网页就出性能问题了。

其它,还可查有区间的耗时情形。

图片 17

要点击每一样轴,查看该帧的工夫做。

图片 18

次、重排和重绘

网页生成的时刻,至少会渲染一浅。用户访问的历程遭到,还会师随地重复渲染。

以下三栽情况,会招致网页又渲染。

  • 修改DOM
  • 修改样式表
  • 用户事件(比如鼠标悬停、页面滚动、输入框键入文字、改变窗口大小等等)

重复渲染,就得重转布局及更绘制。前者名”重排”(reflow),后者称”重绘”(repaint)。

需留意的是,“重绘”不必然得”重排”,比如改变有网页元素的颜料,就单纯会触发”重绘”,不相会沾”重排”,因为布局尚未更改。可是,“重排”必然造成”重绘”,比如改变一个网页元素的职位,就会以触发”重排”和”重绘”,因为布局改变了。

七、window.requestAnimationFrame()

发出一些JavaScript方法可以调剂重新渲染,大幅提升网页性能。

中最关键的,就是 window.requestAnimationFrame()方法。它可以一些代码放到下同样破又渲染时实施。

JavaScript

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

1
2
3
4
5
function doubleHeight(element) {
  var currentHeight = element.clientHeight;
  element.style.height = (currentHeight * 2) + ‘px’;
}
elements.forEach(doubleHeight);

下面的代码用循环操作,将每个元素的中度都扩大一倍。可是,每一趟循环都是,读操作后随着一个状操作。这会于紧缺日内接触大量之双重渲染,显明对网页性能大不利。

俺们可利用window.requestAnimationFrame(),让读操作和描写操作分离,把具备的形容操作放到下一致软还渲染。

JavaScript

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

1
2
3
4
5
6
7
function doubleHeight(element) {
  var currentHeight = element.clientHeight;
  window.requestAnimationFrame(function () {
    element.style.height = (currentHeight * 2) + ‘px’;
  });
}
elements.forEach(doubleHeight);

页面滚动事件(scroll)的监听函数,就坏吻合用
window.requestAnimationFrame() ,推迟到下一样赖还渲染。

JavaScript

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

1
2
3
$(window).on(‘scroll’, function() {
   window.requestAnimationFrame(scrollHandler);
});

本来,最适用的场馆如故网页动画。上边是一个转悠动画的事例,元素每一样幅旋转1度过。

JavaScript

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);

1
2
3
4
5
6
7
8
9
10
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);

其三、对于性的影响

重排和重绘会不断触发,这是不可避免的。但是,它们异常耗资源,是造成网页性能低下的根本原因。

提升网页性能,就是若降”重排”和”重绘”的频率和本金,尽量少接触重新渲染。

眼前提到,DOM变动与体制变动,都汇合沾重新渲染。可是,浏览器曾非凡智能了,会尽可能把所有的更动集中在一道,排成一个列,然后四次性执行,尽量避免多次还渲染。

div.style.color = 'blue';
div.style.marginTop = '30px';

上边代码中,div元素有三三两六个样式变动,不过浏览器就碰面沾一坏重排和重绘。

要写得不佳,就会合触发两软重排和重绘。

div.style.color = 'blue';
var margin = parseInt(div.style.marginTop);
div.style.marginTop = (margin + 10) + 'px';

面代码对div元素设置背景观以后,第二行要求浏览器为出该因素的职位,所以浏览器不得不就重排。

诚如的话,样式的写照操作后,倘若来脚这些性之朗诵操作,都会见掀起浏览器就又渲染。

  • offsetTop/offsetLeft/offsetWidth/offsetHeight
  • scrollTop/scrollLeft/scrollWidth/scrollHeight
  • clientTop/clientLeft/clientWidth/clientHeight
  • getComputedStyle()

从而,从性能角度考虑,尽量不要管读操作及描绘操作,放在一个言里面。

// bad
div.style.left = div.offsetLeft + 10 + "px";
div.style.top = div.offsetTop + 10 + "px";

// good
var left = div.offsetLeft;
var top  = div.offsetTop;
div.style.left = left + 10 + "px";
div.style.top = top + 10 + "px";

相似的平整是:

  • 体表越简单,重排与重绘就更为快。
  • 重排和重绘的DOM元素层级更加强,成本就越发强。
  • table元素的更排与重绘成本,要逾div元素

八、window.requestIdleCallback()

还有一个函数window.requestIdleCallback(),也可以用来调节重新渲染。

其指定唯有当一帧的尾声有空暇时间,才相会履回调函数。

JavaScript

requestIdleCallback(fn);

1
requestIdleCallback(fn);

地方代码中,唯有当前帧的运转时刻低于16.66ms时,函数fn才会执行。否则,就延迟至下一样帧,固然下一样轴也不曾空余时,就延迟到下下一帧,以此类推。

它们还可接受第二单参数,表示指定的毫秒数。即使以指定
的当即段时日里,每一样幅都尚未空时,那么函数fn将会合强制执行。

JavaScript

requestIdleCallback(fn, 5000);

1
requestIdleCallback(fn, 5000);

上边的代码表示,函数fn最迟会在5000皮秒之后执行。

函数 fn 可以接受一个 deadline 对象作为参数。

JavaScript

requestIdleCallback(function someHeavyComputation(deadline) {
while(deadline.timeRemaining() > 0) { doWorkIfNeeded(); }
if(thereIsMoreWorkToDo) { requestIdleCallback(someHeavyComputation); }
});

1
2
3
4
5
6
7
8
9
requestIdleCallback(function someHeavyComputation(deadline) {
  while(deadline.timeRemaining() > 0) {
    doWorkIfNeeded();
  }
 
  if(thereIsMoreWorkToDo) {
    requestIdleCallback(someHeavyComputation);
  }
});

下面代码中,回调函数 someHeavyComputation 的参数是一个 deadline 对象。

deadline对象来一个术与一个性:timeRemaining() 和 did提姆(Tim)eout。

(1)timeRemaining() 方法

timeRemaining()方法重临时帧还剩下的阿秒。那些办法唯有会诵,无法写,而且会动态更新。因此得以不停检查是特性,假若还有剩余时间的语句,就不停实践某些任务。一旦这个特性等于0,就把任务分配到下一样车轮requestIdleCallback

前方的演示代码之中,只要当前帧还有空闲时间,就连发调用doWorkIfNeeded方法。一旦没有空时间,可是任务还没全执行,就分配至下一致轱辘requestIdleCallback

(2)didTimeout属性

deadline对象的 didTimeout 属性会重临一个布尔值,表示指定的时间是否过。这意味,假使回调函数由于指定时间过而接触,那么您会获取三只结果。

JavaScript

timeRemaining方法再次回到0 did提姆(Tim)eout 属性等于 true

1
2
timeRemaining方法返回0
didTimeout 属性等于 true

就此,假使回调函数执行了,无非是个别栽由:当前帧有空闲时,或者指定时间到了。

JavaScript

function myNonEssentialWork (deadline) { while
((deadline.timeRemaining() > 0 || deadline.didTimeout) &&
tasks.length > 0) doWorkIfNeeded(); if (tasks.length > 0)
requestIdleCallback(myNonEssentialWork); }
requestIdleCallback(myNonEssentialWork, 5000);

1
2
3
4
5
6
7
8
9
function myNonEssentialWork (deadline) {
  while ((deadline.timeRemaining() > 0 || deadline.didTimeout) && tasks.length > 0)
    doWorkIfNeeded();
 
  if (tasks.length > 0)
    requestIdleCallback(myNonEssentialWork);
}
 
requestIdleCallback(myNonEssentialWork, 5000);

地点代码确保了,doWorkIfNeeded
函数一定会往日之一相比较闲的辰(或者当指定时间过后)拿到反复实践。

requestIdleCallback 是一个要命新的函数,刚刚引入专业,如今只有Chrome帮忙。

季、进步性的九个技巧

生有技艺,可以落浏览器还渲染的频率和本钱。

第一条凡高达等同节约说交之,DOM
的多独读操作(或三个勾操作),应该置身同。不要少于单读操作间,插手一个状操作。

第二条,假诺有样式是透过重排得到的,那么最好缓存结果。制止下一样次利用的时候,浏览器又要是重排。

第三条,不要一条条地改变样式,而如透过转class,或者csstext属性,一遍性地改样式。

// bad
var left = 10;
var top = 10;
el.style.left = left + "px";
el.style.top  = top  + "px";

// good 
el.className += " theclassname";

// good
el.style.cssText += "; left: " + left + "px; top: " + top + "px;";

第四条,尽量拔取离线DOM,而未是实事求是的网面DOM,来改元素样式。比如,操作Document
Fragment对象,完成后再把这么些目的到场DOM。再依照,使用 cloneNode()方法,在仿制的节点上开展操作,然后再一次就此克隆的节点替换原始节点。

第五条,先用元素设为display: none(需要1次重排和重绘),然后对之节点开展100软操作,最终再次回复彰显(需要1浅重排和重绘)。这样一来,你尽管因故少糟更渲染,取代了也许大及100赖的再次渲染。

第六条,position属性为absolutefixed的因素,重排的开销会相比较粗,因为不用考虑其对任何因素的影响。

第七条,只在必要的时候,才用元素的display属性为可见,因为不可见的元素不影响更排与重绘。此外,visibility : hidden的要素就对更绘来震慑,不影响重排。

第八条,使用虚拟DOM的脚本库,比如React等。

第九条,使用
window.requestAnimationFrame()、window.requestIdleCallback()这半独法子调节重新渲染(详见后文)。

九、参考链接

(完)

1 赞 3 收藏
评论

图片 19

五、刷新率

过多时光,密集的再一次渲染是无法避免的,比如scroll事件的回调函数和网页动画。

网页动画的每一样幅(frame)都是一模一样涂鸦再渲染。每秒低于24幅的动画,人眼就可知感受及停顿。貌似的网页动画,需要上每秒30帧到60帧的效能,才会于流利。假诺能落得每秒70轴甚至80轴,就会无限流畅。

图片 20

绝大多数突显器的刷新频率是60Hz,为了和系统一样,以及省电力,浏览器会活动按此频率,刷新动画(如若可以做到的言语)。

图片 21

故,即使网页动画能够一气浑成每秒60幅,就会师和显示器同步刷新,达到最佳的视觉效果。这象征,如出一辙秒内举行60差重复渲染,每趟重复渲染之光阴未可知超过16.66皮秒。

图片 22

同样秒中可以一呵而就多少次重复渲染,这么些目的就给称之为”刷新率”,英文为FPS(frame
per second)。
60不佳更渲染,就是60FPS。

倘想上60幅的刷新率,就意味着JavaScript线程每个任务之耗时,必须少于16毫秒。一个解决办法是利用Web
Worker,主线程只用于UI渲染,然后跟UI渲染不相干的天职,都置身Worker线程。

六、开发者工具的提姆eline面板

Chrome浏览器开发者工具的提姆(Tim)eline面板,是查”刷新率”的一流工具。这无异于节约介绍如何使用此家伙。

首先,按下 F12 打开”开发者工具”,切换来提姆eline面板。

图片 23

左上角有一个青色的圆点,这是录制按钮,按下它们汇合化为青色。然后,在网页上拓展一些操作,再按同次于按钮完成录制。

提姆(Tim)eline面板提供简单栽查看方:横条的是”事件形式”(伊芙(Eve)nt
Mode),突显重新渲染的各种风波所吃的时日;竖条的凡”帧情势”(Frame
Mode),突显每一样帧的日子消耗在何。

事先押”事件格局”,你可从中认清,性能问题发出在哪个环节,是JavaScript的实施,依然渲染?

图片 24

不等之颜料代表不同的波。

图片 25

  • 褐色:网络通信和HTML解析
  • 黄色:JavaScript执行
  • 黄色:样式总括和布局,即重排
  • 绿色:重绘

啊种色块相比多,就认证性耗费在这边。色块越长,问题更为充分。

图片 26

图片 27

帧格局(Frames
mode)用来查单个帧的耗时情状。每帧的色柱低度越来越低越好,表示耗时少。

图片 28

卿可以望,帧情势有半点长长的水平的参考线。

图片 29

脚的平等修凡60FPS,低于这长达线,可以达标每秒60帧;下边的如出一辙久凡30FPS,低于这漫漫线,可以直达每秒30软渲染。假设色柱都跳30FPS,那个网页就时有暴发总体性问题了。

除此以外,还足以查有区间的耗时意况。

图片 30

要点击每一样轴,查看该帧的时间做。

图片 31

七、window.requestAnimationFrame()

出有JavaScript方法可调剂重新渲染,大幅提高网页性能。

里面最为要之,就是 window.requestAnimationFrame()方法。它可以以一些代码放到下一样次于更渲染时实施。

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);

页面滚动事件(scroll)的监听函数,就相当吻合用
window.requestAnimationFrame() ,推迟至下同样坏还渲染。

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

自,最适用的场馆仍然网页动画。下面是一个转悠动画的例证,元素每一样轴旋转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);

八、window.requestIdleCallback()

还有一个函数window.requestIdleCallback(),也可以为此来调节重新渲染。

其指定只有当一帧底末段有闲暇时间,才碰面履行回调函数。

requestIdleCallback(fn);

地方代码中,只有当前帧的运转时刻低于16.66ms时,函数fn才会执行。否则,就延迟到下一样帧,假诺生一样轴也不曾空余时间,就滞缓至下下一帧,以此类推。

它还可承受第二只参数,表示指定的阿秒数。如若以指定
的登时段日子里,每一样帧都无空时间,那么函数fn将会合强制执行。

requestIdleCallback(fn, 5000);

地点的代码表示,函数fn最迟会在5000飞秒之后执行。

函数 fn 可以承受一个 deadline 对象作为参数。

requestIdleCallback(function someHeavyComputation(deadline) {
while(deadline.timeRemaining() > 0) {
doWorkIfNeeded();
}
if(thereIsMoreWorkToDo) {
requestIdleCallback(someHeavyComputation);
}
});

方代码中,回调函数 someHeavyComputation 的参数是一个 deadline 对象。

deadline对象有一个法与一个特性:timeRemaining() 和 did提姆(Tim)eout。

(1)timeRemaining() 方法

timeRemaining()方法重返时帧还剩下的皮秒。这多少个法子只有会诵,不可知写,而且会动态更新。由此得以不停检查是特性,假使还有剩余时间的语句,就不断实践某些任务。一旦这么些特性等于0,就把任务分配到下一样轮子requestIdleCallback

前边的示范代码之中,只要当前帧还有空闲时,就时时刻刻调用doWorkIfNeeded方法。一旦没有空时,不过任务还一向不全执行,就分配到下同样车轮requestIdleCallback

(2)didTimeout属性

deadline对象的 didTimeout 属性会重临一个布尔值,表示指定的日子是不是过期。这意味着,如果回调函数由于指定时间过而接触,那么你晤面收获两独结实。

  • timeRemaining方法再次回到0
  • did提姆eout 属性等于 true

故此,如若回调函数执行了,无非是鲜种植原因:当前帧有空闲时,或者指定时间及了。

function myNonEssentialWork (deadline) {
while ((deadline.timeRemaining() > 0 || deadline.didTimeout) && tasks.length > 0)
doWorkIfNeeded();
if (tasks.length > 0)
requestIdleCallback(myNonEssentialWork);
}
requestIdleCallback(myNonEssentialWork, 5000);

地点代码确保了,doWorkIfNeeded
函数一定会于将来某相比较闲的工夫(或者在指定时间过后)得到反复实践。

requestIdleCallback
是一个不行新的函数,刚刚引入专业,近来唯有Chrome协助,不过其他浏览器可据此垫片库

 

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图