大厂前端面试题总结（浏览器）

客官°小女子只卖身不卖艺 2023-03-01 10:41 14阅读 0赞

> 本片文章如题主要讲解浏览器相关面试题，每道面试题都是从网上找的参考资料整理而来，侵删。部分未添加原文链接（如果想要了解面试题的更多信息，只需要点击每道面试后面的`参考链接`即可）；  
> 这一系列纯粹是为了个人面试整理的，为了圆一下二流学生的大厂梦！  
> **双击标题可快速上下切换内容呦！**  
> 本文内容**持续更新中**，如果您认为不错，还**请点赞收藏下哦！**

## 系列文章 ##

*  [大厂前端面试题总结（CSS篇）][CSS]
 *  [大厂前端面试题总结（ES6篇）][ES6]
 *  [大厂前端面试题总结（Web安全篇）][Web]
 *  [大厂前端面试题总结（性能优化篇）][Link 1]
 *  [大厂前端面试题总结（JS手写篇）][JS]
 *  [大厂前端面试题总结（JS理论篇）][JS 1]
 *  [大厂前端面试题总结（Vue篇）][Vue]

## 浏览器 ##

**目录**  
一、从输入URL到呈现页面过程  
二、强缓存、协商缓存、CDN缓存  
三、HTTP2  
四、HTTP状态码(修2020.8.3)  
五、三次握手与四次挥手  
六、跨域（JSONP/CORS）  
七、跨域时如何处理cookie  
八、垃圾回收机制  
九、DNS解析过程  
十、请求报文与响应报文  
十一、浏览器如何渲染页面的  
**扩展2020.7.30**  
十二、Cookie与Session的区别  
**扩展2020.8.7**  
十三、HTTP中Get、Post、Put和Delete的区别  
十四、sessionStorage,localStorage,cookie区别  
十五、Get和Post的区别  
十六、TCP有那些手段保证可靠交付

### 一、从输入URL到呈现页面过程 ###

**1、域名解析**  
当我们在浏览器中输入一个URL，例如”www.google.com”时，这个地址并不是谷歌网站真正意义上的地址。互联网上每一台计算机的唯一标识是它的IP地址，因此我们输入的网址首先需要先解析为IP地址，这一过程叫做DNS解析。

**2、TCP连接**  
HTTP协议是使用TCP协议作为其传输层协议的，在拿到服务器的IP地址后，浏览器客户端会与服务器建立TCP连接。三次握手

**3、浏览器发送HTTP请求**  
浏览器构建http请求报文，并通过TCP协议传送到服务器的指定端口。

**4、服务器处理HTTP请求**  
服务器处理http请求，并返回响应报文。

**5、浏览器页面渲染**  
浏览器接收到http服务器发送过来的响应报文，并开始解析html文档，渲染页面。

**6、断开TCP连接**  
四次挥手客户端与服务端断开连接

[参考链接][Link 2]

### 二、强缓存、协商缓存、CDN缓存 ###

#### 强缓存 ####

**表现形式：** 当浏览器对某个资源的请求命中了强缓存时，返回的http状态码为200，在chrome开发者工具中的network中的size会显示`from cache`。  
**实现方式：** 强缓存时利用`Expires`或者`Cache-Control`这两个http header实现的，都用来表示资源在客户端缓存的有效期。  
**起源：** Expires是http1.0提出的一个header，描述的是一个绝对时间，由服务器返回，用GMT格式的字符串表示，如`Exprires：Thu，31 Dec 2037 23：55：55 GMT`。  
**适用于：** 在网站存在大量静态网页时，比较适合强缓存，通常是为这些静态资源全部配置一个超时时间超长的`Expires`或`Cache-Control`，这样用户只会在第一次访问网站时加载静态资源，其他时间只要缓存没有失效并且用户没有强制刷新的条件下都会从缓存中加载。

#### 协商缓存 ####

如果命中协商缓存，请求响应返回的http状态为304以及一个Not Modified字符串，协商缓存利用的是`Last-Modified`、`If-Modified-Since`、`ETag`、`If-None-Match`这两对header来管理的，其中`Etag/If-None-Match的优先级比Last-Modified/If-Modified-Since高>`。  
一般服务器上的`Last-Modified`、`If-Modified-Since`和`Etag`、`If-None-Match`会同时启用，协商缓存需要配合强缓存使用：`协商缓存会先访问服务器看缓存是否过期，再决定是否从浏览器中拿数据。`

[强缓存与协商缓存详解][Link 3]

#### CDN缓存 ####

CDN：Content Delivery Network/Content Ddistribute Network，即内容分发网络  
客户端访问网站的过程：

**没有CDN：**  
1、用户在浏览器访问栏中输入要访问的域名；  
2、浏览器向DNS服务器请求对该域名的解析；  
3、DNS服务器返回该域名的IP地址给浏览器；  
4、浏览器使用该IP地址向服务器请求内容；  
5、服务器将用户请求的内容返回给浏览器。

**使用了CDN：**  
1、用户在浏览器中输入要访问的域名。  
2、浏览器向DNS服务器请求对域名进行解析。由于CDN对域名解析进行了调整，DNS服务器会最终将域名的解析权交给CNAME指向的CDN专用DNS服务器。  
3、CDN的DNS服务器将CDN的负载均衡设备IP地址返回给用户。  
4、用户向CDN的负载均衡设备发起内容URL访问请求。  
5、CDN负载均衡设备会为用户选择一台合适的缓存服务器提供服务。

> 选择的依据包括：根据用户IP地址，判断哪一台服务器距离用户最近；根据用户所请求的URL中携带的内容名称，判断哪一台服务器上有用户所需内容；查询各个服务器的负载情况，判断哪一台服务器的负载较小。  
> 基于以上这些依据的综合分析之后，负载均衡设置会把缓存服务器的IP地址返回给用户。

6、用户向缓存服务器发出请求。  
7、缓存服务器响应用户请求，将用户所需内容传送到用户。

如果这台缓存服务器上并没有用户想要的内容，而负载均衡设备依然将它分配给了用户，那么这台服务器就要向它的上一级缓存服务器请求内容，直至追溯到网站的源服务器将内容拉取到本地。

[参考链接][Link 4]

### 三、HTTP2 ###

**1.二进制传输**

**HTTP/2传输数据量的大幅减少,主要有两个原因:以二进制方式传输和Header 压缩**。我们先来介绍二进制传输,HTTP/2 采用二进制格式传输数据，而非HTTP/1.x 里纯文本形式的报文 ，二进制协议解析起来更高效。 **HTTP/2 将请求和响应数据分割为更小的帧，并且它们采用二进制编码。**

**2、Header压缩**

HTTP/2并没有使用传统的压缩算法，而是开发了专门的"HPACK”算法，在客户端和服务器两端建立“字典”，用索引号表示重复的字符串，还采用哈夫曼编码来压缩整数和字符串，可以达到50%~90%的高压缩率。

> 具体来说:
> 
>  *  在客户端和服务器端使用“首部表”来跟踪和存储之前发送的键-值对，对于相同的数据，不再通过每次请求和响应发送；
>  *  首部表在HTTP/2的连接存续期内始终存在，由客户端和服务器共同渐进地更新；
>  *  每个新的首部键-值对要么被追加到当前表的末尾，要么替换表中之前的值。

**3、多路复用**

在 HTTP/2 中引入了多路复用的技术。多路复用很好的解决了浏览器限制同一个域名下的请求数量（超过6个需要排队等待）的问题，同时也更容易实现全速传输，毕竟新开一个 TCP 连接都需要慢慢提升传输速度。  
[直观演示链接][Link 5]

**4、服务器推送（Server Push）**

HTTP2还在一定程度上改变了传统的“请求-应答”工作模式，服务器不再是完全被动地响应请求，也可以新建“流”主动向客户端发送消息。比如，在浏览器刚请求HTML的时候就提前把可能会用到的JS、CSS文件发给客户端，减少等待的延迟，这被称为"服务器推送"（ Server Push，也叫 Cache push）。

**总结**

*  HTTP/1.x 有连接无法复用、队头阻塞、协议开销大和安全因素等多个缺陷。
 *  HTTP/2 通过多路复用、二进制流、Header 压缩等等技术，极大地提高了性能，http2会慢慢取代HTTP/1.x 而被广泛采用。

[参考链接][Link 6]

### 四、HTTP状态码(修2020.8.3) ###

**2XX 成功**

*  200 OK，表示从客户端发来的请求在服务器端被正确处理
 *  204 No content，表示请求成功，但响应报文不含实体的主体部分
 *  206 Partial Content，进行范围请求

**3XX 重定向**

*  301 moved permanently，永久性重定向，表示资源已被分配了新的 URL
 *  302 found，临时性重定向，表示资源临时被分配了新的 URL
 *  303 see other，表示资源存在着另一个 URL，应使用 GET 方法定向获取资源
 *  304 not modified，表示服务器允许访问资源，但因发生请求未满足条件的情况
 *  307 temporary redirect，临时重定向，和302含义相同

**4XX 客户端错误**

*  400 bad request，请求报文存在语法错误
 *  401 unauthorized，表示发送的请求需要有通过 HTTP 认证的认证信息
 *  403 forbidden，表示对请求资源的访问被服务器拒绝
 *  404 not found，表示在服务器上没有找到请求的资源

**5XX 服务器错误**

*  500 internal sever error，表示服务器端在执行请求时发生了错误
 *  502 gateway error，服务器（不一定是Web服务器）作为网关或代理，以满足客户的要求来访问所请求的URL 。此服务器收到无效响应从上游服务器访问履行它的要求。
 *  503 service unavailable，表明服务器暂时处于超负载或正在停机维护，无法处理请求

### 五、三次握手与四次挥手 ###

**1、三次握手**  
三次握手：

*  第一次握手：建立连接时，客户端向服务端发送请求报文
 *  第二次握手：服务器收到请求报文后，如同意连接，则向客户端发送确认报文
 *  第三次握手，客户端收到服务器的确认后，再次向服务器给出确认报文，完成连接。

三次握手主要是为了防止已经失效的请求报文字段发送给服务器，浪费资源。

**2、四次挥手**  
客户端与服务器四次挥手，断开tcp连接。

*  第一次挥手：客户端想分手，发送消息给服务器；
 *  第二次挥手：服务器通知客户端已经接收到分手请求，但还没做好分手准备；
 *  第三次挥手：服务器已经做好分手准备，通知客户端；
 *  第四次挥手：客户端发送消息给服务器，确定分手，服务器关闭连接。

### 六、跨域（JSONP/CORS） ###

> **想要了解跨域得先了解同源策略**  
> 同源策略是浏览器的一个功能，Same Origin Policy，同源就是当协议、域名、端口号一致时就是同源。不同源的客户端脚本在没有明确授权下，不能读写对方的资源。简单地理解就是因为JavaScript同源策略的限制，它是浏览器为了安全性考虑一种非常重要的策略，a.com 域名下的js无法操作b.com或是c.a.com域名下的对象。详情说明表：  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODIwNTgw_size_16_color_FFFFFF_t_70]

**跨域**  
**跨域就是用某种方法突破同源策略的限制，实现获取其他域中的资源**。跨域方式如下：

1.  通过jsonp跨域
2.  document.domain + iframe跨域
3.  location.hash + iframe
4.  window.name + iframe跨域
5.  postMessage跨域
6.  跨域资源共享（CORS）
7.  nginx代理跨域
8.  nodejs中间件代理跨域
9.  WebSocket协议跨域

实现跨域一般有三种方法：

> **扩展：降域**。用改写document.domain+iframe的方法来获取目标域数据。缺点是安全性差，一个页面被攻击后另一个页面的数据也会被泄露且不支持ajax方式请求数据。降域只能解决主域相同而二级域名（子域名）不同的两个页面请求数据的情况，如果把script.a.com的domian设为alibaba.com那显然是会报错。将当前页面a.com和数据页面b.com的域名设置成相同的父域(主域名)、父父域名（主域名），domain只能设置为主域名，不可以在b.a.com中将domain设置为c.a.com；且只能由子域名改到父域名或父父域名，不能从父父域名改到子域名（比如将b.com改成script.b.com是不行的）

**1、JSONP**  
jsonp的原理：虽然浏览器默认禁止了跨域访问，但并不禁止在页面中引用其他域的JS文件，并可以自由执行引入的JS文件中的function（包括操作cookie、Dom等等）。根据这一点，可以方便地通过动态创建script节点的方法来实现完全跨域的通信。例如a.com/index.html中可以引用b.com/main.js、b.com/style.css、b.com/logo.png等资源，此类操作不受同源策略限制。实际操作中如果在a.com下用ajax去请求（读写）b.com下的内容会被同源策略阻止，但a.com里如果引用了b.com/main.js，虽然可以引用，但当这个引用的js文件（在a.com下引用）去读写（ajax）b.com的资源时一样会提示ajax错误。

> **jsonp的缺点：**
> 
> 1.  安全问题，src引用是开放的，所以jsonp的资源都被所有人访问到。解决方法是用jsonp中的token参数，通过A域和B域共用同一套cookie来验证A的身份。
> 2.  只能使用AJAX得GET方式，不能用POST方式获取数据**即只能读不能写**，因为是基于src引用的，引用是get请求。
> 3.  可被注入恶意代码如?callback=alert(1); 这问题只能用正则过滤字符串的方法解决，过滤callback后的内容不能有括号之类的条件

**2、CORS**  
CORS（Cross Origin Resource Sharing）是一个W3C标准，全称是“跨域资源共享”，使用它可以实现浏览器跨域，向服务器发出XMLHTTPRequest请求，从而克服了ajax只能同源使用的限制。CORS需要浏览器和服务器同时支持，目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。

**跨域问题解决方法**  
用`jsonp`方法实现跨域，假设a.com上的index.html主页要访问b.com域名下的data.js文件中的数据。  
① `a.com`页面中插入`script`标签，`src`属性值等于要请求的跨域资源，资源类型为js文件，使用`?callback=ask`传递参数。  
![在这里插入图片描述][2020072810593399.png]  
② `a.com`页面上定义函数`ask`。  
![Paste\_Image.png][Paste_Image.png]  
③ `b.com`下的`data.js`中被访问的数据用`a.com`定义的`ask`函数包裹。  
![Paste\_Image.png][Paste_Image.png 1]  
④ `a.com`页面加载执行效果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODIwNTgw_size_16_color_FFFFFF_t_70 1]

[参考链接][Link 7]

### 七、跨域时如何处理cookie ###

**1、设置反向代理服务器**  
因为cookie存在跨域问题，其中一个解决方法是，设置Nginx代理服务器，将两个服务器域名统一到一个反向代理服务器。

upstream www.test.com { 
            server 127.0.0.1:8080 weight=1; 
            server 127.0.0.1:8060 weight=1; 
        }
    
        server {
            listen       80;
            server_name  www.test.com;
            #charset koi8-r;
            #access_log  logs/host.access.log  main;
            location / {
            proxy_pass   http://www.test.com;
            index  index.html index.htm;
            }
        }

> 正向代理和反向代理的区别：`正向代理隐藏真实客户端，反向代理隐藏真实服务端。`图示：  
> ![草图如下][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODIwNTgw_size_16_color_FFFFFF_t_70 2]

**2、顶级域名与二级域名之间的cookie跨域问题**

*  通过设置domain
 *  顶级域名服务器与二级域名服务器之间哪个设置都能生效
 *  设置完毕后写回到客户端，用另一个服务器即可访问此Cookie
 *  `cookie.setDomain("test.com");`
 *  domain 设置为 test.com ,那么访问`a.test.com`页面去访问`b.test.com`就可以携带cookie，后端通过设置Cross,前后端都需要设置`Credentials为true`，这样就可以携带a的cookie给b的后端。
 *  前端Vue设置：`axios.defaults.withCredentials = true; //让ajax携带cookie`
 *  后端设置：

@Component
    public class CrossFilter implements Filter {
     
    	@Override
    	public void destroy() {
    	}
     
    	@Override
    	public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)
    			throws IOException, ServletException {
    		  try {  
    	            HttpServletRequest httpRequest = (HttpServletRequest) request;  
    	            HttpServletResponse httpResponse = (HttpServletResponse) response;  
    	  
    	            // 跨域  
    	            String origin = httpRequest.getHeader("Origin");  
    	            // 这里不能使用addHeader 方法,使用setHeader，获取到的httpResponse，已经携带Access-Control-Allow-Origin
    	            // 这个头，默认为 *
    	            if (origin == null) {  
    	                httpResponse.setHeader("Access-Control-Allow-Origin", "*");  
    	            } else {  
    	                httpResponse.setHeader("Access-Control-Allow-Origin", origin);  
    	            }  
    	            httpResponse.addHeader("Access-Control-Allow-Headers", "Content-Type,X-Cookie");  
    	            httpResponse.addHeader("Access-Control-Allow-Credentials", "true");  
    	            httpResponse.addHeader("Access-Control-Allow-Methods", "GET,POST,PUT,OPTIONS,DELETE");  
    	            if ( "OPTIONS".equals(httpRequest.getMethod())) {
    	                httpResponse.setStatus(HttpServletResponse.SC_OK);  
    	                return;  
    	            }  
    	            chain.doFilter(request, response);  
    	        } catch (Exception e) {  
    	            throw e;  
    	        }  
    	}
     
    	@Override
    	public void init(FilterConfig arg0) throws ServletException {
    	}
     
    }

[参考链接1][1]  
[参考链接2][2]

### 八、垃圾回收机制 ###

JS中垃圾回收机制主要通过`可达性`来进行垃圾回收。

**可达性**  
我的理解是`变量的值是否存在引用对象，如果不存在则该变量的值被垃圾回收，否则相反。`

**什么是垃圾**  
一般来说没有被引用的对象就是垃圾，就是要被清除， 有个例外：`如果几个对象引用形成一个环，互相引用，但根访问不到它们，这几个对象也是垃圾，也要被清除。`

**如何检测垃圾**  
基本的垃圾回收算法称为“标记-清除”，定期执行以下“垃圾回收”步骤:

*  垃圾回收器获取根并“标记”(记住)它们；
 *  然后它访问并“标记”所有来自它们的引用；
 *  然后它访问标记的对象并标记它们的引用，所有被访问的对象都被记住，以便以后不再访问同一个对象两次；
 *  以此类推，直到有未访问的引用(可以从根访问)为止；
 *  除标记的对象外，所有对象都被删除。

[参考链接][Link 8]

### 九、DNS解析过程 ###

DNS解析是一个递归查询的过程。例如，我们需要解析`www.google.com`时，会经历以下步骤：

*  在`本地域名服务器`中查询IP地址，未找到域名；
 *  本地域名服务器回向`根域名服务器`发送请求，未找到域名；
 *  本地域名服务器向`.com顶级域名服务器`发送请求，未找到域名；
 *  本地域名服务器向`.google.com域名服务器`发送请求，找到该域名，将对应的IP返回给本地域名服务器。

### 十、HTTP请求报文与响应报文 ###

**1、http请求报文**  
http请求报文一共包括三个部分：

*  请求行：指定http请求的方法、url、http协议版本等（①②③）
 *  请求头：描述浏览器的相关信息，语言、编码等。（④）
 *  请求正文：当发送`POST`, `PUT`等请求时，通常需要向服务器传递数据。这些数据就储存在请求正文中。（⑤）  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODIwNTgw_size_16_color_FFFFFF_t_70_pic_center]

**2、http响应报文**  
响应报文包括三个部分：

*  响应行：协议版本号，状态码（HTTP状态码）（①②）
 *  响应头：包含了响应的相关信息，如日期等（③）
 *  响应正文：服务器返回给浏览器的文本信息，通常的html、js、css、图片等就包含在这一部分里面。（④）  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODIwNTgw_size_16_color_FFFFFF_t_70_pic_center 1]

### 十一、浏览器如何渲染页面的 ###

具体的渲染过程包括：构建DOM树、构建渲染树、定位页面元素、绘制页面元素等。  
**渲染的流程如下：**

*  1.解析HTML文件，创建DOM树。  
    自上而下，遇到任何样式（link、style）与脚本（script）都会阻塞（外部样式不阻塞后续外部脚本的加载）。
 *  2.解析CSS。  
    优先级：浏览器默认设置<用户设置<外部样式<内联样式<HTML中的style样式；
 *  3.将CSS与DOM合并，构建渲染树（Render Tree）
 *  4.布局和绘制，重绘（repaint）和重排（reflow）

[参考链接][Link 9]

### 十二、Cookie与Session的区别 ###

Session是在服务端保存的一个数据结构，用来追踪用户的状态，这个数据可以保存在集群、数据库、文件中；Cookie是客户端保存用户信息的一种机制，用来记录用户的一些信息，也是实现Session的一种方式。  
区别：

1.  **数据存放位置不同**：Cookie通过在客户端存储信息确定用户身份，Session通过在服务器端存储信息确定用户身份；
2.  **安全程度不同**：Cookie不是很安全，别人可以分析存放在本地的Cookie并进行Cookie欺骗，考虑到安全性应该使用Session；
3.  **性能使用程度不同**：Session会在一定时间内保存在服务器上。当访问增多，会比较占用服务器的性能，考虑到服务器性能方面，应当使用Cookie；
4.  **数据存储大小不同**：单个Cookie保存的数据不能超过4k，很多浏览器都限制一个站点最多保存20个Cookie，而Session则存储在服务器端，浏览器对其没有限制；
5.  **会话机制不同**：  
    Session会话机制：Session会话机制是一种服务器端机制，它使用类似于哈希表的机构来保存信息。  
    Cookie会话机制：Cookie是服务器存储在本地计算机上的小块文本，并随每个请求发送到同一个服务器。Web服务器使用HTTP标头将Cookie发送到客户端。在客户端终端，浏览器解析Cookie并将其保存为本地文件，该文件自动将来自同意服务器的任何请求绑定到这些Cookie。

[参考链接][Link 10]  
[深入了解链接][Link 11]

### 十三、HTTP中Get、Post、Put和Delete的区别 ###

1、GET请求会向数据库发索取数据的请求，从而来获取信息，该请求就像数据库的select操作一样，只是用来查询一下数据，不会修改、增加数据，不会影响资源的内容，即该请求不会产生副作用。无论进行多少次操作，结果都是一样的。

2、与GET不同的是，PUT请求是向服务器端发送数据的，从而改变信息，该请求就像数据库的update操作一样，用来修改数据的内容，但是不会增加数据的种类等，也就是说无论进行多少次PUT操作，其结果并没有不同。

3、POST请求同PUT请求类似，都是向服务器端发送数据的，但是该请求会改变数据的种类等资源，就像数据库的insert操作一样，会创建新的内容。几乎目前所有的提交操作都是用POST请求的。

4、DELETE请求顾名思义，就是用来删除某一个资源的，该请求就像数据库的delete操作。

就像前面所讲的一样，既然PUT和POST操作都是向服务器端发送数据的，那么两者有什么区别呢。。。POST主要作用在一个集合资源之上的（url），而PUT主要作用在一个具体资源之上的（url/xxx），通俗一下讲就是，如URL可以在客户端确定，那么可使用PUT，否则用POST。

综上所述，我们可理解为以下：

1、POST /url 创建  
2、DELETE /url/xxx 删除  
3、PUT /url/xxx 更新  
4、GET /url/xxx 查看

### 十四、sessionStorage,localStorage,cookie区别 ###

1.  都会在浏览器端保存，有大小限制，同源限制
2.  cookie 会在请求时发送到服务器，作为会话标识，服务器可修改 cookie；web storage 不会发送到服务器
3.  cookie 有 path 概念，子路径可以访问父路径 cookie，父路径不能访问子路径
4.  cookie 有效期：cookie 在设置的有效期内有效，默认为浏览器关闭；sessionStorage 在窗口关闭前有效，localStorage 长期有效，直到用户删除
5.  共享：sessionStorage 不能共享，localStorage 在同源文档之间共享，cookie 在同源且符合 path 规则的文档之间共享
6.  localStorage 的修改会促发其他文档窗口的 update 事件
7.  cookie 有 secure 属性，要求 HTTPS 传输
8.  浏览器不能保存超过 300 个 cookie，单个服务器不能超过 20 个，每个 cookie 不能超过 4k。web storage大小支持能达到 5M

### 十五、Get和Post的区别 ###

**请求方式不同**

GET重点从服务器上获取资源,POST重点向服务器发送数据.

**参数不同**

get传输数据是通过URL请求，置于URL后，并用”?”连接，多个请求数据间用”&”连接.post传输数据通过Http的post机制，将字段与对应值封存在请求实体中发送给服务器，这个过程对用户是不可见的；

**传输数据量不同**

Get传输的数据量小，因为受URL长度限制，但效率较高；

Post可以传输大量数据，所以上传文件时只能用Post方式；

**安全性不同**

get是不安全的，因为URL是可见的，可能会泄露私密信息，如密码等；

post较get安全性较高；

**字符编码不同**

get方式只能支持ASCII字符，向服务器传的中文字符可能会乱码。

post支持标准字符集，可以正确传递中文字符。

### 十六、TCP有那些手段保证可靠交付 ###

TCP通过下列方式来提供可靠性：  
**1、将数据截断为合理的长度。**  
应用数据被分割成TCP认为最适合发送的数据块。这和UDP完全不同，应用程序产生的数据报长度将保持不变。  
**2、超时重发**  
当TCP发出一个段后，它启动一个定时器，等待目的端确认收到这个报文段。如果不能及时收到一个确认，将重发这个报文段。  
**3、对于收到的请求，给出确认响应**  
当TCP收到发自TCP连接另一端的数据，它将发送一个确认。这个确认不是立即发送，通常将推迟几分之一秒。(之所以推迟，可能是要对包做完整校验)  
**4、校验出包有错，丢弃报文段，不给出响应，TCP发送数据端，超时时会重发数据**  
TCP将保持它首部和数据的检验和。这是一个端到端的检验和，目的是检测数据在传输过程中的任何变化。 如果收到段的检验和有差错，TCP将丢弃这个报文段和不确认收到此报文段。 （希望发端超时并重发）  
**5、对失序数据进行重新排序，然后才交给应用层  
既TCP报文段作为IP数据报来传输。**  
IP数据报的到达可能会失序，因此TCP报文段的到达也可能会失序。 如果必要，TCP将对收到的数据进行重新排序，将收到的数据以正确的顺序交给应用层。  
**6、对于重复数据，能够丢弃重复数据**  
既然IP数据报会发生重复，TCP的接收端必须丢弃重复的数据。  
**7、TCP还能提供流量控制。**  
TCP连接的每一方都有固定大小的缓冲空间。  
TCP的接收端只允许另一端发送接收端缓冲区所能接纳的数据。这将防止较快主机致使较慢主机的缓冲区溢出。TCP使用的流量控制协议是可变大小的滑动窗口协议。

TCP提供一种面向连接的、可靠的字节流服务。

**面向连接：** 意味着两个使用TCP的应用（通常是一个客户和一个服务器）在彼此交换数据之前必须先建立一个TCP连接。在一个TCP连接中，仅有两方进行彼此通信。广播和多播不能用于TCP。

**字节流服务：** 两个应用程序通过TCP连接交换8bit字节构成的字节流。TCP不在字节流中插入记录标识符。我们将这称为字节流服务（bytestreamservice）。 TCP对字节流的内容不作任何解释:TCP对字节流的内容不作任何解释。TCP不知道传输的数据字节流是二进制数据，还是ASCII字符、EBCDIC字符或者其他类型数据。对字节流的解释由TCP连接双方的应用层解释。

[参考链接][Link 12]

[CSS]: https://blog.csdn.net/qq_37820580/article/details/107289944
[ES6]: https://blog.csdn.net/qq_37820580/article/details/107503676
[Web]: https://blog.csdn.net/qq_37820580/article/details/107658086
[Link 1]: https://blog.csdn.net/qq_37820580/article/details/107493640
[JS]: https://blog.csdn.net/qq_37820580/article/details/107809181
[JS 1]: https://blog.csdn.net/qq_37820580/article/details/107358309
[Vue]: https://blog.csdn.net/qq_37820580/article/details/113549411
[Link 2]: https://www.cnblogs.com/xufeimei/p/10745227.html
[Link 3]: https://www.jianshu.com/p/fb59c770160c
[Link 4]: https://www.jianshu.com/p/47f3406c8084
[Link 5]: https://s2.51cto.com/oss/201910/14/c86ac19836120f6e7efcb4399f4f8dee.gif
[Link 6]: https://developer.51cto.com/art/201910/604255.htm
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODIwNTgw_size_16_color_FFFFFF_t_70]: /images/20230208/e1488d80b6964ddcb258c793ad74a7d8.png
[2020072810593399.png]: /images/20230208/49f2c05dc2874b1282ea8829ffe6336f.png
[Paste_Image.png]: https://img-blog.csdnimg.cn/20200728105944427.png
[Paste_Image.png 1]: https://img-blog.csdnimg.cn/20200728105959432.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODIwNTgw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200728110012481.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODIwNTgw,size_16,color_FFFFFF,t_70
[Link 7]: https://www.jianshu.com/p/dbd8f410985d?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODIwNTgw_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200728111034216.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODIwNTgw,size_16,color_FFFFFF,t_70
[1]: https://www.cnblogs.com/mengfangui/p/10521594.html
[2]: https://blog.csdn.net/m0_37948170/article/details/88018126
[Link 8]: https://segmentfault.com/a/1190000018605776
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODIwNTgw_size_16_color_FFFFFF_t_70_pic_center]: https://img-blog.csdnimg.cn/2020111215462273.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODIwNTgw,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODIwNTgw_size_16_color_FFFFFF_t_70_pic_center 1]: https://img-blog.csdnimg.cn/20201112154756734.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODIwNTgw,size_16,color_FFFFFF,t_70#pic_center
[Link 9]: https://blog.csdn.net/weixin_43618932/article/details/89183598
[Link 10]: https://zhidao.baidu.com/question/575343552.html
[Link 11]: https://www.cnblogs.com/l199616j/p/11195667.html
[Link 12]: https://blog.csdn.net/qq_33878858/article/details/90200032