经常会问的面试题

1、http状态码 http请求头和响应头

http，超文本传输协议。承载于TCP协议之上，是目前互联网上应用最为广泛的一种网络传输协议。在HTTP和TCP之间添加一个安全协议层（SSL或TSL），这个时候，就成了我们常说的HTTPS。

• http默认端口：80
• https默认端口：443

常见状态码：

1. 200 OK // 客户端请求成功
2. 400 Bad Request // 客户端请求有语法错误，不能被服务器读取
3. 401 Unauthorized // 请求未经授权，这个状态代码必须和WWW-Authenticate报头域一起使用
4. 403 Forbidden // 服务器收到请求，但是拒绝提供服务
5. 404 Not Found // 请求资源不存在
6. 500 Internal Server Error // 服务器发生不可预期的错误
7. 503 Server Unavailable // 服务器当前不能处理客户端的请求，一段时间后可能恢复正常
8. 304 浏览器缓存数据可用

http请求头：

1. Accept: 代表浏览器可以处理所有类型
2. Accept-Encoding: gzip, deflate 浏览器申明自己接收的编码方法，通常指定压缩方法，是否支持压缩，支持什么压缩方法
3. Accept-Language:zh-CN,zh;q=0.9 浏览器申明自己接收的语言
4. Connection: keep-alive；当一个网页打开完成后，客户端和服务器之间用于传输HTTP数据的TCP连接不会关闭，如果客户端再次访问这个服务器上的网页，会继续使用这一条已经建立的连接。 Connection: close 代表一个Request完成后，客户端和服务器之间用于传输HTTP数据的TCP连接会关闭， 当客户端再次发送Request，需要重新建立TCP连接
5. Host:（www.baidu.com） 请求报头域主要用于指定被请求资源的Internet主机和端口号，它通常从HTTP URL中提取出来的。
6. User-Agent：客户端使用的系统和版本
7. Cache-Control：浏览器缓存（Control:private私有用户缓存、Cache-Control:public 响应会被缓存，并且在多用户间共享、Cache-Control:must-revalidate 响应在特定条件下会被重用，以满足接下来的请求，但是它必须到服务器端去验证它是不是仍然是最新的。）

http响应头：

1. Cache-Control（对应请求头中的Cache-Control ⬆️ ）
2. Content-Type：text/html;charset=UTF-8 告诉客户端，资源文件的类型，还有字符编码，客户端通过utf-8对资源进行解码，然后对资源进行html解析
3. Content-Encoding:gzip 告诉客户端，服务端发送的资源是采用gzip编码的，客户端看到这个信息后，应该采用gzip对资源进行解码
4. Date: Tue, 03 Apr 2018 03:52:28 GMT 这个是服务端发送资源时的服务器时间，GMT是格林尼治所在地的标准时间
5. Server：Tengine/1.4.6 这个是服务器和相对应的版本，只是告诉客户端服务器信息
6. Connection：keep-alive 这个字段作为回应客户端的Connection：keep-alive，告诉客户端服务器的tcp连接也是一个长连接，客户端可以继续使用这个tcp连接发送http请求

2、数据类型的隐式转换

1. 算术运算符（* / -）计算可以改变数据类型为Number，（+）为String
2. 比较运算符（>, >=, <, <= ）运算符两边都是数字，则进行数字比较；都是字符串则进行ASCII码比较；一边数字一边字符串，则把字符串转化为数字进行比较；

3、this指向问题

1. 一般的函数调用对象this指向Window
2. 调用对象里的函数this指向对象（this指向就近的对象）
3. 箭头函数不会产生this，若函数内有this，则this只能由父级函数继承而来，并且是最近的一个父级函数的this，不会再往上寻找
4. 构造函数this指向函数本身

4、谈谈对Promise的理解

1. Promise最初是为了解决地狱回调的问题；Promise有三个状态分别是pending 等待中、rejected 失败、fulfilled 成功，并且它的状态只会改变一次，当pending变成fulfilled时Promise进入.then，当pending变成rejected时Promise进入.catch
2. Promise实例上还有一些其他方法，如：Promise.all、Promise.any、Promise.allsettled、Promise.race，入参为 Promise 组成的数组；
3. Promise.all ：当所有Promise的状态发生改变，并且变为fulfilled 成功时，返回所有Promise结果组成的数组，否则返回失败的结果
4. Promise.race：当所有Promise的状态中最快发生改变，并且变为fulfilled 成功时，返回状态改变最快的Promise结果
5. Promise.allsettled：当所有Promise的状态全部改变，不管成功失败，返回全部Promise的结果组成的数组
6. Promise.any：当所有Promise的状态发生改变，不管成功失败，只返回状态转为成功的Promise的结果组成的数组

5、谈谈对闭包理解

闭包是指有权访问另一个函数作用域中的变量的函数；

闭包优缺点：
a（缺）：内存泄漏，内存无法释放；
b（优）：避免全局变量的污染；

应用场景：

• 输入框input的onchange事件中使用防抖函数
• 短信验证码使用节流函数

6、如何判断基础数据类型

• 基础数据类型，如string、number、boolean、undefined，可以通过 typeof 判断，但是 typeof 判断 null 结果为 object；
• 引用数据类型，如 Object、Array、Date、Function 等，可以通过 ==Object.prototype.toString.call([1,2]) ==来判断，判断的值为： ‘[object Array]’

7、怎么解决跨域问题

• jsonp 解决跨域，通过前后端配合，前端使用script标签src属性输入后端接口地址并拼接回调函数名，后端通过返回函数名以透参数的形式传递数据。
• 通过配置反向代理来解决跨域，在react框架中可以通过在webpack中配置proxy属性来配置需要代理的地址或在src下创建setupProxy.js配置反向代理的内容；在vite中可以在vite.config.js配置proxy属性即可。
• 后端解除跨域限制，开放前端ip权限。

8、项目中可以做哪些性能优化

• 比如电商类网站首页可以做图片懒加载，通过自定义属性如 data-src 提前设置好地址，IntersectionObserver监听到图片在可视窗口内时将自定义属性data-src赋值给img的src属性即为图片的懒加载；
• 减少http接口请求，如利用redux全局状态管理将接口数据存储到redux中，利用if判断切换页面时是否需要重新调用接口，从而减少接口请求，使得性能提升；
• 减少css的重复书写也是一种性能优化
• 按需加载组件数据，如首页加载时先不加载数据过大的文件，当执行具体的操作时再获取数据，也可提升性能；
• 删除代码中运行不到的代码，可以通过webpack中的 tree shaking 移除代码中未引用的代码；
• 打包时通过gzpi压缩文件大小，也能做到性能的提升；

9、介绍cookie和session

cookie就是session，cookie存在于客户端，session存在服务端。
cookie：当客户端访问服务器的时候（服务器运用了cookie），服务器会生成一份cookie传输给客户端，客户端会自动把cookie保存起来，以后客户端每次访问服务器，都会自动的携带着这份cookie。
session：当客户端第一次请求服务器的时候，服务器生成一份session保存在服务端，将该数据(session)的id以cookie的形式传递给客户端；以后的每次请求，浏览器都会自动的携带cookie来访问服务器(session数据id)。