浏览器渲染

浏览器渲染原理简介

2014年8月30日

0:40

看到这个标题大家一定会想到这篇神文《How Browsers Work》，这篇文章把浏览器的很多细节讲得很细，而且也被翻译成了中文。为什么我还想写一篇呢？因为两个原因，

  • 这篇文章太长了，阅读成本太大，不能一口气读完。
  • 花了大力气读了这篇文章后可以了解很多，但似乎对工作没什么帮助。

所以，我准备写下这篇文章来解决上述两个问题。希望你能在上班途中，或是坐马桶时就能读完，并能从中学会一些能用在工作上的东西。

浏览器工作大流程

废话少说，先来看个图：

从上面这个图中，我们可以看到那么几个事：

1）浏览器会解析三个东西：

  • 一个是HTML/SVG/XHTML，事实上，Webkit有三个C++的类对应这三类文档。解析这三种文件会产生一个DOM Tree。
  • CSS，解析CSS会产生CSS规则树。
  • Javascript，脚本，主要是通过DOM API和CSSOM API来操作DOM Tree和CSS Rule Tree.

2） 解析完成后，浏览器引擎会通过DOM Tree 和 CSS Rule Tree 来构造 Rendering Tree。注意：

  • Rendering Tree 渲染树并不等同于DOM树，因为一些像Header或display:none的东西就没必要放在渲染树中了。
  • CSS 的 Rule Tree主要是为了完成匹配并把CSS Rule附加上Rendering Tree上的每个Element。也就是DOM结点。也就是所谓的Frame。
  • 然后，计算每个Frame（也就是每个Element）的位置，这又叫layout和reflow过程。

3）最后通过调用操作系统Native GUI的API绘制。

DOM解析

HTML的DOM Tree解析如下：

Html代码

  1. <html>
  2. <html>
  3. <head>
  1. <title>Web page parsing</title>
  1. </head>
  2. <body>
  1. <div>
  2. <h1>Web page parsing</h1>
  3. <p>This is an example Web page.</p>
  4. </div>
  1. </body>
  2. </html>

上面这段HTML会解析成这样：

下面是另一个有SVG标签的情况。

CSS解析

CSS的解析大概是下面这个样子（下面主要说的是Gecko也就是Firefox的玩法），假设我们有下面的HTML文档：

Html代码

  1. <doc>
  2. <title>A few quotes</title>
  3. <para>
  1. Franklin said that <quote>"A penny saved is a penny earned."</quote>
  1. </para>
  2. <para>
  1. FDR said <quote>"We have nothing to fear but <span>fear itself.</span>"</quote>
  1. </para>
  2. </doc>

于是DOM Tree是这个样子：

然后我们的CSS文档是这样的：

Css代码

  1. /* rule 1 */ doc { display: block; text-indent: 1em; }
  2. /* rule 2 */ title { display: block; font-size: 3em; }
  3. /* rule 3 */ para { display: block; }
  4. /* rule 4 */ [class="emph"] { font-style: italic; }

于是我们的CSS Rule Tree会是这个样子：

注意，图中的第4条规则出现了两次，一次是独立的，一次是在规则3的子结点。所以，我们可以知道，建立CSS Rule Tree是需要比照着DOM Tree来的。CSS匹配DOM Tree主要是从右到左解析CSS的Selector，好多人以为这个事会比较快，其实并不一定。关键还看我们的CSS的Selector怎么写了。

注意：CSS匹配HTML元素是一个相当复杂和有性能问题的事情。所以，你就会在N多地方看到很多人都告诉你，DOM树要小，CSS尽量用id和class，千万不要过渡层叠下去，……

通过这两个树，我们可以得到一个叫Style Context Tree，也就是下面这样（把CSS Rule结点Attach到DOM Tree上）：

所以，Firefox基本上来说是通过CSS 解析 生成 CSS Rule Tree，然后，通过比对DOM生成Style Context Tree，然后Firefox通过把Style Context Tree和其Render Tree（Frame Tree）关联上，就完成了。注意：Render Tree会把一些不可见的结点去除掉。而Firefox中所谓的Frame就是一个DOM结点，不要被其名字所迷惑了。

注：Webkit不像Firefox要用两个树来干这个，Webkit也有Style对象，它直接把这个Style对象存在了相应的DOM结点上了。

渲染

渲染的流程基本上如下（黄色的四个步骤）：

  • 计算CSS样式
  • 构建Render Tree
  • Layout – 定位坐标和大小，是否换行，各种position, overflow, z-index属性 ……
  • 正式开画

注意：上图流程中有很多连接线，这表示了Javascript动态修改了DOM属性或是CSS属会导致重新Layout，有些改变不会，就是那些指到天上的箭头，比如，修改后的CSS rule没有被匹配到，等。

这里重要要说两个概念，一个是Reflow，另一个是Repaint。这两个不是一回事。

  • Repaint——屏幕的一部分要重画，比如某个CSS的背景色变了。但是元素的几何尺寸没有变。
  • Reflow——意味着元件的几何尺寸变了，我们需要重新验证并计算Render Tree。是Render Tree的一部分或全部发生了变化。这就是Reflow，或是Layout。（HTML使用的是flow based layout，也就是流式布局，所以，如果某元件的几何尺寸发生了变化，需要重新布局，也就叫reflow）reflow 会从<html>这个root frame开始递归往下，依次计算所有的结点几何尺寸和位置，在reflow过程中，可能会增加一些frame，比如一个文本字符串必需被包装起来。

附上一个打开Wikipedia时的Layout/reflow的视频（注：HTML在初始化的时候也会做一次reflow，叫intial reflow），你可以感受一下。视频地址：http://v.youku.com/v_show/id_XMzI5MDg0OTA0.html

Reflow的成本比Repaint的成本高得多的多。DOM Tree里的每个结点都会有reflow方法，一个结点的reflow很有可能导致子结点，甚至父点以及同级结点的reflow。在一些高性能的电脑上也许还没什么，但是如果reflow发生在手机上，那么这个过程是非常痛苦和耗电的。

所以，下面这些动作有很大可能会是成本比较高的。

  • 当你增加、删除、修改DOM结点时，会导致Reflow或Repaint
  • 当你移动DOM的位置，或是搞个动画的时候。
  • 当你修改CSS样式的时候。
  • 当你Resize窗口的时候（移动端没有这个问题），或是滚动的时候。
  • 当你修改网页的默认字体时。

注：display:none会触发reflow，而visibility:hidden只会触发repaint，因为没有发现位置变化。

多说两句关于滚屏的事，通常来说，如果在滚屏的时候，我们的页面上的所有的像素都会跟着滚动，那么性能上没什么问题，因为我们的显卡对于这种把全屏像素往上往下移的算法是很快。但是如果你有一个fixed的背景图，或是有些Element不跟着滚动，有些Elment是动画，那么这个滚动的动作对于浏览器来说会是相当相当痛苦的一个过程。你可以看到很多这样的网页在滚动的时候性能有多差。因为滚屏也有可能会造成reflow。

基本上来说，reflow有如下的几个原因：

  • Initial。网页初始化的时候。
  • Incremental。一些Javascript在操作DOM Tree时。
  • Resize。其些元件的尺寸变了。
  • StyleChange。如果CSS的属性发生变化了。
  • Dirty。几个Incremental的reflow发生在同一个frame的子树上。

好了，我们来看一个示例吧：

Javascript代码

  1. var bstyle = document.body.style; // cache
  1. bstyle.padding = "20px"; // reflow, repaint
  2. bstyle.border = "10px solid red"; //  再一次的 reflow 和 repaint
  3. bstyle.color = "blue"; // repaint
  4. bstyle.backgroundColor = "#fad"; // repaint
  5. bstyle.fontSize = "2em"; // reflow, repaint
  1. // new DOM element - reflow, repaint
  1. document.body.appendChild(document.createTextNode(‘dude!‘));

当然，我们的浏览器是聪明的，它不会像上面那样，你每改一次样式，它就reflow或repaint一次。一般来说，浏览器会把这样的操作积攒一批，然后做一次reflow，这又叫异步reflow或增量异步reflow。但是有些情况浏览器是不会这么做的，比如：resize窗口，改变了页面默认的字体，等。对于这些操作，浏览器会马上进行reflow。

但是有些时候，我们的脚本会阻止浏览器这么干，比如：如果我们请求下面的一些DOM值：

  • offsetTop, offsetLeft, offsetWidth, offsetHeight
  • scrollTop/Left/Width/Height
  • clientTop/Left/Width/Height
  • IE中的 getComputedStyle(), 或 currentStyle

因为，如果我们的程序需要这些值，那么浏览器需要返回最新的值，而这样一样会flush出去一些样式的改变，从而造成频繁的reflow/repaint。

减少reflow/repaint

下面是一些Best Practices：

1）不要一条一条地修改DOM的样式。与其这样，还不如预先定义好css的class，然后修改DOM的className。

Javascript代码

  1. // bad
  1. var left = 10,
  1. top = 10;
  2. el.style.left = left + "px";
  3. el.style.top  = top  + "px";
  1. // Good
  1. el.className += " theclassname";
  1. // Good
  1. el.style.cssText += "; left: " + left + "px; top: " + top + "px;";

2）把DOM离线后修改。如：

  • 使用documentFragment 对象在内存里操作DOM
  • 先把DOM给display:none(有一次repaint)，然后你想怎么改就怎么改。比如修改100次，然后再把他显示出来。
  • clone一个DOM结点到内存里，然后想怎么改就怎么改，改完后，和在线的那个的交换一下。

3）不要把DOM结点的属性值放在一个循环里当成循环里的变量。不然这会导致大量地读写这个结点的属性。

4）尽可能的修改层级比较低的DOM。当然，改变层级比较底的DOM有可能会造成大面积的reflow，但是也可能影响范围很小。

5）为动画的HTML元件使用fixed或absoult的position，那么修改他们的CSS是不会reflow的。

6）千万不要使用table布局。因为可能很小的一个小改动会造成整个table的重新布局。

引用

In this manner, the user agent can begin to lay out the table once the entire first row has been received. Cells in subsequent rows do not affect column widths. Any cell that has content that overflows uses the ‘overflow’ property to determine whether to clip the overflow content.

Fixed layout, CSS 2.1 Specification

This algorithm may be inefficient since it requires the user agent to have access to all the content in the table before determining the final layout and may demand more than one pass.

Automatic layout, CSS 2.1 Specification

几个工具和几篇文章

有时候，你会也许会发现在IE下，你不知道你修改了什么东西，结果CPU一下子就上去了到100%，然后过了好几秒钟repaint/reflow才完成，这种事情以IE的年代时经常发生。所以，我们需要一些工具帮我们看看我们的代码里有没有什么不合适的东西。

  • Chrome下，Google的SpeedTracer是个非常强悍的工作让你看看你的浏览渲染的成本有多大。其实Safari和Chrome都可以使用开发者工具里的一个Timeline的东东。
  • Firefox下这个基于Firebug的叫Firebug Paint Events的插件也不错。
  • IE下你可以用一个叫dynaTrace的IE扩展。

最后，别忘了下面这几篇提高浏览器性能的文章：

参考

时间： 2024-10-04 18:07:20

浏览器渲染的相关文章

浏览器渲染阻塞与优化-详解推迟加载、异步加载。

我认为一个前端工程师是否优秀,很大程度上取决于对前端性能上优化的功力.所以性能优化对前端真的很重要!!! 本文介绍了什么是阻塞.为什么会阻塞?阻塞优化常用的5种方式以及他们的注意事项. 浏览器渲染阻塞与优化      什么是阻塞?在页面中我们通常会引用外部文件,而浏览器在解析HTML页面是从上到下依次解析.渲染,如果<head>中引用了一个a.js文件,而这个文件很大或者有问题,需要2秒加载,那么浏览器会停止渲染页面(此时是白屏显示,就是页面啥都没有),2秒后加载完成才会继续渲染,这个就是阻塞

浏览器渲染引擎介绍（备忘）

Trident.Gecko.Presto.WebKit --是4种常见的浏览器内核(1)Trident 是微软的Windows搭载的网页浏览器--Internet Explorer浏览器使用的内核(俗称IE内核)(2)Gecko Gecko是开放源代码.以C++编写的网页排版引擎,目前被Mozilla家族网页浏览器以及Netscape 6以后版本浏览器所使用. 也就是现在的Firefox(3)Presto Presto是一个由Opera Software开发的浏览器排版引擎,目前Opera 7.

下拉框&quot;--请选择--&quot; 浏览器渲染不同造成页面初始化不一致

问题: 页面下拉框初始化时,展示"--请选择--" : 在Google.Firefox浏览器渲染正常,但在IE(低版本)浏览器下不展示. 修复: (1) 修改对应的*.js文件: 如: please_select: "--请选择--", //产品运输方式判断 var flag = false; $("#productDictionary option").each(function() { if($(this).val()===data.data

[转]浏览器渲染机制——一定要放在body底部的js引用

转自:http://blog.csdn.net/u012251421/article/details/50536265 说明: 本文提到的浏览器均是指Chrome. “script标签“指的都是普通的不带其他属性的外联javascript. web性能优化的手段并不是非黑即白的,有些手段过头了反而降低性能,所以在讨论条件和结论的时候,虽然很多条件本身会带来其他细微的负面或正面影响,为了不使论述失去重点,不会扩展太开. 一.从一个面试题说起 面试前端的时候我喜欢问一些看上去是常识的问题.比如:为什

浏览器渲染的工作流程和图片加载与渲染规则

1 浏览器渲染的工作流程 浏览器的工作原理.以Webkit引擎的工作流程为例,浏览器加载一个HTML页面后进行如下操作 解析HTML[遇到<img>标签加载图片] -> 构建DOM树 加载样式 -> 解析样式[遇到背景图片链接不加载] -> 构建样式规则树 加载javascript -> 执行javascript代码 把DOM树和样式规则树匹配构建渲染树[加载渲染树上的背景图片] 计算元素位置进行布局 绘制[开始渲染图片] 2 图片加载与渲染规则  页面中不是所有的&l

浏览器渲染页面原理(看到一个网站写的不错 收录的,一起学习)

当了解web访问原理后,与前端工程师或页面重构师工作更为关系密切的应该是浏览器,WEB 页面运行在各种各样的浏览器当中,浏览器载入.渲染页面的速度直接影响着用户体验, 特别是浏览器渲染页面的原理,页面渲染就是浏览器将 HTML 代码根据 CSS 定义的规则显示在浏览器窗口中的这个过程,理解了原理就更会容易理解前端优化的一些准则. 主要过程:(主要参考文章:http://www.webskys.com/artilc/228.html) 1. 用户输入网址(假设是个 HTML 页面,第一次访问,无缓

浏览器渲染页面原理

当了解web访问原理后,与前端工程师或页面重构师工作更为关系密切的应该是浏览器,WEB 页面运行在各种各样的浏览器当中,浏览器载入.渲染页面的速度直接影响着用户体验, 特别是浏览器渲染页面的原理,页面渲染就是浏览器将 HTML 代码根据 CSS 定义的规则显示在浏览器窗口中的这个过程,理解了原理就更会容易理解前端优化的一些准则. 主要过程:(主要参考文章:http://www.webskys.com/artilc/228.html) 1. 用户输入网址(假设是个 HTML 页面,第一次访问,无缓

浏览器渲染原理--reflow

Web页面运行在各种各样的浏览器当中,浏览器载入.渲染页面的速度直接影响着用户体验简单地说,页面渲染就是浏览器将html代码根据CSS定义的规则显示在浏览器窗口中的这个过程.先来大致了解一下浏览器都是怎么干活的:1. 用户输入网址(假设是个html页面,并且是第一次访问),浏览器向服务器发出请求,服务器返回html文件:2. 浏览器开始载入html代码,发现<head>标签内有一个<link>标签引用外部CSS文件:3. 浏览器又发出CSS文件的请求,服务器返回这个CSS文件:4.

读书笔记（二）—— 浅析浏览器渲染过程和html中的文件加载

在构建页面时,我们会在html中载入一个或多个css和js文件.或许大家都已经习惯了"最佳实践"中,css文件应该放在<head>标签中引入,而js文件则是放在</body>关闭标签前引入的原则,但其中的原因,很多人可能像我之前一样,不是了解得很清楚.在查阅了书籍和资料后,稍微了解的其中的原由. 让我们先看一看浏览器中的渲染流程: 主流程: 详细流程: 当浏览器获得一个html文件时,会"自上而下"加载,并在加载过程中进行解析渲染.