2014年02月_青青木屋

10月 07月 05月 04月 03月 02月 01月

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

在DOM树构建的同时，浏览器会构建渲染树（render tree）。渲染树的节点（渲染器），在Gecko中称为frame，而在webkit中称为renderer。渲染器是在文档解析和创建DOM节点后创建的，会计算DOM节点的样式信息。在webkit中，renderer是由DOM节点调用attach()方法创建的。attach()方法计算了DOM节点的样式信息。Attach()是自

2014-02-24 14:38:18 16565

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

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

2014-02-20 14:04:01 3156

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

一个级联样式表（CSS）是由一系列的规则组成的，每一条规则是由一个选择器和若干条声明组成的。每条声明是一个键值对，由属性和值组成。 CSS是上下文无关的语法，可以使用自上而下解析器或自下而上解析器。 Webkit中的CSS解析解析器会将CSS文件解析成StyleSheet对象，且每

2014-02-20 09:43:10 1640 1

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

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

2014-02-13 15:48:49 10619

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

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

2014-02-13 11:38:08 1998

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

渲染引擎一开始会从网络层获取请求文档的内容。下图是文档内容获取之后，渲染引擎的基本流程：1）渲染引擎把HTML文档解析成DOM树，把标签转换成DOM节点。DOM树被叫做内容树。2）在解析HTML文档的同时，渲染引擎会把文档内的样式和外部CSS文件解析成CSS规则树。3）内容数和CSS规则树结合之后，创建了渲染树。渲染树包含多个

2014-02-13 11:20:24 1138

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

【注】本文是在阅读了部分资料之后，整理出来的。资料会在本文最后标明。想要知道网页是怎么渲染出来的，就要先知道浏览器的结构是什么样子的，每个组成部分都有什么作用，干了哪些事情，为什么这样做。浏览器结构如下图：用户界面(User Interface)：除了显示请求页面用的浏览器主窗口外，其他部分都属于用户界面，包括地址栏、前进/后退按钮、书签菜单等。浏览器引

2014-02-11 17:00:27 2070

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

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

2014-02-07 14:36:32 8118 1