一次完整的HTTP服务过程

题意分析:
前端角度   业务范围
当我们在web浏览器的地址栏中输入 www.bukaedu.com , 具体发生了什么?

思路(场景)

1. 对 www.bukaedu.com 这个网址进行DNS域名解析,得到对应的IP地址
2.根据这个IP地址找到对应的服务器,发起TCP三次握手
3.建立TCP连接后发起HTTP请求
4.服务器响应HTTP请求,浏览器得到HTML 代码
5.浏览器解析html代码,并请求HTML 代码中的资源(如js,css,图片等)(先得到html代码,才能去找这些资源)
6.浏览器对页面进行渲染呈现给用户
7.服务器关闭 关闭TCP连接

1.DNS怎么找到域名的?
DNS域名解析采用的是递归查询的方式,过程是先去找DNS缓存->缓存找不到就去找根域名服务器->根域名又会去找下一级,这样递归查找之后,找到了,给我们的WEB 浏览器

2.为什么HTTP协议要基于TCP来实现?
物理层(网线)->IP->TCP->HTTP
TCP 是一个端到端的可靠的面向连接的协议(底层),HTTP(上层)基于传输层TCP协议不用担心数据传输的各种问题(当发生错误时,会重传)

3.最后一步浏览器是如何对页面进行渲染的?
a)解析html文件构成DOM树
b)解析CSS文件构成渲染树
c)边解析边渲染
d)JS单线程运行,JS有可能修改DOM结构,意味着JS 执行完成前,后续所有资源的下载是没有必要的,所以JS是单线程,会阻塞后续资源下载

各个步骤的具体细节

DNS解析(域名解析服务器)
a)首先会搜索浏览器自身的DNS缓存(缓存时间比较短,大概只有1分钟,只能容纳1000条缓存)
b)如果浏览器自身的缓存里面没有找到,那么浏览器会搜索系统自身的DNS缓存
c)如果还没有找到,那么尝试从hosts文件里面去找(可干预)
d)在前面三个过程都没获取到的情况下,就递归的去域名服务器去查找

DNS优化两个方面:DNS缓存 , DNS负载均衡

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

发起HTTP请求(建立连接后)
HTTP请求报文由三部分组成:请求行,请求头,空行/请求正文

请求行:用于描述客户端的请求方式(GET/POST等) , 请求的资源名称(URL)以及使用的HTTP协议的版本号.
请求头:用于描述客户端请求哪台主机及其端口,以及客户端的一些环境信息等
空行:\r\n  (POST请求时有)
请求正文:当使用POST等方法时,通常需要客户端向服务器传递数据.这些数据就储存在请求正文中(GET方式是保存在url地址后面 , 不会放到这里)

起始行中的请求方法有哪些?
GET: 完整请求一个资源(常用)
HEAD:仅请求响应首部
POST:提交表单(常用)
PUT:(webdav)上传文件(但是浏览器不支持该方法)
DELETE:(webdav)删除
OPTIONS:返回请求的资源所支持的方法的方法
TRACE:追求一个资源请求中间经过的代理(该方法不能由浏览器发出)

什么是 URL  URI   URN

统一资源标识符
统一资源定位符
统一资源名称

URL和URN 都属于URI

服务器响应HTTP 请求,浏览器得到HTML 代码
HTTP 响应也由三部分组成: 状态行 , 响应头 ,  空格 , 消息体
状态行包括:协议版本 , 状态码 , 状态码描述

状态码:用于表示服务器对请求的处理结果
1xx:指示信息 --- 表示请求已经接受 , 继续处理
2xx:成功 --- 表示请求已经被成功接收 , 理解 , 接受
3xx:重定向 ---  要完成请求必须进行进一步的*作
4xx:客户端错误 --- 请求有语法错误或请求无法实现
5xx:服务器段错误 --- 服务器未能实现合法的请求

常见的状态码:
200 没问题
302 要你去找别人
304 要你去拿缓存
307 要你去拿缓存
403 有这个资源 , 但是没有访问权限
404 服务器没有这个资源
500 服务器这边有问题

HTML渲染过程:
index.html ---> 解析html , 下载js  css  图片 ---> html生成DOM树 , CSS生成渲染树 ---> 生成html渲染树 ---> 计算元素位置和尺寸(用户*作会触发, 重排/回流) ---> 渲染 , 呈现界面(重绘)