看了许多浏览器解析渲染的心得．（水）
前言
听大神说要了解浏览器的解析啊，渲染啊．特地去看了些blog,发现文章一些写的很不错，但在开发中用到的只有一点点．写篇心得吧．
大概流程
1.浏览器通过发送请求获得html,css,js(当然这几个不是同步的)
2.解析html成为dom tree.
3.解析css 成为css rule tree.
4.dom tree 和 css rule tree 会被构建成 rending tree （也就是渲染树）
5.通过 CSS Rule Tree 匹配 DOM Tree 进行定位坐标和大小，是否换行，以及 position、overflow、z-index 等等属性，这个过程称为 Flow 或 Layout 。
6.最终通过调用Native GUI 的 API 绘制网页画面的过程称为 Paint .
参考图：
细节(也是能用到的)
Repaint && Reflow
我们知道一个页面很少始终都是一个样子．比如用户的交互，js操纵ｄｏｍ，浏览器窗口的缩放，都会使页面变得不一样．页面的这些变化分为两类'Repaint''Reflow'.
Repaint： 比如background,color 等只是改变颜色的变化，就归于此．
Reflow: 意味着元件的几何尺寸变了，我们需要重新验证并计算Render Tree。是Render Tree的一部分或全部发生了变化。这就是Reflow，或是Layout。
重点：Reflow 消耗资源远远比Repaint小！Reflow 消耗资源远远比Repaint小！Reflow 消耗资源远远比Repaint小！
我们可以在这方面做一些优化，特别是你的项目是移动端的．
怎么做：
知道什么是Reflow 避免就容易的多了．
1.已经渲染在页面上的dom 不要一条一条属性的去修改样式．因为没次修改都是一次reflow
// 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.使用documentFragment．这个不用多说知道这个用法的就知道是为啥．
3.动画元素最好position设置为absolute或fixed．这样浏览器会好受一些．
4.尽量减少因为一个元素的Reflow而带来一匹元素的Reflow.
问题
既然Reding Tree 要等到Dom Tree 和 Css Rule Tree 都有了才有，那js 放在哪里不一个＊样？这个又是一个话题，后面在写一篇水水．
参考文献
差点忘记放参考文了．＿．
