浏览器渲染过程

web原理

1.基本过程

->解析HTML，生成DOM树
->解析css，生成渲染树（包含width,颜色等）
->对渲染树上的每一个节点定位、布局layout,确定在页面上的位置。
->遍历渲染树，绘制每一个节点

webkit:

当解析html的时候，会把新来的元素插入dom tree里面，同时去查找css
然后把对应的样式规则应用到元素上，查找样式表是按照从右到左的顺序去匹配的。

tips:(防止二次渲染)

• 定义的样式规则条数越少越好，删除css文件中不必要的样式定义
• 避免css表达式，因为所有事件都会引发表达式的重新计算，如resize事件
• 指定图片的尺寸，可以避免尺寸改变导致的页面结构效果的变化，所以对加快页面渲染速度有益

• 指定img、table尺寸，如果浏览器可以立即决定图像或tables的大小，那么它就可以马上显示页面而不要重新做一些布局安排的工作，这不仅加快了页面的显示，也预防了页面完成加载后布局的一些不当的改变

   image使用height和width 
  table使用table-layout: fixed并使用col和colgroup标签指定columns的width 

• css放head,script放后面。把CSS放到前面可以保证先渲染的一部分元素样式是正确的，而把CSS放到后面会引起大量的浏览器重绘。把script标签放到尾部，因为浏览器会预处理js文件，把js文件放到头部会延迟页面元素的渲染，让用户觉得页面打开变慢了。

实例

• 用户输入网址（假设是个html页面，并且是第一次访问），浏览器向服务器发出请求，服务器返回html文件； 
• 浏览器开始载入html代码，发现＜head＞标签内有一个＜link＞标签引用外部CSS文件； 
• 浏览器又发出CSS文件的请求，服务器返回这个CSS文件；如果此时有script

【备注】立即执行式的，并不等页面渲染完。只有用到 onload 或者  监听
*document.addEventListener("DOMContentLoaded", handler, false)

才会等到页面完成时运行 function

且有修改dom操作，会因为找不到dom报错并跳过。
此时还在head部分，浏览器只会读取,生成树，并不渲染。

• 当第一次读到body部分时，开始渲染，每个标签边读边查找css样式表渲染

• 浏览器在代码中发现一个＜img＞标签引用了一张图片，向服务器发出请求。此时浏览器不会等到图片下载完，而是继续渲染后面的代码； 

• 服务器返回图片文件，由于图片占用了一定面积，影响了后面段落的排布，因此浏览器需要回过头来重新渲染这部分代码； 
• 浏览器又发现了一个包含一行Javascript代码的＜script＞标签，立刻执行，它命令浏览器隐藏掉代码中的某个＜div＞ （style.display=”none”），浏览器不得不重新渲染这部分代码； 
  所以少用inline script呐，浏览器会假设它会更改页面布局，会重绘的
• 终于等到了＜/html＞的到来...
• 如果此时js让浏览器换了一下＜link＞标签的CSS路径，会重新请求css然后重新渲染页面的......