10
2013
06

浏览器工作原理 - 动态变化和渲染引擎的线程

动态变化

  浏览器总是试着以最小的动作响应一个变化,所以一个元素颜色的变化将只导致该元素的重绘,元素位置的变化将大致元素的布局和重绘,添加一个Dom节点,也会大致这个元素的布局和重绘。一些主要的变化,比如增加html元素的字号,将会导致缓存失效,从而引起整数的布局和重绘。


渲染引擎的线程

  渲染引擎是单线程的,除了网络操作以外,几乎所有的事情都在单一的线程中处理,在Firefox和Safari中,这是浏览器的主线程,Chrome中这是tab的主线程。

10
2013
06

浏览器工作原理 - 绘制(Painting)

  绘制阶段,遍历渲染树并调用渲染对象的paint方法将它们的内容显示在屏幕上,绘制使用UI基础组件,这在UI的章节有更多的介绍。

  

全局和增量

  和布局一样,绘制也可以是全局的——绘制完整的树——或增量的。在增量的绘制过程中,一些渲染对象以不影响整棵树的方式改变,改变的渲染对象使其在屏幕上的矩形区域失效,这将导致操作系统将其看作dirty区域,并产生一个paint事件,操作系统很巧妙的处理这个过程,并将多个区域合并为一个。Chrome中,这个过程更复杂些,因为渲染对象在不同的进程中,而不是在主进程中。Chrome在一定程度上模拟操作系统的行为,表现为监听事件并派发消息给渲染根,在树中查找到相关的渲染对象,重绘这个对象(往往还包括它的children)。

10
2013
06

浏览器工作原理 - 布局(layout或reflow)

       当渲染对象被创建并添加到树中,它们并没有位置和大小,计算这些值的过程称为layout或reflow

  Html使用基于流的布局模型,意味着大部分时间,可以以单一的途径进行几何计算。流中靠后的元素并不会影响前面元素的几何特性,所以布局可以在文档中从右向左、自上而下的进行。也存在一些例外,比如html tables。

  坐标系统相对于根frame,使用top和left坐标。

07
2013
06

浏览器工作原理 - 如何构建渲染树

当Dom树构建完成时,浏览器开始构建另一棵树——渲染树。渲染树由元素显示序列中的可见元素组成,它是文档的可视化表示,构建这棵树是为了以正确的顺序绘制文档内容。

  Firefox将渲染树中的元素称为"frames",WebKit则用"renderer"或渲染对象来描述这些元素。

  一个渲染对象知道怎么布局及绘制自己及它的children。

  RenderObject是Webkit的渲染对象基类,它的定义如下:

07
2013
06

浏览器工作原理 - 如何处理脚本及样式表的顺序

之前讲了浏览器的HTML解析CSS解析。本文要讲的是关于浏览器如何处理脚本和样式表的顺序。

07
2013
06

浏览器工作原理 - CSS解析器

浏览器工作原理,我们很好奇CSS如何解析,还记得简介中提到的解析(浏览器解析原理的概念吗,不同于html,css属于上下文无关文法,可以用前面所描述的解析器来解析。Css规范定义了css的词法及语法文法。

  看一些例子:下面每个符号都由正则表达式定义了词法文法(词汇表):

06
2013
06

Javascript单元测试框架Qunit和Jasmine的比较

Javascript的单元测试,其实之前用的不多,TDD培训之后一直想用在正式项目中,但却被一次次失败和太麻烦放弃。虽然麻烦但单元测试的重要性是公认的,好的单元测试能保证产品的质量。如何写Javascript的单元测试,后面面再写关于这块的文章。今天讨论Javascript单元测试的框架。

工欲行其事必先利其器,好的单元测试框架是TDD成功的一半。Javascript优秀的测试框架很多, 包括Jasmine,Qunit,JsTestDriver,JSUnit,Mocha等,当然你也可以写自己的单元测试框架,本文主角是Jasmine和Qunit。

11
2013
04

浏览器工作原理 - 浏览器HTML解析器

HTML 解析器

HTML解析器的工作就是解析HTML标记到解析树。

HTML文法定义

现在的HTML文法由W3C组织定义,当前版本HTML4,HTML5已经在各个浏览器中被使用,但正式出台需要到2012年。

非上下文无关文法

正如在解析简介中提到的,上下文无关文法的语法可以用类似BNF的格式来定义。

03
2013
04

浏览器工作原理 - 浏览器解析原理

在浏览器的工作原理中,由于解析是渲染引擎中一个很重要的过程,我们会讲的略深入一些。让我们从一个小的解析介绍开始。

解析一个文档意味着把它翻译成有意义的结构以供代码使用。解析的结果通常是一个节点构成的树,它代表这个文档的结构,我们称它为解析树或句法树。

示例——解析表达式“2 + 3 - 1”可以返回下面的树:

01
2013
04

浏览器工作原理 - 浏览器渲染引擎

浏览器的层结构看,我们看到浏览器渲染引擎是整个层级最直接我们web开发人员研究的一块。渲染,意思就是将请求的内容显示到页面上来。