浏览器的解析页面的原理

浏览器的解析页面的原理

第一步:浏览器向服务器发起请求，服务器接受请求后返回请求的页面文档

第二步：浏览器接收文档，开始从头解析（解析HTML文件）。

第三步：解析文档生成DOM，如果有CSS文件则会生成CSSDOM（加载外部脚本和样式表文件）

第四步：解析并执行脚本代码

第五步：解析完成文档后生成DOM树（触发DOMContentLoaded)

第六步：加载图片等外部文件

第六步：浏览器根据DOM树的内容计算出各个节点的位置和大小，绘制在浏览器上（页面加载完成，触发oad）

当从dom从上到下解析时，遇到script标签会停止解析，转而去解析script脚本，如果是内联的脚本，浏览器会先去执行这段内联脚本。如果是外链的，那会会先加载脚本js文件，后执行js文件。在处理完js脚本后，浏览器会继续解析HTML文档。

同样，Javascript执行也会收到标签CSS样式文件的影响。如果在标签前面有CSS样式文件，需css样式文件解析并加载完后才执行脚本，因为javascript可以查询对象的样式。

问题：为什么CSS文件放在头部，将JS文件放到尾部
因为浏览器生成DOM树时是一行一行读HTML代码的，script标签放在最后面就不会影响前面的页面的渲染。

既然DOM树完成生成好后才能渲染出来，浏览器又必须读完全部HTML才能生成完成DOM树，script标签不放在body底部是不是也一样？

现代浏览器为了更好用户体验，渲染引擎将尝试尽快在屏幕是显示的内容。它不会等到所有的HTML解析之前开始构建和布局渲染树。部分的内容将被解析并显示。也就是说，浏览器能够渲染不完成的dom树和cssom,尽快的减少白屏的时间。加入我们将js放在header,js阻塞解析dom和cssom,dom的内容会影响到First Paint，导致First Paint延后。所以说我们将js放在后米娜会减少First Paint的时间，但是不会减少DOMContentLoaded被触发的时间。