对浏览器渲染页面的过程研究

浏览器渲染页面的过程

DOM——> CSSOM ——> 渲染树 ——> 布局 ——> 绘制 ——> 渲染HTML+CSS+JS

浏览器渲染页面的过程就像盖房子的过程
一般先请求服务器得到html文件，html相当于网页的框架结构

一、DOM

1.字节：浏览器先得到是是字节内容的html文件，
2.字符：必须进行转化成浏览器识别的语言，于是将字节转化为字符（即程序员可看懂的代码），
3.Token：再转化为html标记语言（里面有很多小于号<和大于号>分贝识别不同的结构），于是浏览器就把字符串转化为Token，可简单把token理解为符号标签
4.节点：比如遇到第一个的时候转化为一个起始标签，遇到结尾的 时转化为结束标签，这样字符就被token化了，不同的字符就变成了有不同特殊意义东西了
5.DOM：token升华了，就把token变为了节点对象，在对象里面对象虽然只是用代码表示而已，但是对象是可以进行编程操作的，对象有自己的属性和方法，相当于将token盘活了，最后就是把这些节点对象都连在一起，形成文本对象模型，即DOM，DOM即浏览器自己的语言，每个节点对象相连，形成父子关系，这样后面对某个节点进行操作就友好了

二、CSSOM

从html转变为DOM正如把施工合同转变为迷你框架结构模型，在阅读施工合同的时候，也阅读了甲方的装饰要求，在制作迷你框架结构模型的同时也给模型装修。给墙面上色之类的，一般来说我们会把css样式作为外链加入到link标签里，css相当于网页装饰，浏览器在遇见DOM的时候就遇见link标签，然后向服务器发送请求，接着得到css文件，后面就像处理html文件类似，
字节——>字符——>Token——>节点——>这里节点会结合css对象模型，即CSSOM


迷你模型加装修，房子的模型完成了，有了模型房子就更容易搭建
虽然DOM和CSSOM都是独立的对象模型，但是一个网页的呈现离不开两者，一个网页就是由框架结构合样式结合起来，DOM和CSSOM的爱情结晶就叫渲染树，
页面就是要根据渲染树的结构样式来进行的，他们不是简单的结合就完事了，因为渲染树上的节点是页面能够呈现的内容，也就是一些html和某些样式不会被呈现出来，不会被呈现出来就不会被挂在渲染树上，比如mete和link就不会被当做标签呈现出来，设置了display：none；的样式也不会被呈现出来

三、布局与绘制

渲染树的任务就是匹配DOM和CSSOM的节点，并且捕获可见内容，虽然房子模型以及建好，但是并不表示就可立即建房子，还要安排布局（实际需要多少砖头，材料），在页面被构建完，是不能被立即渲染的，还需要布局，布局的意思是获取渲染树的结构，节点位置和大小，而布局是根据盒子模型来进行的，也就是每个元素都用一个盒子来表示，然后这些盒子在页面上进行排列和嵌套，在安排好房子的布局以后，就开建。


浏览器在布局以后其实就可安排页面绘制了，把渲染树以像素的形式渲染在页面，页面就可呈现

四、HTML+CSS+JS

根据以下代码来分析：

1.浏览器发送请求，服务器或者本地返回给浏览器HTML文件，第一步就是解析html文件，返回html文件并且构建DOM，在解析HTML文件的时候就遇到了link标签，浏览器就去请求CSS文件，请求CSS文件的同时继续解析HTML文件，此时遇到了script标签，浏览器就去请求JS文件，服务器或者本地就会陆续返回CSS和JS文件，实际操作中先得到CSS还是JS文件是要看具体情况的，

重点：
在这里，如果先返回并且解析完成JS文件也是会发生阻塞，我们不能先执行CSS文件，必须等到CSSOM构建完成了才能执行JS文件，因为渲染树是需要DOM和CSSOM构建完成了以后才能构建，而且JS是控制CSS样式的，所以这一步就是解析CSS文件并且构建CSSOM，

而如果标签里面是行内JS代码，而不是外部JS文件，也会发生阻塞，CSSOM的构建就是渲染中一个重要的阻塞因素，其实DOM也是会阻塞渲染过程，毕竟没有DOM，网页的框架都建造不起来 DOM有个好处就是部分解析，而CSSOM不能部分解析

DOM能部分解析，而CSSOM不能部分解析的原因：

例如:我们为body设置字体32px，还给里面的div设置字体为16px，如果CSSSOM只解析body，后面的div没有解析或者延迟解析，就会乱，所以CSSOM不能进行部分解析，不过在解析CSS文件并且构建CSSOM的时候，浏览器依旧可以下载并解析JS文件，等CSSOM构建完成以后就可以执行JS里的内容了

这里停止的原因是JS会阻塞HTML解析的，虽然看起来JS没有直接阻塞渲染的过程，但是有间接的影响，因为JS即可操作DOM，又可以操作CSSOM，如果不等JS下载解析完以后在构建DOM，那就有可能网页的有些内容出现了又消失，所以在解析HTML的时候，不管是行内JS代码还是外部JS文件，都会让HTML的解析停止下来，虽然DOM是可以部分解析的，但是对于这个网页来说相当于阻塞了第一次的渲染，JS完成之前什么内容都没有，在JS执行完了以后，下面的流程就正常了，也就是形成了渲染树（构建DOM后），进行布局，最后绘制

五、案例：

根据以下代码说出解析过程：

在请求得到HTML文件的时候，就开始解析HTML文件以构建DOM，解析遇到link标签，需要请求CSS文件，在解析CSS文件的同时，继续解析HTML，遇到了script标签，需要请求JS文件，不过这里因为设置了async，也就是异步执行JS，因此不会阻塞HTML的解析，这个时候遇见了img标签，因此需要下载图片资源，
但是图片不会阻塞HTML的解析，因此往下继续解析，直到把DOM构建完成，不过DOM构建完成也不能渲染页面，因为要等CSSOM，因此等待解析CSS文件，构建CSSOM，由于设置了async标签执行时间要看实际情况，假设我们就在这里执行了JS内容，接着就是构建渲染树，布局以及绘制了