http部分
http 部分
# 1.GET 和 POST 的区别
- GET 请求在浏览器回退和刷新时是无害的，而 POST 请求会告知用户数据会被重新提交；
- GET 请求可以收藏为书签，POST 请求不可以收藏为书签；
- GET 请求可以被缓存，POST 请求不可以被缓存，除非在响应头中包含合适的 Cache-Control/Expires 字段，但是不建议缓存 POST 请求，其不满足幂等性，每次调用都会对服务器资源造成影响；
- GET 请求一般不具有请求体，因此只能进行 url 编码，而 POST 请求支持多种编码方式。
- GET 请求的参数可以被保留在浏览器的历史中，POST 请求不会被保留；
- GET 请求因为是向 URL 添加数据，不同的浏览器厂商，代理服务器，web 服务器都可能会有自己的长度限制，而 POST 请求无长度限制；
- GET 请求只允许 ASCII 字符，POST 请求无限制，支持二进制数据；
- GET 请求的安全性较差，数据被暴露在浏览器的 URL 中，所以不能用来传递敏感信息，POST 请求的安全性较好，数据不会暴露在 URL 中；
- GET 请求具有幂等性(多次请求不会对资源造成影响)，POST 请求不幂等；
- GET 请求一般不具有请求体，请求中一般不包含 100-continue 协议，所以只会发一次请求，而 POST 请求在发送数据到服务端之前允许双方"握手"，客户端先发送 Expect:100-continue 消息，询问服务端是否愿意接收数据，接收到服务端正确的 100-continue 应答后才会将请求体发送给服务端，服务端再响应 200 返回数据。
面试回答：
1.首先get请求相当于一个url，很多方面根url是一样的。比如可以在地址栏直接访问、可以当做书签收藏、收到长度和编码的限制，只能是ASCII字符。没有请求体，参数附在url后面。安全性较差，速度相对较快。具有幂等性，多次请求不会对资源有影响
2.post一般具有请求体，参数放在请求体重，支持多种编码格式。发送时会预先有一个100的确认过程，所以速度相对get要慢一点。多次请求会对资源产生影响。
3.一般来说，查询用get，有修改时用post。
# 2.网页从输入网址到渲染完成经历了哪些过程？
大致可以分为如下 7 步：
简化版再下面，完整版https://juejin.cn/post/7066582950967509028?utm_source=gold_browser_extension (opens new window)
解析
- 输入网址进行 url 校验解析，如果是正确的URL，则开始加载，否则根据默认搜索引擎开始搜索
- 构建请求行，通过进程间通信ICP将请求发送到网络进程
- 查找缓存。看是否有缓存，如果有则直接返回，没有则开始网络请求
- 根据HOST和配置的DNS服务器，去查找对应URL的服务器IP端口
- 请求
- 准确开始TCP请求，浏览器对TCP请求有数量限制，如果前面还有请求则需等待
- 开始建立TCP请求，三次握手后建立连接
- 发起HTTP请求。包含请求头、请求体、cooike、域名等等数据
- 服务器返回响应数据，状态码、返回的数据等
- 断开连接，四次挥手
- 渲染
- 解析数据。根据Content-type判断数据类型，字节流则下载，如果是html则准备渲染
- 注意：如果是同一个页签下新开的且同一站点，会使用同一个进程渲染。
- 提交文档到渲染进程，更新浏览器状态，包含地址栏、前进后退等。就是正式进入了这个网页
- 解析HTML，加载子资源
- 构建dom树
- 将引入的CSS转换成浏览器能够识别的样式，结合style，开始样式计算。计算出每个dom的样式，
- 开始布局，根据DOM树和CSS生成一个只包含可见节点的render树，再计算位置和大小得到一个布局树。（回流会影响render树，重绘只会影响布局树）
- 开始绘制图层
- 光栅化：优先处理可视范围内的
- 合成页面，所有图层光栅化后显示页面
# 3. 存储方式
cookies
cookie 的内容主要包括：名字、值、过期时间、路径和域。路径与域一起构成 cookie 的作用范围。若不设置时间，则表示这个 cookie 的生命期为浏览器会话期间，关闭浏览器窗口，cookie 就会消失。
cookie 数据始终在同源的 http 请求中携带（即使不需要），即 cookie 在浏览器和服务器间来回传递，
cookie 数据不能超过 4K
localstorage 和 sessionStorage
- 存储在本地，大小为 5M 左右
- 数据要求同源
sessionStorage、localStorage 和 cookie 的对比
相同点：保存在浏览器端，且同源
区别：
① cookie 只有 4kb,sessionStorage、localStorage 都是 5M 左右
② cookie 会在请求中来回传递，另外 2 个不会
③ cookie 可以设置作用域，其他不可以
④ sessionStorage 只在当前页签中生效，且关闭即销毁。localStorage 同源即可，且永久保存
//设值和取值方法 //cookie： document.cookie = key + '=' + value + '; expires=' + oDate.toDateString() document.cookie.split('; ') // sessionStorage window.sessionStorage.setItem('myname', '王大仙') window.sessionStorage.getItem('myname') // sessionStorage window.localStorage.setItem('myname', '王大仙') window.localStorage.getItem('myname')
# 4.XSS 和 CSRF
XSS 脚本注入 通过表单文本等途径向服务器里提交有害 SQL 或者 JS，例如在登陆里填写
<script src=//xxxx.cn/image/t.js></script>CSRF：跨站/跨域攻击 获得登陆信息后，在其他网站调用此网站的接口，进行操作
区别一 XSS：不需要登录。 CSRF：需要用户先登录网站 A，获取 cookie。
区别二（原理的区别） XSS：是向网站 A 注入 JS 代码，然后执行 JS 里的代码，篡改网站 A 的内容。 CSRF：是利用网站 A 本身的漏洞，去请求网站 A 的 api。
对策：XSS 提交的内容要进行过滤验证等 CSRF：token 验证，Referer 判断来源网站 验证。
# 5.http 和 TCP
TCP 是传输层，http 是应用层。HTTP 协议是建立在 TCP 协议之上的一种应用。TCP是用来打开传输通道的，http需要借助这个通道完成传输。
相当于tcp是铁路，http是火车。得先铺好铁路，火车才能通信运送货物。一般http请求开始时打开铁路，结束之后就会关闭铁路
但tcp本身是一种长连接，可以一直不关闭，也可以手动关闭
TCP 三次握手和四次挥手
三次握手:客户端请求连接——服务端收到请求确认可以连接——客户端收到确认再发送一次回应
四次挥手：主动方表示数据发送完毕——被动方表示也发送完毕——主动方发起中断请求——被动方确认可以终端
# http 状态码
1信息，服务器收到请求，需要请求者继续执行操作 2 成功，操作被成功接收并处理 3重定向，需要进一步的操作以完成请求 4 客户端错误，请求包含语法错误或无法完成请求 5** 服务器错误，服务器在处理请求的过程中发生了错误
- 200
- 301 永久重定向
- 302 临时重定向
- 304 缓存
- 400 请求有问题
- 401 身份认证
- 403 拒绝请求
- 404 notfound
- 500 服务器错误
# 跨域
原因：浏览器同源策略要求相同协议 IP 端口 解决办法：JSONP，CORS，Nginx，白名单
JSONP 只支持 get。原理：利用script标签的src属性不受同源策略的限制，并且资源加载完成后会被当作js脚本立即执行的特点，来达到跨域请求资源的目的。
- 方法：前端创建一个script，并且传入一个回调作为参数。后端返回时要返回回调函数，前端会立即执行
- 缺点：只支持get，需要后端配合。
this.$http .jsonp('http://www.domain2.com:8080/login', { params: {}, jsonp: 'handleCallback' }) .then(res => { console.log(res) })CORS
- 原理：浏览器在请求头中自动加入origin字段，origin字段用来说明本次请求来自哪个源（协议+域名+端口），服务器根据这个值，决定是否同意这次请求。同意之后返回的时候加上Access-Control-Allow-Origin字段。
-注意点： 1、普通跨域请求：只需服务器端设置 Access-Control-Allow-Origin. 2、带 cookie 跨域请求：前后端都需要进行设置 axios.defaults.withCredentials = true
- Nginx 代理 在 Nginx 中配置，如果是某个端口过来的请求，直接给转发到后台的端口
- proxy
# 对于初始化很多请求的情况下，可以用http2
浏览器对于http请求有数量限制，但http2没有