web页面渲染解析原理

浏览器渲染页面的原理

1. 用户输入网址（假设是个html页面，并且是第一次访问），浏览器向服务器发出请求，服务器返回html文件
2. 然后浏览器从head标签开始逐行解析HTML代码，遇到link标签又会向服务器请求加载css文件，不过这个过程是异步的，有多个css文件，会多个同时加载。
3. 继续往后如果遇到script标签或者js文件就会立即执行它，而且js文件的加载是同步的。
4. 到了body标签就开始渲染页面了，按照从头到尾的顺序依次渲染dom元素，如果遇到img标签会异步向服务器发送请求加载图片文件，执行此过程时浏览器会继续渲染页面，因为加载图片文件是异步的。
5. 如果遇到了dom节点的变化，元素尺寸变化，浏览器不得不回头重新渲染这部分代码。
6. 不同于css文件，js是阻塞式的加载，当浏览器在执行js代码时，不会做其他的事情。只有js代码执行后，才会继续渲染页面。所以应该把js放到页面的底部。

 影响页面渲染速度主要有：reflow(回流)和repaint(重绘)。其中回流是导致DOM脚本执行低效的关键因素之一。
 
 1.reflow(回流) 
    当浏览器发现页面某个部分发生了变化影响了布局，需要倒回去重新渲染， 该过程称为reflow（回流）。
    
 2.repaint(重绘)
    如果只是改变某个元素的背景色、文 字颜色、边框颜色等等不影响它周围或内部布局的属性，将只会引起浏览器 repaint（重绘）。

js代码的编译与执行顺序

• js是按照代码块来进行编译和执行的，代码块间相互独立，但变量和方法共享。
• 一个script标签就是一个代码块，一个代码块中运行报错当前代码块后面的语句不会执行但是不影响下一个代码块的执行，这就是代码块间的独立性，而一个代码块中能调用另一个代码块中的变量，则是块间共享性。
• 整个js代码执行过程是这样的：

1.读入第一个代码块。
2.对代码做语法分析，如果有错报语法错误，并停止解析当前代码块，开始读取下一个代码块。
3.若语法分析没问题，进行“预编译处理”处理，将变量和函数的声明提前，但变量并没有初始化，值为undefined。
如：alert(a); var a = 1;相当于：var a; alert(a); a=1;
4.预编译之后，才开始正式执行语句，如果某个语句有错，当前代码块中后面的语句不会执行，并且开始读取下一个代码块。
5.如果当前代码块完全正确，代码执行完毕后，开始读取下一个代码块。