浏览器渲染基本流程

浏览器渲染基本流程：
一、
网络字节流---->html格式—>(用栈匹配的方式) 生成节点对象 (用于编程操作，有自己的属性与方法)，即文本对象模型DOM。
css文件也用同样的方式得到css的对象模型CSSOM。DOM和CSSOM的逻辑构建是相互独立的（但生成过程不一定独立）。

二、
DOM+COOSM===》Render Tree。
渲染树是二者的结合，某些不会呈现在页面上的标签，如<link>,<script>,<meta>，以及display:none的节点就不会出现在Render Tree上(v-if和v-show的区别)*

三、布局
用盒模型确定每个节点的位置、大小，在页面上进行排列与嵌套，通过控制像素来操作页面的绘制。

---

对于.css, .js ,.html的解析顺序也有讲究：（性能优化、vue生命周期）*
在从上往下解析html文件并构建DOM时，若遇到请求css文件的标签，会异步请求该文件、并行构建CSSOM，即CSSOM不阻碍DOM的形成(这也就是为什么有时候网络延迟大会出现样式重绘的效果)（同样图片音频等资源文件都是异步的）。

（可以看出html是可以部分解析的，但是css不行，它必须作为一个整体，即一个文件的CSSOM的形成是原子操作）

接着向下，如果遇到了请求js的标签(<script>)则会立刻中断解析html转而去加载和执行js代码，所以想要首屏渲染快以及让js拿到要控制的节点，应该把script放在文件下方或者使用defer/async属性，不然如果外部脚本加载时间长，就会造成网页长时间未响应。同时应该把css放在头部：外链css无论放在html的任何位置都不会影响html的解析，但是会影响html的渲染。如果将css放在尾部，html的解析不受影响，浏览器会在 css 样式加载解析完后，重新计算样式绘制，会造成回流重绘、页面闪动等现象，如果将css放在头部，css的下载解析时可以和html的解析并行，并且会等待css下载解析完毕后开始绘制。