理解浏览器的重绘与回流(repaint&&reflow)
今天在做练习的时候,遇到了重绘与回流这个词,表示连个毛都没有听过。遂查之,首先将网上的(http://blog.sina.com.cn/s/blog_8dace7290102wezv.html)关于这两个词的领悟粘贴如下:
一. 浏览器渲染过程
渲染:就是把浏览器把HTML代码以css定义的规则显示在浏览器窗口的过程
1.浏览器把获取到的HTML代码解析成一棵DOM树,HTML中的每个标签(tag)都是DOM树中的一个节点,根节点就是我们常用的document对象。DOM树里包含了HTML所有标签,包括display:none隐藏,还有用JS动态添加的元素等;
2.浏览器把所有样式(用户定义的css和用户代理)解析成样式结构体,在解析过程中会去掉浏览器不能识别的样式,比如IE会去掉-moz开头的样式,而Firefox会去掉_开头的样式;
3.DOM树和样式结构体组合后构建render tree(渲染树),render tree类似于DOM树,但区别很大,render tree 能识别样式,render tree的每一个节点都有自己的样式,而且render tree中不包含隐藏的节点(比如display:none的节点,还有head节点),因为这些节点不会用于呈现,而且不会影响呈现。
注意:visibility:hidden隐藏的元素还是会包含到render tree中,因为visibility:hidden会影响布局(layout),会占有空间。根据css2的标准,render tree中的每个节点都称为Box(Box demensions),理解页面元素为一个具有填充,边距,边框和位置的盒子。
4.一旦render tree构建完成后,浏览器就可以根据render tree来绘制页面了。
注意:回流必将引起重绘,而重绘不一定会引起回流。
三. 重绘与回流的定义
重绘:当前元素的样式(背景颜色、字体颜色等)发生改变的时候,我们只需要把改变的元素重新的渲染一下即可,重绘对浏览器的性能影响较小,所以 一般不考虑。
发生重绘的情形:改变容器的外观风格等,比如background:black等。改变外观,不改变布局,不影响其他的dom。
回流:是指浏览器为了重新渲染部分或者全部的文档而重新计算文档中元素的位置和几何构造的过程。
因为回流可能导致整个dom树的重新构造,所以是性能的一大杀手
一个元素的回流导致了其所有子元素以及DOM中紧随其后的祖先元素的随后的回流.
四. 触发回流的操作
1.调整窗口大小(Resizing the window)
2.改变字体(Changing the font)
3.增加或者移除样式表(Adding or removing a stylesheet)
4.内容变化,比如用户在input框中输入文字(Content changes, such as a user typing text in an input box)
5.激活 CSS 伪类,比如 :hover (IE 中为兄弟结点伪类的激活)(Activation of CSS pseudo classes such as :hover (in IE the activation of the pseudo class of a sibling)
6.操作 class 属性(Manipulating the class attribute)
7.脚本操作 DOM(A script manipulating the DOM)
8.计算 offsetWidth 和 offsetHeight 属性(Calculating offsetWidth and offsetHeight)
9.设置 style 属性的值 (Setting a property of the style attribute)
10.fixed定位的元素,在拖动滚动条的时候会一直回流
五. 如何避免回流
1. 一起变化
如果要改变一个元素的样式,可以将所有样式集中在一个class上面一次变化,而不是变化几次,比如:
- <style type="text/css">
- .changeStyle { width: 100px; height: 100px; }
- </style>
- <script type="text/javascript">
- $(document).ready(function () {
- var el = $('id');
- //1
- el.css('width', '100px');
- el.css('height', '100px');
- //2
- el.css({ 'width': '100px;', 'height': '100px;' });
- //3
- el.addClass('changeStyle');
- });
- </script>
应该使用第三种,这样只重绘一次。
2. 具有动画效果请使用absolute
3. 避免使用表格布局
4. 不要使用CSS表达式
5. 在最末改变元素
因为回流是自上而下的,所以下不及上,我们在最后面修改信息对全局影响越少。
6. 动画移动时候,要控制
比如我们拖动元素时候,我是在他x或者y坐标改变5px才操作,这样虽说降低了平滑度,但是对性能有提高
7. 如果你想让复杂的表现发生改变,例如动画效果,那么请在这个流动线之外实现它。使用position-absolute或position-fixed来实现它。
8. 既然计算offsetWidth也会引起回流,那么就拿一个变量保存它
9. 当我们需要向文档中添加节点时,可以用文档碎片的方式去解决这个问题的,当我们需要给DOM中添加新的元素的时候,先将其放在一个容器中,然后统一添加,这样就只产生了一次回流。如下:
- var frg = document.createDocumentFragment();//创建了一个文档碎片:相当于一个容器,把动态创建的li先放到容器中,最后一起添加到页面中(只引发一次回流)
- for (var i = 0; i < ; i++) {
- var oLi = document.createElement("li");
- oLi.onmouseover = function () {
- this.style.backgroundColor = "#22b909";
- }
- oLi.onmouseout = function () {
- this.style.backgroundColor = "";
- }
- frg.appendChild(oLi);
- }
- oUl.appendChild(frg);
资料来源:
http://aijuans.iteye.com/blog/1910614
http://m.blog.csdn.net/article/details?id=50696328
http://www.360doc.cn/article/10504424_435836011.html
- 回流是指浏览器为了重新渲染部分或者全部的文档而重新计算文档中元素的位置和几何构造的过程
理解浏览器的重绘与回流(repaint&&reflow)的更多相关文章
- 重绘和回流(reflow和repaint)
由于DOM操作会导致浏览器的回流,回流需要花费大量的时间进行样式计算和节点重绘与渲染,所以应当尽量减少回流次数. 以下是几种常见的减少重绘和回流的方法: 一.不要一项一项的更改页面的样式,尽量一口气写 ...
- 浏览器的重绘与回流(Reflow & Repaint)介绍
重绘 当页面元素样式改变不影响元素在文档流中的位置时(如background-color,border-color,visibility),浏览器只会将新样式赋予元素并进行重新绘制操作. 回流 当改变 ...
- DOM的重绘和回流及代码性能优化
1.DOM的重绘和回流Repaint&Reflow 1.1重绘:元素样式的改变(但宽高.大小.位置等不变) 如outline.visibility.color.background-color ...
- 高性能WEB开发:深入理解页面呈现、重绘、回流
在讨论页面重绘.回流之前.需要对页面的呈现流程有些了解,页面是怎么把html结合css等显示到浏览器上的,下面的流程图显示了浏览器对页面的呈现的处理流程.可能不同的浏览器略微会有些不同.但基本上都是类 ...
- 介绍下重绘和回流(Repaint & Reflow),以及如何进行优化
1. 浏览器渲染机制 浏览器采用流式布局模型(Flow Based Layout) 浏览器会把HTML解析成DOM,把CSS解析成CSSOM,DOM和CSSOM合并就产生了渲染树(Render Tre ...
- 重绘和回流(Repaint & Reflow)总结,以及如何进行优化
1. 浏览器渲染机制 浏览器采用流式布局模型(Flow Based Layout) 浏览器会把HTML解析成DOM,把CSS解析成CSSOM,DOM和CSSOM合并就产生了渲染树(Render Tre ...
- 浅谈JS重绘与回流
在说浏览器渲染页面之前,我们需要先了解两个点,一个叫 浏览器解析 URL,另一个就是本章节将涉及的 重绘与回流: 重绘(repaint):当元素样式的改变不影响布局时,浏览器将使用重绘对元素进行更新, ...
- 【web性能】页面呈现、重绘、回流
在讨论页面重绘.回流之前.需要对页面的呈现流程有些了解,页面是怎么把html结合css等显示到浏览器上的,下面的流程图显示了浏览器对页面的呈现的处理流程.可能不同的浏览器略微会有些不同.但基本上都是类 ...
- [转]深入理解Flash Player重绘
这个是tencent flash team的一篇文章,但团队的博客已经关闭了,所以就在这里备份下吧~ 后来有人把这篇文章又发布到9ria上了,引发了一些讨论,其中有两位大神发言了,内容在原文下方. 9 ...
随机推荐
- Json数据处理
1.字符串转换为Json数组:取json对象属性值. String st="[{"tradeDate":"2016-09-27","trad ...
- Python操作mysql之SQLAchemy(ORM框架)
SQLAchemy SQLAchemy 解析: SQLAchemy是python编程语言下的一款ORM框架,该框架建立在数据库API之上,使用关系对象映射进行数据库操作, 简言之便是:将对象转换成SQ ...
- 慕课网-安卓工程师初养成-5-4 使用 Eclipse 调试程序
来源:http://www.imooc.com/video/1627 IDE断点调试功能 比如 之前的程序,写错了,变成如下 package com.imooc; import java.util.S ...
- MyBatis学习总结(八)——Mybatis3.x与Spring4.x整合
一.搭建开发环境 1.1.使用Maven创建Web项目 执行如下命令: mvn archetype:create -DgroupId=me.gacl -DartifactId=spring4-myba ...
- js分辨浏览器类别和版本
function BrowserInfo() { var ua = navigator.userAgent.toLowerCase(); var Sys = {}; var s; (s = ua.ma ...
- XidianOJ 1182 Chinese Paladin – Qi’s troubles
题目描述 As we all know, Xiahou Jinxuan (Chinese Paladin 5 Prequel's protagonist) and Yue Jinzhao (Chine ...
- avalon2学习教程09循环操作
avalon2的循环指令的用法完全改变了.avalon最早期从knockout那样抄来ms-each,ms-with,分别用于数组循环与对象循环.它们都是针对元素内容进行循环.后来又从angular那 ...
- php 乱码解决
1)首先确定你的终端编码,如果你不知道如何确定,分别执行这两段代码,看看哪个能输出中文. PHP code ? 1 echo pack("H12","E4B8ADE6 ...
- 父窗口的treeview在调用其他窗体的ShowDialog后闪烁问题
ShowDialog(this)改为ShowDialog()即可! 具体原理未深究
- Selenium2+python自动化31-生成测试报告
前言 最近小伙伴们总有一些测试报告的问题,网上的一些资料生成报告的方法,我试了都不行,完全生成不了,不知道他们是怎么生成的,同样的代码,有待研究. 今天小编写一下可以生成测试报告的方法.个人觉得也是最 ...