理解Js中的Repaint和Reflow

时间: 2019-06-21阅读: 156标签: 浏览器
最近,在研究React的虚拟DOM如此之快的原因时,我意识到我们对javascript性能的了解甚少。所以我写这篇文章是为了帮助提高对Repaint和Reflow以及JavaScript性能的认识。


在深入了解之前,我们是否了解浏览器的工作原理呢?

一图胜过千言万语,所以让我们来了解下浏览器的工作原理


en...那么什么是浏览器引擎,什么是渲染引擎呢?

浏览器引擎的主要工作是将Html文档以及网页上的其他资源转换成交互可视化的视图,并呈现在用户设备上。除了浏览器引擎,关于相关概念的其他两个常用术语:“layout engine”和“rendering engine”。理论上,布局(layout)和渲染(rendering)(或“painting”)可以由单独的引擎处理。然而,在实践中,它们是紧密耦合的,很少单独考虑。


理解浏览器是怎样将用户界面绘制到屏幕上

当我们点击页面上的某个链接或在浏览器的URL地址栏按下Enter键时,向该页面发出HTTP请求,并且相应的服务器提供(通常)HTML文档作为响应。(两者之间发生了很多事情)。


浏览器解析HTML源代码并构造DOM树,其中每个HTML标记在树中具有对应的节点,并且标记之间的文本块也获得文本节点。DOM树中的根节点是documentElement(<html>标记)

浏览器解析CSS代码并感知它。样式信息降级:用户代理样式表的基本规则,如有一个用户样式表,在作者信息页面有一个作者样式表,然后将外部样式,内联样式通过编码成html标签的样式属性

然后更有趣的部分是构造渲染树。渲染树有点像DOM树,但与DOM树完全不匹配。渲染树知道样式,所以如果给一个div设置display为none时,它就不会在渲染树中呈现出来。其他不可见元素也是如此,例如head标签和其中的所有内容。另一方面,可能有DOM元素在渲染树中用多个节点表示 - 比如文本节点,例如<p>标签中的每一行都需要一个渲染节点。渲染树中的节点称为帧或盒子。每一个节点有CSS盒子属性-宽度,高度,边框,边距等。

一旦构建了渲染树,浏览器就能够在屏幕上绘制渲染树节点。

<html>
<head>
  <title>Repaint And Reflow</title>
</head>
<body> 
  <p>
    <strong>How's The Josh?</strong>
    <strong><b> High Sir...</b></strong>
  </p>
  
  <div style="display: none">
    Nothing to display
  </div>
  
  <div><img src="..." /></div>
  ...
</body>
</html>

表示此HTML文档的DOM树基本上每个标记都有一个节点,节点之间的每个文本都有一个文本节点(为简单起见,我们忽略了空白也是文本节点的事实):

documentElement (html)
        head
            title
        body
            p
                strong
                    [text node]
            p
                strong
                    b
                        [text node]            
            div 
                [text node]
            div
                img
            ...

渲染树可以是DOM树中可见的部分,它缺少一些东西 - head和隐藏的div,但它有文本行的附加节点(又名帧,也称为盒子)。

    root (RenderView)
        body
            p
                line 1
            line 2
            line 3
            ...
            
        div
            img 
    ...
    

渲染树中的根节点包含所有其他的元素称为帧(盒子),我们可以将其视为浏览器窗口的内部部分,因为这是页面可以传播的受限区域。从技术上讲,WebKit内核调用根节点RenderView,它对应于CSS初始包含块,它基本上是从页面顶部(0,0)到(window.innerWidth,window.innerHeight)的视口矩形。


Repaint和Reflow

伴随着绘制,总是有一个初始化页面。之后,改变用于渲染树的输入信息可能由其中一个或两个所导致(Repaint或Reflow):

需要重新验证渲染树(或整个树)的部分,并重新计算节点尺寸,这称为reflow,或者layout,或者layouting,注意:一个初始页面至少有一次reflow

由于节点几何属性的变化或者因为样式变化(例如更改背景颜色),需要更新屏幕的某些部分,这时屏幕的更新这称为repaint或redraw

Repaint和Reflow可能很昂贵,它们可能会损害用户体验,并使UI显得缓慢


Repaint

顾名思义,重绘(Repaint)只不过是屏幕上的重新绘制元素,因为元素的变化会影响元素的可见性,但不会影响布局

如:

  • 改变元素的可见性
  • 改变元素的轮廓
  • 改变元素的背景

都可能触发重绘(Repaint)


Reflow

重排(Reflow)意味着在文档中重新去计算元素的位置和几何形状。目的是为了重新渲染文档的部分或全部。由于重排在浏览器中是用户行为阻塞的操作,所以对于开发人员怎样去提高重排的时间以及了解各种文档属性(DOM深度,CSS规则效率,不同类型的样式更改)对中排时间的影响是很重要的。

有时,重排文档中的单个元素可能需要重排其父元素以及其后的任何元素。


吐血推荐

1.阿里云: 本站目前使用的是阿里云主机,安全/可靠/稳定。点击领取2000元代金券、了解最新阿里云产品的各种优惠活动点击进入...

2.腾讯云: 提供云服务器、云数据库、云存储、视频与CDN、域名等服务。腾讯云各类产品的最新活动,优惠券领取点击进入...

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

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

JS检测CSS属性浏览器是否支持的多种方法

原生CSS.supports语法返回布尔值 true 或者 false ,用来检测是否支持某CSS属性。不考虑兼容性,对CSS的进行检测使用 CSS.supports() 方法,要检测IE浏览器使用赋值取值法。

浏览器内核分类

五大浏览器:IE、Firefox、Chrome、Safari和Opera。渲染引擎 它负责取得网页的内容(HTML、XML、图像等等)、整理讯息(例如加入 CSS 等),以及计算网页的显示方式,然后会输出至显示器或打印机

js判断浏览器内核是否是safari浏览器

PC端只有Chrome有Safari字段吗?为什么不需要判断其他浏览器?其实360,QQ等浏览器的userAgent字段也会带有Safari字段,但是由于他们基于Chrome二次开发的,所有也会携带有Chrome字段。

Js详细判断浏览器运行环境

看到标题,大家就能想起这个需求在很多项目上都能用到。我们部署在Web服务器上的前端应用,既可以用PC浏览器访问,也可以用手机浏览器访问,再加上现在智能设备的推广,我们甚至能在车载系统、穿戴设备和电视平台上访问

不同浏览器的内核

网页上所用到的语言有:html, css, JavaScript等,其中,前两者通常决定了该页面长什么样,它们是可以说都是约定的规范。不同的浏览器在获取到某页面的代码文件后,负责根据这套规范将代码渲染出来呈现给用户

Js实现阻止浏览器返回的功能

无论pc端还是移动端,浏览器都会带有后退按钮或后退键.主要方便我们能返回以前访问过的页面,但有时候我们不得不关闭这个功能.尤其是对于一些推广落地页,用户进入后不希望它返回

完美解决安卓端百度浏览器屏蔽fixed悬浮元素的问题

h5活动页面底部有个悬浮图片按钮,使用fixed悬浮定位在底部,但是在安卓端的百度浏览器下打开,却发现该图片一闪而过,在百度浏览器中消失不见。

浏览器的三种Js弹窗方式

在做网页时,常常使用弹窗,以上就是浏览器的三种弹窗方式, alert 在测试时常用; confirm 可以套用if...else 来用 ,比如 :confirm点击了确定做什么事情,点击了取消又做什么事情;prompt 弹窗输入 ; 可以给网页设置密码。

火狐浏览器 访问所有HTTPS网站显示连接不安全解决办法

当 Firefox 连接到一个安全的网站时(网址最开始为“https://”),它必须确认该网站出具的证书有效且使用足够高的加密强度。如果证书无法通过验证,或加密强度过低,Firefox 会中止连接到这个网站,并显示“连接不安全”的错误信息页面。

GeckoView:Mozilla面向移动浏览器打造的渲染引擎

Mozilla 现已推出面向 Android 的全新移动浏览器 Firefox Preview。与大多数浏览器所采用的 Bink 渲染引擎不同,Firefox Preview 的渲染引擎 GeckoView 由 Mozilla 自行开发

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

广告赞助文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全