14
2013
06

浏览器工作原理 - 浏览器重绘(redraw)和重排(reflow)

一篇很老的文章,搜藏了很久,拿来记录到博客上。对前端工程师是一个很好忠告。


  在项目的交互或视觉评审中,前端同学常常会对一些交互效果质疑,提出这样做不好那样做不好。主要原因是这些效果通常会产生一系列的浏览器重绘(redraw)和重排(reflow),需要付出高昂的性能代价。那么,什么是浏览器的重绘和重排呢?二者何时发生以及如何权衡?如何在具体的开发过程中将重绘和重排引发的性能问题考虑进去?本文期待可以部分解释以上三个问题。

  浏览器从下载文档到显示页面的过程是个复杂的过程,这里包含了重绘和重排。各家浏览器引擎的工作原理略有差别,但也有一定规则。简单讲,通常在文档初次加载时,浏览器引擎会解析HTML文档来构建DOM树,之后根据DOM元素的几何属性构建一棵用于渲染的树。渲染树的每个节点都有大小和边距等属性,类似于盒子模型(由于隐藏元素不需要显示,渲染树中并不包含DOM树中隐藏的元素)。当渲染树构建完成后,浏览器就可以将元素放置到正确的位置了,再根据渲染树节点的样式属性绘制出页面。由于浏览器的流布局,对渲染树的计算通常只需要遍历一次就可以完成。但table及其内部元素除外,它可能需要多次计算才能确定好其在渲染树中节点的属性,通常要花3倍于同等元素的时间。这也是为什么我们要避免使用table做布局的一个原因。

10
2013
06

浏览器工作原理 - CSS2可视模型(CSS2 visual module)

画布The Canvas

  根据CSS2规范,术语canvas用来描述格式化的结构所渲染的空间——浏览器绘制内容的地方。画布对每个维度空间都是无限大的,但浏览器基于viewport的大小选择了一个初始宽度。

  根据http://www.w3.org/TR/CSS2/zindex.html  的定义,画布如果是包含在其他画布内则是透明的,否则浏览器会指定一个颜色。

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的词法及语法文法。

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

11
2013
04

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

HTML 解析器

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

HTML文法定义

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

非上下文无关文法

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

03
2013
04

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

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

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

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