前端学习日志-7-浏览器

admin管理员组

文章数量:1547179

网络

• 浏览器打开一个网址
• 浏览器
• • 内核
  • 缓存
  • • 强制缓存
    • 协商缓存
• CDN
• • 加速原理
• TCP
• • 报文
  • 三次握手
  • 四次挥手
• UDP
• Ping
• Http、Https
• • http
  • • HTTP/1.0
    • HTTP/1.1
    • HTTP/2
    • 状态码：
    • 无状态协议：浏览器对于事务的处理没有记忆能力
    • 报文结构
    • • 请求报文：
      • 响应报文：
  • https
  • • 对称加密与非对称加密
    • 证书
• xss
• • 绕过
  • 防御
• csrf
• • 防御
• cookie、session、token、localStorag、sessionStorage
• • Cookie
  • Session
  • Cookie Session对比
  • Token
  • JWT
  • localStorage
  • sessionStorage
  • sessionstorage、localstorage对比
• 跨域
• • window.postMessage(message, targetOrigin)
  • CORS

浏览器打开一个网址

1.解析url

域名：协议名、域名、端口号
以http://www.example/dir/page.html为例
协议是http，域名是www.example，端口是80
（http默认端口80，https默认端口443，默认端口自动隐藏）。

请求前检查是否有缓存
2.生成http请求信息

请求行：方法 url 版本
消息头：首部字段名 字段值
空行
消息体：数据
例：GET请求报文，消息体数据为空
GET / HTTP /1.1
Accept: */*

例：POST请求报文
POST  /login HTTP/1.1
Accept: */*
{
"name":"李华"
"password":"123456"
}

POST /index.html HTTP/1.1   =>请求方法 url 协议/版本号
Host: localhost  主机地址
User-Agent: Mozilla/5.0 (Windows NT 5.1; rv:10.0.2) Gecko/20100101 Firefox/10.0.2
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: zh-cn,zh;q=0.5
Accept-Encoding: gzip, deflate
Connection: keep-alive
Referer: <a target=_blank href="http://localhost/" style="color: rgb(51, 102, 153); text-decoration: none;">http://localhost/</a>
Content-Length：25
Content-Type：application/x-www-form-urlencoded
请求空行 标志着请求头结束，请求正文（请求体）的开始
username=aa&password=1234

3.真实地址查询DNS

域名层级，越右层级越高。
以www.server为例
首先是根DNS服务器->顶级域DNS服务器(com)->权威DNS服务器(server)

域名解析流程
1.客户端首先会发出一个 DNS 请求，问 www.server 的 IP 是啥，并发给本地 DNS 服务器（也就是客户端的 TCP/IP 设置中填写的 DNS 服务器地址）。
2.本地域名服务器收到客户端的请求后，如果缓存里的表格能找到 www.server，则它直接返回 IP 地址。如果没有，本地 DNS 会去问它的根域名服务器：“老大， 能告诉我 www.server 的 IP 地址吗？” 根域名服务器是最高层次的，它不直接用于域名解析，但能指明一条道路。
3.根 DNS 收到来自本地 DNS 的请求后，发现后置是 ，说：“www.server 这个域名归  区域管理”，我给你  顶级域名服务器地址给你，你去问问它吧。”
4.本地 DNS 收到顶级域名服务器的地址后，发起请求问“老二， 你能告诉我 www.server  的 IP 地址吗？”
5.顶级域名服务器说：“我给你负责 www.server 区域的权威 DNS 服务器的地址，你去问它应该能问到”。
6.本地 DNS 于是转向问权威 DNS 服务器：“老三，www.server对应的IP是啥呀？” server 的权威 DNS 服务器，它是域名解析结果的原出处。为啥叫权威呢？就是我的域名我做主。
7.权威 DNS 服务器查询后将对应的 IP 地址 X.X.X.X 告诉本地 DNS。
8.本地 DNS 再将 IP 地址返回客户端，客户端和目标建立连接。

4.协议栈

通过 DNS 获取到 IP 后，就可以把 HTTP 的传输工作交给操作系统中的协议栈.
应用程序（浏览器）通过调用 Socket 库，来委托协议栈工作.
|TCP UDP|
|  IP   |
IP中包括ICMP和ARP两个协议
ICMP 用于告知网络包传送过程中产生的错误以及各种控制信息。
ARP 用于根据 IP 地址查询相应的以太网 MAC 地址

5.TCP
通过6-10， 三次握手建立连接
6.IP

HTTP 是经过 TCP 传输的，所以在 IP 包头的协议号，要填写为 06（十六进制），表示协议为 TCP

7.两点传输MAC

ARP在以太网中以广播的形式,查找IP地址所在的MAC地址

8.网卡
9.交换机
10.路由器
11. 服务器
12. 客户端
13.渲染

1、解析HTML生成DOM树 - 渲染引擎首先解析HTML文档，生成DOM树
2、构建Render树 - 接下来不管是内联式，外联式还是嵌入式引入的CSS样式会被解析生成CSSOM树，根据DOM树与CSSOM树生成另外一棵用于渲染的树-渲染树(Render tree)
3、布局Render树 - 然后对渲染树的每个节点进行布局处理，确定其在屏幕上的显示位置
4、绘制Render树 - 最后遍历渲染树并用UI后端层将每一个节点绘制出来

1、IE下载的顺序是从上到下，渲染的顺序也是从上到下，下载和渲染是同时进行的。
2、在渲染到页面的某一部分时，其上面的所有部分都已经下载完成（并不是说所有相关联的元素都已经下载完）
3、如果遇到语义解释性的标签嵌入文件（JS脚本，CSS样式），那么此时IE的下载过程会启用单独连接进行下载。
4、并且在下载后进行解析，解析过程中，停止页面所有往下元素的下载。阻塞加载
5、样式表在下载完成后，将和以前下载的所有样式表一起进行解析，解析完成后，将对此前所有元素（含以前已经渲染的）重新进行渲染。
6、JS、CSS中如有重定义，后定义函数将覆盖前定义函数

浏览器

内核

1、IE浏览器内核：Trident内核，也是俗称的IE内核；-ms
2、Chrome浏览器内核：统称为Chromium内核或Chrome内核，以前是Webkit内核，现在是Blink内核；
3、Firefox浏览器内核：Gecko内核，俗称Firefox内核；-moz
4、Safari浏览器内核：Webkit内核；-webkit
5、Opera浏览器内核：最初是自己的Presto内核，后来是Webkit，现在是Blink内核；
6、360浏览器、猎豹浏览器内核：IE+Chrome双内核；
7、搜狗、遨游、QQ浏览器内核：Trident（兼容模式）+Webkit（高速模式）；
8、百度浏览器、世界之窗内核：IE内核；
9、2345浏览器内核：以前是IE内核，现在也是IE+Chrome双内核；

缓存

强制缓存

不存在该缓存结果和缓存标识，强制缓存失效，则直接向服务器发起请求（跟第一次发起请求一致）

存在该缓存结果和缓存标识，但该结果已失效，强制缓存失效，则使用协商缓存

存在该缓存结果和缓存标识，且该结果尚未失效，强制缓存生效，直接返回该结果

强制缓存缓存规则
Expires 和 Cache-Control，Cache-Control 优先级比 Expires 高

Expires 是 HTTP/1.0 的字段，到了 HTTP/1.1，Expire 已经被 Cache-Control 替代，原因在于 Expires 控制缓存的原理是使用客户端的时间与服务端返回的时间做对比，那么如果客户端与服务端的时间因为某些原因（例如时区不同；客户端和服务端有一方的时间不准确）发生误差，那么强制缓存则会直接失效，这样的话强制缓存的存在则毫无意义

Cache-Control

• public：所有内容都将被缓存（客户端和代理服务器都可缓存）
• private：所有内容只有客户端可以缓存，Cache-Control 的默认取值
• no-cache：客户端缓存内容，但是是否使用缓存则需要经过协商缓存来验证决定
• no-store：所有内容都不会被缓存，即不使用强制缓存，也不使用协商缓存
• max-age=xxx (xxx is numeric)：缓存内容将在 xxx 秒后失效

协商缓存

协商缓存生效，返回 304

协商缓存失效，返回 200 和请求结果结果

控制协商缓存的字段分别有：Last-Modified / If-Modified-Since 和 Etag / If-None-Match，其中 Etag / If-None-Match 的优先级比 Last-Modified / If-Modified-Since 高

• Last-Modified / If-Modified-Since
  Last-Modified 是服务器响应请求时，返回该资源文件在服务器最后被修改的时间
  If-Modified-Since 则是客户端再次发起该请求时，携带上次请求返回的 Last-Modified 值，通过此字段值告诉服务器该资源上次请求返回的最后被修改时间。服务器收到该请求，发现请求头含有 If-Modified-Since 字段，则会根据 If-Modified-Since 的字段值与该资源在服务器的最后被修改时间做对比，若服务器的资源最后被修改时间大于 If-Modified-Since 的字段值，则重新返回资源，状态码为 200；否则则返回 304，代表资源无更新，可继续使用缓存文件

• Etag / If-None-Match
  Etag 是服务器响应请求时，返回当前资源文件的一个唯一标识(由服务器生成)
  If-None-Match 是客户端再次发起该请求时，携带上次请求返回的唯一标识 Etag 值，通过此字段值告诉服务器该资源上次请求返回的唯一标识值。服务器收到该请求后，发现该请求头中含有 If-None-Match，则会根据 If-None-Match 的字段值与该资源在服务器的 Etag 值做对比，一致则返回 304，代表资源无更新，继续使用缓存文件；不一致则重新返回资源文件，状态码为 200

缓存放哪里？
from memory cache 和 from disk cache
from memory cache 代表使用内存中的缓存，from disk cache 则代表使用的是硬盘中的缓存，浏览器读取缓存的顺序为 memory –> disk

CDN

CDN（Content Delivery Network，内容分发网络）是构建在现有互联网基础之上的一层智能虚拟网络，通过在网络各处部署节点服务器，实现将源站内容分发至所有 CDN 节点，使用户可以就近获得所需的内容。CDN 服务缩短了用户查看内容的访问延迟，提高了用户访问网站的响应速度与网站的可用性，解决了网络带宽小、用户访问量大、网点分布不均等问题

加速原理

当用户访问使用 CDN 服务的网站时，本地 DNS 服务器通过 CNAME 方式将最终域名请求重定向到 CDN 服务。CDN 通过一组预先定义好的策略(如内容类型、地理区域、网络负载状况等)，将当时能够最快响应用户的 CDN 节点 IP 地址提供给用户，使用户可以以最快的速度获得网站内容。

TCP

面向连接的、可靠的、基于字节流的传输层通信协议

• 面向连接：一定是「一对一」才能连接，不能像 UDP 协议 可以一个主机同时向多个主机发送消息，也就是一对多是无法做到的；
• 可靠的：无论的网络链路中出现了怎样的链路变化，TCP 都可以保证一个报文一定能够到达接收端；
• 字节流：消息是「没有边界」的，所以无论我们消息有多大都可以进行传输。并且消息是「有序的」，当「前一个」消息没有收到的时候，即使它先收到了后面的字节已经收到，那么也不能扔给应用层去处理，同时对「重复」的报文会自动丢弃。

报文

TCP报文头部格式
首先，源端口号和目标端口号是不可少的，如果没有这两个端口号，数据就不知道应该发给哪个应用。
接下来有包的序号，这个是为了解决包乱序的问题。
还有应该有的是确认号，目的是确认发出去对方是否有收到。如果没有收到就应该重新发送，直到送达，这个是为了解决不丢包的问题。
接下来还有一些状态位。例如 SYN 是发起一个连接，ACK 是回复，RST 是重新连接，FIN 是结束连接等。TCP 是面向连接的，因而双方要维护连接的状态，这些带状态位的包的发送，会引起双方的状态变更。
还有一个重要的就是窗口大小。TCP 要做流量控制，通信双方各声明一个窗口（缓存大小），标识自己当前能够的处理能力，别发送的太快，撑死我，也别发的太慢，饿死我。
TCP 报文中的数据部分就是存放 HTTP 头部 + 数据。

TCP分割数据
如果 HTTP 请求消息比较长，超过了 MSS 的长度，这时 TCP 就需要把 HTTP 的数据拆解一块块的数据发送，而不是一次性发送所有数据
MTU：一个网络包的最大长度，以太网中一般为 1500 字节。
MSS：除去 IP 和 TCP 头部之后，一个网络包

本文标签： 浏览器日志