A一面如何实现 div（块级元素）的水平垂直居中和文字（行内元素）的水平垂直居中？块级元素：行内元素：参考：CS

如何实现 div（块级元素）的水平垂直居中和文字（行内元素）的水平垂直居中？

块级元素：

// 1. 给父元素设置flex
.father {
  display: flex;
  justify-content: center;
  align-items: center;
}
// 2. 给子元素设置绝对定位和 margin：auto
.child {
  position:absolute;
  left:0;
  top: 0;
  bottom: 0;
  height: 0;
  margin: auto;
}
// 3. 给子元素设置绝对定位和 transform
.child {
  position: absolute;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%); /*自己的50% */
}
// 4. 已知父元素宽高时可以写死 margin
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -150px;
  margin-top: -150px;
 }
// 5. table(不建议用作布局)
.father {
  display:table-cell;
  text-align:center;
  vertical-align: middle;
}

行内元素：

// 1. 给父元素设置flex
.father {
  display: flex;
  justify-content: center;
  align-items: center;
}
// 2. table(不建议用作布局)
.father {
  display:table-cell;
  text-align:center;
  vertical-align: middle;
}
// 3. 已知父元素高度的情况下，设置行高
.father {
  text-align: center;
  line-height: 100px;
}

参考：CSS 拷问：水平垂直居中方法你会几种？ CSS-水平居中、垂直居中、水平垂直居中

useEffect 的返回值？

如果 uesEffect的返回值是一个函数，则react会在执行清除操作时调用它。（此处返回值指的就是useEffect第一个参数的返回值）

为什么要在 effect 中返回一个函数？ 这是 effect 可选的清除机制。每个 effect 都可以返回一个清除函数。如此可以将添加和移除订阅的逻辑放在一起。它们都属于 effect 的一部分。

React 何时清除 effect？ React 会在组件卸载的时候执行清除操作。effect 在每次渲染的时候都会执行。这就是为什么 React 会在执行当前 effect 之前对上一个 effect 进行清除。

参考：使用Effect Hook – React

浏览器中输入一个url会发生什么过程，浏览器如何判断文件类型？

查找域名对应的IP地址，这一步会依次查找浏览器缓存，系统缓存，路由器缓存，DNS 缓存，根域名服务器。
浏览器向IP对应的服务器发送http请求（三次握手建立连接）。
服务器响应请求，发回资源内容（四次挥手断开连接）。
浏览器通过 response header 里的 content-type，判断资源类型，进行文件解析。

浏览器渲染部分：构建 DOM 树、css样式计算、合并布局、渲染。

参考：浏览器输入URL后发生了什么？

请求成功或失败，状态码都有什么？302，怎么做到临时重定向的？

100：表示正常，客户端可以继续发请求
200：请求成功
201：已创建，表示成功请求并创建了资源
202：已接收请求但未处理完成
204：服务器成功处理，但未返回内容
301：永久重定向
302：临时重定向
304：存在缓存
400：客户端存在错误，服务端无法理解
404：服务器无法根据客户端请求找到资源
500：服务器内部错误

302 临时重定向：浏览器首先访问服务器 A 的URL，服务器 A 返回带着location为B的URL的 header 和302的状态码，浏览器读取响应的302状态码，获取到头部的 location，然后跳转到服务器B的URL。

GET 和 POST 区别？

GET 主要用来获取资源，POST 用来传输实体的主体。

GET 请求的参数是通过 url 传递的，通过 & 连接（不同的浏览器对Get请求的长度有不同的限制），POST 请求的参数放在 request.body 中
GET 请求会被缓存，POST 不会，除非手动设置
GET 可以被收藏为书签，或者分享链接，POST 不可以
POST 比 GET 安全
GET 请求会被保存在历史记录中，POST 不会
GET 只能进行 url 编码，POST 支持多种编码格式

GET 和 POST 到底有什么区别？

JSONP 具体如何跨域执行？

JSONP 的理念就是，与服务端约定好一个回调函数名，服务端接收到请求后，将返回一段 Javascript，在这段 Javascript 代码中调用了约定好的回调函数，并且将数据作为参数进行传递。当网页接收到这段 Javascript 代码后，就会执行这个回调函数，这时数据已经成功传输到客户端了。

参考：jsonp 跨域原理分析

cookie和session有什么区别

作用范围不同：cookie存储在浏览器端，session存储在服务器端
存取方式的不同，Cookie 只能保存 ASCII，Session 可以存任意数据类型，一般情况下我们可以在 Session 中保持一些常用变量信息，比如说 UserId 等。
有效期不同，Cookie 可设置为长时间保持，比如我们经常使用的默认登录功能，Session 一般失效时间较短，客户端关闭或者 Session 超时都会失效。
隐私策略不同，Cookie 存储在客户端，比较容易遭到不法获取，早期有人将用户的登录名和密码存储在 Cookie 中导致信息被窃取；Session 存储在服务端，安全性相对 Cookie 要好一些。
存储大小不同，单个 Cookie 保存的数据不能超过 4K，Session 可存储数据远高于 Cookie。

用户第一次请求服务器时，服务器会根据用户提交的信息，创建对应的 session，并将 session 的唯一标识 sessionId 发送给浏览器，浏览器将 sessionId 存入 cookie 中，接下来的每次请求都会携带 cookie，服务器通过 sessionId 是否有效来判断用户登录状态。

cdn是如何优化的？

cdn 是内容分发网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡，内容分发、调度等模块，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。

【前端词典】CDN 带来这些性能优化

modal 怎么做到覆盖在屏幕上面？放在最外层和 z-index 就可以覆盖了吗？

position 定位设置为 fixed，相对浏览器屏幕视口固定，会使元素脱离文档流，设置宽高后可以做到覆盖在所有元素上方。

es6 extends 语法糖，继承是怎么实现的？

通过原型来实现继承。super动态查找对象的原型。extends设置子类的原型为父类。

为什么说ES6的class是语法糖? es6: Class语法糖详解

A一面

如何实现 div（块级元素） 的水平垂直居中和文字（行内元素）的水平垂直居中？