初级前端面试题（三）

目录

一、DOM

1. 请简述捕获模型

2. 事件委托

二、HTTP

1. get  和post 的区别

2. http 缓存有哪些方案

3.  http 和HTTPS 的区别

4. 三次握手和四次挥手

5. 同源策略和跨域 

6. Cookie和LocalStorage的区别

7. http/1 .1和http/2的区别

---

一、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 字符串传输，不支持多路复用，不可以压缩，不支持服务器推送。