浏览器页面加载过程

Posted 2020-12-17 gxw123

1.从输入url到得到html的详细过程

• 浏览器根据DNS服务器得到域名的IP地址
• 向这个IP的机器发送http请求
• 服务器收到、处理并返回请求
• 浏览器得到返回的内容

对于第一点，首先要明白几点：

加载资源的形式
1.输入url（或跳转页面）加载html，比如输入网址跳转至页面
2.加载html的静态资源，比如<script>、<img>、<link>等加载资源
加载一个资源的过程
1.浏览器根据DNS服务器得到域名的IP地址
2.向这个IP的机器发送http(s)请求
3.服务器收到，处理并返回http请求，比如返回图片或html代码等
4.浏览器得到返回内容
浏览器渲染页面的过程
1.根据HTML结构生产DOM Tree（只是一个DOM结构，没有样式）
2.根据CSS生产CSSOM(CSS Object model)（只是一个样式结构）
3.将DOM和CSSOM整合成RenderTree(渲染树)
4.根据RenderTree开始渲染和展示
5.遇到<script>时，会执行并阻塞渲染(遇到JS会阻塞渲染，因为JS有权利改变DOM结构，所以得规定先后顺序)
思考：为何要把css放在head中？

如果不把css放在head中，会导致多次渲染，严重影响用户体验同时会损耗性能。CSS一定要放在head中，等body里面的东西出来前就要加载完.
https://www.cnblogs.com/zhaowy/p/8435751.html