从从输入URL到页面加载经历了什么(更新中)

1.DNS解析

网址转为IP地址,是一个递归查询的过程

  • url:统一资源定位符
  • scheme://host.domain:port/path/filename
  • DNS协议通过域名查找IP地址,域名解析就是在DNS记录一条信息记录
    dns.jpg

    DNS优化:DNS缓存(多级缓存)* 浏览器缓存,操作系统缓存,路由缓存。

2.TCP连接

TCP三次握手

客户端=>服务端 :我要发送请求了
服务端=>客户端:我准备好了,发吧
客户端=>服务端:(握手结束),我马上发了,准备接受
"三次握手"的目的:为了防止已失效的连接请求报文段突然又传送到了服务端,因而产生错误”。

3.发送http请求

请求报文由三部分组成:请求行,请求报头和请求正文

请求行:

请求方法、URL、协议版本
Method Request-URL HTTP-Version CRLF
eg: GET index.html HTTP/1.1

请求报头:

Accept:可以处理的文件类型
User-Agent:浏览器版本和操作系统
Accept-Encoding:可以处理的压缩,编码格式:gizp
Host:主机
Cache-Control
Connection:keep-alive长连接,一个连接可以发多个请求(HTTP/1.1增加的)
Cookie
//post请求时
Referer:访问的来源网址,跟踪来访者的来源和记录
content-length:

请求正文:

当使用POST, PUT等方法时,通常需要客户端向服务器传递数据。这些数据就储存在请求正文中

4.服务器处理请求并返回http报文

MVC 后台处理阶段
首先浏览器发送过来的请求先经过控制器,控制器进行逻辑处理和请求分发,接着会调用模型,这一阶段模型会获取 redis db 以及 MySQL 的数据,获取数据后将渲染好的页面,响应信息会以响应报文的形式返回给客户端,最后浏览器通过渲染引擎将网页呈现在用户面前。

响应报文由三部分组成:响应行,响应报头和响应报文

响应行:协议版本,状态码,状态码描述

响应报头

server:服务器版本
Date
Content-type:请求类型(text/html,image/gif)
Transfer-Encoding: chuncked : 分块传输
Connection:keep-alive
Cache-control: private //会使用缓存
Expires:缓存过期时间
Content-Encoding: gizp //图片资源一般不会压缩
X-UA-Compatible:浏览器兼容字段
Content-length
Keep-alive: timeout =5 , max =100
###响应报文
####HTML,css,js,图片

5.浏览器解析渲染页面

dom树

dom树解析:深度优先遍历,若遇到 script 标签,则 DOM 树的构建会暂停,直至脚本执行完毕。

css规则树

解析 CSS 规则树时 js 执行将暂停,直至 CSS 规则树就绪。
浏览器在 CSS 规则树生成之前不会进行渲染。

渲染树(重排和重绘)
根据渲染树计算每一个节点信息
绘制页面
js解析:一个主线程+一个任务队列

6.断开连接

TCP四次握手

  • 第一次挥手:由浏览器发起的,发送给服务器,我请求报文发送完了,你准备关闭吧
  • 第二次挥手:由服务器发起的,告诉浏览器,我请求报文接受完了,我准备关闭了,你也准备吧
  • 第三次挥手:由服务器发起,告诉浏览器,我响应报文发送完了,你准备关闭吧
  • 第四次挥手:由浏览器发起,告诉服务器,我响应报文接受完了,我准备关闭了,你也准备吧
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值