浏览器中CSS的盒模型

浏览器 盒 模型首先是CSS中画布的概念,根据CSS2规范,名词“画布”描述为“格式化的结构渲染所用的空间”—也就是浏览器绘制内容的地方。画布在空间的每个维度上都是无限的,但浏览器会基于视口的尺寸选择一个初始的宽度。根据http://www.w3.org/TR/CSS2/zindex.html,画布在嵌套时是透明的,否则会使用这个浏览器指定的颜色。

继续阅读 »

浏览器的绘制阶段

浏览器 绘制在浏览器的绘制阶段,会遍历渲染者树,并调用渲染者的“paint”方法在屏幕上显示内容。绘制需要用到UI基础组件。本章介绍有关UI的内容。象布局一样,绘制也可能是全局的—整棵树都被绘制–或者是增量的。在增量绘制过程中,某些渲染者发生了改动却没有影响整棵树。改变的渲染者在屏幕上重画它的客户区域。这会导致OS把它看成个“脏”区域,然后产生了“paint”事件。OS会聪明的完成它,把几个相连的区域一并处理。

继续阅读 »

浏览器的布局

浏览器 布局下来就是浏览器的布局过程。当渲染者被创建并且增加到树上时,它并没有位置和尺寸。计算这些值被称为布局或重排。HTML基于一个流式布局模式,意思是说大多数情况下计算位置会一遍通过。“流”中靠后的元素一般不会影响靠前的元素,所以布局可以沿文档从左到右,从上到下来处理。也有例外—例如,HTML的表格可能需要处理一遍以上。布局时的座标系统基于根框架。使用顶-左座标。

继续阅读 »

浏览器样式表的规则匹配和级联顺序

浏览器 样式 级联浏览器中CSS样式的匹配并非总是那么简单,某些情况下可能需要对规则加以处理以使匹配更容易。下面是几个样式规则的源码:一、 CSS规则,可能在外联样式表也可能在样式元素里面:p {color:blue} 二、 行内样式属性比如:<p style=“color:blue” /> 三、 HTML的可视化属性(这些属性会被映射到相应的样式规则):<p bgcolor=“blue” />。后两个很容易匹配到元素,因为元素拥有这些样式属性,HTML属性可以把元素作为键进行映射。

继续阅读 »

浏览器中使用规则树来计算样式

浏览器 样式 计算当计算某个元素的样式内容时,我们首先计算规则树里的一条路径或是使用一条已经存在的路径。接下来就开始应用路径中的规则来填充我们新的样式内容的结构。我们从路径的底部结点开始—优先级最高的(通常是最精确的选择器)并往上遍历树,直到结构填满。如果规则节点中没有找到结构的匹配,那么我们就能进行充份的优化—我们沿树而上直到发现一个节点完全匹配,然后指向它—这是最好的优化策略—整个结构都被共享。这能简化最终值的计算并能节约内存。

继续阅读 »

浏览器的样式计算

浏览器 样式建立渲染树时需要计算每个渲染对象的可视化属性。这是通过计算每个元素的样式属性来实现的。样式包含HTML中的各种来源的样式单,内联样式和可视化属性。后者被转换来匹配CSS样式属性。最基本的样式表是浏览器缺省样式表,这种样式表是页面设计者提供的。用户样式表—是由浏览器用户提供的(浏览器允许你定义你喜好的样式。例如在Firefox里,可以通过在”Firefox Profile”文件夹里放个样式文件来做到)。

继续阅读 »

浏览器中渲染树的构造

浏览器 渲染树当DOM树被构造的同时,浏览器构造了另外一棵树,渲染树。这是棵按其显示顺序排列的可视化元素构成的树。这是文档的可视化表现。这棵树的用途是允许以正确顺序绘制内容。Firefox把渲染树的元素称为“frame”。Webkit使用名称渲染者或渲染对象。一个“渲染者”知道如何布局并绘制它本身以及子元素。Webkit的RenderObject类,作为渲染者的基本类有以下定义:

继续阅读 »

浏览器处理脚本和样式表的顺序

浏览器 CSS javascript因特网的模式是同步的,开发者希望解析器在遇到一个<script>标签时立即解析和执行脚本。在脚本执行完之前文档的解析会停下来。如果脚本是外部文件那么资源必须首先从网络上下载过来—这也是同步完成的,解析会等到资源下载完毕之后。这是多年以来的规则,HTML4和HTML5规范里也是如此定义。开发者也可以把脚本标记为“延迟”的,这样它就不会阻塞文档解析并将会在解析完之后执行。HTML5增加了一个标记脚本为异步的选项,这样它能在另一个线程里解析和执行。

继续阅读 »

浏览器的CSS解析器

浏览器 CSS 解析CSS是一种表现设计语言,是网页设计中页面表现与内容分离的关键性工具之一。还记得开始时介绍过的解析的概念吗?不象HTML,CSS是一种上下文无关语法,可以被介绍里所写的某种类型解析器处理。实际上CSS规范里也定义了CSS词法和语法规则(http://www.w3.org/TR/CSS2/grammar.html)。我们看一些例子,下面词法的每个元素都用正则表达式描述:

继续阅读 »

浏览器的HTML解析器(二)

浏览器 HTML 解析在浏览器的HTML解析完成时,会执行一些动作。在这个阶段浏览器会把文档标记为可交互的,并且将会开始处理设定为“延迟”模式的脚本—它们应该在文档处理之后执行。文档状态将被设置为“完成”,“load”事件将会触发。你可以在HTML5规范里看到标记化和树构造的完整算法—http://www.w3.org/TR/html5/syntax.html#html-parser。然而这还不是全部,浏览器还需要处理HTML的容错问题。

继续阅读 »

第 2 页,共 43 页12345...102030...最旧 »