浏览器渲染过程

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 条评论
登录 后参与评论

相关文章

来自专栏杨龙飞前端

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

28160
来自专栏知道一点点

【原创】bootstrap框架的学习 第七课 -[bootstrap表格]

<!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 基本的表格</title> <link hr...

12420
来自专栏编程

前端基础-CSS-2

上篇我们介绍了css的的由来和编写语法,并展示了一个基本的例子,这篇继续向大家展示一些例子来说明如何使用css来美化我们的页面展示,css包含非常多的样式设置,...

20660
来自专栏vue学习

13、优化轮播图组件与vue深度处理器

(1)这里我们要用到vue的深度作用选择器,关于深度作用选择其详情看一看官网介绍:https://vue-loader-v14.vuejs.org/zh-cn/...

21220
来自专栏WindCoder

photoshop技巧之 在排版文字时常会用到的快捷键技巧

这两天兴致来了,又开始了PS学习之旅,看到教程中的思考,不由去网上搜索了一番,暂且记录在这里。

14800
来自专栏增长技术

ProgressBar

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

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

Silverlight初级教程-动画

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

203100
来自专栏GreenLeaves

WebStorm 快键键

ctrl+/ 单行注释 ctrl+shift+/ 块注释 ctrl+shift+ +/- 展开/折叠 ctrl+alt+L 格式化代码 ctrl+shift+ ...

20270
来自专栏非著名程序员

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

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

210100
来自专栏二次元

HTML5画布-小球碰撞

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

18200

扫码关注云+社区

领取腾讯云代金券