重绘和回流

1、浏览器把获取到的html代码解析成1个Dom树。

2、浏览器把样式解析成样式结构体,在解析过程中会去掉各自浏览器不能识别的样式比如-moz,-webkit等。

3、2者结合后构建呈现render tree。

4、render tree构建完毕,浏览器就可以根据render tree绘制页面。

其中脚本执行过程可能阻塞Dom的解析和构建和阻塞css处理,(比如遇到同步一个document.write或者javascript脚本查询任何元素的计算样式)。结果导致Dom和CssDom的构建频繁的交织在一起,Dom构建在javascript执行完毕前无法进行,而javascript在cssDom构建完成前也无法进行。

首次加载的渲染时间、脚本执行都会受到样式表的阻塞,因此必须让css以最快的速度下载。也就是为什么要使用的“样式放在head里,js脚本放在最后/body前”。

1、当render tree中的元素的尺寸、显隐等改变而需要重新构建,称为回流。每个页面至少需要一次回流,也就是页面第一次加载的时候。

2、当render tree中的元素的属性改变只影响外观、风格,而不影响布局,称为重绘。

那么回流必定引起重绘,而重绘不一定引起回流。

任何对render tree元素的操作都会引起重绘或者回流,所以减少对render tree的操作能减少重绘、回流。

比如:javascript修改元素style属性,如果已经定义好的样式,用js操作改变className;

新建一个最外层的大div,这个div会首先添加所有新元素,最后才把这个div append到页面上;

或者先display:none隐藏元素,然后对这个元素进行操作,最后显示该元素;

有些属性值可以定义到变量中进行缓存,需要用的时候读取这个变量。

时间: 2024-10-08 10:17:14

重绘和回流的相关文章

重绘、回流

重绘:对某个区域.对象的重新渲染表现 回流:对某个区域.对象进行重绘,根据条件影响到它的祖先对象进入重绘(并可能无限递归直到顶级祖先对象) 重绘如何出现:改变对象的形状.坐标.表现以及内容都会引发该对象被重新渲染,这种现象即为重绘. 回流如何出现:当该对象即将重绘时,浏览器会根据条件判断该对象的重绘结果是否会依赖该对象的祖先元素.如果有则将该对象祖先元素也加入本次重绘.并一直向上寻找,直到条件不匹配.此现象即为回流. 最后总结:1.重绘可能引发回流2.回流必定引发重绘3.回流条件……暂时未知

页面的重绘与回流及优化

首先要清楚页面呈现的具体过程: 1.  浏览器把获取到的HTML代码解析成1个DOM树,HTML中的每个tag都是DOM树中的1个节点,根节点就是我们常用的document对象.DOM树里包含了所有HTML标签,包括display:none隐藏,还有用JS动态添加的元素等. 2. 浏览器把所有样式(用户定义的CSS和用户代理)解析成样式结构体,在解析的过程中会去掉浏览器不能识别的样式,比如IE会去掉-moz开头的样式,而FF会去掉_开头的样式. 3.DOM Tree 和样式结构体组合后构建ren

css重绘与回流

高性能WEB开发之页面呈现.重绘.回流(1) 2011-04-25 10:11 BearRui BearRui的Blog 字号:T | T 在讨论页面重绘.回流之前.需要对页面的呈现流程有些了解,页面是怎么把html结合css等显示到浏览器上的,下面的流程图显示了浏览器对页面的呈现的处理流程.可能不同的浏览器略微会有些不同.但基本上都是类似的. AD:2014WOT全球软件技术峰会北京站 课程视频发布 在讨论页面重绘.回流之前.需要对页面的呈现流程有些了解,页面是怎么把html结合css等显示到

网页的重绘和回流

闭包 function f1(){         var n=999;         nAdd=function(){n+=1}         function f2(){             alert(n);         }         return f2;     } var result=f1();     result();     nAdd();     result(); 其中的结果是: 第1次弹出999 第2次弹出10 第一次运行的时候,f2直接显示出n的值,第

理解浏览器的重绘与回流(repaint&&reflow)

今天在做练习的时候,遇到了重绘与回流这个词,表示连个毛都没有听过.遂查之,首先将网上的(http://blog.sina.com.cn/s/blog_8dace7290102wezv.html)关于这两个词的领悟粘贴如下: 一.  浏览器渲染过程 渲染:就是把浏览器把HTML代码以css定义的规则显示在浏览器窗口的过程 浏览器解析HTML的基本过程: 1  用户输入网址,浏览器向服务器发出请求,服务器返回html文件 2  浏览器载入html代码,发现标签内有一个标签引用外部css文件 3 浏览

页面重绘和回流以及优化

在讨论页面重绘.回流之前.需要对页面的呈现流程有些了解,页面是怎么把html结合css等显示到浏览器上的,下面的流程图显示了浏览器对页面的呈现的处理流程.可能不同的浏览器略微会有些不同.但基本上都是类似的. 1.  浏览器把获取到的HTML代码解析成1个DOM树,HTML中的每个tag都是DOM树中的1个节点,根节点就是我们常用的document对象.DOM树里包含了所有HTML标签,包括display:none隐藏,还有用JS动态添加的元素等. 2. 浏览器把所有样式(用户定义的CSS和用户代

页面呈现、重绘与回流

页面呈现流程  在讨论页面重绘.回流之前.需要对页面的呈现流程有些了解,页面是怎么把html结合css等显示到浏览器上的,下面的流程图显示了浏览器对页面的呈现的处理流程.可能不同的浏览器略微会有些不同.但基本上都是类似的. 1.  浏览器把获取到的html代码解析成1个Dom树,html中的每个tag都是Dom树中的1个节点,根节点就是我们常用的document对象(<html> tag).dom树就是我们用firebug或者IE Developer Toolbar等工具看到的html结构,里

闲聊前端性能----防抖、节流、重绘与回流。

在最近,小米9卖的特别火,在官方抢购的时候基本都是一点既空.这不禁让我想到了,官网是怎样控制顾客不停点击发起请求而不导致官网崩溃的呢?这由此引出了前端性能的优化中的----防抖和节流.在闲聊完后你就会发现有些时候在抢购商品的时候,你用鼠标在几秒钟不停的按了数十次,或许它仅仅是发送了你第一次点击抢购的那个请求.所以说 抢购时间内的第一次点击尤为关键! 下面来介绍一下什么是防抖!        防抖:任务频繁触发的情况下,只有任务触发的间隔超过制定的时间间隔的时候,任务才会被执行. 下面引用一下知乎

Web前端性能优化-重绘与回流

1.什么是重绘与回流 Render tree 的重新构建就叫回流.当布局和几何属性改变时就需要回流,鼠标移动到图片 图片变大 也会触发回流.回流 能避免就避免 Render tree 改变外观.风格 而不影响布局的时候,就叫重绘 重绘与回流的关系:回流会引起重绘 重绘不一定会引起回流 2.避免重绘回流的两种方法 什么会引起回流和重绘 触发页面布局从而触发重绘的: (1) 盒子模型属性 (2) 定位属性和浮动 (3) 改变节点内部文字结构 如下图: 只触发重绘不触发回流的属性: 优化方法: (1)