青青木屋

因为有一个梦而执着

【浏览器渲染原理】渲染树构建之渲染树和DOM树的关系

在DOM树构建的同时,浏览器会构建渲染树(render tree)。渲染树的节点(渲染器),在Gecko中称为frame,而在webkit中称为renderer。渲染器是在文档解析和创建DOM节点后创建的,会计算DOM节点的样式信息。        在webkit中,renderer是由DOM节点...

2014-02-24 14:38:18

阅读数 11887

评论数 0

【浏览器渲染原理】解析和DOM树构建之处理脚本和样式表的顺序

1样式表 浏览器在加载网页的过程中,先下载HTML并开始解析。如果发现外部CSS资源链接,就发送下载请求。浏览器在下载CSS资源的同时,解析HTML文件。 在应用样式的时候,不会更改DOM树,因此解析样式表的时候也不会停止文档解析。 2 脚本 解析器遇到标记时,立即解析并执行脚...

2014-02-20 14:04:01

阅读数 2596

评论数 0

【浏览器渲染原理】解析和DOM树构建之CSS解析

一个级联样式表(CSS)是由一系列的规则组成的,每一条规则是由一个选择器和若干条声明组成的。每条声明是一个键值对,由属性和值组成。                      CSS是上下文无关的语法,可以使用自上而下解析器或自下而上解析器。             Webk...

2014-02-20 09:43:10

阅读数 1077

评论数 0

【浏览器渲染原理】解析和DOM树构建之HTML解析器

HTML解析器的任务是将HTML标记解析成解析树。 HTML的词汇和语法在W3C规范中进行了定义。 HTML的定义采用了DTD(DocumentType Definition,文档类型定义)。 解析树是由DOM(Document Object Model)元素和属性节点构成的树结构,根节点是Doc...

2014-02-13 15:48:49

阅读数 8187

评论数 0

【浏览器渲染原理】解析和DOM树构建之解析

解析一个文档:将其转换成具有一定意义的结构,编码可以理解和使用的东西。 解析的结果通常是表达文档结构的节点树,称为解析树或语法树。 例如,解析2+3-1表达式,会返回解析树: 解析是以文档所遵循的规则为基础的。规则包括词汇表和语法规则。解析的过程可以分成:词法分析(Lexical A...

2014-02-13 11:38:08

阅读数 1480

评论数 0

浏览器工作原理之基本渲染流程

渲染引擎一开始会从网络层获取请求文档的内容。下图是文档内容获取之后,渲染引擎的基本流程: 1)        渲染引擎把HTML文档解析成DOM树,把标签转换成DOM节点。DOM树被叫做内容树。 2)        在解析HTML文档的同时,渲染引擎会把文档内的样式和外部CSS文件解析成CS...

2014-02-13 11:20:24

阅读数 1038

评论数 0

浏览器工作原理之浏览器结构

【注】本文是在阅读了部分资料之后,整理出来的。资料会在本文最后标明。 想要知道网页是怎么渲染出来的,就要先知道浏览器的结构是什么样子的,每个组成部分都有什么作用,干了哪些事情,为什么这样做。 浏览器结构如下图: 用户界面(User Interface):除了显示请求页面用的浏览器主窗...

2014-02-11 17:00:27

阅读数 1521

评论数 0

IE7-position:relative层在动态渲染时的偏移问题

一、问题重现 为了说清楚这个问题,借用一下【资料1】的例子。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DT...

2014-02-07 14:36:32

阅读数 7334

评论数 1

提示
确定要删除当前文章?
取消 删除
关闭
关闭