浏览器解析
Paste_Image.png
一.浏览器会解析三个东西
- HTML/SVG/XHTML
- CSS会生成CSS规则树，
- javascript脚本，主要是通过DOM API和CSSOM API来操作DOM Tree和CSS Rule Tree.解析完成后，浏览器引擎会通过DOM Tree 和 CSS Rule Tree 来构造 Rendering Tree
二. 注意：
- Rendering Tree不等同于DOM树，因为因为一些像Header或display:none的东西就没必要放在渲染树中。这个在浏览器的工作原理里面有讲地 很清楚。
- CSS的rule Tree，主要是为了完成匹配并把CSS Rule附加上Rendering Tree上的每个Element。也就是DOM结点。也就是所谓的Frame
- 计算每个FRAME的位置，这叫layout和reflow
- 最后通过调用操作系统Native GUI的API绘制。
DOM解析
Paste_Image.png
解析算法由两个阶段组成：标记化和树构建。
构建过程如下：
Paste_Image.png
CSS解析
- Firefox 规则树
<html>
<body>
<div class="err" id="div1">
<p> this is a <span class="big"> big error </span>
this is also a <span class="big"> very big error</span> error
</p>
</div>
<div class="err" id="div2">another error</div>
</body>
</html>
还有如下规则
1div {margin:5px;color:black}
2.err {color:red}
3.big {margin-top:3px}
4 div span {margin-bottom:4px}
5 #div1 {color:blue}
6 #div2 {color:green}
形成的规则树如下图所示
Paste_Image.png
Paste_Image.png
渲染
1.流程
- 计算CSS样式
- 构建Render Tree
- Layout – 定位坐标和大小，是否换行，各种position, overflow, z-index属性 ……
- 正式开画
![Upload Paste_Image.png failed. Please try again.]
2.Repaint和Reflow
- Repaint——屏幕的一部分要重画，比如某个CSS的背景色变了。但是元素的几何尺寸没有变。
- Reflow——意味着元件的几何尺寸变了，我们需要重新验证并计算Render Tree。Render Tree的一部分或全部发生了变化。这就是Reflow，或是Layout。
3.做reflow的情况:
- Initial。网页初始化的时候。
- Incremental。一些Javascript在操作DOM Tree时。
- Resize。其些元件的尺寸变了。
- StyleChange。如果CSS的属性发生变化了。
- Dirty。几个Incremental的reflow发生在同一个frame的子树
4.成本比较高的动作：
-
当你增加、删除、修改DOM结点时，会导致Reflow或Repaint
-
当你移动DOM的位置，或是搞个动画的时候。
-
当你修改CSS样式的时候。
-
当你Resize窗口的时候（移动端没有这个问题），或是滚动的时候。
-
当你修改网页的默认字体时
四减少reflow/repaint -
不要一条一条地修改DOM的样式。与其这样，还不如预先定义好css的class，然后修改DOM的className。****
-
把DOM离线后修改****
使用documentFragment 对象在内存里操作DOM
先把DOM给display:none(有一次reflow)，然后你想怎么改就怎么改。比如修改100次，然后再把他显示出来。
clone一个DOM结点到内存里，然后想怎么改就怎么改，改完后，和在线的那个的交换一下。 -
不要把DOM结点的属性值放在一个循环里当成循环里的变量。不然这会导致大量地读写这个结点的属性。****
-
尽可能的修改层级比较低的DOM。当然，改变层级比较底的DOM有可能会造成大面积的reflow，但是也可能影响范围很小****
-
为动画的HTML元件使用fixed或absoult的position，那么修改他们的CSS是不会reflow的****
-
千万不要使用table布局。因为可能很小的一个小改动会造成整个table的重新布局。
主要参照
http://coolshell.cn/articles/9666.html
和http://www.html5rocks.com/zh/tutorials/internals/howbrowserswork/
网友评论