文档章节

HTML的解析和css的回流与重绘的自己初略理解

德拉费尔
 德拉费尔
发布于 2013/06/01 12:37
字数 872
阅读 2277
收藏 16

       在别人的博客上看到了一篇讲的很生动的网页解析HTML的原理,并且还初步的说了一下css在渲染时候出现的reflow(回流)和repaint(重绘)。以下为引用他人博客中的内容。渲染就是浏览器把HTML代码以css定义的规则显示在浏览器窗口的过程。简单的说说自己对浏览器解析HTML时的基本过程吧。

1. 用户输入网址(假设是个html页面,并且是第一次访问),浏览器向服务器发出请求,服务器返回html文件;
  2. 浏览器开始载入html代码,发现<head>标签内有一个<link>标签引用外部CSS文件;
  3. 浏览器又发出CSS文件的请求,服务器返回这个CSS文件;
  4. 浏览器继续载入html中<body>部分的代码,并且CSS文件已经拿到手了,可以开始渲染页面了;
  5. 浏览器在代码中发现一个<img>标签引用了一张图片,向服务器发出请求。此时浏览器不会等到图片下载完,而是继续渲染后面的代码;
  6. 服务器返回图片文件,由于图片占用了一定面积,影响了后面段落的排布,因此浏览器需要回过头来重新渲染这部分代码;
  7. 浏览器发现了一个包含一行Javascript代码的<script>标签,赶快运行它;
  8. Javascript脚本执行了这条语句,它命令浏览器隐藏掉代码中的某个<div> (style.display=”none”)。杯具啊,突然就少了这么一个元素,浏览器不得不重新渲染这部分代码;
  9. 终于等到了</html>的到来,浏览器泪流满面……
  10. 等等,还没完,用户点了一下界面中的“换肤”按钮,Javascript让浏览器换了一下<link>标签的CSS路径;
  11. 浏览器召集了在座的各位<div><span><ul><li>们,“大伙儿收拾收拾行李,咱得重新来过……”,浏览器向服务器请
  求了新的CSS文件,重新渲染页面。
     从上面的过程可以看出,当页面的布局发生变化时,浏览器会回过头来重新渲染,这就是页面为什么会慢的一个原因,当一个点的变化影响了布局,这就会使得要倒回去重新渲染,这个倒回去的过程称为 reflow(回流)。

                         

       reflow几乎是无法避免的,页面上有树状折叠和展开效果时,当我们鼠标滑过或者是点击只要影响了页面的布局,让某些元素改变了占位面积,定位,边距等属性时,就会引起某个部分或者整个页面重新渲染。通常我们是不能预计浏览器是会reflow哪个部分的代码。

                           

        reflow问题也是可以优化的,减少reflow是很有必要的,比如给图片设定好宽度和高度,这样就可以把图片的占位面积预定好。

       另外还有一个是repaint(重绘),当只改变背景颜色,文字颜色,边框颜色而不改变页面布局时,浏览器就会repaint。repaint的速度明显比reflow的速度快。

       最后说一下,浏览器的不同,解析的方式也会有差别。

© 著作权归作者所有

共有 人打赏支持
德拉费尔
粉丝 23
博文 18
码字总数 25988
作品 0
成都
程序员
私信 提问
加载中

评论(2)

德拉费尔
德拉费尔

引用来自“夏竹”的评论

你好,读了你这篇文章后,学到很多东西,非常感谢!有个问题想请教一下
1、按照你文章中思想,我觉得【渲染】一定伴随着【回流】,这个理解是否正确?
2、如果第一个问题我没有理解错的话,那么,在【渲染】和【回流】这两个过程之间应该有个界限,这个界限是否就是HTML元素恢复到默认布局,即当HTML元素恢复到默认布局时,【回流】过程结束

请指教,谢谢!
据我所知,浏览器好像是16ms重新读取一下页面的样式渲染,也就是说,在页面的css加载的时候,页面就会一点一点的被渲染出来,当js改变样式的时候,样式也会在16ms这个时间段被渲染出来
夏竹
夏竹
你好,读了你这篇文章后,学到很多东西,非常感谢!有个问题想请教一下
1、按照你文章中思想,我觉得【渲染】一定伴随着【回流】,这个理解是否正确?
2、如果第一个问题我没有理解错的话,那么,在【渲染】和【回流】这两个过程之间应该有个界限,这个界限是否就是HTML元素恢复到默认布局,即当HTML元素恢复到默认布局时,【回流】过程结束

请指教,谢谢!
前端必备的浏览器知识(渲染过程、回流和重绘等)

常用哪几种浏览器测试?有哪些浏览器内核(Rendering Engine)? (Q1)浏览器:Chrome,IE,FireFox,Safari,Opera。 (Q2)对应内核:Webkit,Trident,Gecko,Webkit,Presto。(国内的浏览器,...

艺晨光
2017/08/25
0
0
2017.11.24-学习笔记:页面的重绘与回流

1.页面呈现流程 首先、浏览器会把获取到的 HTML 代码解析成一个 DOM 树,HTML 中的每个 tag(标签)都是 DOM 树中的一个节点,根节点就是我们常用的 document 对象。DOM 树里包含了所有 HTML...

演员小新
2017/11/24
0
0
话说WEB开发之页面重绘和回流

在讨论页面重绘、回流之前。需要对页面的呈现流程有些了解,页面是怎么把html结合css等显示到浏览器上的,下面的流程图显示了浏览器对页面的呈现的处理流程。可能不同的浏览器略微会有些不同...

longteng2013
2013/08/02
0
0
前端性能优化:细说浏览器渲染的重排与重绘

前端性能优化因为涉及到计算机网络、数据算法、图形图像处理、浏览器渲染等多方面计算机知识,常作为前端工程师乐此不疲的技术讨论话题,也正因如此,它也是面试时容易被问及的面试题之一。 ...

小白师兄
07/23
0
0
页面重绘(repaint)和回流(reflow)

前言 页面显示到浏览器上的过程: 1.1、生成一个DOM树。 浏览器将获取到的HTML代码解析成1个DOM树,包含了所有标签,包括display:none和动态添加的节点。 1.2、生成样式结构体。 浏览器将所有...

前端攻城小牛
10/29
0
0

没有更多内容

加载失败,请刷新页面

加载更多

闲话高并发的那些神话,看京东架构师如何把它拉下神坛

高并发也算是这几年的热门词汇了,尤其在互联网圈,开口不聊个高并发问题,都不好意思出门。高并发有那么邪乎吗?动不动就千万并发、亿级流量,听上去的确挺吓人。但仔细想想,这么大的并发与...

James-
15分钟前
1
0
Emacs 系列:让我们拥抱 Emacs 和 org 模式

导读 我必须承认,在使用了几十年的 vim 后, 我被 Emacs 吸引了。长期以来,我一直对如何组织安排事情感到沮丧。我也有用过 GTD 和 ZTD 之类的方法,但是像邮件或是大型文件这样的事务真的很...

问题终结者
16分钟前
1
0
解析Node.js通过axios实现网络请求

本次给大家分享一篇node.js通过axios实现网络请求的方法,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下。如有不足之处,欢迎批评指正。 1、使用Npm 下载axios n...

前端攻城老湿
29分钟前
4
0
深入浅出之React-redux中connect的装饰器用法@connect

这篇文章主要介绍了react-redux中connect的装饰器用法@connect详解,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下。如有不足之处,欢迎批评指正。 通常我们需要一...

前端攻城小牛
30分钟前
2
0
详解css BEM书写规范

BEM是基于组件的web开发方法。其思想是将用户界面分隔为独立的块,从而使开发复杂的UI界面变得更简单和快,且不需要粘贴复制便可复用现有代码。BEM由Block、Element、Modifier组成。选择器里...

前端小攻略
45分钟前
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部