关于http的一切(updating...)

1.http和https

http：

超文本传输协议，默认端口80，无连接无状态
解决无连接(一次连接处理一个请求)，connection:keep-alive
解决无状态,cookie(在客户端记录状态)和session(在服务器记录状态)
http1.1,默认connection:keep-alive,通过content-length判断数据是否接受完全(防止并行连接)
http2.0,文本传输格式采用二进制，连接共享(不同的request可以使用同一个连接传输,并行)

https

超文本加密传输协议，http+ssl/tls,默认端口443
客户端向服务器索要公钥，双方协商生成对话密匙，双方采用对话密匙进行加密通信

2.浏览器的同源机制

协议、域名、端口号都相同，只要有一个不相同，那么都是非同源。

同源策略限制的情况:

Cookie,localStorage和indexDB无法读取
DOM和js对象无法获取
AJAX请求不能发送
注意，img,iframe,script等标签的src属性可以访问非同源网站的资源。

3.跨域问题

跨域问题解决的是请求非同源网站的资源

CORS(Cross-Origin Resource Sharing),CORS允许浏览器向跨域的服务器发送XMLHttpRequest请求，浏览器端的CORS跨域会在请求时自动完成，但是服务器需要进行必要的处理，即在服务器端设置响应头setHeader(“Access-Control-Allow-Origin”, “*”);
JSONP（JSON with Padding) 方式，动态添加 script标签来调用服务器提供的 js脚本，请求方式为get，返回的是一段可执行的js代码而非json数据的格式。
WebSocket协议,不实行同源协议，因其请求头中具有Origin字段，服务器可根据它判断是否允许同性。
Server Proxy(服务器代理)，浏览器受同源策略限制，但服务器不受。因此可由服务器代理客户端跨域请求资源。在 node 环境中，可以在 package.json 文件设置 proxy 字段完进行服务器代理。

4.XSS和CSRF

xss (Cross Site Script)):跨站脚本攻击，指攻击者在返回的HTML中嵌入js脚本
解决方法： 在http响应头设置set-cookie:http-only(禁止js脚本访问cookie)

csrf (Cross-site request forgery)：跨站请求伪造，攻击者劫持cookie伪造用户向服务器发送请求并违规操作。
解决方法：

验证码(验证用户身份)
token验证(在http请求中添加随机生成的token，并在服务器验证。)

区别：csrf需要登录,xss无需。csrf是请求页面进行非法操作，xss是在页面中嵌入非法js脚本

5.tcp和udp区别

tcp是面向连接的，udp是无连接的
tcp是可靠性传输，所传送的数据安全性具有保障。而udp只保证数据传输到位。
tcp只能是一对一，udp可以是一对多
tcp虽然数据传输安全性高，但速度慢。udp虽然安全性低，但速度快。

5.Cookie、session，sessionStorage、localStorage的区别

Cookie数据始终在同源的http请求中携带(即在浏览器和服务器之间传递)
sessionStorage，localstorage仅在本地保存
sessionStorage仅在当前浏览器窗口关闭前有效，不能持久化保存。
localStorage始终有效，可以用作持久数据。且所有同源窗口共享
Cookie只在设置的cookie过期时间之前一直有效。且所有同源窗口共享。
cookie可以保存用户状态，例如登录状态，地区状态，行为状态。
session存储于服务器端，cookie存储于浏览器端。
session过多或访问过多，会增加服务器压力，影响性能。考虑减轻压力，普通信息可放到cookie
cookies可能会被黑客利用数据欺骗，重要信息放在session上。

6.请求方式之get，post，head，options

get： 通过url传输，参数保存url后面且有长度限制，GET请求可以缓存。
post： 通过request body传输，内容保存在请求体中，常用于更新数据，且不可被缓存
head： 同GET相同，但没有响应体，仅传输状态行和标题部分。
options： 允许客户端查看服务器的性能，比如说服务器支持的请求方式等等。

get和post的深度区别：

对于get请求，浏览器会把http header和data一并发送出去，服务器响应200(返回数据)。
对于post请求，浏览器先发送http header，服务器响应100，然后再发送data，服务器响应200
get具有幂等性(即对资源的一次或多次请求，不会产生副作用)，
而post因其往往有副作用，因此不幂等。
get产生一个tcp数据包，post产生两个tcp数据包。
论速度上get更快，论安全性(体现在数据完整性上)上post更高。
但在fireFox上，post只发送一次。

7.http常见状态码

1**：服务器收到请求，操作未完成；
2**：请求成功；
3**：重定向，需要进一步操作以完成请求；
4**：客户端错误；
5**：服务器错误；

100(Continue)： 继续。客户端应继续其请求
200(OK)： 请求成功，一般用于get和post
304(Not Modified)： 所请求的资源未修改，例get请求已被允许，但文档内容并未改变。
403(Forbidden)： 服务器理解请求客户端的请求，但是拒绝执行此请求
404(Not Found) 服务器无法根据客户端的请求找到网页(资源)

8.浏览器缓存机制

缓存过程：

浏览器每次发送请求，都会先从缓存中寻找该请求的结果以及缓存标识
浏览器每次拿到返回的结果都会将返回结果和缓存标识存入缓存中

根据浏览器是否要重新向服务器发送请求，将缓存过程分为强缓存和协商缓存

强缓存：

不会向服务器发送请求，直接从缓存中读取资源，服务器返回状态码为200
强缓存可以通过在Http Header 中设置Cache-Control和Expires
Cache-Control是http1.1的产物，主要用于控制网页缓存。比如当Cache-Control:max-age = 300时，则代表在这个请求正确返回时间的5分钟内再次加载资源，就会命中强缓存。超过，则缓存过期，需要重新请求。
Expires是http1.0的产物，即缓存过期时间，用来指定资源到期的时间，是服务器端的具体的时间点。用法和Cache-Control类似。
Cache-Control优先级比Expires高，Expires由于是1.0的产物，因此常用来兼容旧的浏览器。

强缓存判断缓存的依据来自于是否超出某个时间，而不关心服务器端的文件是否已经发生更新，这可能会导致加载文件并不是服务器端最新的内容。因此我们用到了协商缓存

协商缓存：

指强缓存失效后，浏览器携带缓存标识向服务器端发送请求，由服务器根据缓存标识决定是否使用缓存的过程。
协商缓存生效，返回304(也就是资源未更新)
协商缓存失效，返回200和请求结果
两种 HTTP Header 实现：Last-Modified(1.0)和ETag(1.1)
Last-Modified则记录服务器资源最后修改时间，所以只需要比较两者修改时间是否一致，就可以判断资源是否发生修改。但因此存在问题，例如打开本地缓存的操作即使不修改，也会使修改时间更新，从而导致服务器无法命中缓存，返回重复资源。
Etag是服务器响应请求时，返回当前资源文件的一个唯一的标识（由服务器生成），只要资源有变化，Etag就会重新生成。所以服务器只需要比较这一次的Etag值和上一次的是否一致，相同则资源没发生改变。若不一致，则以常规形式返回200以及新的资源（包括新的Etag值）。

实际场景应用缓存策略：

对于频繁变动的资源，设置Cache-Control:no-cache，使其可以配合Etag来验证资源是否更新
对于不长变化的资源，设置Cache-Control:max-age = 3153600。
综上，动的资源，用协商缓存；不动的资源，用强缓存。

9.Ajax（Asynchronous JavaScript and XML）

Ajax实现客户端再不刷新页面的情况下，与服务器进行异步通信，即局部刷新技术。
Ajax核心是XMLHttpRequest对象，浏览器把请求发送到XMLHttpRequest对象中经过分装后，再发送给服务器，服务器将以流的形式返回数据，从而避免了转发导致页面刷新。

Axios 是基于Promise实现的XHR封装，支持浏览器和node环境，且高度支持Promise API，符合ES标准。它默认对携带数据进行JSON序列化。也提供了拦截，取消请求等功能。

10.http头部信息

1.通用头（请求头和响应头都共有的属性）：

cache-control，缓存机制。有no-cache,max-age等值
Connection。是否支持持久连接，keep-alive，http1.1默认长连接
Date,时间

2.请求头：

Accept。Accept-charset，Accept-Encoding,Accept-lanuage等等，告诉服务器自己所能接受介质类型。
Cookie：保存的Cookie对象
Host，浏览器指定自己要访问的服务器ip地址和端口号

3.响应头：

Allow：服务器支持哪些请求方法（如GET、POST等）
Expires：文档过期时间
Set-Cookie：设置与页面关联的Cookie

11.OSI七层模型与TCP/IP五层模型

应用层。为计算机用户提供接口，也为用户直接提供网络服务。http，https，ftp协议
表示层。提供各种应用层数据的编码和转换功能
会话层。负责建立、管理和终止表示层实体之间的通信会话。
传输层。建立主机端到端的连接。tcp，udp协议
网络层。通过ip寻址来建立两个节点直接的连接。
数据链路层。提供介质访问和链路管理
物理层。信号的最终传输的介质。

12.浏览器内核

进程：进程是cpu资源分配的最小单位。采用管道通信
线程：线程是cpu调度的最小单位(一个进程中可以有多个线程)。锁机制（互斥锁，条件变量，读写锁）通信。
对于浏览器而言，浏览器是多进程的，每一个窗口都是一个独立的进程。有以下4个主要进程

Browser进程。浏览器的主进程(唯一)，负责各个页面的管理。
第三方插件进程。每种类型的插件对应一个进程，只有在使用的时候才创建。
GPU进程。最多一个，用于3D绘制
浏览器渲染进程，即浏览器内核，多线程。主要为页面渲染，脚本执行，事件处理等。

浏览器内核

GUI渲染线程。负责html的解析，构建DOM，CSSOM,render树，回流重绘等等
js引擎线程。js内核，负责解析和运行js脚本。一个tab页只能有一个js线程，js是单线程的。
事件触发线程。归属于浏览器而不是js，但事件的执行需要等待js引擎来完成。
定时触发器线程。归属于浏览器，setTimeout/setInterval等，但同样执行需要js引擎来执行。
异步http请求线程。通过浏览器开启新的线程，若有回调，回调函数放入事件队列，给js执行。
且js线程和GUI线程是互斥的。当js引擎执行时GUI线程就会被挂机。

HTML5的Web Worker ：

创建Worker时，js引擎向浏览器申请开一个额外的子线程。且worker运行在另一个全局上下文中。
js引擎线程与worker线程间通过特等的方式通信。

Web worker：只属于某一个页面，不会和其他页面共享。
sharedWorker：是浏览器所有页面共享，不隶属于某个render进程。
sharedWorker是有独立的进程管理，WebWorker只是属于render进程下的一个线程。

13.简单请求和非简单请求

浏览器将CORS请求分成两类：简单请求和非简单请求。
浏览器请求头中增加origin字段，用于描述本次请求的源(端口+协议+域名)
服务器端如果支持，则返回的头信息中包含Access-Control-Allow-Origin，值为支持的源。值为*表示支持任何源。若指定的源不在可许的范围，则会正常返回http，但头信息不包括Access-Control-Allow-Origin。（注：返回的状态码可能为200）。
简单请求：

请求方式为get，post，head(本质和get一样，但不含数据，只有http头部信息)
http头信息不超出以下几种字段：Accept，Accept-Language，Content-Language，Last-Event-ID
Content-Type

非简单请求：

请求方式为put，delete
自定义头部字段
发送json格式数据
在正式通信前，浏览器先会发送Options请求，进行预检，称作“预检请求”
预检请求头中除了origin，必须还包含Access-Control-Request-Method：put/delete。
服务器正式响应预检请求后，才会发送真正的请求，并且携带真实数据。

预检请求的作用：

浏览器的同源策略，有2种限制跨域请求。
1.限制发起跨域请求 2.跨域请求可以发起，但返回的结果被浏览器拦截
针对第2种，如果请求方式是带副作用的，且有可能对服务器的数据产生了影响。
为了防止这种情况的发生，对于可能对服务器数据产生副作用的请求方式，浏览器必须使用options方法发起一个预检请求，从而获知服务器是否允许跨域请求。
即避免跨域请求对服务器端的数据产生未知的影响。

14.重定向和转发

本质区别：转发是服务器行为，重定向是客户端行为。
转发：

浏览器发送请求，服务器收到请求
调用内部的一个方法在容器内部完成请求处理和转发动作
将目标资源发送给客户
浏览器只进行了一次请求

重定向：

浏览器发送请求，服务器接收后返回302状态码以及对应的location给浏览器
浏览器发现是302，则自动在发送一个新的请求给loaction地址(可重定向任何URL)
浏览器做了2次请求。

区别：

重定向浏览器地址有变化；转发没有
重定向不能携带数据，转发可以
重定向浏览器发送两个请求；转发只发送了一个
重定向发生在客户端，转发发生在服务端。