当我在浏览器地址栏里输入一个网址后所发生的故事

1、识别URL

包括协议、域名、路径、端口,具体构成为:

(1)请求行

(2)请求头

其中包含很多参数,自行构建请求头时,最常用的如下:

参数含义
Accept-Charset浏览器可以接受的字符编码集
Accept-Encoding指定浏览器可以支持的web服务器返回内容压缩编码类型
Accept-Language浏览器可接受的语言
Content-Length请求的内容长度
Content-Length请求的内容长度
Content-Type请求的与实体对应的MIME信息
Connection表示是否需要持久连接。(HTTP 1.1默认进行持久连接)
Host指定请求的服务器的域名和端口号

(3)请求体

最常见的有四种

参数含义
application/json传递普通的json数据
text/xml提交xml格式的文本数据
application/x-www-form-urlencoded浏览器表单提交数据
multipart/form-data提交多文件数据,文件之间通过–boundary分割

2、DNS解析

(1)查看本地hosts文件

先查看本地hosts文件中是否有该域名对应的IP地址,若没有,则询问本地域名服务器。

(2)询问本地域名服务器

本地服务器采用迭代查询。刚开始它先向一个根域名服务器查询。之后就根据返回要查询的域名服务器,进行查询,直到获取对应主机的IP地址。

(3)询问根域名服务器

根域名服务器告诉本地服务器,下一次应查询的顶级域名服务器的IP地址。

(4)询问顶级域名服务器

顶级域名服务器告诉本地服务器,下一次应查询的权限域名服务器的IP地址。

(5)询问权限域名服务器

权限域名服务器告诉本地服务器,所查询的主机的IP地址。

3、网络请求

(1)根据IP地址访问web服务器(三次握手)

建立连接、发送报文、获取服务器返回的报文。当数据传递完后,关闭连接(四次握手)

4、web服务器处理请求

(1)调用后端语言进程来处理 HTTP 请求

调用python、php、node.js等语言,来处理客户端的请求,涉及数据库的操作

(2)返回response

将数据封装好,返回给客户端

5、浏览器处理response

(1)response解析

接收到服务器返回的数据后,进行解析处理

  • HTML/SVG/XHTML,事实上,Webkit有三个C++的类对应这三类文档。解析这三种文件会产生一个DOM Tree。
  • CSS,解析CSS会产生CSS规则树。
  • Javascript,脚本,主要是通过DOM API和CSSOM API来操作DOM Tree和CSS Rule Tree

(2)dom渲染

解析完成后,浏览器引擎会通过DOM Tree 和 CSS Rule Tree 来构造 Rendering Tree。

注意:

  • Rendering Tree 渲染树并不等同于DOM树,因为一些像Header或display:none的东西就没必要放在渲染树中了。
  • CSS 的 Rule Tree主要是为了完成匹配并把CSS Rule附加上Rendering Tree上的每个Element。也就是DOM结点。也就是所谓的Frame。然后,计算每个Frame(也就是每个Element)的位置,这又叫layout和reflow过程。

(3)最后通过调用操作系统Native GUI的API绘制

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值