服务器接受到请求之后等待处理,渲染树表示D

增进Web页面品质的手艺

2016/01/30 · HTML5, JavaScript · 1 评论 · 性能

初藳出处: w3cplus - 南北(@ping4god)   

现在动辄几兆大小的页面加载量,让质量优化成了不可防止的火热话题。WEB 应用越流畅,顾客体验就能越好,进而带给越多的访谈量。那也正是,大家理应检查一下这一个过度美化的 CSS3 动漫和万户千门操作的 DOM 成分是还是不是都思索到了在性质方面包车型大巴熏陶。在说质量优化此前,大家有供给理清浏览器视觉绘制方面包车型地铁三个术语:

  • Repaint(重绘):若是某个操作影响了 DOM 成分的可以知道性,但又从不影响布局,那么就能够生出浏览器的重绘,比如 opacitybackground-color,visibilityoutline 属性。由于浏览器必需检查 DOM 中全体节点的可以知道性——某个图层也许会放到重绘成分的图层下边,所以重绘是一个丰富辛劳的逻辑。
  • Reflow(回流):回流是一个更具破坏性的操作,它会让浏览珍视新总结有所因素的坐标地点和尺寸大小。往往出于叁个要素的变迁,进而引起其子成分、父成分甚至隔壁成分的转移。

随意顾客依旧接收本身是不是正在实行某个逻辑,那二种操作都会梗塞浏览器进度。极端气象下,一个CSS 效果会下滑 JavaScript 的实行进程。上面是接触回流事件的三种情境:

  • 加多、删除和改革可以预知的 DOM 元素
  • 累积、删除和改造部分 CSS 样式,比如订正成分的大幅,会影响其相邻成分的构造地点
  • CSS3 动漫和衔接效果
  • 使用 offsetWidthoffsetHeight。这种地步很好奇,读取叁个要素的 offsetWidthoffsetHeight 属性会触发回流
  • 顾客作为,譬喻鼠标悬停、输入文本、调度窗口大小、修正字体样式等等

浏览器的底层达成各有不相同,所以渲染页面包车型地铁付出也各有高低。幸亏大家有局地普通准绳能够扩充质量优化。

回流和重绘能够说是每一个web开荒者都平日听到的八个词语,但是可能有成都百货上千人不是很领会这两步具体做了怎么专门的工作。这几天悠闲对其进展了有个别研讨,看了有的博客和图书,收拾了有的内容还要结合一些事例,写了这篇随笔,希望能够支持到我们。阅读时间大意15~18min

1、什么是重排和重绘

浏览器下载完页面中的全体组件——HTML标志、JavaScript、CSS、图片之后会深入分析生成多少个里面数据构造——DOM树
和渲染树

DOM树表示页面构造,渲染树表示DOM节点如何体现。DOM树中的每二个内需出示的节点在渲染树种最少存在叁个相应的节点(隐蔽的DOM成分disply值为none 在渲染树中一直不对应的节点)。渲染树中的节点被称呼“帧”或“盒",切合CSS模型的概念,通晓页面成分为贰个装有填充,边距,边框和地方的盒子。生龙活虎旦DOM和渲染树营造变成,浏览器就起头呈现(绘制)页面成分。
当DOM的生成影响了成分的几何属性(宽或高),浏览器须求再行总括成分的几何属性,同样其余因素的几何属性和职位也会为此面前境遇震慑。浏览器会使渲染树中受到震慑的有些失效,一视同仁新组织渲染树。其生龙活虎进程称为重排。完结重排后,浏览器会重新绘制受影响的有个别到显示屏,该进度称为重绘。由于浏览器的流布局,对渲染树的构思平日只须求遍历三遍就足以成功。但table及其内部因素除此而外,它可能供给一再测算手艺显著好其在渲染树中节点的性质,平日要花3倍于同一成分的时日。那也是干什么大家要防止选拔table做构造的二个缘由。
并非享有的DOM变化都会影响几何属性,比方改动贰个因素的背景观并不会潜移默化因素的宽和高,这种气象下只会爆发重绘。
2、重排和重绘的代价毕竟多大
重排和重绘的代价有多大?大家再回来前文至极过桥的事例上,精心的您或者会发掘了,千倍的时刻差并非出于“过桥”一手促成的,每一回“过桥”其实都陪伴重视排和重绘,而功耗的多边也正是在那!
复制代码var times = 15000;// code1 每便过桥+重排+重绘console.time(1卡塔尔(قطر‎;for(var i = 0; i < times; i++卡塔尔(英语:State of Qatar) { document.getElementById('myDiv1'卡塔尔(قطر‎.innerHTML += 'a';}console.timeEnd(1卡塔尔;// code2 只过桥console.time(2卡塔尔(قطر‎;var str = '';for(var i = 0; i < times; i++卡塔尔(قطر‎ { var tmp = document.getElementById('myDiv2'卡塔尔(英语:State of Qatar).innerHTML; str += 'a';}document.getElementById('myDiv2'卡塔尔(英语:State of Qatar).innerHTML = str;console.timeEnd(2卡塔尔(英语:State of Qatar);// code3 console.time(3卡塔尔(英语:State of Qatar);var _str = '';for(var i = 0; i < times; i++) { _str += 'a';}document.getElementById('myDiv3').innerHTML = _str;console.timeEnd(3);// 1: 2874.619ms// 2: 11.154ms// 3: 1.282ms

多少是不会撒谎的,看见了啊,多次探访DOM对于重排和重绘来讲,耗费时间大概不值一提了。
3、重排何时产生
很明朗,每一次重排,必然会促成重绘,那么,重排会在怎么着状态下发生?
累积抑或去除可以预知的DOM成分
要素地点变动
要素尺寸改换
要素内容改换(举例:四个文件被另二个不如尺寸的图样替代)
页面渲染起始化(那几个不能够制止)
浏览器窗口尺寸退换

那几个都是生硬的,大概你早原来就有过如此的体味,不间断地改动浏览器窗口大小,以致UI反应愚钝(有些低版本IE下以致平昔挂掉),以往您恐怕出现转机,没有错,就是二次次的重排重绘招致的!
4、渲染树变化的排队和刷新
思虑上面代码:
复制代码var ele = document.getElementById('myDiv'卡塔尔(قطر‎;ele.style.borderLeft = '1px';ele.style.borderRight = '2px';ele.style.padding = '5px';

乍意气风发想,成分的体裁改动了壹回,每便改变都会唤起重排和重绘,所以总共有二次重排重绘进程,不过浏览器并不会那样笨,它会把三遍改进“保存”起来(大多数浏览器通过队列化修正并批量推行来优化重排进程),叁回成功!不过,有些时候你恐怕会(日常是无意)强制刷新队列并必要安顿任务马上实践。获取结构音信的操作会形成队列刷新,例如:
offsetTop, offsetLeft, offsetWidth, offsetHeight
scrollTop, scrollLeft, scrollWidth, scrollHeight
clientTop, clientLeft, clientWidth, clientHeight
getComputedStyle() (currentStyle in IE)

将地点的代码稍加改革:
复制代码var ele = document.getElementById('myDiv'卡塔尔;ele.style.borderLeft = '1px';ele.style.borderRight = '2px';// here use offsetHeight// ...ele.style.padding = '5px';

因为offsetHeight属性供给回到最新的结构音讯,因而浏览器不能不试行渲染队列中的“待管理变化”并触发重排以回到正确的值(固然队列中退换的体制属性和想要获取的属性值并未怎么关系),所以地点的代码,前若干遍的操作会缓存在渲染队列中待管理,然则后生可畏旦offsetHeight属性被呼吁了,队列就能够立刻实行,所以总共有一次重排与重绘。所以全心全意不要在构造音信改变时做询问
5、最小化重排和重绘
我们照旧看上边的这段代码:
复制代码var ele = document.getElementById('myDiv'卡塔尔;ele.style.borderLeft = '1px';ele.style.borderRight = '2px';ele.style.padding = '5px';

八个样式属性被改成,每八个都会潜濡默化因素的几何布局,即使比很多今世浏览器都做了优化,只会唤起一次重排,不过像上文同样,尽管叁个应声的天性被呼吁,那么就能强制刷新队列,况兼这段代码四次做客DOM,两个很显著的优化计策正是把它们的操作合成二次,这样只会改善DOM二遍:
复制代码var ele = document.getElementById('myDiv'卡塔尔;// 1. 重写styleele.style.cssText = 'border-left: 1px; border-right: 2px; padding: 5px;';// 2. add styleele.style.cssText += 'border-;eft: 1px;'//

  1. use classele.className = 'active';

6、fragment元素的运用
看如下代码,思考三个标题:
复制代码<ul id='fruit'> <li> apple </li> <li> orange </li></ul>

假使代码中要增加内容为peach、watermelon多个筛选,你会如何做?
复制代码var lis = document.getElementById('fruit'卡塔尔(قطر‎;var li = document.createElement('li'卡塔尔国;li.innerHTML = 'apple';lis.appendChild(li卡塔尔(英语:State of Qatar);var li = document.createElement('li'卡塔尔国;li.innerHTML = 'watermelon';lis.appendChild(li卡塔尔(قطر‎;

非常轻巧想到如上代码,不过很扎眼,重排了若干次,怎么破?后面大家说了,隐蔽的要素不在渲染树中,太棒了,大家得以先把id为fruit的ul成分隐敝(display=none卡塔尔,然后增添li成分,最终再呈现,唯独实操中大概会忍俊不禁闪动,原因那也相当轻松精晓。当时,fragment
要素就有了发挥特长了。
复制代码var fragment = document.createDocumentFragment(卡塔尔国;var li = document.createElement('li'卡塔尔;li.innerHTML = 'apple';fragment.appendChild(li卡塔尔;var li = document.createElement('li'卡塔尔;li.innerHTML = 'watermelon';fragment.appendChild(li卡塔尔;document.getElementById('fruit'卡塔尔国.appendChild(fragment卡塔尔;

文书档案片段是个轻量级的document对象,它的兼顾初志正是为了成功那类职分——更新和活动节点。文书档案片段的五个便民的语法性格是当您附加叁个片断到节点时,实际上被增加的是该片断的子节点,并不是片断本人。只触发了贰回重排,并且只访谈了叁次实时的DOM。
7、让要素脱离动画流
用张开/折叠的办法来呈现和潜伏部分页面是风流罗曼蒂克种广泛的彼此情势。它经常满含开展区域的几何动画,并将页面别的部分推向下方。
通常的话,重排只影响渲染树中的一小部分,但也或许影响非常大的片段,以致整个渲染树。浏览器所急需重排的次数越少,应用程序的响应速度就越快。由此当页面最上端的二个动漫片推移页面整个余下的一些时,会变成一回代价高昂的周围重排,让顾客认为页面生机勃勃顿豆蔻梢头顿的。渲染树中须求重新总结的节点越来越多,情形就可以越糟。
接受以下步骤可以幸免页面中的大多数重排:
使用绝对地方定点页面上的动漫片元素,将其脱离文书档案流
让成分动起来。当它增加时,会临时覆盖部分页面。但那只是页面三个小区域的重绘进度,不会时有爆发重排不分厚薄绘页面的超多剧情。
当动漫结束时回涨稳定,进而只会下移三次文书档案的别的因素

8、总结
重排和重绘是DOM编制程序中功耗的根本原因之意气风发,平时涉及DOM编制程序时得以参照以下几点:
尽恐怕不要在构造音讯改换时做询问(会引致渲染队列强制刷新)
同二个DOM的多少个属性别变化更能够写在一起(减少DOM访问,同不平日候把强制渲染队列刷新的高危害降为0)
假如要批量加多DOM,能够先让要素脱离文书档案流,操作完后再带入文档流,那样只会触发二次重排(fragment成分的运用)
将索要频辛劳排的要素,position属性设为absolute或fixed,这样此因素就淡出了文书档案流,它的转移不会影响到其余因素。举个例子有动漫效果的成分就最棒设置为相对定位。

1.背景介绍

行使最棒实施所提出的结构技能

虽说曾经是 2016 了,但本人要么要说毫不接收行内联样式和 table 布局。

HTML 文书档案下载完结后,行内样式会接触一遍额外的回流事件。解析器在解析 table 构造时索要总结大批量的单元格的尺寸,所以是件相当的重的操作。由于单元格往往是依据表头宽度鲜明的,所以利用 table-layout: fixed 能够解决部分性质消耗。

采取 Flexbox 构造也设有品质损失,因为在页面加载成功后,flex item 大概会产生地点和尺寸的改变。

浏览器的渲染进度

浏览器渲染页面包车型地铁大致进度:

精简 CSS 样式

体制越少,回流越快,其余,尽量不要使用过度复杂的接纳器。那大器晚成标题尤其优越在选拔相同Bootstrap 框架的网址上。使用 Unused CSS,uCSS,grunt-uncss 和 gulp-uncss 等工具得以有效去除无用样式。

正文先从浏览器的渲染进程来始终如生龙活虎的讲课一下回流重绘,假如大家想一贯看如何压缩回流和重绘,优化质量,能够跳到前面。(那几个渲染进程来自MDN)

从浏览器地址栏的央浼链接开端,浏览器通过DNS解析查到域名映射的IP地址,成功之后浏览器端向此IP地址拿到接二连三,成功总是之后,浏览器端将诉求头消息通过HTTP左券向此IP地址所在服务器发起号召,服务器选择到央浼之后等待管理,最终向浏览器端发回响应,那个时候在HTTP合同下,浏览器从服务器收到到 text/html类型的代码,浏览器起头显得此html,并拿走个中内嵌财富地址,然后浏览器再发起呼吁来拿到这几个财富,并在浏览器的html中显示

精简 DOM 层级

简短 DOM 层级,指的是减少 DOM 树的级数已经每一分支上 DOM 元素的数目,结果正是层级越少、数量越少,回流越快。别的,若无必要盘算旧版本浏览器,应该尽量剔除无意义的包装类标签和层级。

图片 1

2.学问分析

细粒度操作 DOM 树

操作 DOM 树时的粒度要尽量细化,那推进减弱局地 DOM 变化给全体推动的震慑。

从上边那个图上,大家得以见到,浏览器渲染过程如下:

浏览器深入分析的大概的行事流程能够综合为以下多少个步骤

从文书档案流中移除复杂的动漫效果

应该保险使用动漫片的因素脱离了文书档案流,使用 position: absoluteposition: fixed 属性脱离文书档案流的要素会被浏览器创制多个新层来存放在,这几个图层上的修正不会影响其余图层上的因素。

解析HTML,生成DOM树,解析CSS,生成CSSOM树

  1. 客商输入网站(若是是个 HTML 页面,第三次访谈,无缓存情形),浏览器向服务器发出HTTP央求,服务器再次回到HTML 文件; (善用缓存,收缩HTTP诉求,减轻服务器压力)

  2. 浏览器载入 HTML 代码,发掘 head 内有多个 link 引用外界 CSS 文件,则浏览器立刻发送CSS文件央求,获取浏览器重返的CSS文件;  (CSS文件合併,收缩HTTP乞求)

  3. 浏览器继续载入 HTML 中 body 部分的代码,而且 CSS 文件已经获得手了,能够开首渲染页面了;CSS文件要求停放最上边,幸免网页重新渲染。

  4. 浏览器在代码中窥见贰个 img 标签援用了一张图片,向服务器发出央求。那个时候浏览器不会等到图片下载完,而是继续渲染后边的代码;(图片文件归拢,收缩HTTP诉求)

巧用遮盖方式

使用 display: none; 掩没的因素不会触发页面包车型大巴重绘和回流事件,所以能够在这里些要素掩盖时期配备体制,配置达成后再转移为可以知道状态。

将DOM树和CSSOM树结合,生成渲染树(Render Tree卡塔尔(قطر‎

5. 服务器再次回到图片文件,由于图片占用了必然面积,影响了后头段落的排布,因而浏览器须要回过头来重新渲染那生龙活虎部分代码;  (最棒图片都安装尺寸,防止再一次渲染)

批量翻新成分

单词更新具备 DOM 成分的质量要优于数十次翻新。上面这段代码触发了壹遍页面回流:

var myelement = document.getElementById('myelement'); myelement.width = '100px'; myelement.height = '200px'; myelement.style.margin = '10px';

1
2
3
4
var myelement = document.getElementById('myelement');
myelement.width = '100px';
myelement.height = '200px';
myelement.style.margin = '10px';

透过以下代码可以容易为一回页面回流事件,何况升高了代码的可维护性:

var myelement = document.getElementById('myelement'); myelement.classList.add('newstyles'); .newstyles { width: 100px; height: 200px; margin: 10px; }

1
2
3
4
5
6
7
8
var myelement = document.getElementById('myelement');
myelement.classList.add('newstyles');
 
.newstyles {
    width: 100px;
    height: 200px;
    margin: 10px;
}

同理,我们仍为能够减小操作 DOM 的频率。要是大家要开创三个之类所示的冬季列表:

图片 2

例如分次增多每叁个 item 将会接触数十次页面回流,轻巧而快速的情势是使用 DOM fargment 在内部存款和储蓄器中成立完整的 DOM 节点,然后三次性增进到 DOM 中:

var i, li, frag = document.createDocumentFragment(), ul = frag.appendChild(document.createElement('ul')); for (i = 1; i <= 3; i++) { li = ul.appendChild(document.createElement('li')); li.textContent = 'item ' + i; } document.body.appendChild(frag);

1
2
3
4
5
6
7
8
9
10
11
var
    i, li,
    frag = document.createDocumentFragment(),
    ul = frag.appendChild(document.createElement('ul'));
 
for (i = 1; i <= 3; i++) {
    li = ul.appendChild(document.createElement('li'));
    li.textContent = 'item ' + i;
}
 
document.body.appendChild(frag);

Layout:依据变化的渲染树,进行回流,获得节点的几何音讯

  1. 浏览器开掘了三个暗含生机勃勃行 JavaScript 代码的 script  标签,会应声运营该js代码;(script最棒放置页面最上面)

自律成分变化的影响

那边的自律是指,尽量幸免有个别成分的变通引起大面积的变通。若是大家有三个tab 选项卡的零器件,选项卡内部的情节参差不齐,那就形成了各样选项卡的惊人不唯风流倜傥。那大器晚成布署带给的主题素材正是每一趟切换选项卡时,周围的要素都要重新布局。大家得以经过二个定点高度来制止这一动静。

Painting:依据渲染树以至回流获得的几何音信,得到节点的断然像素

7.js脚本履行了讲话,它令浏览器隐蔽掉代码中的有些div,突然就少了三个因素,浏览器一定要再次渲染那有的代码;  (页面发轫化样式不要接纳js调节)

衡量流畅度和总体性

壹回活动黄金年代像素的职责看起来纵然很流畅,但对此一些低质量终端会是十分大的下压力。叁遍活动四像素减弱帧速纵然看起来稍有个别愚笨,但质量压力减少了。那正是急需大家衡量的地点:流畅度和品质。

Display:将像素发送给GPU,体现在页面上。(这一步其实还恐怕有超多剧情,比如会在GPU将多个合成层合并为同二个层,并体现在页面中。而css3硬件加速的原理则是新建合成层,这里我们不举办,之后有时机会写生机勃勃篇博客)

8.算是等到了 /html 的赶来,浏览器泪如泉涌……

应用开辟者工具剖析页面重绘

一时一刻主流浏览器都在开发者工具中提供了监察和控制页面重绘的意义。在 Blink/Webkit 内核的浏览器中,使用 提姆eline 面板能够记下多少个页面活动实际情况:

图片 3

上边是火狐开拓者工具中的 TimeLine:

图片 4

在 IE 中这些效应被放置在了 UI Responsiveness 面板中:

图片 5

具有的浏览器都使用灰黄来呈现页面重绘和页面回流事件。上面包车型客车测量检验只是多少个大约的示范,在那之中并没有调用勤奋的卡通效果,所以构造渲染在总时间中占领了很大比重。裁减页面回流和页面重绘,自然拉长页面品质。

2 赞 14 收藏 1 评论

图片 6

渲染进程看起来很简短,让大家来具体明白下每一步具体做了如何。

  1. 当客商点了瞬间分界面中的“换肤”开关,JavaScript 让浏览器换了瞬间 link 标签的 CSS 路线;

  2. 浏览器召集了在场的诸位 div span ul li 们,“公众收拾收拾行李,咱得重复来过……”,浏览器向服务器乞请了新的CSS文件,重新渲染页面。

浮动渲染树

浏览器天天就这么来来回回跑着,要掌握分歧的人写出来的 HTML 和 CSS 代码品质错落有致,说不允许几时跑着跑着就挂掉了。

图片 7

辛亏这里个世界还有如此一批人——页面重构程序员,平常挺不起眼,也就帮视觉设计员们切切图啊改改字,其实背地里照旧干了累累实事的。

为了营造渲染树,浏览器重要实现了以下职业:

3.宽广难点

从DOM树的根节点最早遍历每种可以知道节点。

什么是repain(重绘)和reflow(回流)?

对此每一种可以预知的节点,找到CSSOM树中对应的规规矩矩,并行使它们。

4.减轻方案

依靠每一种可知节点甚至其相应的体制,组合生成渲染树。

说起页面怎会慢?那是因为浏览器要花时间、花精力去渲染,极度是当它发掘有些部分发生了点变化影响了结构,须要倒回去重新渲染, 该进程称为reflow(回流)。

第一步中,既然说起了要遍历可以知道的节点,那么大家得先明白,什么节点是不可知的。不可以看到的节点包蕴:

reflow 大概是无法制止的。现在分界面上流行的部分意义,比方树状目录的折叠、张开(实质上是因素的展现与掩盖)等,都将引起浏览器的 reflow。鼠标滑过、点击……只要这几个行为引起了页面上一点因素的占位面积、定位情势、边距等品质的变型,都会挑起它当中、周边仍然整个页面的重复渲 染。平时大家都没有办法儿预估浏览器到底会 reflow 哪部分的代码,它们都相互相互功效着。

局地不会渲染输出的节点,比如script、meta、link等。

假若只是改换有些成分的背景观、文 字颜色、边框颜色等等不影响它周边或内部结构的性质,将只会唤起浏览器 repaint(重绘)。

部分通过css进行掩瞒的节点。比方display:none。注意,利用visibility和opacity掩瞒的节点,依旧会来得在渲染树上的。独有display:none的节点才不交易会示在渲染树上。

repaint 的快慢显明快于 reflow(在IE下供给换一下说法,reflow 要比 repaint 更缓慢)。

从上边的事例来说,我们得以见见span标签的样式有一个display:none,因而,它最后并从未在渲染树上。

为什么reflow 要比 repaint 更缓慢?

在乎:渲染树只含有可以知道的节点

repaint(重绘),repaint发生改动时,成分的外观被转移,且在还没改观布局之处下发出,如改动outline,visibility,background color,不会影响到dom构造渲染。

回流

reflow(回流卡塔尔国,与repaint差别就是她会影响到dom的构造渲染,同期他会触发repaint,他会变动她自个儿与具备父辈成分(祖先卡塔尔(قطر‎,这种支付是非常高昂的,诱致质量缩小是一定的,页面成分越来越多职能越刚烈。

前面我们因此布局渲染树,我们将可以看到DOM节点以致它对应的体制结合起来,不过我们还供给总结它们在配备视口内的妥当地点和尺寸,这一个计算的级差正是回流。

只顾:回流必定将唤起重绘,而重绘不肯定会挑起回流。

为了弄清种种对象在网址上的适度大小和职位,浏览器从渲染树的根节点起始遍历,大家得以以上面这几个实例来表示:

5.编码实战

<!DOCTYPE html>

6.恢弘考虑

<html>

引起repain(重绘)和reflow(回流)的大器晚成部分操作?

<head>

reflow 的资本比 repaint 的花销高得多的多。DOM Tree 里的各样结点都会有 reflow 方法,四个结点的 reflow 很有希望引致子结点,以致父点以至同级结点的 reflow。

<meta name="viewport" content="width=device-width,initial-scale=1">

当您扩大、删除、改进 DOM 结点时,会招致 reflow 或 repaint。

<title>Critial Path: Hello world!</title>

当你运动 DOM 的职责,或是搞个卡通的时候。

</head>

当您改革 /删除CSS 样式的时候。

<body>

当你 Resize 窗口的时候,或是滚动的时候。

<div style="width: 50%">

当您改改网页的私下认可字体时。

<div style="width: 50%">Hello world!</div>

当您设置 style 属性的值 (Setting a property of the style attribute)。

</div>

注:display:none 会触发 reflow,而 visibility:hidden 只会触发 repaint,因为从没开采地点变动。

</body>

7.参照他事他说加以考查文献

</html>

参考一:reflow(回流)和repaint(重绘)及其优化

我们得以见到,第二个div将节点的体现尺寸设置为视口宽度的十分之五,第3个div将其尺寸设置为父节点的四分之二。而在回流那一个阶段,大家就需求依照视口具体的幅度,将其转为实际的像素值。

参考二:浏览器加载渲染网页进度深入分析?

图片 8

8.越来越多探讨

重绘

哪些缩短repain(重绘)和reflow(回流)?

最后,我们由此组织渲染树和回流阶段,我们领略了怎么样节点是可以看到的,以至可以知道节点的体裁和求实的几何音信,那么我们就能够将渲染树的每一个节点都转移为显示屏上的莫过于像素,那几个品级就叫做重绘节点。

reflow是不可咸鱼翻身的,只可以将reflow对质量的震慑减到细微,给出下边几条提出:

既然知道了浏览器的渲染进程后,大家就来探求下,哪天会发生回流重绘。

  1. 绝不一条一条地改善 DOM 的样式。通过安装style属性改造结点样式的话,每安装贰遍都会诱致叁次reflow。所以最棒通过安装class的措施,那样能够将频频改观样式属性的操作合併成三次操作。

  2. 让要操作的因素进行”离线管理”,管理完后一起更新;

曾几何时产生回流重绘

- 使用DocumentFragment进行缓存操作,引发一回回流和重绘;

本文由必威发布于必威-前端,转载请注明出处:服务器接受到请求之后等待处理,渲染树表示D

TAG标签:
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。