浏览器渲染过程

1.  浏览器把获取到的HTML代码解析成1个DOM树,HTML中的每个tag都是DOM树中的1个节点,根节点就是我们常用的document对象。DOM树里包含了所有HTML标签,包括display:none隐藏,还有用JS动态添加的元素等。

2. 浏览器把所有样式(用户定义的CSS和用户代理)解析成样式结构体,在解析的过程中会去掉浏览器不能识别的样式,比如IE会去掉-moz开头的样式,而FF会去掉_开头的样式。

3、DOM Tree 和样式结构体组合后构建render tree, render tree类似于DOM tree,但区别很大,render tree能识别样式,render tree中每个NODE都有自己的style,而且 render tree不包含隐藏的节点 (比如display:none的节点,还有head节点),因为这些节点不会用于呈现,而且不会影响呈现的,所以就不会包含到 render tree中。注意 visibility:hidden隐藏的元素还是会包含到 render tree中的,因为visibility:hidden 会影响布局(layout),会占有空间。根据CSS2的标准,render tree中的每个节点都称为Box (Box dimensions),理解页面元素为一个具有填充、边距、边框和位置的盒子。

4. 一旦render tree构建完毕后,浏览器就可以根据render tree来绘制页面了。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏非著名程序员

Android学习第六弹之 Android字体大小自适应不同分辨率的方法

Android字体大小自适应不同分辨率 非著名程序员 今天有人问我,android系统不同分辨率,不同大小的手机,字体大小怎么去适应呢?其实字体的适应和图片的适...

19910
来自专栏静默虚空的博客

HTML 基础

HTML 基础 本章展示最常用的 HTML 标签。 标题 标题很重要 请确保标题标签只用于标题。不要仅仅是为了产生粗体或大号的文本而使用标题。 搜索引擎...

29710
来自专栏coding for love

CSS进阶06-相对定位Relative Positioning

(注1:如果有问题欢迎留言探讨,一起学习!转载请注明出处,喜欢可以点个赞哦!) (注2:更多内容请查看我的目录。)

722
来自专栏杨龙飞前端

<b>与<strong> <em>与<i>标签的区别

2316
来自专栏Google Dart

AngularDart Material Design 切换 顶

用户可以点击切换按钮来更改状态。 通常,当您有一个ON / OFF选项时,您可以使用切换按钮。 如果您要一组中的多个选项中选中/取消选中,请改用material...

752
来自专栏二次元

HTML5画布-小球碰撞

       html5是万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次重大修改。

1360
来自专栏增长技术

ProgressBar

自定义view实现下载进度的展示 控件完全自定义,字体大小,圆环宽度,实心或者空心,圆环的宽度,圆环的颜色,进度字体的粗细,字体颜色等等都可以自定义

1403
来自专栏小白课代表

软件分享 | ZoomIt 4.5 演示辅助工具使用教程

ZoomIt是一款非常实用的投影演示辅助软件。它源自Sysinternals公司,后来此公司被微软收购,因此,有些网友也称ZoomIt为微软放大镜。ZoomIt...

1111
来自专栏我和未来有约会

Silverlight初级教程-动画

Silverlight初级教程 动画 在这一节里将要用到在“认识工作区”中提到的时间抽了。这里将和学习flash的过程一样做一个最简单的动画。 ...

18610
来自专栏施炯的IoT开发专栏

Windows Mobile上的HTML解析器

Matjaž Prtenjak提出这个移动设备上HTML解析器、并表现在HTML Label上的最初目的,就是为了能够在界面上实时地改变一些控件上的文字内容和...

2105

扫码关注云+社区