初级前端面试题(三)

目录

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

你可能感兴趣的:(vue,前端,vue.js)