目录
一、DOM
1. 请简述捕获模型
先经历从上到下的捕获阶段，再经历从下到上的冒泡阶段。
可以通过event.stopPropagation()来阻止捕获或者冒泡。
ps: 怎么去选择捕获或冒泡呢？
在我们添加事件监听的时候，比如说addEvnetListener('click',fn,ture/false)
第三个参数为布尔，true 是捕获阶段，传false或者不传值则是冒泡阶段。
2. 事件委托
怎么区分e.target 和e.currentTarget ？
- e.currentTarget：监听的类型
- e.targe：用户触发的对象
//应付面试，在项目中我们一般不用自己写，目前vue是会自动帮忙委托 ul.addEventListener('click', function(e){ if(e.target.tagName.toLowerCase() === 'li'){ fn()// 执行某个函数 } })高级版本：
思路： 点击span 后，去递归遍历查看span 的父级元素是不是li，只要看到有一个是li,就说明点击了li,一直看到ul 为止。
function delegate(element, eventType, selector, fn) { element.addEventListener(eventType, e => { let el = e.target //当前点击的元素 while (!el.matches(selector)) { if (element === el) { el = null break } el = el.parentNode //核心 } el && fn.call(el, e, el) }) return element } delete(ul, 'click', 'li', f1)优点:
节省监听器、动态监听、
二、HTTP
1. get 和post 的区别
1. 幂等性不同
- 由于get 是读，post是写，所以get是幂等的，post 不是；
- 由于get 是读，post是写，所以用浏览器打开网页会发动get 请求，想要post 打开网页要用form 标签；
- 由于get 是读，post是写，get 打开的页面刷新是无害的，post 打开的页面是需要确认的；
- 由于get 是读，post是写，get 结果会被缓存，post 不会；
- 由于get 是读，post是写，get 打开的页面可被书签收藏，post 打开的就不行。
2. 请求参数的区别
- 通常，get 请求传参是放在url 上面，post请求数据是放在消息体里面；
- get 和post 对于后端来说都是明文；
- 所有的服务器都会有长度限制。
3. TCP packet
- get 产生一个TCP数据包，POST 产生两个或以上的TCP数据包。
2. http 缓存有哪些方案
我们一般分为强缓存和弱缓存。http 有两个时代 （1.0时代和1.1时代）
1.1 时代最著名的头叫做，cache-coltrol，你只要在文件的响应头里面写上max-age=3600,那么他就会自动的缓存一个小时，
缓存过期了后，在请求里面写上Etag,浏览器向服务器发送的请求if-None-Match:ABC,
如果服务器返回304，意味着别删，返回200意味着删了，给你最新的。
1.0 存在BUG
用户时间错乱，时间不精确，假设1秒中改了多次呢。
缓存（强缓存）
内容协商（弱缓存）
HTTP 1.1
Cache-Control: max-age=3600 Etag: ABC
If-None-Match: ABC 响应状态码：304 或 200
HTTP 1.0
Expires: Wed, 21 Oct 2015 02:30:00 GMT Last-Modified: Wed, 21 Oct 2015 01:00:00 GMT
If-Modified-Since: Wed, 21 Oct 2015 01:00:00 GMT 响应状态码：304 或 200
3. http 和HTTPS 的区别
- http是明文传输，不安全；https 是加密传输的，安全；
- http 用的是80端口，https 是用443端口；
- http 较快，HTTPS较慢；
- https的证书一般是需要购买的，http 不需要。
4. 三次握手和四次挥手
3次握手： 建立TCP【通信】连接的时候，服务器和客户端会经历这个过程。
4次挥手：关闭TCP连接的时候，服务器和客户端会经历这个过程。
三次握手：
SYN同步信息。
- 浏览器向服务器发送 TCP 数据：SYN(seq=x)
- 服务器向浏览器发送 TCP 数据：ACK(seq=x+1) ，SYN(y)
- 浏览器向服务器发送 TCP 数据：ACK(seq=y+1)
四次挥手
- 浏览器向服务器发送 TCP 数据：FIN(seq=x)
- 服务器向浏览器发送 TCP 数据：ACK(seq=x+1)
/*******************中间进行一些数据的处理*************************/
- 服务器向浏览器发送 TCP 数据：FIN(seq=y)
- 浏览器向服务器发送 TCP 数据：ACK(seq=y+1)
5. 同源策略和跨域
同源策略：如果两个url协议、端口、域名完成一致的话，那这两个url 是同源的。
例如： www.baidu.com/s 和 baidu.com/s 不是同源策略。
在浏览器里打开，页面就默认遵守同源策略。
- 优点：
保护客户隐私安全和数据安全。
- 缺点：
很多时候前端需要访问另一个域名的接口，就会被浏览器阻止其获取响应。
跨域方法：
JSONP :改动小，没有用户认证，只能发get请求
CORS
Nginx 代理
6. Cookie和LocalStorage的区别
- Cookie 和 LocalStorage
主要区别是 Cookie 会被发送到服务器，而 LocalStorage 不会；
Cookie 一般最大 4k，LocalStorage 可以用 5Mb 甚至 10Mb（各浏览器不同）
- LocalStorage V.S. SessionStorage
LocalStorage 一般不会自动过期（除非用户手动清除）
SessionStorage 在回话结束时过期（如关闭浏览器之后，具体由浏览器自行决定）
- Cookie V.S. Session
Cookie 存在浏览器的文件里，Session 存在服务器的文件里
Session 是基于 Cookie 实现的，具体做法就是把 SessionID 存在 Cookie
7. http/1 .1和http/2的区别
http/2二进制传值，多路复用，压缩header，支持服务器推送。
http/1 字符串传输，不支持多路复用，不可以压缩，不支持服务器推送。