@pspgbhu 2019-08-25T17:21:41.000000Z 字数 4682 阅读 953

几道面试题

未分类

初级

一个未知宽高元素怎么上下左右垂直居中

题：一个父元素里面有一个未知宽高的子元素，如何使得子元素相较于父元素上下左右垂直居中。

注意：此题不要

父元素 table-cell

.father {
    display: table-cell;
   width: 200px;
   height: 300px;
   vertical-align: middle;  
}

绝对定位 + transform

.father {
 position: relative
}
.child {
 position: absolute;
 left: 50%;
 right: 50%;
 transform: translate(-50%, -50%);
}

flex

.father {
 display: flex;
 align-items: center;
 justify-content: center;
}

还有一些其他方法暂不列出

请写出以下 console 的输出

var foo = 1;
function test() {
  console.log(foo);   // 打印 undefined
  var foo = 'smart';
  console.log(foo);     // 打印 smart
}
test();

考点是定义变量时会有变量提升的效果。因此 test 函数等效于

function test() {
    var foo;
  console.log(foo);
  foo = 'smart';
  console.log(foo);
}

var a;
console.log(typeof a); // 打印 undefined
console.log(b);              // 打印 undefined

这个题没啥特殊的，就看能不能答对了

var Item = {
  id: 1,
  getId: function() {
    return this.id;
  }
};
console.log(Item.getId()); // 1
var func = Item.getId;
console.log(func());       // undefined

考函数体内的 this 指向，第一个调用，this 指向 Item 对象，下面的那个调用，this 指向 window 对象

DOM 事件流

下图是 W3C 最新草案中附上的事件流示意图

DOM 事件流中规定了事件流包含三个阶段：事件捕获阶段(capture phase)，处于目标阶段(target phase) 和 事件冒泡阶段(bubble phase)

当在页面中某个元素上触发事件时，就会先进入到 事件捕获阶段，该阶段会从 window 对象开始 一级一级沿着目标元素的祖先元素们向下捕获（DOM2 中规定事件应从 document 对象开始传播，但在 DOM3 中增加了 window 对象），直到到达触发事件的目标元素的父元素为止。然后在触发事件的目标元素上进入 处于目标阶段，而后进入事件冒泡阶段，从目标元素的父元素开始一直到传播到 window 对象上。

事件流三个阶段的准确定义

W3C 最新的 DOM Events 草案关于三个阶段的定义。

The capture phase: The event object propagates through the target’s ancestors from the Window to the target’s parent. This phase is also known as the capturing phase.

The target phase: The event object arrives at the event object’s event target. This phase is also known as the at-target phase. If the event type indicates that the event doesn’t bubble, then the event object will halt after completion of this phase.

The bubble phase: The event object propagates through the target’s ancestors in reverse order, starting with the target’s parent and ending with the Window. This phase is also known as the bubbling phase.

事件捕获阶段：从 window 对象开始，事件对象会沿着目标元素的祖先们一直传播到目标元素的父元素上，这个阶段也被称之为事件捕获阶段。
处于目标阶段：事件对象到达了事件对象中的 target 元素上。这个阶段被称之为处于目标阶段。如果事件类型指示事件不起泡，则在完成此阶段后，事件对象将停止传播。
事件冒泡阶段：事件对象以相反的顺序传播到目标的祖先，从目标元素的父元素一直到 window 对象，这个阶段被称为事件冒泡阶段。

DOM3 和 DOM2 中事件流的差异

旧内容：~~规定 Document 为事件流顶层对象。~~
新内容：规定 Window 为事件流顶层对象。

在 DOM Level 2 Events 中明确规定了事件应从 document 对象开始传播，但是各大浏览器厂商纷纷将 window 对象也加入了事件流中。此次 DOM3 Level 中尊重了这个既成事实，将 window 对象加入了 Event Flow 中。
旧内容：冒泡阶段是从目标元素开始向上传播的，同时在事件处理程序中事件对象“处于目标阶段”时（即 Event.eventPhase === 2）也不是真正的处于该阶段，而是处于“冒泡阶段”。
新内容：冒泡阶段是从目标的父元素开始向上传播的，同时在事件处理程序中事件对象“处于目标阶段”时（即 Event.eventPhase === 2）便是真正的处于目标阶段了。
旧内容：~~DOM2 Level 中没有明确规定多个事件触发的顺序。~~
新内容：现在多个事件触发的顺序已经在 DOM3 Level 中明确规定了。

可通过 “event order” 关键字在页面中搜索查看最新标准 W3C UI Events 现行草案

中级

BFC

参考 https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Block_formatting_context

XSS是什么，攻击原理，怎么预防

HTTP 协议

HTTP 的特性

HTTP 协议构建于 TCP/IP 协议之上，默认端口号是 80
HTTP 是无连接无状态的协议

HTTP 报文

HTTP 报文分为三个部分：请求行，请求头，请求体
结构如下：

<method> <request-url> <version>
<headers>
<body>

统一资源标识符 URI （Uniform Resource Identifier) 用于标识互联网上资源地址。

Restful API 风格下的 HTTP 最基本的四种请求方式

GET：用于获取数据。安全且幂等。安全是指它一般只用于获取数据而不是更改数据，不会对服务器数据产生任何副作用。幂等是指相同的 URL 的请求下，结果应总是相同的。
PUT：不安全但幂等。用于创建和更新资源
POST：不安全不幂等。可用于创建和更新资源。相比于 PUT，POST 可以有更多的不确定性，因此是不幂等的。基本上除了 “增改删” 之外的都可以归类为 POST
DELETE：不安全但幂等。用与删除资源。

关于 POST 和 PUT 的创建资源的不同：

有一种说法是如果新建的资源名称是由客户端决定的，那么就可以使用 PUT 方法。

响应报文

HTTP 响应报文和 HTTP 请求报文相似，是由状态行，响应头，响应体组成的。

HTTP keep-alive

TCP 协议

TCP 是传输层的协议
是一种面向连接的、可靠的、基于字节流的传输层通信协议
仅有两方进行通信

注意：TCP 并不能保证数据一定会被对方接收到，因为这是不可能的。TCP 能够做到的是，如果有可能，就把数据递送到接收方，否则就（通过放弃重传并且中断连接这一手段）通知用户。因此准确说 TCP 也不是 100% 可靠的协议，它所能提供的是数据的可靠递送或故障的可靠通知。

三次握手 & 四次挥手

三次握手目的是连接服务器端指定窗口，建立 TCP 连接

第一次握手 (SYN=1, seq=x)
客户端发出一个 TCP 的 SYN 标置位 1 的包，指明连接的端口号。以及初始序号 ISN（Initial Sequence Number ） x。
发送完毕后，客户端进入 SYN_SEND
第二次握手 (SYN=1, ACK=1, seq=y, ACKnum=x+1)
服务端发回确认包 (ACK) 应答，即 SYN 和 ACK 的标志位都为 1，服务端选择自己的 ISN 序列号放到 seq 域里面，同时将确认序列号(Acknowledgement Number)设置为客户端的 ISN + 1 即 x + 1。
发送完毕后，服务端进入 SYN_RCVD 状态
第三次握手（ACK=1, ACKnum=y+1）
客户端再次发送确认包 (ACK)，SYN 的标置位 0，ACK 的标志位为 1，同时将确认序列号设置为服务端的 ISN + 1，即 y + 1。
发送完毕后，客户端进入 ESTABLISHED 状态，服务端收到这个包后，也进入 ESTABLISHED 状态。

中断 TCP 连接需要经过四次挥手，客户端或服务器均可主动发起挥手动作

第一次挥手（FIN=1, seq=x）
假设是客户端先发起挥手，客户端发出 FIN 包表示自己已经没有数据可以传输了，但还是可以接受数据。
客户端进入 FIN_WAIT_1 状态
第二次挥手 (ACK=1, ACKnum=x+1)
服务端发出 ACK 包作为应答，表明自己收到了客户端发起关闭连接的请求，但还没有做好关闭连接的准备。
发送完毕后，服务端进入 COLSE_WAIT 状态，客户端接收到确认包后，进入到 FIN_WAIT_2 状态，等待服务端关闭连接。
第三次挥手 (FIN=1, seq=y)
服务端做好关闭连接的准备时，向客户端发送结束连接请求，并将 FIN 置为 1。
发送完毕后服务端进入 LAST_ACK 状态，等待来自客户端的最后一次 ACK
第四次挥手 (ACK=1, ACKnum=y+1)
客户端接收到来自服务端的关闭请求后，发出最后一个 ACK 包，并进入 TIME_WAIT，等待可能出现的要求重传的 ACK 包。
服务端接受到这个请求后，关闭连接，进入 CLOSED 状态。
客户端等待了某个固定的时间（两个最大段生命周期，2MSL，2 Maximum Segment Lifetime）之后，没有收到服务端的 ACK，认为服务端已经正常关闭，于是自己也关闭连接，并进入 CLOSED 状态。

TCP KeepAlive

它不同于 HTTP 的 keep-alive，TCP 连接建立之后，连接的双方并不知道彼此是否还存活着，在一方掉线后，另一方却还维持着 TCP 连接。为了避免这种情况，当超过一定的时间没有发送数据后，TCP 会自动发送一个数据为空的报文给对方，来探测对方的是否存活，如果连续发送多次后都没有回应，则认为连接丢失，没有必要保持连接。

HTTPS 协议

HTTP + SSL = HTTPS

先建立 SSL 通信，SSL 建立成功的基础上再建立 HTTP 协议。

HTTPS 采用混合加密的机制

建立通讯的时候，采用公开秘钥加密（非对称加密），通讯建立成功后采用共享秘钥加密（对称加密）。因为非对称加密成本大，因此 HTTPS 采用这种混合加密的形式。

为了保证在建立连接时，客户端使用的公钥就是服务器发送出去的公钥，而非被中间人替换过的，因此引进了证书机制来验证公钥的合法性。

HTTP 状态码的含义

2XX 成功
- 200 OK
3XX 重定向
- 301 Move Permanently 永久重定向
- 302 Moved Temporarily 临时重定向
- 304 Not Modified 表示资源未被修改
4XX 客户端错误
- 403 Forbidden
- 404 Not Found
5XX 服务端错误
- 501 Not Immplated
- 502 Bad Getway