输入一个url到显示页面经过哪些过程

输入一个url到显示页面经过哪些过程。

域名解析 --> 发起TCP的3次握手 --> 建立TCP连接后发起http请求 --> 服务器响应http请求,浏览器得到html代码 --> 浏览器解析html代码,并请求html代码中的资源(如js、css、图片等) --> 浏览器对页面进行渲染呈现给用户 --> 四次挥手结束

1.DNS域名解析--浏览器通过域名解析URL对应的IP地址

浏览器DNS缓存(缓存时间比较短,大概只有1分钟,且只能容纳1000条缓存)—>操作系统DNS缓存—>本地hosts文件(路径:C:\Windows\System32\drivers\etc,linux下路径:/etc/hosts)—>本地DNS服务器(一般是电信运营商提供的,UDP协议向DNS的53端口发起请求,这个请求是递归的请求,无找到发送迭代请求)—>根域名服务器DNS的IP地址(内置13台根域的DNS的IP地址)—>com域的IP地址—>域名的DNS地址—>本地DNS服务器(运营商的DNS服务器获取结果)—>Windows系统内核—>浏览器

备注:进行转发模式选择递归查询(DNS 服务器先问根域名服务器.com 域名服务器的 IP 地址,然后再问.baidu 域名服务器,依次类推)

2.TCP 三次握手

建立TCP连接—>网络层用到了IP协议(负责在网络层传输数据)—>用到RIP(先封装udp,在封装ip里,可看成是应用层)或者OSPF(封装在ip里,可看成是网络层)进行路由选择—>用ARP协议解析IP地址对应的MAC地址—>数据在数据链路层上进行传输

User-Agent(一般是指浏览器)会以一个随机端口(1024 < 端口 < 65535)向服务器的WEB程序(常用的有httpd,nginx等)80端口发起TCP的连接请求。这个连接请求(原始的http请求经过TCP/IP4层模型的层层封包)到达服务器端后(这中间通过各种路由设备,局域网内除外),进入到网卡,然后是进入到内核的TCP/IP协议栈(用于识别该连接请求,解封包,一层一层的剥开),还有可能要经过Netfilter防火墙(属于内核的模块)的过滤,最终到达WEB程序。
3.TCP/IP4层模型

3.1网络接口层
     物理层定义与传输媒体的接口有关的一些特性,即机械特性、电气特性、功能特性、过程特性,并需要完成并行传输和串行传输之间的转换。
     数据链路层向该层用户提供透明的和可靠的数据传输服务。  透明性是指该层上传输的数据的内容、格式及编码没有限制,也没有必要解释信息结构的意义;可靠性是指在传输过程中       将物理层提供的可能出错的物理连接改造成为逻辑上无差错的数据链路,其具体的方法有帧同步、差错控制、流量控制、链路管理。
     物理层中主要的宽带接入技术有xdsl、光纤同轴混合网(HFC)、FTTx技术
     数据链路层中的主要协议有点对点协议PPP,CSMA/CD协议,以太网802.3。
3.2网际层
     网际层向上值提供简单灵活的、无连接的、尽最大努力交付的数据报服务。网际层不提供服务质量的承诺,即所传输的分组可能出错、丢失、重复和失序,当然也不保证分组交付的         时限。
     网际层中主要协议有IP协议,地址解析协议ARP和逆地址解析协议RARP,网际控制报文协议ICMP。
     IP协议是网际层的核心,通过路由选择将下一跳IP封装后交给网络接口层。IP 数据报是无连接服务。
     ICMP是网际层的补充,可以回送报文。用来检测网络是否通畅(使用ping命令)。
     ARP是通过已知IP,寻找对于主机的MAC地址。
     RARP是通过过MAC地址确定IP地址。
3.3运输层
     运输层为应用进程之间 提供端到端的逻辑通信,并具有复用和分用的功能,即发送方不同的应用进程都可以使用听一个运输层协议传送数据;接收方的运输层在剥去报文的首部后能       够把这些数据正确交付到目的应用进程。运输层还将对报文进行差错控制,以提高可靠传输。
     运输层中主要协议有用户数据报协议UDP和传输控制协议TCP   
3.4应用层
     应用层为用户提供应用程序。
     应用层中主要协议有域名系统DNS,文件传输协议FTP,远程终端协议TELNET,超文本传输协议HTTP,简单邮件传送协议SMTP,邮件读取协议POP3和IMAP,动态主机配置协议       DHCP,简单网络管理协议SNMP。
     DNS:提供 域名解析服务,提供域名到IP地址之间的转换,使用端口53
     FTP:在异构网络中任意计算机之间传送文件,使用端口21
     TELNET:提供用户远程登录服务,使用端口23,使用明码传送,保密性差、简单方便
     HTTP:用于实现万维网上的各种链接,即万维网客户程序与万维网服务器之间的连接,使用端口80
     SMTP/POP3、IMAP:提供邮件的传输,用来控制信件的发送、中转 /从邮件服务器读取邮件。
     DHCP:为新加入网络的计算机自动分配IP地址。
     SNMP:管理互联网Internet上众多厂家生产的软硬件平台.

4.建立TCP连接后发起http请求

请求报文由请求行(request line)、请求头(header)、请求体组成。

4.1请求行包含请求方法、URL、协议版本

  • 请求方法包含 8 种:GET、POST、PUT、DELETE、PATCH、HEAD、OPTIONS、TRACE。
  • URL 即请求地址,由 <协议>://<主机>:<端口>/<路径>?<参数> 组成
  • 协议版本即 http 版本号
  • POST /chapter17/user.html HTTP/1.1

以上代码中“POST”代表请求方法,“/chapter17/user.html”表示 URL,“HTTP/1.1”代表协议和协议的版本。

4.2请求头包含请求的附加信息,由关键字/值对组成,每行一对,关键字和值用英文冒号“:”分隔。

请求头部通知服务器有关于客户端请求的信息。它包含许多有关的客户端环境和请求正文的有用信息。其中比如:Host,表示主机名,虚拟主机;Connection,HTTP/1.1 增加的,使用 keepalive,即持久连接,一个连接可以发多个请求;User-Agent,请求发出者,兼容性以及定制化需求。

4.3.请求体,可以承载多个请求参数的数据,包含回车符、换行符和请求数据,并不是所有请求都具有请求数据。

name=tom&password=1234&realName=tomson,承载着 name、password、realName 三个请求参数

5.服务器响应http请求,浏览器得到html代码

5.1服务器

 web server 产品有 apache、nginx、IIS 或 Lighttpd 

5.2MVC 后台处理阶段

MVC 是一个设计模式,将应用程序分成三个核心部件:模型(model)-- 视图(view)--控制器(controller),它们各自处理自己的任务,实现输入、处理和输出的分离。

5.3http 响应报文

(1) 响应行包含:协议版本,状态码,状态码描述

状态码规则如下:

  • 1xx:指示信息--表示请求已接收,继续处理。
  • 2xx:成功--表示请求已被成功接收、理解、接受。
  • 3xx:重定向--要完成请求必须进行更进一步的操作。
  • 4xx:客户端错误--请求有语法错误或请求无法实现。
  • 5xx:服务器端错误--服务器未能实现合法的请求。

(2) 响应头部包含响应报文的附加信息,由 名/值 对组成

(3) 响应主体包含回车符、换行符和响应返回数据,并不是所有响应报文都有响应数据

6.浏览器解析html代码,并请求html代码中的资源(如js、css、图片等)

 浏览器拿到index.html文件后,就开始解析其中的html代码,遇到js/css/image等静态资源时,就向服务器端去请求下载(会使用多线程下载,每个浏览器的线程数不一样),这个时候就用上keep-alive特性了,建立一次HTTP连接,可以请求多个资源,下载资源的顺序就是按照代码里的顺序。
浏览器在请求静态资源时(在未过期的情况下),向服务器端发起一个http请求(询问自从上一次修改时间到现在有没有对资源进行修改),如果服务器端返回304状态码(告诉浏览器服务器端没有修改),那么浏览器会直接读取本地的该资源的缓存文件。

拓展:HTTP1.0和HTTP1.1的区别

在HTTP1.0协议中,客户端与web服务器建立连接后,只能获得一个web资源。

HTTP1.1协议,允许客户端与web服务器建立连接后,在一个连接上获取多个web资源。

浏览器解析渲染页面分为一下五个步骤:

     根据 HTML 解析出 DOM 树

    根据 CSS 解析生成 CSS 规则树

    结合 DOM 树和 CSS 规则树,生成渲染树

   根据渲染树计算每一个节点的信息

   根据计算好的信息绘制页面

6.1.根据 HTML 解析 DOM 树

 

6.2.根据 CSS 解析生成 CSS 规则树

 

6.3 结合 DOM 树和 CSS 规则树,生成渲染树

 

6.4 根据渲染树计算每一个节点的信息(布局)

 

6.5根据计算好的信息绘制页面

  • 根据 HTML 的内容,将标签按照结构解析成为 DOM 树,DOM 树解析的过程是一个深度优先遍历。即先构建当前节点的所有子节点,再构建下一个兄弟节点。
  • 在读取 HTML 文档,构建 DOM 树的过程中,若遇到 script 标签,则 DOM 树的构建会暂停,直至脚本执行完毕。
  • 解析 CSS 规则树时 js 执行将暂停,直至 CSS 规则树就绪。
  • 浏览器在 CSS 规则树生成之前不会进行渲染。
  • DOM 树和 CSS 规则树全部准备好了以后,浏览器才会开始构建渲染树。
  • 精简 CSS 并可以加快 CSS 规则树的构建,从而加快页面相应速度。
  • 布局:通过渲染树中渲染对象的信息,计算出每一个渲染对象的位置和尺寸
  • 回流:在布局完成后,发现了某个部分发生了变化影响了布局,那就需要倒回去重新渲染。
  • 绘制阶段,系统会遍历呈现树,并调用呈现器的“paint”方法,将呈现器的内容显示在屏幕上。
  • 重绘:某个元素的背景颜色,文字颜色等,不影响元素周围或内部布局的属性,将只会引起浏览器的重绘。
  • 回流:某个元素的尺寸发生了变化,则需重新计算渲染树,重新渲染。

7.浏览器对页面进行渲染呈现给用户

浏览器利用自己内部的工作机制,把请求到的静态资源和html代码进行渲染,渲染之后呈现给用户。

8.tcp四次挥手结束

 

整个拓扑图:

 

 

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值