html渲染过程

用户输入url地址，浏览器依据域名寻觅IP地址
浏览器向服务器发送http恳求，假如服务器段回来以301之类的重定向，浏览器依据相应头中的location再次发送恳求
服务器端承受恳求，处理恳求生成html代码，回来给浏览器，这时的html页面代码可能是通过紧缩的
浏览器接收服务器呼应成果，假如有紧缩则首先进行解压处理，紧接着即是页面解析烘托
　　解析烘托该进程首要分为以下进程：

解析HTML
构建DOM树
DOM树与CSS款式进行附着结构出现树
规划
制作
解析与构建DOM树

　　前两步咱们放在一同评论，浏览器的实际作业也是将他们放在一同进行的。关于HTML浏览器有专门的html解析器来解析HTML，并在解析的进程中构建DOM树。在这里咱们评论两种DOM元素的解析，即款式（link、style）与脚本文件（script）。因为浏览器选用自上而下的方法解析，在遇到这两种元素时都会堵塞浏览器的解析，

直到外部资本加载并解析或履行结束后才会继续向下解析html。关于款式与脚本的先后顺序相同也会影响到浏览器的解析进程，究其原因首要在于：script脚本履行进程中可能会修改html界面（如document.write函数）；DOM节点的CSS款式会影响js的履行成果。在我的测验中得到以下四条结论：

　1）外部款式会堵塞后续脚本履行，直到外部款式加载并解析结束。

 

　　2）外部款式不会堵塞后续外部脚本的加载，但会堵塞外部脚本的履行。

 主页代码
 外部脚本
　　从瀑布图中咱们能够看到，外部脚本与外部款式是并行加载，但直到外部款式加载结束，外部脚本才开端履行

　　3）假如后续外部脚本含有async特点（IE下为defer），则外部款式不会堵塞该脚本的加载与履行

 
　　从瀑布图中能够看到外部脚本的加载与履行并不受link的堵塞

　　4）关于动态创立的link标签不会堵塞这以后动态创立的script的加载与履行，

不论script标签是否具有async特点，但关于别的非动态创立的script，以上三条结论仍适用

HTML解析结束后，开端构建出现树RenderTree，这一步的首要作业在于将css款式应用到DOM节点上，WebKit内核将这一进程称为附着，别的浏览器有纷歧样的概念。对前端工程师而言这个进程会涉及到CSS层叠疑问。

　　首先将依据款式主要性排序，由低到高依次为：

浏览器声明
用户一般声明
作者一般声明
作者主要声明
用户主要声明
　　关于同一主要等级，则是依据CSS选择符的特指度来断定优先级；一条款式声明的特指度由以下四个有些决议：S-I-C-E

声明来自内联的style特点则 S+1；
声明中含有id特点则 I+1；
声明中含有类、伪类、特点选择器则 C+1；
生命中含有元素、伪元素选择器则 E+1；
　　特指度的对比类似于两个字符串之间对比巨细。

　　出现树的每一个节点即为与其相对应的DOM节点的CSS框，框的类型与DOM节点的display特点有关，block元素生成block框，inline元素生成inline框。每一个出现树节点都有与之相对应的DOM节点，但DOM节点纷歧定有与之相对应的出现树节点，比方display特点为none的DOM节点，并且出现树节点在出现树中的方位与他们在DOM树中的方位纷歧定相同，比方float与肯定定位元素。