浏览器的渲染原理

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

　　1）这篇文章太长了，阅读成本太大，不能一口气读完。

　　2）花了大力气读了这篇文章后可以了解很多，但似乎对工作没什么帮助。

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

　　浏览器工作大流程

　　废话少说，先来看个图：

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

　　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>
<head><title>Web page parsing</title>
</head>
<body><div><h1>Web page parsing</h1><p>This is an example Web page.</p></div>
</body>
</html>

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

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

　　CSS 解析

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

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

　　于是 DOM Tree 是这个样子：

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

/* rule 1 */ doc { display: block; text-indent: 1em; }
/* rule 2 */ title { display: block; font-size: 3em; }
/* rule 3 */ para { display: block; }
/* rule 4 */ [] { 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 结点上了。

　　渲染

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

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

　　注意：上图流程中有很多连接线，这表示了 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），你可以感受一下：

 

　　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 的子树上。

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

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

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

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

  1. offsetTop, offsetLeft, offsetWidth, offsetHeight
  2. scrollTop/Left/Width/Height
  3. clientTop/Left/Width/Height
  4. IE 中的 getComputedStyle ()， 或 currentStyle

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

　　减少 reflow/repaint

　　下面是一些 Best Practices：

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

// bad
var left = 10,
top = 10;
el.style.left = left + "px";
el.style.top  = top  + "px";// Good
el.className += " theclassname";
// Good
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 扩展。

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

  • Google – Web Performance Best Practices
  • Yahoo – Best Practices for Speeding Up Your Web Site
  • Steve Souders – 14 Rules for Faster-Loading Web Sites

　　参考

  • David Baron 的演讲：Fast CSS: How Browsers Lay Out Web Pages：slideshow, all slides, audio (MP3), Session page, Lanyrd page
  • How Browsers Work: http://taligarsiel.com/Projects/howbrowserswork1.htm
  • Mozilla 的 Style System Overview：https://developer.mozilla.org/en-US/docs/Style_System_Overview
  • Mozilla 的 Note of reflow： http://www-archive.mozilla.org/newlayout/doc/reflow.html
  • Rendering: repaint, reflow/relayout, restyle：http://www.phpied.com/rendering-repaint-reflowrelayout-restyle/
  • Effective Rendering CSS：http://css-tricks.com/efficiently-rendering-css/
  • Webkit Rendering 文档：http://trac.webkit.org/wiki/WebCoreRendering

转载于:https://www.cnblogs.com/chenqiushi/p/3987850.html

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/264373.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

AO 直接调用GeoProcessing 工具

AO 直接调用GeoProcessing 工具

Geoprocessing是ArcGIS的一个基础组成部分。无论你是一个新手抑或老资格的专家&#xff0c;geoprocessing都是你使用ArcGIS完成每天工作的一部分。它提供了数据分析、数据管理和数据转换等对于所用GIS用户都必须的工具&#xff0c;当然也包括ArcObjects开发者。GIS程序通常需要…
阅读更多...
Linux环境变量PSI指什么,PSI 文件扩展名： 它是什么以及如何打开它？

Linux环境变量PSI指什么,PSI 文件扩展名： 它是什么以及如何打开它？

了解 PSI 问题常见的 PSI 打开问题缺少 PrimalScript双击你的 PSI 文件会提示消息 “%%os%% 无法打开 PSI 文件”。 通常&#xff0c;%%os%% 中会出现这种情况&#xff0c;因为 PrimalScript 未安装在你的电脑上。 由于您的操作系统不知道如何处理此文件&#xff0c;因此无法通…
阅读更多...
linux 修改文件时间

linux 修改文件时间

1、ls -l *.sh 2、touch -d "10/13/2013" *.sh 【我想把所以的.sh文件修改到三个月前&#xff08;2013年10月13&#xff09;的时间。】3、ls -l *.sh 参考文章 http://blog.itpub.net/29283412/viewspace-1070106/ 另外也可以单独修改时间或者月份&#xff0c;如下以…
阅读更多...
datetime模块日期转换和列表sorted排序

datetime模块日期转换和列表sorted排序

import datetime dt 2019010103 # 日期 2019年1月1日3时 dts (datetime.datetime.strptime(dt, %Y%m%d%H) datetime.timedelta(days-1)).strftime(%Y%m%d%H) # 将dt向前或向后调整&#xff08;day表示天&#xff0c;hours表示表示小时&#xff0c;负数往前正数往后&#xf…
阅读更多...
差距

差距

现在看明白了自己的距离&#xff0c;该从何处下手&#xff1f; 时间是怎么争取出来的&#xff1f;转载于:https://www.cnblogs.com/rosion/archive/2009/04/11/1433450.html
阅读更多...
linux 命令tf,Linux文件管理命令

linux 命令tf,Linux文件管理命令

本篇涉及命令&#xff1a;cat,tac,more,less,head,tail,file,stat,touch,which,whatis,whereis,ls,mkdir,rmdir,tree,cp,mv,rm文本文件查看类命令cat 查看文件内容(concatenate)cat命令用于查看一个或多个文本文件内容&#xff0c;可以将两个或两个以上的文件连接起来并显示&am…
阅读更多...
Python实现——二元线性回归(最小二乘法)

Python实现——二元线性回归(最小二乘法)

2019/3/30二元线性回归——矩阵公式法_又名&#xff1a;对于python科学库的糟心尝试_ 二元线性回归严格意义上其实不过是换汤不换药&#xff0c;我对公式进行推导&#xff0c;其实也就是跟以前一样的求偏导并使之为零&#xff0c;并且最终公式的严格推导我大概也只能说是将将理…
阅读更多...
CSharp设计模式读书笔记（18）：中介者模式(学习难度：★★★☆☆，使用频率：★★☆☆☆)...

CSharp设计模式读书笔记（18）：中介者模式(学习难度：★★★☆☆，使用频率：★★☆☆☆)...

中介者模式(Mediator Pattern)&#xff1a;用一个中介对象&#xff08;中介者&#xff09;来封装一系列的对象交互&#xff0c;中介者使各对象不需要显式地相互引用&#xff0c;从而使其耦合松散&#xff0c;而且可以独立地改变它们之间的交互&#xff0c;中介者模式又称为调停…
阅读更多...
AT命令解释

AT命令解释

一、 AT命令解释&#xff1a;1、常用操作1.1 AT命令解释&#xff1a;检测Module与串口是否连通&#xff0c;能否接收AT命令&#xff1b;命令格式&#xff1a;AT<CR>命令返回&#xff1a;OK (与串口通信正常)&#xff08;无返回&#xff0c;与串口通信未连通&#xff09;测…
阅读更多...
linux四种集群是什么,lvs四种集群特点及使用场景

linux四种集群是什么,lvs四种集群特点及使用场景

一、 前言当一组服务器在高速的局域网或广域网中相互连接&#xff0c;其前端部署了一个负责负载调度的调度器(Director)的服务器系统。调度器能将网络请求无缝调度到真实服务器上(Real server)&#xff0c;客户访问集群系统提供的网络服务就像访问一台高性能、高可用的服务器一…
阅读更多...
c#数据库訪问返回值类型为SqlDataReader时使用using时注意的问题

c#数据库訪问返回值类型为SqlDataReader时使用using时注意的问题

版权声明&#xff1a;本文为博主原创文章&#xff0c;未经博主同意不得转载。https://blog.csdn.net/u010512579/article/details/24011761 在封装通用 SQLSERVER 数据可訪问方法时&#xff0c;假设返回值类型为 SqlDataReader ,那么在创建连接字符串的时候。我们不能写成例如以…
阅读更多...
BroadcastReceiver应用详解（转）

BroadcastReceiver应用详解（转）

转自&#xff1a; http://blog.csdn.net/liuhe688/article/details/6955668 問渠那得清如許&#xff1f;為有源頭活水來。南宋.朱熹《觀書有感》 据说程序员是最爱学习的群体&#xff0c;IT男都知道&#xff0c;这个行业日新月异&#xff0c;必须不断地学习新知识&#xff0c;不…
阅读更多...
深入浅出JSON

深入浅出JSON

深入浅出JSON JSON定义 JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式&#xff0c;易于阅读和编写&#xff0c;同时也易于机器解析和生成。它基于ECMA262语言规范&#xff08;1999-12第三版&#xff09;中JavaScript编程语言的一个子集。 JSON采用与编程语言…
阅读更多...
就linux学习的一点感受,学习linux的体会

就linux学习的一点感受,学习linux的体会

学linux的驱动设计一&#xff1a;首先先装个虚拟机吧&#xff0c;我觉得这个比较好&#xff0c;有些人建议直接装在硬盘上(我想他们是觉得有点环境压力吧)&#xff0c;可我觉得对于没有linux基础的还是先装虚拟机比较好。二&#xff1a;记住一些常用的命令&#xff0c;这个是学…
阅读更多...
自动绑定数据源

自动绑定数据源

自动绑定数据源实现数据控件与原始数据的绑定是实现数据展示与编辑的基本前提。在常规的设计模式下实现数据绑定有两种方式&#xff1a;1&#xff09;第一种方式&#xff1a;在窗体上引用数据对象→逐个拖放控件→分别设置控件与字段的绑定关系。这无疑是个不厌其烦的重复过程&…
阅读更多...
Java工具类——通过配置XML验证Map

Java工具类——通过配置XML验证Map

Java工具类——通过配置XML验证Map 背景 在JavaWeb项目中&#xff0c;接收前端过来的参数时通常是使用我们的实体类进行接收的。但是呢&#xff0c;我们不能去决定已经搭建好的框架是怎么样的&#xff0c;在我接触的框架中有一种就是通过Map来接收前端过来的所有参数&#xff0…
阅读更多...
c语言用指针两个字母交换,c语言指针基础之用指针交换两个数（代码实例）

c语言用指针两个字母交换,c语言指针基础之用指针交换两个数（代码实例）

用指针交换两个数&#xff1a;void swap(int *p,int *q) {int temp;temp *p;*p *q;*q temp;}int main(){int a 3, *p,c 5, *q;p &a; //把变量a的地址赋值给指针p&#xff0c;即p指向aq &c;swap(p,q);printf("a %d,c %d\n", a, c);return 0;}注意&am…
阅读更多...
如何在 Windows Server 2003、Windows 2000 和 Windows XP 中备份恢复代理的加密文件系统 (EFS) 私钥...

如何在 Windows Server 2003、Windows 2000 和 Windows XP 中备份恢复代理的加密文件系统 (EFS) 私钥...

本 文介绍了如何在运行 Microsoft Windows Server 2003、Microsoft Windows 2000 或 Microsoft Windows XP 的计算机上备份恢复代理加密文件系统 (EFS) 私钥。当位于本地计算机上的 EFS 私钥副本丢失时&#xff0c;请使用恢复代理的私钥恢复数据。本文包含有关如何使用证书导出…
阅读更多...
你可能从未听过的 Linux 发行版

你可能从未听过的 Linux 发行版

Hanthana Linux 官方主页&#xff1a;http://www.hanthana.org Hanthana Linux 基于 Fedora&#xff0c;主要面向 IT 教育&#xff0c;默认包含额外的编/解码器及多媒体播放器。它提供可安装到硬盘的 LiveDVD&#xff0c;支持 i686 和 x86_64 架构。 ROSA Linux 官方主页&#…
阅读更多...
从壹开始 [vueAdmin后台] 之三 || 动态路由配置 项目快速开发

从壹开始 [vueAdmin后台] 之三 || 动态路由配置 项目快速开发

回顾 今天VS 2019正式发布&#xff0c;实验一波&#xff0c;你安装了么&#xff1f;Blog.Core 预计今天会升级到 Core 3.0 版本。 哈喽大家周三好&#xff01;本来今天呢要写 Id4 了&#xff0c;但是写到了一半&#xff0c;突然有人问到了关于 Blog.Admin 管理后台的一些问题&a…
阅读更多...
最新文章

Copyright @ 2022~2023