浏览器页面加载过程
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