页面输入URL

输入URL到页面展示，发生了什么？这个问题，看似简单，但是里面涉及很多内容，下面大致列出步骤

简化步骤

1. 输入网址

2. 缓存解析

3. 域名解析,解析获取相应的IP地址

https://baike.baidu.com/item/host/3758959?fr=aladdin#123

ssh协议头13666666666username@139.224.117.31ip -p 60222port

默认port
http –> 80
https –> 443

每个ip对应一个网址，之前网址更新，所有电脑更新，所以出现 DNS (域名系统)统一管理

4. 浏览器向服务器发起tcp连接，与浏览器建立tcp三次握手。

5. 握手成功后，浏览器向服务器发送http请求，请求数据包

6. 服务器处理收到的请求，将数据返回至浏览器

7. 浏览器收到HTTP响应

8. 读取页面内容，浏览器渲染，解析html源码

9. 生成Dom树、解析css样式、js交互

10. 客户端和服务器交互

11. ajax查询

其中，步骤2的具体过程是：

浏览器缓存：浏览器会记录DNS一段时间，因此，只是第一个地方解析DNS请求；
操作系统缓存：如果在浏览器缓存中不包含这个记录，则会使系统调用操作系统，获取操作系统的记录(保存最近的DNS查询缓存)；
路由器缓存：如果上述两个步骤均不能成功获取DNS记录，继续搜索路由器缓存；
ISP缓存：若上述均失败，继续向ISP搜索。

关于浏览器缓存：

st=>start: 用户输入url
a=>condition: 是否http协议？
b=>operation: 尝试解析寻找服务器

c=>condition: 强缓存(no)还是协商缓存(yes)？
d=>operation: DNS解析获得服务器IP
e=>operation: 从缓存获取from Cache

f=>operation: 携带浏览器Cookie,userAgent等信息对应IP服务器等通过GET请求发送报文
g=>operation: 服务器接收请求,进入web服务器java,php,node控制器,通过path寻找对应资源
h=>operation: 处理请求,与服务器最后修改对比
i=>condition: 是否有缓存
j=>condition: 判断cache-control是否过期
k=>condition: 判断没有Etag

x=>condition: 判断是否有Last-Modifie

l=>operation: 带If-None-Match向服务器请求
m=>operation: 带If-Modified-Since向服务器请求

y=>condition: 服务器决策200(yes) OR 304(no)

n=>operation: 返回200并下载HTML文档

o=>operation: 加载HTML内的资源文件css,img,js等

p=>operation: 浏览器渲染
q=>operation: 解析构建DOM树
r=>operation: 构建渲染树
s=>operation: 渲染树布局阶段
t=>operation: 渲染树绘制阶段
u=>operation: 用户界面呈现

u=>end

st->a
a(yes)->c
a(no)->b->u

c(yes)->d->f->g->h->i
c(no)->e->p->q->r->s->t->u

i(yes)->j
i(no)->n->o->p->q->r->s->t->u

j(yes)->k
j(no)->e->p->q->r->s->t->u

k(yes)->x(yes)->m->y
k(yes)->x(no)->n->o->p->q->r->s->t->u

k(no)->l->y(yes)->n->o->p->q->r->s->t->u
k(no)->l->y(no)->e->p->q->r->s->t->u