浏览器及html解析
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
动态变化
浏览器总是试着以最小的动作响应一个变化
一个元素颜色的变化将只导致该元素的重绘 元素位置的变化将导致元素的布局和重绘 添加一个Dom节点，也会大致这个元素的布局和 重绘 一些主要的变化，比如增加html元素的字号，将 会导致缓存失效，从而引起整数的布局和重绘。
总结
使用GET请求 利用JS预加载资源 Script inject改善阻塞 注意inline JS的位置，防止css阻塞其他资源 将css文件放在顶部 避免使用通配符 避免在后代选择符的最后使用tag名 去掉冗余的选择符 用class代替后代选择符 离线操作DOM 集中修改样式 缓存Layout属性值 权衡动画帧宽
浏览器及HTML解析
浏览器
Window 窗口对象
控制 location 地址对象
http://www.google.com
浏览器对象的分层结构
document 文档对象
FORM 表单对象
window.document.myform.text1
浏览器主要组件
用户界面
浏览器引擎 渲染引擎
数据存储
网络
display:none隐藏元素，然后对该元素进行所有的 操作，最后再显示该元素
代码
不规范的HTML结构会降低页面解析效率（HTML） HTML的节点、层级越少页面解析效率越高（HTML ） 通配选择符对性能的影响几乎可以忽略（CSS） 包含选择符的层级过多会导致降低样式解析效率（ CSS） 不显示的对象不会被渲染（CSS）
HTML 解析树——DOM树
HTML解析器输出的树，也就是解析树，是由DOM元素及 属性节点组成的。 DOM是文档对象模型的缩写，它是html文档的对象表示， 作为html元素的外部接口供js等调用。
http://www.w3.org/DOM/DOMTR
解析算法
hmtl不能被一般的自顶向下或自底向上的解析器 所解析。
1.
2.
3. 4. 5. 6. 7. 8. 9. 10. 11. 12.
13.
Thank you!
layout过程
parent渲染对象决定它的宽度 parent渲染对象读取chilidren，并：
a. 放置child渲染对象（设置它的x和y） b. 在需要时（它们当前为dirty或是处于全局layout或者其 他原因）调用child渲染对象的layout，这将计算child的 高度
3.
1. 2.
4.
parent渲染对象使用child渲染对象的累积高度， 以及margin和padding的高度来设置自己的高度 －这将被parent渲染对象的parent使用 将dirty标识设置为false
绘制顺序 这个就是元素压入堆栈的顺序，这个顺序 影响着绘制，堆栈从后向前进行绘制。 一个块渲染对象的堆栈顺序是：
Gecko渲染引擎主流程
• Gecko称可见的格式化元素组成的树为 frame树，每个元素都 是一个frame。 • 元素的定位称为 回流。 • Gecko在html和dom树之间附加了一层，这层称为 内容接收 器，相当制造dom元素的工厂。
HTML 解析
HTML文法定义——HTML DTD
DTD（Document Type Definition 文档类型定 义） 这一格式是用于定义SGML家族的语言，包括了 对所有允许元素及它们的属性和层次关系的定 义。 DTD定义了HTML的解析语法
Html是一个树形结构
渲染树
渲染树由元素显示序列中的可见元素组成，它是文档的可 视化表示，构建这棵树是为了以正确的顺序绘制文档内容 。 Firefox将渲染树中的元素称为frames，webkit则用render 或渲染对象来描述这些元素。 一个渲染对象知道怎么布局及绘制自己及它的children。 每个渲染对象用一个和该节点的css盒模型相对应的矩形 区域来表示，正如css2所描述的那样，它包含诸如宽、高 和位置之类的几何信息。盒模型的类型受该节点相关的 display样式属性的影响。元素的类型也需要考虑，例如， 表单控件和表格带有特殊的框架。
什么操作会引起Reflow & Repaint
DOM元素的添加、修改（内容）、删除 隐藏元素 display:none(Reflow) visibility:hidden(Repaint) 应用新的样式或者修改任何影响元素外观的属性 用户的操作，如改变浏览器大小，改变浏览器的 字体大小等
1. 背景色 2. 背景图 3. border 4. children 5. outline
css2定义了绘制过程的顺序：http://www.w3.org/TR/CSS21/zindex.html
Reflow & Repaint
当 DOM 元素的属性发生变化 (如 color) 时,而这些 属性只是影响元素的外观风格，浏览器会通知 render 重描相应的元素，此过程称为 Repaint。 如果该次变化涉及元素布局 (如 width)，浏览器则 抛弃原有属性，重新计算并把结果传递给 render 以重新描绘页面元素, 此过程称为 Reflow。 Reflow必将引起Repaint，而Repaint不一定会引起 Reflow 。
Opera
Mac Safari Chrome Midori
嵌入式浏览器引擎
Mozilla firefox MobileIE Thunderbird Camino
嵌入式 浏览器
Opera Mobile
Iphone Safari Android browser Netfront Browser Symbian Browser
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>
渲染树和DOM树的关系
渲染对象和DOM元素相对应，但这种对应关系不是一对一的 ，不可见的Dom元素不会被插入渲染树，例如head元素。 另外，display属性为none的元素也不会在渲染树中出现（ visibility属性为hidden的元素将出现在渲染树中）。 还有一些Dom元素对应几个可见对象，它们一般是一些具有 复杂结构的元素，无法用一个矩形来描述。例如，select元 素有三个渲染对象——一个显示区域、一个下拉列表及一个 按钮。 当文本因为宽度不够而折行时，新行将作为额外的渲染元素 被添加。 根据css规范，一个行内元素只能仅包含行内元素或仅包含 块状元素，在存在混合内容时，将会创建匿名的块状渲染对 象包裹住行内元素。
渲染引擎基本流程
构建dom树
->构建render树
->布局render树
->绘制render树
webkit渲染引擎主流程
• webkit使用 render树 这个名词来命名由渲染对象组成的树。
• 元素的定位称为 布局。 • 利用dom节点及样式信息去构建render树的过程为
attachment
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。。。
渲染树和DOM树的关系
一些渲染对象和所对应的Dom节点不在树上相同的位置， 例如，浮动和绝对定位的元素在文本流之外，在两棵树上 的位置不同，渲染树上标识出真实的结构，并用一个占位 结构标识出它们原来的位置。
布局
当渲染对象被创建并添加到树中，它们并没有位置和大小 ，计算这些值的过程称为layout或reflow。 Html使用基于流的布局模型。流中靠后的元素并不会影响 前面元素的几何特性，所以布局可以在文档中从右向左、 自上而下的进行。也存在一些例外，比如html tables。 坐标系统相对于根frame，使用top和left坐标。 根渲染对象的位置是0,0，它的大小是viewport－浏览器窗 口的可见部分。 布局是一个递归的过程，由根渲染对象开始，它对应html 文档元素，布局继续递归的通过一些或所有的frame层级 ，为每个需要几何信息的渲染对象进行计算。
原因是：
1. 这门语言本身的宽容特性 2. 浏览器对一些常见的非法html有容错机制 3. 解析过程是往复的，通常源码不会在解析过程中发生改变， 但在html中，脚本标签包含的“document.write ”可能添加标 签，这说明在解析过程中实际上修改了输入
不能使用正则解析技术，浏览器为html定制了专 属的解析器。 Html5规范中描述了这个解析算法，算法包括两个 阶段——符号化及构建树。
当你请求上面的一些属性的时候，浏览器为了给你最精确的值，需要flush队列，
1. 2. 3. 4. 5.
因为队列中可能会有影响到这些值的操作。
如何做？
离线操作DOM 集中修改样式 缓存Layout属性值 权衡动画帧宽
离线操作DOM
使用documentFragment或div等元素进行缓存操 作。
Gecko
KHTML Presto
1.9.2.14
Trident 4.0 (IE 8)
WebKit 533
源自文库
浏览器引擎
Internet Explorer
Maxthon
搜狗浏览器 360 浏览器 Mozilla firefox Thunderbird Camino
浏览器 引擎
Green Browser
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