浏览器渲染过程

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

相关文章

来自专栏逸鹏说道

03.Web大前端时代之:HTML5+CSS3入门系列~H5功能元素

Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 2.功能元素 1...

2718
来自专栏mySoul

多媒体编程

由于要实现图片翻转,需要较高的响应度,此时需要进行缓存,new一个Image对象创建一个HTMLImageElement对象实例

891
来自专栏十月梦想

less快速入门

我们都知道写 CSS 代码是有些枯燥无味的,尤其是面对那些成千上万行 CSS 代码的项目。你始终在相同的地方使用相同的规则并且在你的编译器中搜索和替换每次颜色的...

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

《101 Windows Phone 7 Apps》读书笔记-TODO LIST

课程内容 ØPivot控件 ØContext Menu ØData Contract Attributes     TODO List使得我们能够快速、简单并...

1616
来自专栏Android开发指南

Android开发艺术探究Note

2687
来自专栏vue学习

小程序 — 实现左滑删除效果(列表)③

首先我们初始化一个list列表并为其添加数据,这个列表有两个值分别为标题文字title和初始的偏移量x:

813
来自专栏求索之路

Android大厂面试题锦集(BAT TMD JD 小米)

上次写这篇文章的时候也差不多是一年前了,这一年我兜兜转转从android到java又回到android,校招面了很多大厂,阿里、京东、小米、头条、知乎、腾讯、...

3418
来自专栏天天

css推荐写法

用"-"隔开比使用驼峰是更加清晰。产品线-产品-模块-子模块,命名的时候也可以使用这种方式

792
来自专栏行者常至

(20)Struts2_主题

431
来自专栏林德熙的博客

C# 从零开始写 SharpDx 应用 初始化dx修改颜色

本文来告诉大家如何在上一篇博客创建的窗口里面使用 Sharpdx 初始化,然后设置窗口颜色。

701

扫码关注云+社区