浏览器及html解析
html、css、js文件加载顺序及执行情况
html、css、js⽂件加载顺序及执⾏情况今天看书，看到html，css，js加载执⾏情况，发现⾃⼰并不是真正的了解，⽹上搜了半⼩时依然未弄明⽩，就在这时我找到了让我恍然⼤悟的⼀段话，如下：HTML页⾯加载和解析流程1. ⽤户输⼊⽹址（假设是个html页⾯，并且是第⼀次访问），浏览器向服务器发出请求，服务器返回。
2. 浏览器开始载⼊，发现<head>标签内有⼀个<link>标签引⽤外部CSS⽂件。
3. 浏览器⼜发出CSS⽂件的请求，服务器返回这个CSS⽂件。
4. 浏览器继续载⼊html中<body>部分的代码，并且CSS⽂件已经拿到⼿了，可以开始渲染页⾯了。
5. 浏览器在代码中发现⼀个<img>标签引⽤了⼀张图⽚，向服务器发出请求。
此时浏览器不会等到图⽚下载完，⽽是继续渲染后⾯的代码。
6. 服务器返回图⽚⽂件，由于图⽚占⽤了⼀定⾯积，影响了后⾯段落的排布，因此浏览器需要回过头来重新渲染这部分代码。
7. 浏览器发现了⼀个包含⼀⾏Javascript代码的<script>标签，赶快运⾏它。
8. Javascript脚本执⾏了这条语句，它命令浏览器隐藏掉代码中的某个<style>（style.display=”none”）。
杯具啊，突然就少了这么⼀个元素，浏览器不得不重新渲染这部分代码。
9. 终于等到了</html>的到来，浏览器泪流满⾯……10. 等等，还没完，⽤户点了⼀下界⾯中的“换肤”按钮，Javascript让浏览器换了⼀下＜link＞标签的CSS路径。
11. 浏览器召集了在座的各位<div><span><ul><li>们，“⼤伙⼉收拾收拾⾏李，咱得重新来过……”，浏览器向服务器请求了新的CSS⽂件，重新渲染页⾯。
总结：1.总的来说就是按照html⽂档的顺序加载 2.还有就是最好将⽆论内部或是外部JS⽂件放到所有html内容之后，这样会令⽤户感觉页⾯加载速度变快了，否则如果将所有外部⽂件（包括css和JS）引⽤都放到<head>中，意味着必须等到全部的JS代码都被下载解析和执⾏完毕后，才能开始呈现页⾯的内容（当浏览器遇到<body>）,这样会导致呈现页⾯时出现明显的延迟，⼆延迟期间的浏览器窗⼝将是⼀⽚空⽩。
浏览器渲染过程工作原理
浏览器渲染过程工作原理
浏览器的渲染过程是将网页的HTML、CSS和JavaScript代码转化为可视化的网页内容的过程。
以下是浏览器渲染过程的简要工作原理：
1.解析HTML：浏览器首先会将接收到的HTML
代码进行解析，构建一个DOM（文档对象模型）树，
表示网页的结构。
2.解析CSS：浏览器会解析CSS样式表，构建一
个CSSOM（CSS对象模型）树，表示网页的样式信息。
3.构建渲染树：浏览器将DOM树和CSSOM树结
合起来，生成一个渲染树（也称为合成树或布局树）。
渲染树只包含需要显示的网页内容，例如具有可见样式
属性的元素。
4.布局：渲染树中的每个元素都会根据其在文档中
的位置计算出在屏幕上的精确坐标。
这个过程称为布局
或回流（reflow），它确定了每个元素在渲染树中的准
确位置和大小。
5.绘制：浏览器使用计算出的布局信息，将每个元
素转换为屏幕上的实际像素。
这个过程称为绘制
（painting）或栅格化（rasterization）。
6.合成：浏览器将绘制好的元素按正确的顺序合成
到屏幕上。
合成是将多个图层按照正确的顺序组合成最
终的图像。
7.显示：最后，浏览器将合成后的图像显示在屏幕
上，呈现给用户。
值得注意的是，浏览器在进行渲染过程时会尽可能提高性能和用户体验。
为了实现更快的渲染速度，现代浏览器采用了一些优化技术，如异步加载脚本、预解析和预加载资源、使用CSS和JavaScript动画等。
这些技术可以减少页面加载时间，提高用户感知的渲染速度。
WEB浏览器工作原理
WEB浏览器工作原理一、引言WEB浏览器是我们日常生活中时常使用的工具，它能够将互联网上的网页内容呈现给用户。
本文将详细介绍WEB浏览器的工作原理，包括浏览器的结构、页面渲染流程、网络请求与响应、JavaScript解析和执行等方面的内容。
二、浏览器的结构1. 用户界面：包括地址栏、后退/前进按钮、书签等，用于与用户进行交互。
2. 浏览器引擎：负责解析和渲染网页内容。
3. 渲染引擎：负责将HTML、CSS等代码转换为用户可见的网页。
4. 网络模块：负责处理网络请求和响应。
5. JavaScript解释器：负责解析和执行网页中的JavaScript代码。
6. 数据存储：用于存储浏览器缓存、Cookies等数据。
三、页面渲染流程1. 解析HTML：浏览器从网络模块接收到HTML代码后，渲染引擎开始解析HTML结构，构建DOM树。
2. 解析CSS：渲染引擎解析CSS代码，构建CSSOM树。
3. 构建渲染树：将DOM树和CSSOM树合并，构建渲染树。
4. 布局：渲染引擎根据渲染树的信息计算每一个元素在屏幕上的位置和大小。
5. 绘制：渲染引擎根据布局信息将页面绘制到屏幕上。
四、网络请求与响应1. URL解析：浏览器通过地址栏中输入的URL，解析出协议、域名、路径等信息。
2. DNS解析：浏览器向DNS服务器发送请求，获取域名对应的IP地址。
3. 建立连接：浏览器与服务器建立TCP连接。
4. 发送请求：浏览器向服务器发送HTTP请求，请求页面的资源。
5. 接收响应：服务器接收到请求后，返回HTTP响应，包含页面的内容和状态码。
6. 解析响应：浏览器解析响应，提取出页面的HTML、CSS、JavaScript等资源。
7. 渲染页面：浏览器根据解析到的资源，进行页面的渲染流程。
五、JavaScript解析和执行1. 解析：浏览器将HTML页面中的JavaScript代码解析成抽象语法树（AST）。
2. 编译：解析器将AST转换为字节码或者机器码。
解析HTML
解析HTML解析HTML⼀、什么是HTMLHTML是超⽂本标签语⾔，即⽹页的源码。
⽽浏览器就是翻译解释HTML源码的⼯具。
⼆.HTML的基本结构<!DOCTYPE html> 声明⽂档类型HTML5⽂档声明在HTML⽂档必不可少，且必须放在⽂档的第⼀⾏；<html><head> head标签内的信息⽤于描述⽹页，即元数据<meta charset="UTF-8"><title>⽹页的标题</title></head><body></body></html>标签：最基本的单位和最重要的组成部分；1.1 HTML标签：使⽤<>括起来；标签都是闭合的；标签属性：是标签的⼀部分，⽤于包含额外的信息;1.2 HTML标签属性：可以有多个属性；属性和属性值成对出现;语法；【link标签】 : 1.作⽤：⽤于为⽹页链接各种⽂件;2.常⽤属性:rel：⽤于表明被连接⽂件与当前⽂件的关系。
此处选icon，表明被连接图⽚是当前⽹页的icon图标;type：表明被连接⽂件是什么类型。
type=" image/x-icon"可以省略;href：表明被连接⽂件的地址;【meta标签】【重点】1.charset属性：单独使⽤，设置⽂档字符集编码格式。
写法：<meta charset="UTF-8">常见的中⽂编码按格式：GB-2312：国标码，简体中⽂；GBK：扩展的国标码：简体中⽂；UTF-8：万国码unicode码，基本兼容各国语⾔；（常⽤）属性：需配合content属性使⽤，主要声明浏览器如何解释编译⽂件；2.http-equiv属性：写法：<meta http—equiv=“属性值” content=“属性值详细内容”>常⽤属性值：content-type 4.0之前版本的编码声明；set-cookie设置浏览器cookie缓存；refresh⽹页刷新；属性：需配合content属性使⽤，主要⽤于给搜索引擎提供必要信息。
WEB浏览器工作原理
WEB浏览器工作原理1. 概述WEB浏览器是一种用于访问互联网上的网页的软件应用程序。
它通过解析HTML、CSS和JavaScript等网页标记语言，并将其呈现为用户可视化的网页内容。
本文将详细介绍WEB浏览器的工作原理。
2. URL解析当用户在浏览器的地址栏中输入一个URL（统一资源定位符）时，浏览器首先会解析该URL。
解析过程包括以下几个步骤：- 协议解析：浏览器会解析URL中的协议部分，例如HTTP或HTTPS。
- 主机解析：浏览器会解析URL中的主机部分，即网站的域名或IP地址。
- 路径解析：浏览器会解析URL中的路径部分，即网页在服务器上的位置。
- 参数解析：浏览器会解析URL中的参数部分，用于向服务器传递额外的信息。
3. DNS解析一旦浏览器解析出主机部分的域名，它会将该域名发送给DNS（域名系统）服务器进行解析。
DNS解析的目的是将域名转换为对应的IP地址，以便浏览器能够与服务器建立连接。
4. 建立连接一旦浏览器获取到服务器的IP地址，它会尝试与服务器建立连接。
建立连接的过程通常包括以下几个步骤：- TCP握手：浏览器会与服务器进行TCP握手，以建立可靠的连接。
- 发送HTTP请求：浏览器会发送HTTP请求给服务器，请求特定的网页内容。
- 接收HTTP响应：服务器接收到浏览器的请求后，会返回相应的HTTP响应，包含网页内容和状态码等信息。
5. 下载资源一旦浏览器接收到服务器返回的HTTP响应，它会开始下载网页的资源。
资源可以是HTML、CSS、JavaScript、图像、视频等文件。
浏览器会根据响应中的Content-Type字段来确定如何处理每种资源类型。
6. 解析和渲染浏览器在下载资源的同时，会对这些资源进行解析和渲染，以将它们呈现为用户可视化的网页内容。
解析和渲染的过程包括以下几个步骤：- HTML解析：浏览器会解析HTML文件，并构建DOM（文档对象模型）树，表示网页的结构和层次关系。
html的工作原理
html的工作原理
HTML的工作原理是通过标签来表示文档中的不同元素，比
如标题、段落、链接、图像等。
HTML文档由一系列标签组成，这些标签使用尖括号进行包围，标签之间可以嵌套或者单独存在。
标签可以包含属性，属性提供了有关元素的更多信息。
HTML文档的解析是由浏览器完成的。
当浏览器加载HTML
文档时，它遵循HTML解析规则逐行解析文档内容。
其中，
浏览器会识别标签，根据标签的类型和属性来构建文档的结构树，同时将文本内容显示在浏览器窗口中。
解析过程中，浏览器会根据CSS样式表对文档进行样式化处理，使得页面外观更加丰富和美观。
CSS样式表会定义元素的样式属性，如颜色、字体、大小、位置等。
浏览器根据样式规则将这些属性应用到文档中的相应元素上。
另外，HTML还支持脚本语言，如JavaScript。
通过嵌入或者
引用JavaScript代码，可以实现页面的动态交互和事件处理。
最终，浏览器会将经解析、样式化和脚本处理后的HTML文
档呈现给用户，用户可以通过浏览器窗口与页面进行交互，如点击链接、填写表单等。
总结来说，HTML的工作原理是通过浏览器解析HTML标签，构建文档的结构树，并对文档进行样式化和脚本处理，最终将结果呈现给用户。
浏览器解析规则
浏览器解析规则URL编码：⼀个百分号和该字符的ASCII编码所对应的2位⼗六进制数字，例如“/”的URL编码为%2F(⼀般⼤写，但不强求)HTML实体编码：命名实体：以&开头，分号结尾的，例如“<”的编码是“<”字符编码：⼗进制、⼗六进制ASCII码或unicode字符编码，样式为“&#数值;”,例如“<”可以编码为“<”和“<”JS编码：js提供了四种字符编码的策略1、三个⼋进制数字，如果不够个数，前⾯补0，例如“e”编码为“\145”2、两个⼗六进制数字，如果不够个数，前⾯补0，例如“e”编码为“\x65”3、四个⼗六进制数字，如果不够个数，前⾯补0，例如“e”编码为“\u0065”4、对于⼀些控制字符，使⽤特殊的C类型的转义风格（例如\n和\r）5、jsfuck编码CSS编码：⽤⼀个反斜线()后⾯跟1~6位的⼗六进制数字，例如e可以编码为“\65”或“65”或“00065”HTML解析器能识别在⽂本节点和参数值⾥的实体编码，并在内存⾥创建⽂档树的表现形式时，透明的对这些编码进⾏解码浏览器的解析规则：浏览器收到HTML内容后，会从头开始解析。
当遇到JS代码时，会使⽤JS解析器解析。
当遇到URL时，会使⽤URL解析器解析。
遇到CSS则⽤CSS解析器解析。
尤其当遇到复杂代码时，可能该段代码会经过多个解析器解析。
⽐如：<a href="javascript:window.open('')">test</a>这段代码，HTML解析器⾸先⼯作（注：此时，若href=”字符串”中的字符串存在字符引⽤，会对其解码）。
然后URL解析器开始对href值进 ⾏URL解析。
进⾏URL解析时，URL 资源类型必须是ASCII字母（U+0041-U+005A || U+0061-U+007A），不然就会进⼊“⽆类型”状态。
浏览器解析渲染原理
浏览器解析渲染原理浏览器解析和渲染页面的过程是一个相当复杂的技术流程，涉及多个步骤和组件的协同工作。
下面，将尽量用简单易懂的语言来介绍这一过程，并确保内容的逻辑性和清晰度。
1. HTML解析当浏览器接收到一个HTML文件时，它首先会启动一个解析器来解析这个文件。
解析器会从文件的开始一直解析到结束，根据HTML的语法规则来识别各种元素，如标签、属性、文本内容等。
•词法分析：将输入的字符流（HTML代码）转换成一系列的标记（tokens）。
•语法分析：根据这些标记构建一颗解析树（parse tree）或DOM树（Document Object Model tree）。
在解析过程中，如果遇到外部资源链接（如CSS、JavaScript文件），浏览器会发起额外的请求去获取这些资源。
2. CSS解析与HTML类似，浏览器也会解析CSS文件来识别各种选择器和声明。
CSS 解析的结果通常是一个样式表对象模型，或者叫CSSOM（CSS Object Model）。
•词法和语法分析：与HTML解析类似，CSS也需要经过词法和语法分析来生成CSSOM。
•样式计算：浏览器会根据CSS选择器的优先级和继承规则来计算每个元素的最终样式。
3. JavaScript解析和执行JavaScript是一种脚本语言，需要在浏览器的JavaScript引擎中执行。
•词法和语法分析：生成抽象语法树（AST, Abstract Syntax Tree）。
•执行：JavaScript引擎会按照代码的逻辑执行AST，期间可能会修改DOM 或CSSOM。
值得注意的是，JavaScript的执行可能会阻塞HTML和CSS的解析和渲染，尤其是在没有使用async或defer属性的情况下。
4. 渲染树构建和布局•渲染树构建：浏览器将DOM树和CSSOM树合并成一个渲染树（render tree）。
渲染树只包含需要渲染的节点（如可见的元素和文本）。
•布局：计算渲染树中每个元素的位置和大小。
WEB浏览器工作原理
WEB浏览器工作原理引言概述：WEB浏览器是我们日常生活中时常使用的工具，它可以让我们访问互联网上的各种网页和资源。
但是，你有没有想过WEB浏览器是如何工作的呢？在本文中，我们将详细介绍WEB浏览器的工作原理。
正文内容：1. 网络通信1.1 建立连接：WEB浏览器通过使用传输控制协议（TCP）与服务器建立连接。
这个过程包括IP地址解析、域名解析和端口连接等步骤。
1.2 发送请求：一旦与服务器建立连接，WEB浏览器会发送一个HTTP请求，该请求包含了所需资源的URL、请求方法（如GET、POST）和其他相关信息。
1.3 接收响应：服务器接收到请求后，会返回一个HTTP响应。
WEB浏览器会接收到响应，并对响应进行解析，以获取所需的资源。
2. HTML解析与渲染2.1 解析HTML：WEB浏览器会将接收到的HTML响应进行解析，构建一棵文档对象模型（DOM）树。
这个树结构表示了网页的结构和内容。
2.2 解析CSS：WEB浏览器还会解析网页中的层叠样式表（CSS），将其应用于DOM树上的各个元素，以确定它们的样式和布局。
2.3 渲染页面：一旦完成DOM树和CSS的解析，WEB浏览器会将渲染树构建起来，并根据渲染树来绘制整个页面。
这个过程包括布局、绘制和合成等步骤。
3. JavaScript解析与执行3.1 解析JavaScript：如果网页中包含JavaScript代码，WEB浏览器会将其解析成可执行的指令。
这个过程包括词法分析、语法分析和生成抽象语法树等步骤。
3.2 执行JavaScript：一旦JavaScript代码被解析成抽象语法树，WEB浏览器会根据执行上下文和作用域链等规则来执行这些指令。
这些指令可以改变DOM树和渲染树，从而实现动态效果和交互功能。
3.3 事件处理：WEB浏览器还会监听用户的交互事件，如点击、滚动等。
当用户触发这些事件时，浏览器会执行相应的JavaScript代码来处理事件，并更新页面的显示。
打开htm文件的几种方法-概述说明以及解释
打开htm文件的几种方法-概述说明以及解释1.引言1.1 概述在撰写本文之前，我们先来了解一下何为htm文件。
HTM是一种用于创建网页的标准文件格式，它是HTML（Hypertext Markup Language）的扩展名。
HTML是一种用于构建网页内容的标记语言，用于描述页面的结构和语义。
打开htm文件是指在计算机上查看和阅读以.htm或.html为后缀的文件。
打开htm文件的目的可以是为了预览自己编写的网页内容，或者是浏览和阅读他人分享的网页文件。
在本文中，我们将介绍几种打开htm文件的方法，以便读者可以根据自己的需求选择最适合的方法。
首先，我们可以使用常见的文本编辑器打开htm文件。
文本编辑器是一种用于编辑和查看纯文本文件的工具，它通常具有语法高亮和代码折叠等功能，方便我们查看和编辑网页的HTML代码。
常见的文本编辑器包括Windows平台下的记事本、Notepad++、Sublime Text以及macOS平台下的TextEdit等。
第二种方法是使用Web浏览器打开htm文件。
Web浏览器是一种用于浏览和访问互联网上网页的应用程序，我们可以通过它来打开和预览htm文件。
常见的Web浏览器有Google Chrome、Mozilla Firefox、Microsoft Edge等，它们通常支持在地址栏中输入本地文件路径来打开本地的htm文件。
另外，我们还可以使用专业的网页编辑软件打开htm文件。
这些软件通常具有更多的功能，如WYSIWYG（所见即所得）编辑模式、页面预览、代码自动补全等，方便我们进行网页设计和调试。
一些常用的网页编辑软件包括Adobe Dreamweaver、Microsoft Expression Web等。
在本文的后续内容中，我们将详细介绍以上提到的方法，并总结它们各自的优劣势。
此外，我们还会介绍一些其他的打开htm文件的方法，如使用在线HTML编辑器等。
通过阅读本文，读者将能够了解到多种打开htm文件的方法，以便根据自己的需求选择最适合的方式。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
1.
2.
3. 4. 5. 6. 7. 8. 9. 10. 11. 12.
13.
Thank you!
3.
1. 2.
4.
parent渲染对象使用child渲染对象的累积高度， 以及margin和padding的高度来设置自己的高度 －这将被parent渲染对象的parent使用 将dirty标识设置为false
绘制顺序 这个就是元素压入堆栈的顺序，这个顺序 影响着绘制，堆栈从后向前进行绘制。 一个块渲染对象的堆栈顺序是：
Dom例子
通常的html文档
<html> <head> <title>Trees, trees, everywhere</title> </head> <body> <h1>Trees, trees, everywhere</h1> <p>Welcome to a <em>really</em> boring page.</p> <div> Come again soon. <img src="come-again.gif" /> </div> </body> </html>
Gecko渲染引擎主流程
• Gecko称可见的格式化元素组成的树为 frame树，每个元素都 是一个frame。 • 元素的定位称为 回流。 • Gecko在html和dom树之间附加了一层，这层称为 内容接收 器，相当制造dom元素的工厂。
HTML 解析
HTML文法定义——HTML DTD
DTD（Document Type Definition 文档类型定 义） 这一格式是用于定义SGML家族的语言，包括了 对所有允许元素及它们的属性和层次关系的定 义。 DTD定义了HTML的解析语法
渲染树和DOM树的关系
渲染对象和DOM元素相对应，但这种对应关系不是一对一的 ，不可见的Dom元素不会被插入渲染树，例如head元素。 另外，display属性为none的元素也不会在渲染树中出现（ visibility属性为hidden的元素将出现在渲染树中）。 还有一些Dom元素对应几个可见对象，它们一般是一些具有 复杂结构的元素，无法用一个矩形来描述。例如，select元 素有三个渲染对象——一个显示区域、一个下拉列表及一个 按钮。 当文本因为宽度不够而折行时，新行将作为额外的渲染元素 被添加。 根据css规范，一个行内元素只能仅包含行内元素或仅包含 块状元素，在存在混合内容时，将会创建匿名的块状渲染对 象包裹住行内元素。
渲染引擎基本流程
构建dom树
->构建render树
->布局render树
->绘制render树
webkit渲染引擎主流程
• webkit使用 render树 这个名词来命名由渲染对象组成的树。
• 元素的定位称为 布局。 • 利用dom节点及样式信息去构建render树的过程为
attachment
layout过程
parent渲染对象决定它的宽度 parent渲染对象读取chilidren，并：
a. 放置child渲染对象（设置它的x和y） b. 在需要时（它们当前为dirty或是处于全局layout或者其 他原因）调用child渲染对象的layout，这将计算child的 高度
Opera
Mac Safari Chrome Midori
嵌入式浏览器引擎
Mozilla firefox MobileIE Thunderbird Camino
嵌入式 浏览器
Opera Mobile
Iphone Safari Android browser Netfront Browser Symbian Browser
JS解释器 UI 后端
浏览器内核工作流程图
网络 侧 数据
XML/HTML 解析（分词 ）
构建DOM树
渲染 网页
Javascript 解析
窗口管理
基本处理流程
Loading
Parsing
Rendering
Layout
Painting
浏览器渲染引擎
Layout Release engine version Used by 所有的 Mozilla 系列, 包括Firefox， Thunderbird等 Konqueror 2.7.62 Opera; Opera Mobile, Sony PlayStation Internet Explorer, Internet Explorer for windows mobile Google Chrome, Maxthon 3, Safari (Mac 版和IPhone版), Shiira, Android browser,Palm webOS browser, Symbian S60 browser。。。
HTML 解析树——DOM树
HTML解析器输出的树，也就是解析树，是由DOM元素及 属性节点组成的。 DOM是文档对象模型的缩写，它是html文档的对象表示， 作为html元素的外部接口供js等调用。
/DOM/DOMTR
解析算法
hmtl不能被一般的自顶向下或自底向上的解析器 所解析。
什么操作会引起Reflow & Repaint
DOM元素的添加、修改（内容）、删除 隐藏元素 display:none(Reflow) visibility:hidden(Repaint) 应用新的样式或者修改任何影响元素外观的属性 用户的操作，如改变浏览器大小，改变浏览器的 字体大小等
display:none隐藏元素，然后对该元素进行所有的 操作，最后再显示该元素
代码
不规范的HTML结构会降低页面解析效率（HTML） HTML的节点、层级越少页面解析效率越高（HTML ） 通配选择符对性能的影响几乎可以忽略（CSS） 包含选择符的层级过多会导致降低样式解析效率（ CSS） 不显示的对象不会被渲染（CSS）
Gecko
KHTML Presto
1.9.2.14
Trident 4.0 (IE 8)
WebKit 533
浏览器引擎
Internet Explorer
Maxthon
搜狗浏览器 360 浏览器 Mozilla firefox Thunderbird Camino
浏览器 引擎
Green Browser
当你请求上面的一些属性的时候，浏览器为了给你最精确的值，需要flush队列，
1. 2. 3. 4. 5.
因为队列中可能会有影响到这些值的操作。
如何做？
离线操作DOM 集中修改样式 缓存Layout属性值 权衡动画帧宽
离线操作DOM
使用documentFragment或div等元素进显示序列中的可见元素组成，它是文档的可 视化表示，构建这棵树是为了以正确的顺序绘制文档内容 。 Firefox将渲染树中的元素称为frames，webkit则用render 或渲染对象来描述这些元素。 一个渲染对象知道怎么布局及绘制自己及它的children。 每个渲染对象用一个和该节点的css盒模型相对应的矩形 区域来表示，正如css2所描述的那样，它包含诸如宽、高 和位置之类的几何信息。盒模型的类型受该节点相关的 display样式属性的影响。元素的类型也需要考虑，例如， 表单控件和表格带有特殊的框架。
渲染树和DOM树的关系
一些渲染对象和所对应的Dom节点不在树上相同的位置， 例如，浮动和绝对定位的元素在文本流之外，在两棵树上 的位置不同，渲染树上标识出真实的结构，并用一个占位 结构标识出它们原来的位置。
布局
当渲染对象被创建并添加到树中，它们并没有位置和大小 ，计算这些值的过程称为layout或reflow。 Html使用基于流的布局模型。流中靠后的元素并不会影响 前面元素的几何特性，所以布局可以在文档中从右向左、 自上而下的进行。也存在一些例外，比如html tables。 坐标系统相对于根frame，使用top和left坐标。 根渲染对象的位置是0,0，它的大小是viewport－浏览器窗 口的可见部分。 布局是一个递归的过程，由根渲染对象开始，它对应html 文档元素，布局继续递归的通过一些或所有的frame层级 ，为每个需要几何信息的渲染对象进行计算。
动态变化
浏览器总是试着以最小的动作响应一个变化
一个元素颜色的变化将只导致该元素的重绘 元素位置的变化将导致元素的布局和重绘 添加一个Dom节点，也会大致这个元素的布局和 重绘 一些主要的变化，比如增加html元素的字号，将 会导致缓存失效，从而引起整数的布局和重绘。
总结
使用GET请求 利用JS预加载资源 Script inject改善阻塞 注意inline JS的位置，防止css阻塞其他资源 将css文件放在顶部 避免使用通配符 避免在后代选择符的最后使用tag名 去掉冗余的选择符 用class代替后代选择符 离线操作DOM 集中修改样式 缓存Layout属性值 权衡动画帧宽
1. 2.
3. 4.
浏览器的优化
很多浏览器会维护一个队列，把所有会引 起Reflow/Repaint的操作放入这个队列，等 队列中的操作到了一定的数量或者到了一 定的时间间隔，浏览器就会把flush队列， 进行一个批处理。这样就会让多次的 Reflow、Repaint变成一次。
破坏优化
offsetTop, offsetLeft, offsetWidth, offsetHeight scrollTop/Left/Width/Height clientTop/Left/Width/Height width,height 请求了getComputedStyle(), 或者 ie的 currentStyle