从输入URL到页面渲染完成

本文详细介绍了从输入URL到页面渲染完成的过程,涉及网络通信的TCP/IP协议、DNS解析、HTTP请求与响应,以及服务器响应和浏览器的渲染机制。内容涵盖了TCP的三次握手、IP协议查询MAC地址、HTTP请求消息的结构、服务器响应状态码,以及浏览器解析DOM树、CSSOM和生成Render Tree,最后进行布局与绘制。
摘要由CSDN通过智能技术生成

​​​​​​​​​​​​​​从输入URL到页面渲染完成,这个过程可大致分为两个阶段:网络通信和页面渲染
网络通信:
互联网内各网络间设备的通信遵循TCP/IP协议,利用TCP/IP协议进行网络通信时,会通过分层与对方通信。数据传输的过程是:由应用层产生数据后,经过传输层的分段处理(添加TCP或UDP包头)、网络(添加IP地址信息)、数据链路层(封装成MAC帧)、物理层传输电信号。
在这里插入图片描述
1.输入url地址
在这里插入图片描述
2.浏览器根据域名查找IP地址
在这里插入图片描述
在浏览器中输入域名 www.360.com,首先查找浏览器本身的域名缓存, 如果缓存了相应的IP地址,直接从缓存中获取。如果没有缓存,然后找window系统自身的缓存,如果找到了相应的IP就返回,如果也没有找到,之后去查找window系统文件的hosts文件,如果查询到就会就返回相应的IP,如果依然未查到,就会去服务器查询,这样一个查询的过程是递归查询。
本地未找到,就去本地配置的服务器去询问,如果本地配置的服务器保存了相应的域名映射,就直接返回,如果没有缓存相域名的IP,那么它就会去ISP运营商服务器去查找,如果也没有,运营商的服务器会返回给本地服务器一个根域的服务器地址。然后去根服务器发起访问,进行递归查询,如果也没有,就会去顶级域名的服务器去查找.com,然后再查找360.com的二级域名的服务器,以此类推就能找到相应的IP。如果仍然未找到,代表域名是错误的。
注:DNS是应用层协议
3.浏览器发送HTTP请求
HTTP是超文本传输协议,包括HTTP请求消息和HTTP响应消息
HTTP请求消息包括请求起始行、请求头和请求主体
请求起始行(Start Line)
包括请求方法、请求URI(请求地址报过URL和URN)、协议版本
请求头(header)
<1>请求消息的专用头:
Host:easybug.org 告诉服务器请求的是哪一个虚拟机
Accept:text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,/;q=0.8 告诉服务器自己可以接收响应内容类型
Origin: http://easybug.org 来源,告诉服务器当前请求来源于哪个域名
Referer: http://easybug.org/Home/Index 引用页 告诉服务器当前请求来源于哪个域名
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.132 Safari/537.36 客户端在告诉服务器自己的类型
Accept-Encoding: gzip, deflate 客户端在告诉服务器自己在接收的响应数据编码类型
Accept-Language: zh-CN,zh;q=0.9 告诉服务器自己接收的自然语言
<2>请求/响应消息通用头
Connection:keep-alive 告诉对方启用持久链接
Cache-Control:no-cache 告诉对方如何缓存当前消息主体中的内容
Pragma:no-cache HTTP/1.0版本的Cache-Control
Date: Wed, 28 Nov 2018 03:33:52 GMT 消息创建的时间
<3>请求主体描述头
Content-Length:54 描述请求主体的长度
Content-Type: 描述请求主体的内容类型,可以是一下几种:
application/x-www-form-urlencoded请求主体是经过编码后的表单数据
或text/plain请求数据是普通文本未经编码,有的服务器直接拒绝接收!
或multipart/form-data 表单中包含上传的文件数据
请求主体(Body)
客户端想给服务器传递的数据
注:HTTP是应用层协议
4.TC

浏览器从输入URL到显示页面的过程大致可以分为以下几个步骤: 1. DNS解析:浏览器首先会解析URL中的域名部分,将其转换为对应的IP地址。它会先检查浏览器缓存中是否存在该域名的解析结果,如果没有,就会向本地操作系统或者网络中的DNS服务器发送查询请求,获取对应的IP地址。 2. 建立TCP连接:一旦获取到目标服务器IP地址,浏览器会通过TCP/IP协议与服务器建立连接。这个过程中,浏览器会与服务器进行三次握手,确保双方能够正常通信。 3. 发送HTTP请求:建立TCP连接后,浏览器会发送HTTP请求给服务器。请求中包含了请求行(包括请求方法、URL路径和HTTP协议版本)、请求头(包含一些附加信息,如User-Agent、Cookie等)以及请求体(一般用于POST请求,传递数据)。 4. 服务器处理请求:服务器接收到浏览器发送的HTTP请求后,会根据请求的内容进行处理。处理过程可能包括查询数据库、读取文件等一系列操作,最终生成需要返回给浏览器的数据。 5. 接收响应并渲染页面服务器处理完请求后,会将生成的响应数据封装成HTTP响应,并发送给浏览器。浏览器接收到响应后,会根据响应头中的信息判断响应的内容类型,然后对内容进行解析和渲染。对于HTML页面,浏览器会解析HTML结构、加载CSS和JavaScript文件,并根据这些文件渲染出最终的页面。 6. 关闭TCP连接:页面渲染完毕后,浏览器会关闭与服务器TCP连接。如果页面中存在其他资源(如图片、样式表、脚本等),浏览器会继续发送相应的HTTP请求获取这些资源,并进行相应的渲染。 这就是浏览器从输入URL到显示页面的基本过程。其中涉及到的具体细节和技术可以更加深入和复杂,但以上步骤概括了整个过程。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值