关闭

页面渲染性能控制-重绘与回流

时间: 2019-05-18阅读: 767标签: 性能

浏览器解析代码过程

页面的显示过程分为以下几个阶段:

  1. 生成DOM树(包括display:none的节点)
  2. 在DOM树的基础上根据节点的集合属性(margin,padding,width,height等)生成render树(不包括display:none,head节点,但是包括visibility:hidden的节点)
  3. 在render树的基础上继续渲染颜色背景色等样式

reflow:当render树的一部分或者全部因为大小边距等问题发生改变而需要重建的过程,叫做回流
repaint:当诸如颜色背景等不会引起页面布局变化,而只需要重新渲染的过程叫做重绘

通过上述定义,可以很明显看出,重绘的代价要比回流小。重绘只涉及样式的改变,不涉及到布局。重绘就好像给人染了一个头发,而回流相当于给人做了一次整形手术


什么会引起回流

页面渲染初始化

  1. DOM结构变化,脸上整得亲妈都认不出来了,所以会引发回流
  2. render树变化,比如减少了padding,增加border等等,改变页面布局了

窗口resize事件触发

  1. 最复杂的一种:获取某些属性,引发回流 很多浏览器会对回流做优化,他会等到足够数量的变化发生,在做一次批处理回流。
    但是除了render树的直接变化。 
    当获取一些属性时,浏览器为了获得正确的值也会触发回流。这样就使得浏览器的优化失效了 这些属性包括

offsetTop,     offsetLeft,     offsetWidth,     offsetHeight
   scrollTop/Left/Width/Height,
   clientTop/Left/Width/Height,
   width,height
   调用了getComputedStyle(), 或者 IE的 currentStyle

这段儿代码是抄的,哈哈,大概解释一下样式改变引起的重绘和回流

var s = document.body.style;

s.padding = "2px"; // 回流+重绘

s.border = "1px solid red"; // 再一次 回流+重绘

s.color = "blue"; // 再一次重绘

s.backgroundColor = "#ccc"; // 再一次 重绘

s.fontSize = "14px"; // 再一次 回流+重绘, 没想到吧,改变字体大小也会回流
document.body.appendChild(document.createTextNode('abc!'));  // 添加node,再一次 回流+重绘

可以看出,回流一定伴随着重绘,而重绘却可以单独出现

回流对性能产生了一定的影响,尽管浏览器机智地帮我们进行了批处理,但是仍然存在着上述诸多阔怕的属性,一获取就回流。怎么解决?


减少回流

  1. 避免逐项更改样式。最好一次性更改style属性,或者将样式列表定义为class并一次性更改class属性。
  2. 避免循环操作DOM。创建一个documentFragment或div,在它上面应用所有DOM操作,最后再把它添加到window.document。
  3. 避免多次读取offsetLeft等属性。无法避免则将它们缓存到变量。
  4. 将复杂的元素绝对定位或固定定位,使它脱离文档流。否则回流代价十分高

display:none和visibility:hidden会产生回流与重绘

display:none指的是元素完全不陈列出来,不占据空间,涉及到了DOM结构,故产生reflow与repaint 
visibility:hidden指的是元素不可见但存在,保留空间,不影响结构,故只产生repaint  



站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/3766

关闭

怎样测试 JavaScript 的函数性能

通过衡量执行某个函数所花费的时间,以“证明”某些实现比另一些实现更高效始终是一个很好的主意。这也是确保性能在进行一些修改后不受影响并找出瓶颈的好方法。良好的性能有助于获得良好的用户体验。良好的用户体验能够留住用户

前端SPA(单页面应用)性能优化,交互体验加成!

SPA 是一种特殊的 Web 应用,是加载单个 HTML 页面并在用户与应用程序交互时动态更新该页面的。它将所有的活动局限于一个 Web 页面中,仅在该 Web 页面初始化时加载相应的 HTML 、 JavaScript 、 CSS 。

JS如何提高展开运算符的性能?

展开运算符或三个点,接受一个数组数组或通常是可迭代的[... arrayOrIterable]并将数组元素分解,并使用这些分解部分构造一个新数组。展开运算符可以放在数组中的任何位置:

小程序Canvas性能优化实战

在小程序中使用canvas组件绘制地铁图,地铁图包括地铁线路、站点图标、线及站点名称文字,绘制元素为线、圆、图片、文字。 支持拖动平移和双指缩放。

CSS优化,提高性能的方法有哪些?

首推的是合并css文件,如果页面加载10个css文件,每个文件1k;减少css嵌套,最好不要套三层以上。不要在ID选择器前面进行嵌套;建立公共样式类

前端性能优化_css加载会造成哪些阻塞现象?

css的加载是不会阻塞DOM的解析,但是会阻塞DOM的渲染,会阻塞link后面js语句的执行。这是由于浏览器为了防止html页面的重复渲染而降低性能,所以浏览器只会在加载的时候去解析dom树,然后等在css加载完成之后才进行dom的渲染以及执行后面的js语句。

用CSS开启硬件加速来提高网站性能

你知道我们可以在浏览器中用css开启硬件加速,使GPU (Graphics Processing Unit) 发挥功能,从而提升性能吗?现在大多数电脑的显卡都支持硬件加速。鉴于此,我们可以发挥GPU的力量,从而使我们的网站或应用表现的更为流畅。

2018 前端性能检查表

性能十分重要。然而,我们真的知道性能瓶颈具体在哪儿吗?是执行复杂的 JavaScript,下载缓慢的 Web 字体,巨大的图片,还是卡顿的渲染?研究摇树(Tree Shaking),作用域提升(Scope Hoisting)

如何从请求、传输、渲染3个方面提升Web前端性能?

什么是WEB前端呢?就是用户电脑的浏览器所做的一切事情。我们来看看用户访问网站,浏览器都做了哪些事情:输入网址 –> 解析域名 -> 请求页面 -> 解析页面并发送页面中的资源请求 -> 渲染资源 -> 输出页面 -> 监听用户操作 -> 重新渲染。

JS如何提高扩展运算符的性能?

当被扩展的数组位于数组的开头时,由于快速路径优化,您可以获得性能提升。它适用于V8引擎7.2版本(Chrome v72和NodeJS v12附带的特性)。通过此优化,性能测试显示[... array, item]的执行速度至少比[item, ...array]快两倍

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!