浏览器从输入URL到页面展现都经过了什么

在浏览器输入URL地址
浏览器查看缓存,如果请求资源在缓存中且资源为最新,跳转到转码步骤
1. 如果浏览器未缓存,发出新请求;
2. 如果已缓存,且资源不为最新,则向服务器进行验证;
3. 检验信息是否为最新,有两个HTTP头进行控制Expires和Cache-control:
  1. http1.0提供Expires,值为一个绝对时间表示缓存最新日期
  2. http1.1增加了Cache-control:max-age=,值为以秒为单位的最大最新时间
浏览器解析URL获取协议,主机,端口,PATH
浏览器组装一个HTTP(GET)请求报文
浏览器获取主机ip地址,过程如下
1. 浏览器缓存
2. 本机缓存
3. hosts文件
4. 路由器缓存
5. ISP DNS缓存
6. DNS递归查询(可能存在负载均衡导致每次IP不一样)
打开一个socket与目标IP地址,端口建立TCP链接,三次握手如下
1. 客户端发送一个TCP的SYN=1,Seq=X的包到服务器端口
2. 服务器发回SYN=1,ACK=X+1,Seq=Y的响应包
3. 客户端发送ACk=Y+1,Seq=z
TCP链接建立后发送HTTP请求
服务器接收请求并解析,将请求转发到服务程序,如虚拟主机实用HTTP Host头部判断请求的服务程序
服务器检查HTTP请求头是否包含缓存验证信息(如果缓存验证信息为最新,返回304等对应状态码)
处理程序读取完整请求并准备HTTP响应,可能需要查询数据库等操作
服务器将响应报文通过TCP连接发送回浏览器
浏览器接收HTTP响应,然后根据情况选择关闭TCP连接或者保留重用,关闭TCP链接的四次握手如下
1. 主送方发送Fin=1,Ack=z,Seq=x报文
2. 被送方发送ACK=x+1,Seq=z报文
3. 被送方发送Fin=1,Ack=x,Seq=y报文
4. 主送方发送ACk=y,Seq=x报文
浏览器检查响应状态码:是否为1xx,3xx,4xx,5xx,这些情况与2xx不同
如果资源可缓存,进行缓存
对响应进行解码(例如zip压缩)
根据资源类型决定如何处理(假设资源为HTML文档)
解析HTML文档,构建DOM树,下载资源,构造CSSOM树,执行js脚本,这些操作没有严格的先后顺序,
构建DOM树
1. Tokenizing:根据HTML规范将字符解析为标记
2. Lexing:词法分析将标记转换为对象并定义属性和规则
3. DOM construction:根据HTML标记关系将对象组成DOM树
解析过程中遇到图片,样式表,js文件,启动下载
构建CSSOM树
1. Tokenizing 字符流转换为标记流
2. Node:根据标记创建节点
3. CSSOM:节点创建CSSOM树
根据DOM树和CSSOM树构建渲染树
1. 从DOM树的根节点遍历所有可见节点,不可见节点包括:1)script,meta这样本身不可见的标签,2)被css隐藏的节点(如:display:none;)
2. 对每一个可见节点,找到恰当的CSSOM规则并应用
3. 发布可视节点的内容和计算样式
js解析如下
1. 浏览器创建Document对象并解析HTML,将解析到的元素和文本节点添加到文档中,此时document.readystate为loading
2. HTMl解析器遇到没有async和defer的script时,将他们添加到文档中,然后执行行内或外部脚本.这些脚本会同步执行,并且在脚本下载和执行时解析器会暂停,这样就可以用document.write()将文本插入到输入流中,同步脚本经常简单定义函数和注册事件处理程序,他们可以遍历和操作script和他们之前的文档内容
3. 当解析器遇到设置了async属性的script时,开始下载脚本并继续解析文档,脚本会在它下载完成后尽快执行,但是解析器不会停下等他下载,异步脚本进制实用document.write(),他们可以访问自己script和之前的文档元素
4. 当文档完成解析,document.readystate变成interactive
5. 所有defer脚本会按照在文档出现的顺序执行,延迟脚本能访问完整文档树,禁止使用document.write()
6. 浏览器在document对象上触发DOMcontentloaded事件
7. 此时文档完全解析完成,浏览器可能还在等待如图片等内容加载,等这些内容完成载入并且所有异步脚本完成载入和执行,document.readystate变为complete.window触发load事件
显示页面(HTML解析过程中会逐步显示页面)
HTTP request报文结构是怎样的

rfc2616中进行了定义
首行是Request-Line:请求方法,请求URL,协议版本,CRLF
首行之后是若干行请求头,包括general-header,request-header或者entity-header,每个一行以CRLF结束
请求头和消息实体之间有一个CRLF分隔
根据实际请求需要可能包含一个消息实体一个请求报文例子如下

GET /Protocols/rfc2616/rfc2616-sec5.html HTTP/1.1

Host:www.w3.org

Connection:keep-alive

Cache-Control:max-age=0

Accept:text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,/;q=0.8

User-Agent:Mozilla/5.0(windows NT 6.1;WOW64)AppleWebKit/537.36(KHTML,like Gecko) Chrome/35.0.1916.153 Safari/53

Referer:https://www.google.com.hk/

Accept-Language:zh-CN,zh;q=0.8,en,q=0.6

Cookie:authorstyle=yes

If-None-Match:”2cc8-3e3073913b100”

If-Modified-Since:wed,01 Sep 2004 13:24:52 GMT

name = qiu && age = 25

HTTP response报文结构是怎样的

rfc2616中定义内容

首行是状态行包括:HTTP版本,状态码,状态描述,后面跟一个CRLF
首行之后是若干行响应头,包括:通用头部,响应头部,实体头部
响应头部和响应实体之间用一个CRLF空行分隔
最后是一个可能的消息实体响应报文例子如下

HTTP/1.1 200 OK

Date:Tue,08 Jul 2014 05:28:43 GMT

server:Apache/2

Last-Modified:wed,01 Seq 2004 13:24:52 GMT

ETag :”40d7-3e3073913b100”

Accept-Ranges:bytes

Content-Length:16599

Cache-Control:max-age=21600

Expires:Tue,08 Jul 2014 11:28:43 GMT

P3P:policyref=”http://www.w3.org/2001/05/P3P/p3p.xml”

Content-Type:text/html;charset=iso-8859-1

{“name”:”qiu”,”age”:25}

浏览器从输入URL到页面展现都经过了什么

HTTP request报文结构是怎样的

HTTP response报文结构是怎样的