浏览器渲染页面过程描述，DOM编程技巧以及重排和重绘

　　浏览器渲染页面过程描述，DOM编程技巧以及重排和重绘

　　一、浏览器渲染页过程描述

　　1、浏览器解析html源码，然后创建一个DOM树。

　　在DOM树中，每一个HTML标签都有一个对应的节点(元素节点),并且每一个文本也都有一个对应的节点(文本节点)。

　　DOM树的根节点就是documentElement，对应的是html标签。

　　2、浏览器解析CSS代码，计算出最终的样式数据。

　　对CSS代码中非法的语法它会直接忽略掉。

　　解析CSS的时候会按照如下顺序来定义优先级：浏览器默认设置，用户设置，外联样式，内联样式，html中的style(嵌在标签中的行间样式)。

　　3、创建完DOM树并得到最终的样式数据之后，构建一个渲染树。

　　渲染树和DOM树有点像，但是有区别。DOM树完全和html标签一一对应，而渲染树会忽略不需要渲染的元素(head、display:none的元素)。

　　渲染树中每一个节点都存储着对应的CSS属性。

　　4、当渲染树创建完成之后，浏览器就可以根据渲染树直接把页面绘制到屏幕上。

　　二、高性能Javascript DOM编程

　　我们知道，用脚本进行DOM操作的代价很昂贵。把DOM和ECMAScript各自想象为一个岛屿，它们之间用收费桥梁链接，ECMAScript每次访问DOM，都要经过这座桥，并交纳“过桥费”，访问DOM的次数越多，费用也就越高。因此，推荐的做法是尽量减少过桥的次数，努力呆在ECMAScript岛上。这是比喻非常形象。那么怎样才能高效呢？

　　1、DOM访问与修改

　　访问DOM元素是有代价的(这里其实和ajax调后台数据接口是一样，DOM是用于操作XML和HTML文档的应用程序接口，一次能完成的事不要请求多次)，通过DOM获取元素之后，修改元素的代价更是昂贵，因为它会导致浏览器重新计算页面的几何变化(重排和重绘)。

　　例子：

　　<p>var times = 15000;

　　//code1

　　console.time('time1');<p>for(var i=0; i