面试题(三)"/>
初级前端面试题(三)
一、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 = nullbreak}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/s 和 baidu/s 不是同源策略。
在浏览器里打开,页面就默认遵守同源策略。
- 优点:
保护客户隐私和数据安全。
- 缺点:
很多时候前端需要访问另一个域名的接口,就会被浏览器阻止其获取响应。
更多推荐
初级前端面试题(三)
发布评论