在浏览器中输入URL并回车后都发生了什么?
1、浏览器对拿到的URL进行识别,抽取出域名字段
2、DNS解析,查询浏览器缓存(2-30分钟)---> 检查系统缓存(hosts文件) ---> 检查路由器缓存 ---> ISP DNS缓存 ---> 递归查询 根域名服务器到顶级域名服务器再到极限域名服务器
3、浏览器与网站建立TCP连接
第一次握手:客户端发送请求(SYN=1),等待确认
第二次握手:服务器收到请求并确认,回复指令(SYN=1, ACK=1)
第三次握手:客户算收到回复并返回确认(ACK=1)
4、传输数据
5、浏览器渲染页面
a、浏览器解析html源码 创建dom树
b、解析css代码,计算最终样式数据,形成css对象模型cssom
c、利用dom与cssom构建渲染树
d、根据渲染树绘制页面
浏览器解析文档,当遇到<script>
标签的时候,会立即解析脚本,停止解析文档(因为JS可能会改动DOM和CSS,所以继续解析会造成浪费)。
如果脚本是外部的,会等待脚本下载完毕,再继续解析文档。现在可以在script标签上增加属性 defer
或者async
。
脚本解析会将脚本中改变DOM和CSS的地方分别解析出来,追加到DOM Tree和Style Rules上。