面试:浏览器从输入url到渲染页面,发生了什么

用户输入阶段
合成 URL:浏览区会判断用户输入是合法 URL,比如用户输入的是搜索的关键词,默认的搜索引擎会合成新的,如果符合url规则会根据url协议,在这段内容加上协议合成合法的url 
   
查找缓存
网络进程获取到 URL,先去本地缓存中查找是否有缓存资源,如果有则拦截请求,直接将缓存资源返回给浏览器进程;否则,进入网络请请求阶段;    
    
DNS 解析:
DNS 查找数据缓存服务中是否缓存过当前域名信息,有则直接返回;否则,会进行 DNS 解析返回域名对应的 IP 和端口号,如果没有指定端口号,http 默认 80 端口,https 默认 443。如果是 https 请求,还需要建立 TLS 连接;
    
建立 TCP 连接:
TCP 三次握手与服务器建立连接,然后进行数据的传输;(三次握手开喷)

发送 HTTP 请求:
浏览器首先会向服务器发送请求行,它包含了请求方法、请求 URI 和 HTTP 协议的版本;另外还会发送请求头,告诉服务器一些浏览器的相关信息,比如浏览器内核,请求域名;

服务器处理请求:
服务器首先返回响应行,包括协议版本和状态码,比如状态码 200 表示继续处理该请求;如果是 301,则表示重定向,服务器也会向浏览器发送响应头,包含了一些信息;

页面渲染:

查看响应头的信息,做不同的处理,比如重定向,存储cookie 看看content-type的值,根据不同的资源类型来用不同的解析方式

浏览器将获取的HTML文档解析成DOM树。
处理CSS标记,构成层叠样式表模型CSSOM(CSS Object Model)。
将DOM和CSSOM合并为渲染树(rendering tree),代表一系列将被渲染的对象。
渲染树的每个元素包含的内容都是计算过的,它被称之为布局layout。浏览器使用一种流式处理的方法,只需要一次绘制操作就可以布局所有的元素。
将渲染树的各个节点绘制到屏幕上,这一步被称为绘制painting。

断开 TCP 连接:

数据传输完成,正常情况下 TCP 将四次挥手断开连接。但是如果浏览器或者服务器在HTTP头部加上 Connection: keep-alive,TCP 就会一直保持连接。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值