浏览器渲染html,css,js过程

为什么要了解浏览器加载,解析,渲染的过程

1. 了解浏览器如何进行加载，我们可以在引用外部样式文件，外部js时，将他们放到合适的位置，使浏览器以最快的速度将文件加载完毕
2. 了解浏览器如何进行解析，我们可以在构建DOM结构，组织css选择器时，选择最优的写法，提高浏览器的解析速率。
3. 了解浏览器如何进行渲染，明白渲染的过程，我们在设置元素属性，编写js文件时，可以减少”重绘“”重新布局“的消耗。

---

这三个过程在实际进行的时候又不是完全独立的,有时候会有交叉.会造成一边加载,一边解析,一边渲染的工作现象.
浏览器渲染的流程基本包括四个步骤

1. 计算css样式
2. 构建Render Tree
3. Layout定位坐标和大小,是否换行,各种position,overflow,z-index属性

4. 正式开画展示页面

   注意:javascript动态修改了DOM属性或是css属性会导致重新Layout,有些则不会改变,比如:修改后的css rule没有被匹配到

* 补充两个概念Reflow和Repaint*

var bstyle = document.body.style; // cache

bstyle.padding = "20px"; // reflow, repaint