空间管理您的位置: 51Testing软件测试网 » TestNest » 日志

浏览器渲染原理及可能出现的bug

上一篇 / 下一篇 2013-10-19 11:11:32 / 个人分类：web

查看( 896 ) / 评论( 0 ) / 评分( 0 / 0 )

Web测试中必不可少的天天打交道的一个应用就是浏览器，它是由哪些部分组成的呢？

· 用户接口 – 包括地址栏，前进后退，书签菜单等窗口上除了网页显示区域以外的部分。

· 浏览器引擎 – 查询与操作渲染引擎的接口。

· 渲染引擎 – 负责显示请求的内容。

· 网络 – 用于网络请求, 如HTTP，HTTPS请求。

· UI后端 – 绘制基础元件，如组合框与窗口。它提供平台无关的接口，内部使用操作系统的相应实现。

· JavaScript解释器 – 用于解析执行JavaScript代码。

· 数据存储 – 这是一个持久层。浏览器需要把所有数据存到硬盘上，如cookies，图片，css等。新的HTML规范 (HTML5) 规定了一个完整（虽然轻量级）的浏览器中的数据库：’web database’。

各种渲染引擎

Firefox, Safari两种浏览器构建于两种渲染引擎之上：Firefox使用Gecko —— Mozilla自家的渲染引擎；Safari 和 Chrome 都使用 Webkit，而Chrome曾放出重磅消息，将从开源的Webkit上分叉出自己的开源浏览器引擎Blink，Opera宣布跟随Google Chrome的脚步，将弃用自家的Presto引擎，支持Blink引擎，而IE使用的是Trident内核。众多国内主流浏览器使用的双引擎一般都是Webkit和Trident两种内核。

渲染原理

基本工作流为：

1. 解析HTML构建DOM树：

会解析三个东西：HTML/SVG/XHTML，CSS及javascript。解析CSS会产生CSS规则树，解析javascript主要是通过DOM API和CSSOM API来操作DOM Tree和CSS

2. Rule Tree渲染树构建：

解析完成后，浏览器引擎会通过DOM Tree 和 CSS Rule Tree 来构造 Rendering Tree。不过，Rendering Tree 渲染树并不等同于DOM树，因为一些像Header或display:none的东西就没必要放在渲染树中了。CSS 的 Rule Tree主要是为了完成匹配并把CSS Rule附加上Rendering Tree上的每个Element。也就是DOM结点。

3. 渲染树布局：

计算每个element确切的显示位置，也就是layout和reflow的过程

4. 绘制渲染树：

通过调用操作系统Native GUI的API绘制将每一个节点绘制出来

看起来步骤繁琐，但是为了更好的用户体验，浏览器会尽可能快的把内容显示出来，并不会等到所有的HTML解析完后才创建并布局渲染树，它会在处理后续内容的同时把处理过的局部内容先展示出来。

一个过程

1. 用户第一次访问网址，浏览器向服务器发出请求，服务器返回html文件；2. 浏览器开始载入html代码，发现<head>标签内有一个<link>标签引用外部CSS或JS文件；3. 浏览器又发出CSS及JS文件的请求，服务器返回这个CSS，JS文件；4. 浏览器继续载入html中<body>部分的代码，并且CSS，JS文件已经拿到手了，可以开始渲染页面了；5. 浏览器在代码中发现一个<img>标签引用了一张图片，向服务器发出请求。此时浏览器不会等到图片下载完，而是继续渲染后面的代码；6. 服务器返回图片文件，由于图片占用了一定面积，影响了页面布局，因此浏览器需要回过头来重新渲染这部分代码；7. 浏览器发现了一个包含一行Javascript代码的<script>标签，赶快执行它；8. Javascript脚本执行了这条语句，它命令浏览器隐藏掉代码中的某个<div> （style.display=”none”）。杯具啊，突然就少了这么一个元素，浏览器不得不重新渲染这部分代码；9. 终于等到了</html>的到来，浏览器泪流满面……

Reflow及Repaint

页面在加载的过程中，需要对文档结构进行解析，同时需要结合各种各样的样式来计算这个页面长什么样子，最后再经过浏览器的渲染页面就出现了。而整个过程充满了repaint和reflow。对于DOM结构中的各个元素都有自己的盒子（模型），这些都需要浏览器根据各种样式（浏览器的、开发人员定义的等）来计算并根据计算结果将元素放到它该出现的位置，这个过程称之为reflow；当各种盒子的位置、大小以及其他属性，例如颜色、字体大小等都确定下来后，浏览器于是便把这些元素都按照各自的特性绘制了一遍，这个过程称之为repaint。

reflow 会从<html>开始递归往下，依次计算所有的结点几何尺寸和位置，在reflow过程中，可能会增加一些frame，比如一个文本字符串需被包装起来。

Reflow的成本比Repaint的成本高得多的多。DOM Tree里的每个结点都会有reflow方法，一个结点的reflow很有可能导致子结点，甚至父点以及同级结点的reflow。所以过多的reflow会导致CPU性能问题。

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

· 网页初始化增加、删除、修改DOM结点时

· 移动DOM位置或操作动画时

· 一些Javascript在操作DOM Tree时

· Resize窗口或滚屏时

· CSS的样式发生变化时

· 修改网页默认字体时

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

可能出现的bug

当然，如果只是介绍上面的内容，我也不用白费工夫了，因为网上一搜一大片，最主要的是想说说可能会遇到的bug：