文章目录
1、http状态码 http请求头和响应头
http,超文本传输协议。承载于TCP协议之上,是目前互联网上应用最为广泛的一种网络传输协议。在HTTP和TCP之间添加一个安全协议层(SSL或TSL),这个时候,就成了我们常说的HTTPS。
- http默认端口:80
- https默认端口:443
常见状态码:
- 200 OK // 客户端请求成功
- 400 Bad Request // 客户端请求有语法错误,不能被服务器读取
- 401 Unauthorized // 请求未经授权,这个状态代码必须和WWW-Authenticate报头域一起使用
- 403 Forbidden // 服务器收到请求,但是拒绝提供服务
- 404 Not Found // 请求资源不存在
- 500 Internal Server Error // 服务器发生不可预期的错误
- 503 Server Unavailable // 服务器当前不能处理客户端的请求,一段时间后可能恢复正常
- 304 浏览器缓存数据可用
http请求头:
- Accept: 代表浏览器可以处理所有类型
- Accept-Encoding: gzip, deflate 浏览器申明自己接收的编码方法,通常指定压缩方法,是否支持压缩,支持什么压缩方法
- Accept-Language:zh-CN,zh;q=0.9 浏览器申明自己接收的语言
- Connection: keep-alive;当一个网页打开完成后,客户端和服务器之间用于传输HTTP数据的TCP连接不会关闭,如果客户端再次访问这个服务器上的网页,会继续使用这一条已经建立的连接。 Connection: close 代表一个Request完成后,客户端和服务器之间用于传输HTTP数据的TCP连接会关闭, 当客户端再次发送Request,需要重新建立TCP连接
- Host:(www.baidu.com) 请求报头域主要用于指定被请求资源的Internet主机和端口号,它通常从HTTP URL中提取出来的。
- User-Agent:客户端使用的系统和版本
- Cache-Control:浏览器缓存(Control:private私有用户缓存、Cache-Control:public 响应会被缓存,并且在多用户间共享、Cache-Control:must-revalidate 响应在特定条件下会被重用,以满足接下来的请求,但是它必须到服务器端去验证它是不是仍然是最新的。)
http响应头:
- Cache-Control(对应请求头中的Cache-Control ⬆️ )
- Content-Type:text/html;charset=UTF-8 告诉客户端,资源文件的类型,还有字符编码,客户端通过utf-8对资源进行解码,然后对资源进行html解析
- Content-Encoding:gzip 告诉客户端,服务端发送的资源是采用gzip编码的,客户端看到这个信息后,应该采用gzip对资源进行解码
- Date: Tue, 03 Apr 2018 03:52:28 GMT 这个是服务端发送资源时的服务器时间,GMT是格林尼治所在地的标准时间
- Server:Tengine/1.4.6 这个是服务器和相对应的版本,只是告诉客户端服务器信息
- Connection:keep-alive 这个字段作为回应客户端的Connection:keep-alive,告诉客户端服务器的tcp连接也是一个长连接,客户端可以继续使用这个tcp连接发送http请求
2、数据类型的隐式转换
- 算术运算符(* / -)计算可以改变数据类型为Number,(+)为String
- 比较运算符(>, >=, <, <= )运算符两边都是数字,则进行数字比较;都是字符串则进行ASCII码比较;一边数字一边字符串,则把字符串转化为数字进行比较;
3、this指向问题
- 一般的函数调用对象this指向Window
- 调用对象里的函数this指向对象(this指向就近的对象)
- 箭头函数不会产生this,若函数内有this,则this只能由父级函数继承而来,并且是最近的一个父级函数的this,不会再往上寻找
- 构造函数this指向函数本身
4、谈谈对Promise的理解
- Promise最初是为了解决地狱回调的问题;Promise有三个状态分别是pending 等待中、rejected 失败、fulfilled 成功,并且它的状态只会改变一次,当pending变成fulfilled时Promise进入.then,当pending变成rejected时Promise进入.catch
- Promise实例上还有一些其他方法,如:Promise.all、Promise.any、Promise.allsettled、Promise.race,入参为 Promise 组成的数组;
- Promise.all :当所有Promise的状态发生改变,并且变为fulfilled 成功时,返回所有Promise结果组成的数组,否则返回失败的结果
- Promise.race:当所有Promise的状态中最快发生改变,并且变为fulfilled 成功时,返回状态改变最快的Promise结果
- Promise.allsettled:当所有Promise的状态全部改变,不管成功失败,返回全部Promise的结果组成的数组
- 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)。