文档章节

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

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

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>>

       在别人的博客上看到了一篇讲的很生动的网页解析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
针对回流和重绘的渲染优化--公司分享

如果是你,你会如何实现浏览器内核,你认为的浏览器渲染的流程是怎么样的 工作开发中,你有做过哪些关于性能优化的工作(代码),或者目前的业务中有哪些是可以做优化的 浏览器渲染机制 什么...

莫西摩西
10/17
13
0
话说WEB开发之页面重绘和回流

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

longteng2013
2013/08/02
251
0
从一条语句说浏览器页面渲染机制

1.引子 最近看到有道题讨论在html文件中不同位置时在页面上的执行顺序(题目在后面具体讨论),于是写这篇博客讨论一下浏览器的页面渲染,在http请求中传输的字节码如何变成浏览器呈现在用户...

海宁不想说话
02/18
0
0

没有更多内容

加载失败,请刷新页面

加载更多

mysql免安装

参考:http://blog.csdn.net/qq_28569585/article/details/79072805 [mysqld]#设置mysql密码为空#skip-grant-tables#设置3306端口 port = 3306# 设置mysql的安装目录 basedir=E...

秋默
5分钟前
1
0
立足于SpringCloud.H + Netflix-Ribbon + Hystrix断路器(9)

《SpringCloud.H心法总纲》 继续上一篇,接下来Springcloud配置Netflix-Ribbon集成Hystrix断路器的功能。 1、添加依赖 <!--使用hystrix,测试断路器--><dependency> <groupId>org.spr......

木九天
5分钟前
1
0
Dropbox怎么共享文件?Dropbox共享文件操作

Dropbox网盘是国外的一项云存储服务,这意味着即使您使用的是其他设备,您也可以将文件复制到云中并在以后访问它们,目前支持PC、Android和MAC三大平台,为用户带来最精准的资源传输工作。就...

坚果云
8分钟前
4
0
Vant Weapp 1.0 正式版发布

1.0 来了 2018 年 8 月 11 日,我们发布了 Vant Weapp 的首个版本。16 个月以来,我们收到了 27 位开发者贡献的 1000 多次提交,也处理了 1200 多个 issue,发布了 50 多个版本。Github 的 ...

有赞coder
10分钟前
2
0
VCF文件格式详解

VCF文件全称为Variant Call Format,表示基因组的变异信息,通常为GATK和Samtools软件处理所得到。 VCF文件大致可以分为两个部分: 1、以##开头的头文件信息 ##fileformat=VCFv4.2##FILTER...

悲催的古灵武士
10分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部