理解Js中的Repaint和Reflow

时间: 2019-06-21阅读: 525标签: 浏览器
最近,在研究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.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

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

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

关闭

js监听浏览器后退事件

如果在浏览器执行了回退操作,则会触发页面弹出“不可回退”弹框,当然这里可以进行你所需要的不同的处理; 代码如下:

程序员眼中的浏览器是什么样的?IE:有本事你卸了我啊

主流浏览器之争从上个世纪开就开始,已经持续了很长的时间。人们都在笑话IE,纷纷转向其它浏览器。今天,我向大家分享一下针对IE的搞笑图片,只是逗乐而已,喝杯咖啡,坐下来慢慢享受吧。

总结整理HTML5浏览器支持情况总结整理HTML5浏览器支持情况

HTML5浏览器支持情况:现今浏览器的许多新功能都是从HTML5标准中发展而来的。目前常用的浏览器有IE、火狐、谷歌、Safari和Opera等等,通过对这些主流web浏览器的发展策略调查,发现它们都支持HTML5上采取了措施。

浏览器访问一个网站所经历的步骤

浏览器访问网站的步骤:Chrome搜索自身的DNS缓存、读取本地HOST文件、浏览器发起一个DNS的一个系统调用、浏览器获得域名对应的IP地址后,发起HTTP三次握手、TCP/IP连接建立起来、服务器端接受到了这个请求、浏览器根据拿到的资源对页面进行渲染

浏览器内核有哪些?主流浏览器的所使用的内核介绍

一般说的浏览器内核是指浏览器最重要的核心部分,RenderingEngine,翻译成中文大概意思就是“解释引擎”,我们一般称为浏览器内核。由于不同的内核各自有一套自己的渲染网页和解释页面代码的机制,所以就会有一些问题存在。

禁止(防止)浏览器自动填充密码

由于设置autocomplete属性和添加隐藏文本框,以及在初始化时阻止写入等方法都无法完全满足需求,所以只能通过js逻辑来控制。 其中提示相关的代码使用的是layui的layer模块,可以换成自己想用的东西

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

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

油猴脚本编写教程

油猴脚本(Tampermonkey)是一个非常流行的浏览器扩展,它可以运行由广大社区编写的扩展脚本,来实现各式各样的功能,常见的去广告、修改样式文件、甚至是下载视频

Vue单页面应用阻止浏览器记住密码

现象1:路由切换时再次提示是否记住密码,解决办法:这其实是个代码bug,在登录页面,用form把输入框都包起来就行了。现象2:autocomplete=off无效

微软劝你别再使用 IE 浏览器

IE 浏览器(Internet Explorer)还是浏览器吗?按照微软网络安全领域主要负责人 Chris Jackson 的说法,如今对于企业用户来说,IE 浏览器仅仅是一个“兼容性解决方案”,只面向上个世纪的“古董”网站,用户应该尽早升级到现代浏览器。

点击更多...

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

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

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