在浏览器的地址栏输入url后发生了什么
粗略的回答的话,就是浏览器向服务器发送该url,浏览器根据该url找到相应的资源,再把资源返回给浏览器,即使我们看到的页面内容
细致的回答的话,浏览器会在应用层利用DNS协议解析域名生成ip地址,利用http协议生成一个http请求然后传递给传输层,传输层将根据TCP协议将这个http请求报文进行分割并打上序号标记、端口号和三次握手标志后转发给网络层,网络层会利用ARP协议根据ip地址查到MAC地址,IP协议对数据封装MAC地址等信息,将打包好的数据包发送给链路层再封装然后发送出去,经过一系列转发,忽略路由、CDN的缓存策略,中转到达服务器后,服务器再按链路层,网路层,传输层,应用层的顺序,从下到上依次解封数据信息,找到资源后,同样分割,封装打包再传给客户端浏览器。
重新看待这个问题
浏览器渲染过程
解析HTML构建DOM树时,渲染引擎会先将HTML元素标签解析成
由多个DOM元素对象节点组成且具有节点父子关系的DOM树结构,
然后根据DOM树结构的每个节点顺序提取计算使用的CSS规则
并重新计算DOM树结构的样式数据,
生成一个带有样式描述的dom渲染树对象
DOM渲染树生成结束后进入渲染树的布局阶段
即根据每个渲染树节点在页面中的大小和位置,将节点固定到页面对应位置上
这个阶段主要是元素的布局属性(position,float,margin等属性)
即在浏览器中绘制页面上元素节点的位置
绘制阶段将渲染树节点的背景,颜色,文本等样式信息应用到每个节点上
这个阶段主要是元素的内部显示样式(color,background,text-shadow等属性)生效
最终完成整个DOM在页面上的绘制显示
不同浏览器内核渲染过程有区别
Webkit内核(google,safari)中HTML和css解析可以认为是并行的,生成的渲染对象被叫做渲染树(render tree)
Geoko内核(firefox)则是先解析html生成sink后再开始解析CSS,生成的渲染对象称为Frame树(Frame tree)
在渲染树生成阶段,DOM树中的结点会在CSS分析树中根据元素,类,id选择器来提取与之对应元素的一条或多条CSSRule,进行CSS规则的层叠和权重计算,
得到最终生成的样式CSSRule并添加到DOM渲染树上,
当每个Dom节点提取CSS样式完成时,用于页面布局和绘制的DOM渲染树便形成了
在一个已经形成的DOM渲染树中,节点的CSS规则可通过
document.defaultView.getComputedStyle(element,null)
方法获取
关于 TCP/IP 协议
1.不同的硬件、操作系统之间的通信,所有这一切都需要一种规则,这种规则即协议
2.与互联网相关联的协议集合起来就是TCP/IP
3.http协议是TCP/IP协议的一个子集
4.URI(统一资源标识符),用字符串标识某一互联网资源,而url表示资源的地点
分层管理
好处:局部改变设计,只需把变动的层替换,无需整体替换
应用层:应用服务间通信,如FTP,DNS服务,应用http协议
传输层:网络连接中两台计算机之间数据传输,应用TCP和UDP协议
网络层:处理网络上流动的数据包,应用IP协议
链路层:处理连接网络的硬件之间通信,包括操作系统,硬件的设备驱动,光纤等。
三次握手
目的在于确保准确无误的将数据送达目的地
TCP协议在封装数据时会封装SYN和ACK作为握手标识
发送端首先发送一个带SYN标识的数据包给对方,接收端收到后,回传一个带有SYN/ACK标识的数据包以示传达确认信息,最后,发送端再回传一个带ACK标识的数据包,代表‘握手’结束
若在握手过程中某个阶段莫名中断,TCP协议会再次以相同的顺序发送相同的数据包
HTTP协议
1.请求报文由请求方法、请求URI、协议版本、可选的请求首部字段和内容实体构成
2.响应报文基本上由协议版本、状态码(表示请求成功或失败的数字代码)、用以解释状态码的原因短语、可选的响应首部字段以及实体主体构成
3.http是无状态协议,即不保存之前发送过的请求或响应
4.持久链接的特点:只要任意一端没有明确提出断开连接,则保持TCP连接状态,
旨在建立1次TCP连接后进行多次请求和响应的交互
5.管线化技术:在持久链接状态下,不用等待响应亦可直接发送下一个请求,实现并行发送多个请求
6.请求方法
GET:访问已被URI识别的资源,获取响应内容
POST:传输实体的主体
PUT:在请求报文主体中包含文件内容,然后保存到请求URI指定的位置,自身不带验证机制
HEAD:用于确认URI的有效性及资源更新的日期时间等
DELETE:按请求URI删除指定的资源,不带验证机制
OPTION:查询针对请求URI指定的资源支持的方法
TRACE: 将之前的请求通信环回给客户端,可以查询发送出去的请求是怎样被加工修改/篡改的,但容易引发XST攻击
CONNECT:在与代理服务器通信时建立隧道,实现用隧道协议进行TCP通信。主要使用SSL和TLS协议把通信内容加密后经网络隧道传输
COOKIE状态管理
客户端在未携带cookie信息状态下请求服务器时,服务器会生成cookie,并记住是向谁发送的,然后在响应报文头中添加一个叫Set-Cookie的字段信息,通知客户端保存Cookie。
当下次客户端再往该服务器发送请求时,客户端会自动在请求报文中加入Cookie值后发送出去
服务器端发现客户端发送过来的Cookie后,会去检查究竟是从哪一个客户端发来的连接请求,然后对比服务器上的记录,最后得到之前的状态信息.
7.报文由报文首部、空格和报文主体构成
请求报文的报文首部分为:请求行(请求方法,URI,HTTP版本)、请求首部字段、通用首部字段、实体首部字段、其他
响应报文的报文首部分为:状态行(状态码,原因短语,HTTP版本)、响应首部字段、通用首部字段、实体首部字段、其他
报文主体即传输请求或响应的实体主体
提升传输效率采取的方法:传输编码,对实体进行‘内容编码’,压缩传输内容,分块传输编码
发送不同类型数据时,需要首部字段Content-Type
请求报文的Content-Type赋值mulitipart/form-data,
响应报文的Content-Type赋值mulitipart/byteranges,
请求指定范围数据时,可以用首部字段Range指定资源的byte范围
例:请求开始到3000,和5000到7000字节的多重范围
Range:bytes=-3000,5000-7000
响应状态码会返回206,多重范围会在首部添加Content-Type:mulitipart/byteranges
如果服务器无法响应范围请求,则会返回状态码200OK和完整的实体内容
内容协商机制:客户端和服务端就响应的资源内容进行交涉,然后提供给客户端最为适合的资源。
内容协商会以响应资源的语言、字符集、编码方式等作为判断的基准
对应首部字段有:Accept,Accept-Charset,Accept-Encoding,Accept-Language,Content-Language
内容协商技术有三类:
服务器驱动协商:以请求首部字段为参考,在服务器端自动处理
客户端驱动协商:用户在浏览器可选列表中手动选择
透明协商:前两者的结合体,由服务端和客户端各自进行内容协商的一种方法
8.状态码
1XX:请求正在处理
2XX:请求正常那个处理完毕
3XX:重定向,需要进行附加操作以完成请求,
4XX:服务器无法处理请求,客户端有错误发生
5XX:服务器处理请求出错
200 OK 客户端的请求在服务器被正常处理了
204 No Content ,正常处理,但响应不含实体
206 Partial Content 成功处理了范围请求,响应只含指定范围实体
301 Moved Permanently 永久重定向
302 Found 临时重定向
303 See Other 临时重定向,但只能使用get方法访问该资源
304 Not Modified 服务器没有找到符合客户端附带条件(If-Match,If-Range等报文首部)的资源,响应不含主体,与重定向无关,服务器告诉客户,原来缓冲的文档还可以继续使用
307 Temporary Redirect 临时重定向,按照浏览器标准不会从post变成GET。但浏览器不同,出现情况也可能不同
400 Bad Request 请求报文存在语法错误
401 Unauthorized 携带信息未通过HTTP认证,没有权限访问资源
403 Forbidden 请求的资源被服务器拒绝访问
404 Not Found 无法找到请求资源
500 Internal Server Error 服务器在执行请求时发生了错误,也可能是web应用存在bug或临时故障
502 bad gateway 网关错误
503 Service Unavailable 服务器暂时处于超负载或正在进行停机维护
9.通信数据转发程序
代理:接收客户端请求并转发给源服务器,不改变URI,但在转发时会添加via首部
好处:利用缓存技术减少网络带宽的流量,组织内部针对特定网站的访问控制,以获取访问日志为主要目的等等
使用方法分两类:
1.是否使用缓存,例,缓存代理(预先将资源副本存在代理服务器上);
2.是否会修改报文,例,透明代理(对报文不做任何加工,反之非透明代理)
网关:转发其他服务器数据的服务器,接收从客户端发来的请求并对请求进行处理
好处:能使通信线路上服务器提供非HTTP协议服务,能提高通信安全性
隧道:在相隔甚远的客户端和服务器之间进行中转,并保持双方通信连接的应用程序
目的:确保客户端能与服务器进行安全的通信,通信双发断开连接时结束
缓存:代理服务器或客户端本地磁盘内保存的资源副本 ,其实相当于是一种代理服务器
目的:减少对源服务器的访问,从而节省通信流量和通信时间
机制:超过有效期之后,会向源服务器确认资源有效性,若判断缓存失效,则再次从源服务器上获取‘新’资源
10.首部字段
分两类:缓存代理和非缓存代理
缓存代理,即端到端首部,这类首部会被带到客户端或服务端,且会保存在缓存中
非缓存代理,即逐跳首部,只对单词转发有效,会因通过缓存或代理而不再转发
通用首部:客户端和服务端都会用的首部
请求首部
响应首部
实体首部
cookie 相关首部
一些需要注意的字段
connection:close 完成本次响应后,无需等待后续请求,断开链接
connection:keep-alive 完成本次响应后保持链接等待后续请求
connection:upgrade
upgrade:websocket
这两者组合在一起时,表示客户端申请的更换协议,
服务端允许切换,此时报头为101,表示还需要等待完成切换的过程
content-Encoding 表示服务端压缩方法
Transfer-Encoding 表示服务端编码方法
https
http缺点
1.通信使用明文(不加密),内容可能会被窃听
造成原因:通信线路上的网络设备、光纤等不可能是个人私有物,不排除某个环节会遭到恶意窥视或窃听
解决办法:加密处理防止被窃听
方式一:通信加密,使用SSL和TLS建立安全通信线路,再在这条线路上进行HTTP通信
方式二:内容加密,对HTTP协议传输的内容本身加密,前提要求服务端和客户端都具备加密解密机制
2.不验证通信方的身份,因此可能遭遇伪装
造成原因:服务器不管谁发来的请求都会给一个响应,客户端不管是谁的响应都接收
解决办法:查明对方证书,证书由第三发颁发,通信前先确认对方证书,验证时要通信的双方后,再继续通信
3.无法证明报文完整性,所以有可能已遭篡改
中间人攻击:请求或响应在传输途中,遭攻击者拦截并篡改内容的攻击
造成原因:中间人攻击
解决办法:MD5和SHA-1等散列值校验的方法,以及用来确认文件的数字签名方法,但以上方法都需要用户本人自己验证
HTTP+加密+认证+完整性保护 = HTTPS
HTTP通信接口部分用SSL和TLS协议代替,即不再是http与TCP通信,而是http和SSL再和TCP通信
共享/对称密钥加密:加密和解密用同一个密钥
公开密钥加密:
使用一对非对称的密钥,一把叫做私有密钥,另一把叫做公开密钥,
使用公开密钥进行加密发送密文,收信方收到信息后用私有密钥进行解密
公开密钥加密方式比共享密钥加密方式处理起来更麻烦
HTTPS混合加密:在交换密钥环节使用公开密钥加密方式,之后的建立通信交换报文阶段则使用共享密钥加密方式
缺点:无法保证公开密钥本身是真正的公开密钥
解决办法:使用数字证书进行验证,客户端根据数字证书机构的公开密钥验证数字签名,从而验证服务器公开密钥
关于证书:
客户端证书一般由银行等特殊业务颁发,因为客户端证书需要费用支出
自签名证书无法保证通信真实性
中级认证机构的证书可能变成自认证证书
HTTPS的安全通信机制
步骤12结束之后,客户端再发送TCP FIN报文来关闭与TCP的通信
缺点:
1.由于加密解密过程消耗大量CPU以及内存等资源,导致处理速度变慢
2.由于SSL通信部分消耗网络资源,处理通信部分又会消耗一定时间,因此相比http又会变慢
解决办法:使用SSL加速器以分担负载
不使用https原因:
1.客户端要考虑消耗cpu,内存资源,服务器端要考虑负载
2.购买证书需要开销
用户认证
方法有BASIC认证,DIGEST认证,SSL客户端认证,FormBase认证
HTTP/2.O
http2.0协议优点
1.采用二进制进行流式传输,使用HPACK压缩消息头,节省宽带
2.使用tcp多路复用,降低网络请求链接时建立关闭的开销
这里要与区别keep-alive作区分
keep-alive发生在应用层,而tcp复用发生在传输层
keep-alive多文件只能串行传输,一个传完再传一个,而TCP多文件可以并行同时传输
3.可以控制传输流优先级和流量
4.支持服务端推送
多路复用
解决的问题
在http/1.x下,浏览器客户端在同一时间,针对同一域名下的请求有一定数量限制。超过限制数目的请求会被阻塞
突发性和短时性的 HTTP 连接因为三次握手和慢启动的存在,非常浪费时间(–>单一长连接)
(慢启动:TCP连接在一开始会限制连接最大速度,确认数据能够成功传输后,随时间推移才会慢慢提高传输速度)
实现–二进制分帧
在应用层和传输层之间增加二进制分帧层,应用层生成的报文会分割封装为更小的消息和帧,并进行二进制编码
其中首部header和请求主体request body分别被封装为header frame 和data frame
同一请求或响应的帧会有相同标志,会按照一定先后顺序被发送,
所以不同的请求或者响应可以互相穿插着给到对方
最终实现就是
一个包含上百个资源的页面,在http1.x协议下会创建多条TCP链接来进行串行请求
在http/2.0下只会创建一个长TCP链接,所有的资源请求在压缩处理后一次性发出去,并行地在一个TCP连接上双向交换信息
(同一链接上有多个不同方向的数据流在传输。客户端可以一边乱序发送stream,也可以一边接收服务器的响应,而服务器那端同理。)
而且可以对资源设置优先级,优先级能动态的被改变,优先级高的资源能够被更快的下载下来并得到执行
效果
由于 TCP 连接的减少而使网络拥塞状况得以改善,使拥塞和丢包恢复速度更快
单一长连接多资源的方式,减少服务端的链接压力,避免网络开销,内存占用更少,提高连接吞吐量
压缩头部
通信连接建立之后,由于cookie和user agent很容易膨胀,
每次请求的头部如果有相同的部分,还要以纯文本传输重复发送的话,就会造成流量浪费
因此在客户端和服务端都存放一个首部表,来跟踪和存储之前发送的键值对,对于相同的头部,不必再通过请求发送,只需发送一次
如果首部发生变化,就在压缩时只将变化的数据放在header帧里面进行发送,
无论是客户端还是服务器端收到首部帧后,就对首部表进行更新
服务器推送
就是客户端请求一次资源,服务器给多个响应,这些多个响应很有可能是浏览器解析Html后继续要请求的资源,即主动将资源推送给客户端
而客户端可以做的就是可以将他们缓存起来做备用
延伸问题
1.如何解决推送资源重复或不需要的问题?
客户端使用一个简洁的 Cache Digest 来告诉服务器,哪些东西已经在缓存,因此服务器也就会知道哪些是客户端所需要的。
相关链接
2.为什么HTTP2能去掉SSL在HTTP1.x上的开销
单一的长连接,减少了SSL握手的开销
头部被压缩,减少了数据传输量
多路复用能大幅提高传输效率,不用等待上一个请求的响应
不用像http1.x那样把多个文件或者资源弄成一个文件或者资源(http1.x常见的优化手段),
这时候,缓存就能更容易命中啊(http1.x里面你揉成一团的东西怎么命中缓存?)
相关链接
遗留疑问
二进制分帧和TCP切割分包是如何具体实现的,二进制分帧优势具体在哪里?
http/2.0各层协议具体工作
待读
补充
从输入 URL 到页面展现中间发生了什么?<另外的角度看问题>
DNS 查询 DNS 缓存
建立 TCP 连接(三次握手)连接复用
发送 HTTP 请求(请求的四部分)
后台处理请求
监听 80 端口
路由
渲染 HTML 模板
生成响应
发送 HTTP 响应
关闭 TCP 连接(四次挥手)
解析 HTML
下载 CSS(缓存
解析 CSS
下载 JS(缓存
解析 JS
下载图片
解析图片
渲染 DOM 树
渲染样式树
执行 JS
七层协议
应用层
表示层
会话层
传输层
网络层
数据链路层
物理层
实时通信协议
webSocket
Poll轮询
Long-poll 长轮询 (二维码登录)
DDP(分布式数据协议)[使用json数据格式在客户端与服务端进行数据传输,但存在兼容问题]