从URL输入到页面展示都发生了什么?
总的来说分为以下过程:
- DNS解析
- TCP三次握手
- 发送HTTP请求
- 服务器端处理请求并返回HTTP保文
- 浏览器渲染页面
- 断开连接:TCP的四次挥手
URL到底是什么?
URL(Uniform Resource Locator),统一资源定位符,用户定位互联网上资源,俗称网站。
语法规则:scheme://host.domain.port/path/filename
schme:定义因特尔互联网服务的类型。常见协议有 http,https,ftp,file。
host:定义域主机(http 默认主机是 www)
域名解析(DNS)
DNS协议提供通过域名查找IP地址,或逆向从IP地址反查域名的服务。DNS是一个网络服务器,我们的域名简单来说就是在DNS上记录一条信息记录。
如何通过域名去查询URL对应的IP呢?
浏览器缓存:浏览器会按照一定频率缓存DNS记录。
操作系统缓存:如果在浏览器缓存中没有找到,那就会去操作系统中找。
ISP的DNS服务器:ISP是互联网服务提供商(Internet Service Provider)的简称,ISP有专门的DNS服务器应对DNS的查询请求。
根服务器:如果ISP的DNS服务器还没找到,就会向根服务器发送请求,进行递归查询(DNS服务器先问根域名服务器 .com域名服务器 的IP地址,然后再问.baidu 域名服务器,依次类推)
TCP三次握手
在客户端发送请求之前,会发送TCP三次握手用以同步客户端和服务端的序列号和确认号,并交换TCP窗口大小信息。
第一次握手,由浏览器发送请求,告诉服务器我要发送请求了。
第二次握手,由服务器发起,告诉浏览器我准备接受了,你赶紧发吧。
第三次握手,由浏览器发送,告诉浏览器,我马上要发了,你准备接受吧。
为什么需要三次握手?
“为了防止已失效的连接请求报文突然又传送到了服务端,因而产生错误” -- 谢希人《计算机网络》
发送HTTP请求
TCP三次握手结束后,开始发送HTTP请求报文。
请求报文由 请求行(request line)、请求头(header)、请求体
请求行包含请求方法、URL、协议版本
请求方法包含8种:GET、POST、PUT、DELETE、TRACE、OPTIONS、HEAD、PATCH
URL:即请求地址,由 协议://主机:端口/路径?参数 组成。
协议版本即http版本号
POST /app/bscron/baseext.html?AppID=5211394&ajax=json&r=0.6853821113886356 HTTP/1.1
请求头包含请求的附加信息,由关键字、值对组成,每行一对,关键字和值用英文冒号:分割。
请求头部通知服务器有关客户端请求的信息。它包含许多有关的客户端环境和请求正文的有用信息。
Connection: keep-alive
Content-Length: 34
Accept: */*
Origin: http://app.huicui.me
X-Requested-With: XMLHttpRequest
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.110 Safari/537.36
Content-Type: application/x-www-form-urlencoded; charset=UTF-8
Referer: http://app.huicui.me/app/bscron/edit.html?AppID=5211394&id=100153
Accept-Encoding: gzip, deflate
Accept-Language: zh-CN,zh;q=0.9,en;q=0.8
Cookie: UM_distinctid=1676d855f-0d0045fe32f2c6-35617600-1fa400-1676264dd87274; PHPSESSID=pcvbojcnb7vdo9q9mhpab1; CNZZDATA1261434238=298008907-15435792-http%253A%252F%252Fapp.huicui.me%252F%7C4440878
请求体,可以承载多个请求参数的数据,包含回车符、换行符和请求数据,并不是所有请求都具有请求数据。
AppID=123&ajax=json
服务器处理请求并返回HTTP报文
服务器,每台服务器都会安装处理请求的应用-web serve。常见的web serve 产品有 apache,nginx, IIS, Lighttpd等。
http响应报文
响应报文由响应行(request line)、响应头部(header)、响应主体组成。
响应行包含:协议版本、状态码、状态码描述
状态码规则如下:
1xx:指示信息-表示请求已接收,继续处理
2xx:成功-表示请求已被成功接收、理解、接受。
3xx:重定向-要完成请求必须进行更进一步的操作。
4xx:客户端错误-请求有语法错误或请求无法实现。
5xx:服务器端错误-服务器未能实现合法的请求。
浏览器解析渲染页面
根据HTML解析出DOM树
根据CSS解析生成CSS规则树
结合DOM数和CSS规则树,生成渲染树
根据渲染树计算每一个节点的信息
根据计算好的信息绘制页面
断开连接
当数据传送完毕,需断开TCP连接,此时发起TCP四次挥手。
第一次挥手:由浏览器发起,发送给服务器,我请求报文发送完了,你准备关闭吧。
第二次挥手:由服务器发起,告诉浏览器,我请求报文接受完了,我准备关闭了,你也准备吧。
第三次挥手:由服务器发起,告诉浏览器,我响应报文发送完了,你准备关闭吧。
第四次挥手:有浏览器发起,告诉服务器,我响应报文接受完了,我准备关闭了,你也准备吧。
最新文章
- 一些ajax代码
- webform:分页组合查询
- class文件概述
- 【HDU】3480 Division
- JS根据服务器时间倒计时
- jquery的$.ajax async使用详解
- javascript 异常处理和事件处理
- NOIP201208同余方程
- syntactically incorrect() 404
- XPath 元素及属性查找
- hdu 3288 Resource Allocation
- 为何visua studio看不到C++项目的LOG?
- hql中in的用法
- hdu 3032 Nim or not Nim? (sg函数打表找规律)
- struts2.5入门
- Chrome自定义滚动条
- python中mysql数据库的操作-sqlalchemy
- Tomcat8源码笔记(四)Server和Service初始化
- MAVEN 引入外部JAR 包
- Angular2 获取当前点击的元素
热门文章
- js判断字符串是否包含某个字符串
- org.apache.hadoop.hbase.NotServingRegionException: Region is not online 错误
- I.MX6 AW-NB177NF WIFI 驱动移植问题
- POJ1113:Wall (凸包:求最小的多边形,到所有点的距离大于大于L)
- Excel: 使用Countif函数来去掉Excel中重复的数据
- 【转】构建Maven项目自动下载jar包
- 斯坦福CS231n—深度学习与计算机视觉----学习笔记 课时3
- $.ajax与$.post、$.get的一点区别
- SQLite3初级使用
- 51Nod 1019 逆序数 (归并排序)