这是我参与「第四届青训营」笔记创作活动的第6天

浏览器

TCP/IP五层模型

 应用层：TFTP，HTTP，SNMP，FTP，SMTP，DNS，Telnet
 传输层：TCP，UDP
 网络层：IP，ICMP，RIP，OSPF，BGP，IGMP
 数据链路层：SLIP，CSLIP，PPP，ARP，RARP，MTU
 物理层

物理层：比特主要定义物理设备标准，主要作用是传输比特流（就是由1、0转化为电流强弱来进行传输,到达目的地后再转化为1、0，也就是我们常说的数模转换与模数转换
数据链路层：帧定义了如何让格式化数据以进行传输，以及如何让控制对物理介质的访问在两个相邻结点之间传送数据是直接传送的(点对点)，数据链路层将网络层交下来的IP数据报组装成帧(framing)，每一帧包括数据和必要的控制信息(如同步信息、地址信息、差错控制等)
网络层：数据报为位于不同地理位置的网络中的两个主机系统之间提供连接和路径选择
- 在发送数据时，网络层把运输层产生的报文段或用户数据报封装成分组或包进行传送。在TCP/IP体系中，由于网络层使用IP协议，因此分组也叫做IP数据报，或简称为数据报。
- 选中合适的路由，使源主机运输层所传下来的分组，能够通过网络中的路由器找到目的主机。
传输层：报文段/用户数据报

负责向两个主机中进程之间的通信提供服务。由于一个主机可同时运行多个进程，因此运输层有复用和分用的功能：
- 复用，就是多个应用层进程可同时使用下面传输层的服务。
- 分用，就是把收到的信息分别交付给上面应用层中相应的进程
定义了一些传输数据的协议和端口号（WWW端口80）
应用层

直接为用户的应用进程（例如电子邮件、文件传输和终端仿真）提供服务。如支持万维网应用的HTTP协议，支持电子邮件的SMTP协议，支持文件传送的FTP协议，DNS，POP3，SNMP，Telnet等。

补充：

IP地址：可以理解成网络上某个设备的编号
域名：网站的URL
DNS（Domain Name System，域名系统）：存储了网络里域名与IP地址的对应关系

HTTP/HTTPs

HTTP状态码

csdn博客

HTTP与HTTPs的区别

HTTP 传输的数据都是未加密的，也就是明文的 HTTPS 协议是由 HTTP 和 SSL 协议（安全套接字协议）构建的可进行加密传输和身份认证的网络协议，比 HTTP 协议的安全性更高
HTTPS 协议需要 CA 证书，费用较高；
使用不同的链接方式，端口也不同，一般而言，HTTP 协议的端口为 80，HTTPS 的端口为 443

HTTPs工作原理

客户使用 HTTPs URL 访问服务器，则要求 web 服务器建立 SSL 链接；
web 服务器接收到客户端的请求之后，会将网站的证书（证书中包含了公钥），返回给客户端；
客户端和 web 服务器端开始协商 SSL 链接的安全等级，也就是加密等级；
客户端浏览器通过双方协商一致的安全等级，建立会话密钥，然后通过网站的公钥来加密会话密钥，并传送给网站；
web 服务器通过自己的私钥解密出会话密钥；
web 服务器通过会话密钥加密与客户端之间进行通信

HTTP请求的方式

GET：请求指定的页面信息，并返回实体主体。
HEAD：类似于 GET 请求，只不过返回的响应中没有具体的内容，用于获取报头
POST：向指定资源提交数据进行处理请求（例如提交表单或者上传文件）。数据被包含在请求体中。POST 请求可能会导致新的资源的建立和/或已有资源的修改。

Post和Get的区别

HTTP协议客户端请求request消息包括以下格式：`请求行（request line）、请求头部（header）、空行、请求数据；

服务端响应response也由四个部分组成，分别是：响应行、响应头、空行、响应体。

区别：

请求参数：GET请求参数是通过URL传递的，多个参数以&连接，POST请求放在request body中
请求缓存：GET请求会被缓存，而POST请求不会，除非手动设置
历史记录：GET请求参数会被完整保留在浏览历史记录里，而POST中的参数不会被保留
安全性：POST比GET安全，GET请求在浏览器回退时是无害的，而POST会再次请求
编码方式：GET请求只能进行url编码，而POST支持多种编码方式
对参数的数据类型：GET只接受ASCII字符，而POST没有限制
收藏为书签：GET请求支持，POST请求不支持

通过浏览器地址栏输入URL访问资源的方式都是GET请求

对称加密与非对称加密的区别

对称加密的加密过程和解密过程使用的同一个密钥，加密过程相当于用原文+密钥可以传输出密文，同时解密过程用密文-密钥可以推导出原文

非对称加密采用了两个密钥，一般使用公钥进行加密，使用私钥进行解密
对称加密解密的速度比较快，适合数据比较长时的使用

非对称加密和解密花费的时间长、速度相对较慢，只适合对少量数据的使用
对称加密的过程中无法确保密钥被安全传递

非对称加密算法中，私钥通过一定的加密算法推导出公钥，私钥到公钥的推导过程是单向的，也就是说公钥无法反推导出私钥

TCP三次握手和四次挥手

三次握手（建立连接）：

SYN：连接请求/接收报文段

ACK：确认报文段

客户端向服务端发送一个 SYN 报文（SYN = 1），服务器接收该报文：

客户端什么都不能确认；

服务器确认了对方发送正常，自己接收正常
服务器收到客户端的 SYN 报文之后，会发送 SYN 报文作为应答：

客户端确认了：自己发送、接收正常，对方发送、接收正常；

服务器确认了：对方发送正常，自己接收正常
客户端收到服务器端响应的 SYN 报文之后，会发送一个 ACK 报文：

客户端确认了：自己发送、接收正常，对方发送、接收正常；

服务器确认了：自己发送、接收正常，对方发送、接收正常

四次挥手（中止连接） ：

FIN：连接中止位

客户端发送一个FIN报文，并停止再发送数据，主动关闭 TCP 连接，等待服务端的确认；
服务端收到 FIN 之后，会发送 ACK 报文，表明已经收到客户端的报文了

此时的 TCP 处于半关闭状态，客户端到服务端的连接释放；
服务端也想断开连接，发送 FIN 报文，等待客户端的确认；
客户端收到 FIN 之后，一样发送一个 ACK 报文作为应答，经过时间等待计时器设置的时间 2MSL（一个报文的来回时间）后，服务端到客户端的 TCP 连接释放。

浏览器缓存机制

HTTP强缓存和协商缓存

浏览器缓存是浏览器在本地磁盘对用户最近请求过的文档进行存储，当访问者再次访问同一页面时，浏览器就可以直接从本地磁盘加载文档。

优点：

减少冗余的数据传输
减少服务器负担
加快客户端加载网页的速度

浏览器第一次请求：本地无缓存，向web服务器发送请求，服务器端响应请求，浏览器端缓存。

服务器会将页面最后修改时间通过**Last-Modified**标识由服务器发送给客户端，客户端记录修改时间；服务器还会生成一个Etag，并发送给客户端。

浏览器再次请求：

浏览器请求某一资源时，会先获取（检查）该资源缓存的 header 信息，然后根据 header 中的 Cache-Control和 Expires来判断是否过期。若可用（强缓存），则直接从缓存中获取资源信息，包括缓存的 header 的信息，所以此次请求不会与服务器进行通信。
如果显示已过期（协商缓存），浏览器会向服务器端发送请求，这个请求会携带第一次请求返回的有关缓存的header 字段信息。比如：
1. 客户端会通过 If-None-Match 头将先前服务器端发送过来的 Etag 发送给服务器，服务会对比这个客户端发过来的 Etag 是否与服务器的相同，若相同，就将 If-None-Match 的值设为 false，返回状态 304，客户端继续使用本地缓存，不解析服务器端发回来的数据，若不相同就将 If-None-Match 的值设为 true，返回状态为 200，客户端重新请求服务器端返回的数据；
2. 客户端还会通过 If-Modified-Since 头将先前服务器端发过来的最后修改时间戳发送给服务器，服务器端通过这个时间戳判断客户端的页面是否是最新的，如果不是最新的，则返回最新的内容，如果是最新的，则返回 304，客户端继续使用本地缓存。

强缓存

强缓存是利用http头中的Expires和Cache-Control两个字段来控制的，用来表示资源的缓存时间。强缓存中，普通刷新会忽略它，但不会清除它，需要强制刷新。

浏览器强制刷新，请求会带上Cache-Control:no-cache和Pragma:no-cache。

Expires：资源过期时间点

Expires是http1.0的规范，它的值是一个绝对时间的GMT格式的时间字符串。

如我现在这个网页的Expires值是：expires: Mon, 3 May 2022 10:47:02 GMT。这个时间代表这个资源的失效时间，只要发送请求时间是在Expires之前，那么本地缓存始终有效，则在缓存中读取数据。过期就得向服务器请求。

缺点： 由于失效的时间是一个绝对时间，所以当服务器与客户端时间偏差较大时，误差很大，就会导致缓存混乱。因此这种方式很快在后来的http1.1版本中被抛弃了。

Cache-Control：资源有效时长

Cache-Control 主要是利用该字段的 max-age 值来进行判断，它是一个相对时间，例如Cache-Control:max-age=3600，代表着资源的有效期是 3600 秒。

Cache-Control除了该字段外，还有下面几个比较常用的设置值：

no-cache：跳过强缓存，发送http请求，进入协商缓存阶段。先与服务器确认返回的响应是否被更改，如果之前的响应中存在Etag，那么请求的时候会与服务端验证，如果资源未被更改，则可以避免重新下载。
no-store：直接禁止浏览器缓存数据，每次用户请求该资源，都会向服务器发送一个请求，每次都会下载完整的资源。
public：可以被所有的用户缓存，包括终端用户（客户端）和CDN等中间代理服务器。
private：只能被终端用户的浏览器缓存，不允许CDN等中继缓存服务器对其缓存。

Cache-Control与Expires可以在服务端配置同时启用，同时启用的时候Cache-Control优先级高。

弱缓存（协商缓存）

如果强缓存时间过期、或者没有设置，导致未命中的话，就进入到了弱缓存的阶段。

协商缓存就是由服务器来确定缓存资源是否可用，所以客户端与服务器端要通过某种标识来进行通信，从而让服务器判断请求资源是否可以缓存访问。

普通刷新会启用弱缓存，忽略强缓存。只有在地址栏或收藏夹输入网址、通过链接引用资源等情况下，浏览器才会启用强缓存。

Last-Modified 和 If-Modify-Since

浏览器第一次请求一个资源的时候，服务器返回的header中会加上Last-Modified。Last-Modified 是一个时间标识，指该资源的最后修改时间，例如 Last-Modified: Thu,31 Dec 2037 23:59:59 GMT。

当浏览器再次请求该资源时，request的请求头中会包含If-Modify-Since，即服务器传来的最后修改时间，会与服务器返回的Last-Modified对比：

如果If-Modify-Since的值小于Last-Modified，说明是时候更新了。返回新的资源，跟常规的HTTP请求响应的流程一样；
如果命中缓存，则返回304，告诉浏览器直接用缓存。

Etag 和 If-None-Match

服务器根据当前文件的内容，给文件生成的唯一标识。Etag可以保证每一个资源是唯一的，资源变化都会导致Etag变化。

浏览器接收到ETag的值，会在下次请求时，将这个值作为If-None-Match这个字段的内容，并放到请求头中，然后发给服务器。

服务器接收到If-None-Match后，会跟服务器上该资源的Etag进行比对：

如果两者不一样，说明要更新了。返回新的资源，跟常规的HTTP请求响应的流程一样。
否则返回304，告诉浏览器直接用缓存。

与Last-Modified不一样的是，当服务器返回 304 (Not Modified) 的响应时，由于Etag重新生成过，response header 中还会把这个Etag返回，即使这个Etag跟之前的没有变化。

浏览器输入URL回车后发生什么

详细链接：4ark.me/post/b6c7c0…

URL解析

地址解析：判断你输入的是一个合法的 URL 还是一个待搜索的关键词，并且根据你输入的内容进行自动完成、字符编码等操作
由于安全隐患，会使用 HSTS(HTTP strict transport security) 强制客户端使用 HTTPS 而不是HTTP访问页面
浏览器还会进行一些额外的操作，比如安全检查、访问限制
检查缓存

DNS查询

浏览器缓存：浏览器会先检查DNS是否在缓存中，没有则调用系统库函数进行查询；
操作系统缓存：检查域名是否存在本地的 Hosts 文件里，没有则向 DNS 服务器发送查询请求；
路由器缓存
ISP（Internet service provider，互联网服务提供商）缓存
根域名服务器查询，如下：

TCP连接

TCP/IP分为四层，在发送数据时，每层都需要对数据进行封装：

应用层：根据以上得到服务器的IP地址，发送 HTTP 请求
传输层：TCP传输报文
网络层：IP协议查询Mac地址
链路层：以太网协议

服务器处理请求

TCP连接建立完毕，浏览器可以和服务器开始通信，即开始发送 HTTP 请求。

浏览器接受响应

浏览器接收到来自服务器的响应资源后，会对资源进行分析。最后要把数据传给浏览器，也就是返回网络响应。

网络响应具有三个部分:响应行、响应头和响应体。

渲染页面

JSON

JSON.parse()：将一个 JSON 字符串转换为 JavaScript 对象。
JSON.stringfy：将 JavaScript 值转换为 JSON 字符串。

JavaScript 函数 eval() 可用于将 JSON 文本转换为 JavaScript 对象。

eval() 函数使用的是 JavaScript 编译器，可解析 JSON 文本，然后生成 JavaScript 对象。必须把文本包围在括号中，这样才能避免语法错误：

 var obj = eval ("(" + txt + ")");

AJAX

Asynchronous JavaScript and XML（异步的 JavaScript 和 XML），一种使用现有标准的新方法。在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。

它是一种异步通信方法，通过直接由js脚本向服务器发起http通信，根据服务器返回的数据更新网页的相应部分，而不用刷新整个页面。

XMLHttpRequest(XHR)

用于在后台与服务器交换数据，这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

 //创建 XMLHttpRequest 对象
 var xmlhttp;
 if (window.XMLHttpRequest){
     //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
     xmlhttp=new XMLHttpRequest();
 }
 else{
     // IE6, IE5 浏览器执行代码
     xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
 }
 
 //向服务器发送 get 请求
 //向 URL 添加一个唯一的 ID，避免得到缓存结果
 xmlhttp.open("GET", url + Math.random(), true);
 //参数解释
 //url:服务器上文件的地址
 //async参数：是否异步，布尔型
 xmlhttp.send();
 
 //post 请求
 xmlhttp.open("POST",url,true);
 //如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头
 xmlhttp.setRequestHeader([header,value]);
 //参数解释
 //header:规定http头的名称
 //value：规定http头的值
 xmlhttp.send();

send()方法接收一个参数，是作为请求体发送的数据。如果不需要发送请求体，则必须传 null，因为这个参数在某些浏览器中是必需的。调用 send()之后，请求就会发送到服务器。

因为这个请求是同步的，所以 JavaScript代码会等待服务器响应之后再继续执行。收到响应后，XHR对象的以下属性会被填充上数据。

responseText：作为响应体返回的文本。
responseXML：如果响应的内容类型是text/xml或application/xml，那就是包含响应数据的 XML DOM 文档。
status：响应的 HTTP 状态。
statusText：响应的 HTTP 状态描述。

收到响应后，第一步要检查 status属性以确保响应成功返回。一般来说，HTTP 状态码为 2xx表示成功。此时，responseText或 responseXML（如果内容类型正确）属性中会有内容。

为确保收到正确的响应，应该检查这些状态：

 //接受响应
 if ((xmlhttp.status >= 200 && xmlhttp.status < 300) || xmlhttp.status == 304) {
     alert(xmlhttp.responseText);
 } else {
     alert("Request was unsuccessful: " + xmlhttp.status);
 }

但多数情况下最好使用异步请求，这样可以不阻塞JavaScript代码继续执行。

同源

浏览器的同源政策（Same origin policy，SOP）是指，一个域下的 js脚本在未经允许的情况下，不能够访问另一个域的内容。

URL的组成部分：

 http://www.example.com:80/path/to/myfile.html?key1=value1&key2=value2#SomewhereInTheDocument

这里的同源的指的是两个域的协议、域名、端口号必须相同，否则不属于同一个域。

限制了：

当前域下的JS脚本不能访问其他域下的cookie、localStorage和indexDB；
当前域下的JS脚本不能操作访问其他域下的DOM；
当前域下AJAX无法发送跨域请求。

同源政策的目的主要是为了保证用户的信息安全，它只是对JS 脚本的一种限制，并不是对浏览器的限制，对于一般的 img、或者script脚本请求都不会有跨域的限制，这是因为这些操作都不会通过响应结果来进行可能出现安全问题的操作。

跨域

当一个请求 url的协议、域名、端口三者之间任意一个与当前页面 url不同即为跨域。

前端常见跨域解决方案（全）

广义的跨域：

资源跳转： A链接、重定向、表单提交
资源嵌入：、、@font-face()等文件外链
脚本请求： js发起的ajax请求、dom和js对象的跨域操作等

常见跨域场景

 URL                                      说明                    是否允许通信
 http://www.domain.com/a.js
 http://www.domain.com/b.js         同一域名，不同文件或路径           允许
 http://www.domain.com/lab/c.js
 
 http://www.domain.com:8000/a.js
 http://www.domain.com/b.js         同一域名，不同端口                不允许
  
 http://www.domain.com/a.js
 https://www.domain.com/b.js        同一域名，不同协议                不允许
  
 http://www.domain.com/a.js
 http://192.168.4.12/b.js           域名和域名对应相同ip              不允许
  
 http://www.domain.com/a.js
 http://x.domain.com/b.js           主域相同，子域不同                不允许
 http://domain.com/c.js
  
 http://www.domain1.com/a.js
 http://www.domain2.com/b.js        不同域名                         不允许

跨域解决方案

JSONP(JSON with padding)

基本原理：JSONP调用通过动态创建<script>标签，利用 src属性指定跨域 URL。

JSON 的一种"使用模式"，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。

JSONP 的理念就是，与服务端约定好一个回调函数名，服务端接收到请求后，将返回一段 Javascript，在这段 Javascript代码中调用了约定好的回调函数，并且将数据作为参数进行传递。当网页接收到这段 Javascript代码后，就会执行这个回调函数，这时数据已经成功传输到客户端了。

 //前端
 <script>
 //声明一个回调函数
 function test(data) {
     console.log(data.name);
 }
 </script>
 //创建一个<script>标签，把跨域的接口地址赋给src，使用?传递参数（回调函数）
 <script src="http://127.0.0.1:8088/jsonp?callback=test"></script>
 
 //服务器将接收到的函数名和数据拼接成字符串，通过HTTP协议返回客户端
 res.end('test({"name": "Monkey"})');

实际情况下，我们需要动态创建这个test函数，并且在数据返回的时候销毁它。

在开发中可能会遇到多个 JSONP请求的回调函数名是相同的，这时候就需要自己封装一个 JSONP函数。

 //客户端
 function jsonp({url, params, callback}){
     return new Promise((resolve, reject)=>{
         let script = document.createElement('script')
         window[callback] = function(data){
             resolve(data)
             document.body.removeChild(script)
         }
         params = {...params, callback}
         let arrs = []
         for(let key in params){
             arrs.push(`${key}=${params[key]}`)
         }
         script.src = `${url}?${arrs.join('&')}`
         document.body.appendChild(script)
     })
 }
 
 jsonp({
     url: 'http://localhost:3000/say',
     params: {wd: "ILoveYou"},
     callback:'show'
 }).then(data => {
     console.log(data)
 })
 
 
 //服务器
 let express = require('express')
 let app = express()
 app.get('/say',function(req,res){
     let {wd, callback} = req.query
     console.log(wd) // ILoveYou
     console.log(callback)  //show
     res.end(`${callback}('我爱你')`)
 })
 app.listen(3000)

缺点：

只支持GET请求而不支持POST等其他类型的HTTP请求
在调用失败时不会返回各种HTTP状态码
安全性。提供 JSONP的服务存在页面注入漏洞，即它返回的 JavaScript的内容被人控制的，所有调用这个 JSONP的网站都会存在漏洞，于是无法把危险控制在一个域名下。

CORS(Cross-Origin Resource Sharing , 跨源资源共享）

基本思路：使用自定义 HTTP头部允许浏览器和服务器相互了解，以确定请求或响应应该成功还是失败。

对于简单请求，如POST和GET，

请求在发送时会有一个额外的头部叫 Origin。Origin头部包含发送请求的页面的源（协议、域名和端口），以便服务器确定是否为其提供响应。

 Origin: http://www.XXX.com

如果服务器决定响应请求，那么应该发送 Access-Control-Allow-Origin头部，包含相同的源。

 Access-Control-Allow-Origin: http://www.XXX.com

如果没有这个头部，或者有但源不匹配，则表明不会响应浏览器请求。否则，服务器就会处理这个请求。无论请求还是响应都不会包含 cookie 信息。

postMessage

服务器代理

浏览器有跨域限制，但是服务器不存在跨域问题，所以可以由服务器请求所要域的资源再返回给客户端。

前端攻击技术

XSS攻击（cross site script，跨站脚本攻击）

攻击形式：通过 html 标签注入，篡改网页，插入恶意的脚本，前端可能没有经过严格的校验直接就进到数据库，数据库又通过前端程序又回显到浏览器
目的：拿到用户的一些信息，cookie 获取敏感信息，甚至自己建网站，做一些非法的操作

防御：

cookie 中设置 HttpOnly 属性，通过js脚本将无法读取到cookie信息
首先前端要对用户输入的信息进行过滤（可以用正则），通过替换标签的方式进行转码或解码，替换成html编码

 htmlEncodeByRegExp:function (str){
   var s = "";
   if(str.length == 0) return "";
   s = str.replace(/&/g,"&amp;");
   s = s.replace(/</g,"&lt;");
   s = s.replace(/>/g,"&gt;");
   s = s.replace(/ /g,"&nbsp;");
   s = s.replace(/'/g,"&#39;");
   s = s.replace(/"/g,"&quot;");
   return s;
   }

CSRF攻击（cross site request forgery,跨站请求伪造）

CSRF 是另外一种更具危险性的攻击方式，XSS 是站点用户进行攻击，而 CSRF 是通过伪装成站点用户进行攻击。

攻击形式：攻击者盗用用户的身份信息，并以用户的名义进行发送恶意的请求等，例如发邮件，盗取账号等非法手段。
防御：
- 验证 HTTP Referer字段
  
  在HTTP头中有Referer字段，他记录该HTTP请求的来源地址，如果跳转的网站与来源地址相符，那就是合法的，如果不符则可能是CSRF攻击，拒绝该请求。
- 在请求地址中添加 token并验证
  
  在请求的时候加一个token，值可以是随机产生的一段数字。token是存入数据库之后，后台返给客户端的，如果客户端再次登录的时候，后台发现token没有，或者通过查询数据库不正确，那么就拒绝该请求。
- 在 HTTP 头中自定义属性并验证

进程与线程

进程：是系统进行资源分配和调度的基本单位；指在系统中正在运行的一个应用程序；程序一旦运行就是进程。进程是资源分配的最小单位。

线程：是操作系统能够进行运算调度的最小单位。系统分配处理器时间资源的基本单元，或者说进程之内独立执行的一个单元执行流。线程是程序执行的最小单位。

进程就好比工厂的车间，它代表CPU所能处理的单个任务。任一时刻，CPU总是运行一个进程，其他进程处于非运行状态。线程就好比车间里的工人。一个进程可以包括多个线程。

操作系统的设计：

以多进程形式，允许多个任务同时运行；
以多线程形式，允许单个任务分成不同的部分运行；
提供协调机制，一方面防止进程之间和线程之间产生冲突，另一方面允许进程之间和线程之间共享资源。

浏览器存储

Cookie

HTTP Cookie是服务器发送到用户浏览器并保存在本地的一小块数据，它会在浏览器下次向同一服务器再发起请求时被携带并发送到服务器上。

cookie主要用于以下三个方面：

会话状态管理（如用户登录状态、购物车、游戏分数或其它需要记录的信息）
个性化设置（如用户自定义设置、主题等）
浏览器行为跟踪（如跟踪分析用户行为等）

由于服务器指定 cookie后，浏览器的每次请求都会携带 cookie数据，会带来额外的性能开销（尤其是在移动环境下）。如果cookie总数超过了单个域的上限，浏览器就会删除之前的cookie。

浏览器也会限制 cookie的大小。大多数浏览器对 cookie的限制是不超过 4096 字节，上下可以有一个字节的误差。为跨浏览器兼容，最好保证 cookie的大小不超过 4095字节。如果创建的 cookie超过最大限制，则该cookie 会被静默删除。

Cookie的构成

名称(name) ：唯一标识 cookie的名称，不区分大小写
值：存储在 cookie里的字符串值。这个值必须经过 URL编码
域(domain) ：cookie 有效的域，发送到这个域的所有请求都会包含对应的 cookie
路径(path) ：请求 URL中包含这个路径才会把 cookie发送到服务器
过期时间(expires) ：表示何时删除 cookie的时间戳（即什么时间之后就不发送到服务器了）。默认情况下，浏览器会话结束后会删除所有 cookie
安全标志(secure) ：设置之后，只在使用 SSL安全连接的情况下才会把 cookie发送到服务器

这些参数在 Set-Cookie 头部中使用分号加空格隔开：

 HTTP/1.1 200 OK
 Content-type: text/html
 Set-Cookie: name=value; expires=Mon, 22-Jan-07 07:10:24 GMT; domain=.wrox.com; secure
 Other-header: other-header-value

localStorage，sessionStorage与cookie 的区别

cookie在浏览器和服务器间来回传递；

sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存；
存储大小限制不同：cookie数据不能超过4k；

sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大；
数据有效期不同

cookie：在设置cookie过期时间之前一直有效，即使窗口或者浏览器关闭；

sessionStorage：当前浏览器窗口关闭前有效；

localStorage：始终有效直到用户删除，可以作为持久数据；
作用域不同

cookie在所有同源窗口中共享；

sessionStorage：在不同浏览器窗口不共享；

localStorage：在所有同源窗口间共享

单工、半双工和全双工通信

全双工（Full Duplex）是指在发送数据的同时也能够接收数据，两者同步进行，这好像我们平时打电话一样，说话的同时也能够听到对方的声音。目前的网卡一般都支持全双工。

半双工（Half Duplex）是指一个时间段内只有一个动作发生，数据可以在一个信号载体的两个方向上传输，但是不能同时传输。

单工指在通信过程的任意时刻，信息只能由一方A传到另一方B，任何时候不能改变信号传输方向。单工通信多用于无线广播、有线广播和电视广播，在局域网中并不采用。

浏览器总结 | 青训营笔记

浏览器