首页vns威尼斯城官网登入 › 二、vns威尼斯城官网登入:重排和重绘,在克隆的节点上进行操作

二、vns威尼斯城官网登入:重排和重绘,在克隆的节点上进行操作

网页质量管理详解

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

原来的书文出处:
阮一峰   

你超出过质量非常差的网页吗?

这种网页响应极度缓慢,占用多量的CPU和内部存款和储蓄器,浏览起来常有卡顿,页面包车型大巴动画效果也不流畅。

vns威尼斯城官网登入 1

您会有哪些影响?作者估计,大许多客户会停业那一个页面,改为访谈别的网址。作为三个开荒者,显著不情愿看见这种气象,怎么样能力升高品质呢?

正文将详细介绍质量难点的产出原因,甚至减轻格局。

 

拉长网页质量的九大技艺,网页九大才能

      第一条,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 属性为 absolute 或 fixed
的要素,重排的成本会非常小,因为不用思考它对此外因素的影响。

  第七条,只在要求的时候,才将成分的 display
属性为可以看到,因为不可以预知的成分不影响重排和重绘。别的,visibility : hidden
的要素只对重排有影响,不影响重绘。

  第八条,使用设想 DOM 的脚本库,举例 React 等。

  第九条,使用 window.requestAnimationFrame
()、window.requestIdleCallback () 那四个措施调整重新渲染。

 

一、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 最晚会在 伍仟 阿秒之后实施。

  函数 fn 能够担负三个 deadline 对象作为参数。

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

  if(thereIsMoreWorkToDo) {
    requestIdleCallback (someHeavyComputation);
  }
});

  上边代码中,回调函数 someHeavyComputation 的参数是贰个 deadline
对象。

  deadline 对象有三个主意和二个属性:timeRemaining () 和 didTimeout。

  (1)timeRemaining () 方法

  timeRemaining ()
方法再次回到当前帧还剩余的阿秒。这几个法子只可以读,不能写,並且会动态更新。由此能够穿梭检查那些本性,就算还会有剩余时间的话,就连发施行某个职务。大器晚成旦这些特性等于0,就把职分分配到下如日方升轮requestIdleCallback

  后面包车型大巴亲自过问代码之中,只要当前帧还应该有空闲时间,就时时到处调用
doWorkIfNeeded
方法。热气腾腾旦未有空余时间,然而职责还还未全实行,就分配到下风度翩翩轮requestIdleCallback

  (2)didTimeout 属性

  deadline
对象的 didTimeout 属性会重返多少个布尔值,表示钦定的光阴是还是不是过期。那意味,即便回调函数由于指定期期过期而接触,那么你会赢得七个结果。

  • timeRemaining 方法再次来到0
  • didTimeout 属性等于 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
帮忙。

第一条,DOM
的多个读操作(或多个写操作),应该献身风流浪漫块儿。不要五个读操作之间,到场一个写...

方兴未艾、网页生成的进程

要知道网页质量为何倒霉,将要打听网页是怎么变化的。

vns威尼斯城官网登入 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)。

vns威尼斯城官网登入 3

风姿浪漫、网页的转移进度:大概能够分成五步。

二、重排和重绘

网页生成的时候,最少会渲染一遍。顾客访谈的进度中,还大概会一再重复渲染。

以下两种情景,会产生网页重新渲染。

  • 修改DOM
  • 修改样式表
  • 客户事件(举个例卯兔标悬停、页面滚动、输入框键入文字、改动窗口大小等等)

重新渲染,就必要再次生成布局和重新绘制。后边二个叫做”重排”(reflow),前面一个叫做”重绘”(repaint)。

亟需注意的是,”重绘”不断定要求”重排”,比方改动有些网页成分的颜料,就只会接触”重绘”,不会触发”重排”,因为布局尚未更动。不过,”重排”必然导致”重绘”,比如改动三个网页成分的地方,就能够同一时候触发”重排”和”重绘”,因为布局改动了。

 

三、对于品质的震慑

重排和重绘会不断触发,那是不可幸免的。然则,它们极度成本能源,是导致网页品质低下的根本原因。

增加网页品质,就是要裁减”重排”和”重绘”的效能和本金,尽量少触发重新渲染。

前面提到,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元素

HTML代码转形成DOM

CSS代码转形成CSSOM(CSS Object
Model)

style="font-size: 16px;">结合DOM和CSSOM,生成少年老成棵渲染树(满含每一种节点的视觉音信)

style="font-size: 16px;">生成布局(layout),将要有所渲染树的富有节点进行平面合成

将布局绘制(paint)在显示器上

四、升高品质的九个本领

有生气勃勃对技能,可以下跌浏览注重新渲染的效能和本金。

先是条是上后生可畏节提起的,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次重排和重绘),然后对那么些节点开展九16回操作,最后再苏醒呈现(必要1次重排和重绘)。那样一来,你就用一遍重复渲染,代替了只怕高达100遍的重新渲染。

第六条,position属性为absolute或fixed的要素,重排的开支会相当小,因为不用思索它对其他因素的震慑。

第七条,只在要求的时候,才将成分的display属性为可知,因为不可知的成分不影响重排和重绘。别的,visibility
: hidden 的因素只对重排有震慑,不影响重绘。

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

第九条,使用
window.requestAnimationFrame()、window.requestIdleCallback()
那多少个情势调解重新渲染(详见后文)。

那五步里面,第一步到第三步都格外快,耗费时间的是第四步和第五步。

五、刷新率

洋洋时候,密集的重新渲染是爱莫能助制止的,举例scroll事件的回调函数和网页动画。

网页动画的每黄金时代帧(frame)都以一回重复渲染。每秒低于24帧的动画,人眼就会感受到停顿。日常的网页动画,须求高达每秒30帧到60帧的功能,技艺相比流利。假设能完成每秒70帧以至80帧,就能够特别流畅。

vns威尼斯城官网登入 4

绝大大多荧屏的刷新频率是60Hz,为了与系统同样,甚至节省电力,浏览器会自行依据这么些成效,刷新动画(假如可以产生的话)。

vns威尼斯城官网登入 5

所以,若是网页动画可以幸不辱命每秒60帧,就能够跟荧屏同步刷新,到达最棒的视觉效果。那象征,风姿罗曼蒂克秒之内实行60遍重复渲染,历次重复渲染的小运无法超过16.66纳秒。

vns威尼斯城官网登入 6

风流倜傥秒之内能够变成多少次重复渲染,那个指标就被誉为”刷新率”,乌Crane语为FPS(frame
per second)。伍十八回重复渲染,正是60FPS。

 

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

Chrome浏览器开垦者工具的Timeline面板,是翻开”刷新率”的一流工具。那如日中天节介绍怎么着利用这几个工具。

第精力充沛,按下 F12 打开”开荒者工具”,切换来Timeline面板。

vns威尼斯城官网登入 7

左上角有二个黑灰的圆点,这是摄像按钮,按下它会造成浅橙。然后,在网页上进展一些操作,再按叁回开关达成录像。

Timeline面板提供二种查看格局:横条的是”事件格局”(Event
Mode),展现重新渲染的各样风云所开支的时光;竖条的是”帧形式”(Frame
Mode),展现每生机勃勃帧的流年成本在哪个地方。

先看”事件方式”,你能够从当中认清,品质难题产生在哪个环节,是JavaScript的进行,依然渲染?

vns威尼斯城官网登入 8

昨今分裂的水彩代表不一致的事件。

vns威尼斯城官网登入 9

紫蓝:网络通讯和HTML分析 海螺红:JavaScript施行浅橙:样式总计和布局,即重排 深褐:重绘

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

哪个种类色块非常多,就表达质量源消开支在这里边。色块越长,难点越大。

vns威尼斯城官网登入 10

vns威尼斯城官网登入 11

帧形式(Frames
mode)用来查看单个帧的耗费时间景况。每帧的色柱中度越低越好,表示耗费时间少。

vns威尼斯城官网登入 12

您能够看来,帧情势有两条水平的参考线。

vns威尼斯城官网登入 13

下边包车型大巴一条是60FPS,低于那条线,能够高达每秒60帧;上面包车型大巴一条是30FPS,低于这条线,能够直达每秒叁17次渲染。倘诺色柱都超越30FPS,这么些网页就有性能难题了。

除此以外,还足以查阅有些区间的耗费时间境况。

vns威尼斯城官网登入 14

抑或点击每如日中天帧,查看该帧的年华构成。

vns威尼斯城官网登入 15

"生成布局"(flow)和"绘制"(paint)这两步,合称为"渲染"(render)。

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

 

八、window.requestIdleCallback()

还应该有三个函数window.requestIdleCallback(),也能够用来调整重新渲染。

它钦命独有当后生可畏帧的末梢有空暇时间,才会实践回调函数。

JavaScript

requestIdleCallback(fn);

1
requestIdleCallback(fn);

上边代码中,独有当前帧的周转时刻低于16.66ms时,函数fn才会推行。不然,就延期到下大器晚成帧,借使下大器晚成帧也未有空余时间,就延迟到下下少年老成帧,就那样类推。

它还足以肩负第二个参数,表示钦命的飞秒数。假诺在钦命的近些日子之内,每旭日初升帧都不曾空余时间,那么函数fn将会强制推行。

JavaScript

requestIdleCallback(fn, 5000);

1
requestIdleCallback(fn, 5000);

地点的代码表示,函数fn最晚会在6000纳秒之后实践。

函数 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() 和 didTimeout。

(1)timeRemaining() 方法

timeRemaining()
方法重临当前帧还余下的微秒。这一个措施只好读,不可能写,并且会动态更新。因而得以持续检查那些天性,假若还应该有剩余时间的话,就一再执行某个职责。黄金时代旦那些本性等于0,就把任务分配到下风华正茂轮requestIdleCallback

眼下的演示代码之中,只要当前帧还会有空闲时间,就不停调用doWorkIfNeeded方法。精神振作旦未有空余时间,不过职分还没曾全实施,就分配到下黄金时代轮requestIdleCallback

(2)didTimeout属性

deadline对象的 didTimeout 属性会重临二个布尔值,表示钦定的岁月是还是不是过期。那表示,借使回调函数由于指定期间过期而接触,那么您会获得多少个结果。

JavaScript

timeRemaining方法再次来到0 didTimeout 属性等于 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援助。

二、重排和重绘

九、参照他事他说加以考察链接

  • Domenico De Felice, How browsers
    work
  • Stoyan Stefanov, Rendering: repaint, reflow/relayout,
    restyle
  • Addy Osmani, Improving Web App Performance With the Chrome DevTools
    Timeline and
    Profiles
  • Tom Wiltzius, Jank Busting for Better Rendering
    Performance
  • Paul Lewis, Using
    requestIdleCallback

(完)

1 赞 3 收藏
评论

vns威尼斯城官网登入 16

 

网页生成的时候,起码会渲染一次。客户访谈的长河中,还有大概会软磨硬泡重复渲染。

以下三种状态,会导致网页重新渲染。

修改DOM

修改样式表

style="font-size: 16px;">客商事件(比方鼠标悬停、页面滚动、输入框键入文字、改动窗口大小等等)

双重渲染,就须求再行生成布局和另行绘制。前面三个叫做"重排"(reflow),前者叫做"重绘"(repaint)。

亟需小心的是,"重绘"不自然须求"重排",举例改变某些网页成分的水彩,就只会接触"重绘",不会触发"重排",因为布局还未有改造。可是,"重排"必然导致"重绘",比方改动五个网页成分的任务,就能够同期触发"重排"和"重绘",因为布局退换了。

 

三、对于品质的震慑

 

重排和重绘会不断触发,那是不可咸鱼翻身的。可是,它们特别开支财富,是引致网页品质低下的根本原因。

加强网页品质,就是要大跌"重排"和"重绘"的频率和财力,尽量少触发重新渲染。

前边提到,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';

转载本站文章请注明出处:vns威尼斯城官网登入 http://www.tiec-ccpittj.com/?p=3228

上一篇:

下一篇:

相关文章