转载链接：https://blog.csdn.net/qq_54753561/article/details/122149197

使用面向对象编程时,new关键字做了什么？

1. 新建了一个Object对象
2. 修改构造函数this的指向，是其指向新建的Object对象，并且执行构造函数
3. 为Object对象添加了一个proto属性，是其指向构造函数的prototype属性
4. 将这个Object对象返回出去

es6和es5的继承（继承不用搞那么麻烦，项目中还是用 class）

原型链继承

父类的实例作为子类的原型,易于实现，父类的新增实例与属性子类都能访问，创建子类实例，不能向父类构造函数中传参数。

1. 原型链继承
2. 实现：
3. 父类的实例作为子类的原型
4. 可以在子类中增加实例属性，如果要新增加原型属性和方法需要在new 父类构造函数的后面
5. 优点：
6. 简单，易实现 父类的新增实例与属性子类都能访问
7. 缺点：
8. 无法实现多继承 创建子类实例时，不能向父类构造函数中传参数
10. function Person() {
11. this.a = true
12. }
13. Person.prototype.fn = function () {
14. console.log('我是父类')
15. }
17. function Son() {
18. this.b = false
19. }
20. 这里是关键 创建 Person 的实例 然后赋值给 Son 的原型
21. Son.prototype = new Person()
22. let xiaoming = new Son()
23. xiaoming.fn()
24. console.log(xiaoming.a)

构造函数继承（伪造对象、经典继承）

不能继承原型属性/方法,可以实现多继承，可以传参，无法复用，

1. 构造函数继承
2. 实现：
3. 在子类内,使用call()调用父类方法,并将父类的this修改为子类
4. 的this.相当于是把父类的实例属性复制了一份放到子类的函数内.
5. 优点：
6. 解决了子类构造函数向父类构造函数中传递参数
7. 可以实现多继承（call或者apply多个父类）
8. 缺点：
9. 方法都在构造函数中定义，无法复用
10. 不能继承原型属性/方法，只能继承父类的实例属性和方法
12. function Father(age, name) {
13. this.a = '22'
14. }
15. function Children() {
16. Father.call(this)
17. }
18. let Class = new Children()
19. console.log(Class.a);

组合继承

通过call 对实例属性的继承，原型链对原型方法的继承， 调用多次

1. 组合继承
2. 实现：
3. 组合上述两种方法就是组合继承。用原型链实现对原型属性和方法的继承，
4. 借用构造函数技术来实现实例属性的继承。
5. 缺点：
6. 由于调用了两次父类，所以产生了两份实例
7. 优点：
8. 函数可以复用
9. 不存在引用属性问题
10. 可以继承属性和方法，并且可以继承原型的属性和方法
13. function Father(name) { // 这里的name 就是 Son 传过来的
14. this.name = name
15. this.colors = [1, 2]
16. }
18. Father.prototype.sayName = function () {
19. alert(this.name)
20. }
22. function Son(name, age) {
23. //继承实例属性，第一次调用Father()
24. Father.call(this, name) // 这里通过 call 传过去 name 继承实例属性
25. this.age = age
26. }
27. Son.prototype = new Father() // 继承父类方法，第二次调用 Father
28. Son.prototype.ff = function () { // 子类的方法
29. console.log('666');
30. }
31. var aa = new Son('小明', 5)
32. aa.colors.push(3)
33. console.log(aa); // 打印了 父类的属性 和方法 以及子类的方法
34. var bb = new Son('小红', 50)
35. aa.colors.push(999999)
36. console.log(bb); // 打印了 父类的属性 和方法 以及子类的方法

Es6有class继承:

首先利用class构造一个父类，然后利用extends与super实现子类继承

1. ES6类继承extends
2. extends关键字主要用于类声明或者类表达式中，以创建一个类，该类是另一个类的子类。其中constructor表示构造函数，一个类中只能有一个构造函数，有多个会报出SyntaxError错误,如果没有显式指定构造方法，则会添加默认的 constructor方法，使用例子如下。
3. class Rectangle {
4. // constructor
5. constructor(height, width) {
6. this.height = height;
7. this.width = width;
8. }
10. // Getter
11. get area() {
12. return this.calcArea()
13. }
15. // Method
16. calcArea() {
17. return this.height * this.width;
18. }
19. }
21. const rectangle = new Rectangle(10, 20);
22. console.log(rectangle.area);
23. // 输出 200
25. -----------------------------------------------------------------
26. // 继承
27. class Square extends Rectangle {
29. constructor(length) {
30. super(length, length);
32. // 如果子类中存在构造函数，则需要在使用“this”之前首先调用 super()。
33. this.name = 'Square';
34. }
36. get area() {
37. return this.height * this.width;
38. }
39. }
41. const square = new Square(10);
42. console.log(square.area);
43. // 输出 100

ES5继承和ES6继承的区别：

es5继承首先是在子类中创建自己的this指向，最后将方法添加到this中 Child.prototype=new Parent() || Parent.apply(this) || Parent.call(this) es6继承是使用class关键字先创建父类的实例对象this，最后在子类class中修改this

javascript原型与原型链

1. 每个函数都有一个prototype属性，被称为显示原型
2. 每个实例对象都会有_ _proto_ _属性,其被称为隐式原型
3. 每一个实例对象的隐式原型_ _proto_ _属性指向自身构造函数的显式原型prototype
4. 每个prototype原型都有一个constructor属性，指向它关联的构造函数。

原型链

获取对象属性时，如果对象本身没有这个属性，那就会去他的原型__proto__上去找，如果还查不到，就去找原型的原型，一直找到最 顶层(Object.prototype)为止。Object.prototype对象也有proto属性值为null。链式查找机制叫原型链。

javascript 创建对象的几种方式

1、我们一般使用字面量的形式直接创建对象 （1）第一种是工厂模式，工厂模式的主要工作原理是用函数来封装创建对象的细节，从而通过调用函数来达到复用的目的。 （2）第二种是构造函数模式。js 中每一个函数都可以作为构造函数，只要一个函数是通过 new 来调用的，那么我们就可以把它称为构造函数。 （3）第三种模式是原型模式，因为每一个函数都有一个 prototype 属性，这个属性是一个对象，它包含了通过构造函数创建的所有实例都能共享的属性和方法。 （4）第四种模式是组合使用构造函数模式和原型模式，这是创建自定义类型的最常见方式。 （5）第五种模式是动态原型模式，这一种模式将原型方法赋值的创建过程移动到了构造函数的内部，通过对属性是否存在的判断，可以实现仅在第一次调用函数时对原型对象赋值一次的效果。 （6）第六种模式是寄生构造函数模式，这一种模式和工厂模式的实现基本相同，

什么是设计模式？

概念：

设计模式是一套被反复使用的代码，设计经验的总结。使用设计模式是为了重用代码、让代码更容易被他人理解、保证代码可靠性。设计模式让代码变得工程化，设计模式是软件工程的基石。

1、js工厂模式,去做同样的事情，实现同样的效果,解决多个相似的问题这时候需要使用工厂模式 2、发布订阅模式,通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。 3、单例模式 单例模式 保证一个类仅有一个实例，并提供一个访问它的全局访问点

constructor，proto，prototype的三角关系。

构造函数的prototype指向原型对象 实例对象的proto指向构造函数的prototype所指向原型对象 原型对象的constructor指向构造函数

面向过程，面向对象，面向过程和面向对象的优缺点

一、面向过程：面向过程就是分析出实现需求所需要的步骤，通过函数一步一步实现这些步骤，接着依次调用即可。 二、面向对象：将数据与函数绑定到一起，进行封装，这样能够更快速的开发程序，减少了重复代码的重写过程面向过程： 优点：性能上它是优于面向对象的，因为类在调用的时候需要实例化，开销过大。 缺点：不易维护、复用、扩展 用途：单片机、嵌入式开发、Linux/Unix等对性能要求较高的地方 面向对象: 面向对象有三大特性：封装，继承，多态。 优点：易维护、易复用、易扩展，由于面向对象有封装、继承、多态性的特性，可以设计出低耦合的系统，使系统更加灵活、更加易于维护 。 缺点：性能比面向过程低

扩展面试题

spa

spa 就是我们的单页面应用，spa 应用就是只有一个html页面，在vue中可以通过vue-router 来进行页面的切换的，而非刷新整个页面，可以实现无刷新切换页面的技术 SPA的原理? 通过这一点可以用js监听url中hash值的变化 onhashchange 事件在当前 URL 的锚部分(以 '#' 号为开始) 发生改变时触发 。哈希值的变换并不会引发页面的刷新和跳转,当监听到hash变化,就可以动态的切换组件,就可以实现无刷新切换页面技术 spa 的优点？ 页面切换快： 页面每次切换跳转时，并不需要做`html`文件的请求，这样就节约了很多`http`发送时延，我们在切换页面的时候速度很快。 用户体验好： 页面片段间的切换快，在网络环境差的时候, 因为组件已经预先加载好了, 并不需要发送网络请求, 所以用户体验好 转场动画 spa 的缺点？ 首屏加载比较慢因为要请求一次html同时还要发送一次js请求，两次请求回来了首屏才会显示 不利于SEO seo 效果较差 因为搜索引擎只识别html里面的内容，并不识别js里的内容，因为单页面就是js渲染出来的，影响网站的排名

mpa

MPA多页面应用程序 指的就是有多个独立的html页面，每个页面必须重复加载html js css 资源，多页面跳转需要整个页面资源刷新。 优点 1、首屏加载速度快 当我们访问页面的时候，服务器只返回了一个html，页面就展示出来了，只发了一次http请求，所以页面显示非常快. 2、SEO效果好 因为搜索引擎在做网站排名的时候，要根据网页的内容给网页排名，搜素引擎只可以识别html内容，多页面就是将内容放在html中，所以排名要好一点。 缺点 因为每跳转一个页面都要发送一次http请求，如果网络情况不好的情况下，页面之间来回跳转就会发生明显的卡顿，有的时候半天还加载不出来，影响用户体验。 转场动画也不好实现

4、git命令

1. git init 初始化git仓库 (mac中Command+Shift+. 可以显示隐藏文件) 2. git status 查看文件状态 3. git add 文件列表 追踪文件 4. git commit -m 提交信息 向仓库中提交代码 5. git log 查看提交记录 1.分支明细 （1）主分支（master）：第一次向 git 仓库中提交更新记录时自动产生的一个分支。 （2）开发分支（develop）：作为开发的分支，基于 master 分支创建。 （3）功能分支（feature）：作为开发具体功能的分支，基于开发分支创建 2.分支命令 （1）git branch 查看分支 （2）git branch 分支名称 创建分支 （3）git checkout 分支名称 切换分支 （4）git merge 来源分支 合并分支 (备注：必须在master分支上才能合并develop分支) （5）git branch -d 分支名称 删除分支（分支被合并后才允许删除）（-D 强制删除） 3.暂时保存更改 （1）存储临时改动：git stash （2）恢复改动：git stash pop 更加详细请看git常用命令

git怎么解决多人冲突？：

是当前修改是左箭头方向，传入的是右箭头的方向， 中间用等于号分割，等号上边是当前修改（本地），下边是传入的修改（线上的代码）。 两人同时提交可能会出现冲突，解决办法是手动修改冲突

5、前端有哪些页面优化方法?

1. - 减少 HTTP请求数
2. - 从设计实现层面简化页面
3. - 合理设置 HTTP缓存
4. - 资源合并与压缩
5. - 合并 CSS图片，减少请求数的又一个好办法。
6. - 将外部脚本置底（将脚本内容在页面信息内容加载后再加载）
7. - 多图片网页使用图片懒加载。
8. - 在js中尽量减少闭包的使用
9. - 尽量合并css和js文件
10. - 尽量使用字体图标或者SVG图标，来代替传统的PNG等格式的图片
11. - 减少对DOM的操作
12. - 在JS中避免“嵌套循环”和 “死循环”
13. - 尽可能使用事件委托（事件代理）来处理事件绑定的操作
14. - 浏览器缓存
15. - 防抖、节流
16. - 资源懒加载、预加载
17. - 开启Nginx gzip压缩
18. 三个方面来说明前端性能优化
19. 一：webapck优化与开启gzip压缩
20. 1.babel-loader用 include 或 exclude 来帮我们避免不必要的转译，不转译node_moudules中的js文件
21. 其次在缓存当前转译的js文件，设置loader: 'babel-loader?cacheDirectory=true'
22. 2.文件采用按需加载等等
23. 3.具体的做法非常简单，只需要你在你的 request headers 中加上这么一句：
24. accept-encoding:gzip
25. 4.图片优化，采用svg图片或者字体图标
26. 5.浏览器缓存机制，它又分为强缓存和协商缓存
27. 二：本地存储——从 Cookie 到 Web Storage、IndexedDB
28. 说明一下SessionStorage和localStorage还有cookie的区别和优缺点
29. 三：代码优化
30. 1.事件代理
31. 2.事件的节流和防抖
32. 3.页面的回流和重绘
33. 4.EventLoop事件循环机制
34. 5.代码优化等等

node，网络

1、什么是axios

基于promise的http库，可以用在浏览器和node.js，支持promiseAPI，客户端支持防御xsrf

2、Node是什么（别看这么简单，有的人一问就懵）

Node是一个基于Chrome V8引擎的JavaScript代码运行环境。 浏览器（软件）能够运行JavaScript代码，浏览器就是JavaScript代码的运行环境 Node（软件）能够运行JavaScript代码，Node就是JavaScript代码的运行环境

3、模块化的意义

一句话：降低软件的复杂性。使其可控，可维护，可扩展。 一个功能就是一个模板，多个模板可以组成完整应用，抽离一个模板不会影响其他功能的运行

4、网站的组成

网站应用程序主要分为两大部分：客户端和服务器端。客户端：在浏览器中运行的部分，就是用户看到并与之交互的界面程序。使用HTML、CSS、JavaScript构建。服务器端：在服务器中运行的部分，负责存储数据和处理应用逻辑。

5、为什么要用node

简单强大，轻量可扩展。 简单体现在node使用的是javascript,json来进行编码，强大体现在非阻塞IO,可以适应分块传输数据，较慢的网络环境，尤其擅长高并发访问，轻量体现在node本身既是代码，又是服务器，前后端使用统一语言;可扩展体现在可以轻松应对多实例，多服务器架构，同时有海量的第三方应用组件。

6、node中的异步和同步怎么理解?

node是单线程的，异步是通过一次次的循环事件队列来实现的．同步则是说阻塞式的IO,这在高并发环境会是一个很大的性能问题，所以同步一般只在基础框架的启动时使用，用来加载配置文件，初始化程序什么的．

7、什么是npm？Npm的使用场景？

NPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题。 使用场景： a. 允许用户从NPM服务器下载别人编写的第三方包到本地使用。 b. 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。 c. 允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。

8、get与post请求有什么区别

1. get是从服务器上获取数据，post是向服务器传送数据。
2. POST比GET安全，因为数据在地址栏上不可见。
3. get方式提交的数据最多只能有1024字节，而post则没有此限制。
4. GET使用URL或Cookie传参。而POST将数据放在request BODY中。
5. GET与POST都有自己的语义，不能随便混用。
6. 据研究，在网络环境好的情况下，发一次包的时间和发两次包的时间差别基，本可以无视。而在网 络环境差的情况下，两次包的TCP在验证数据包完整 性上，有非常大的优点。post 发送两次，get 只发送一次。
7. 并不是所有浏览器都会在POST中发送两次包，Firefox就只发送一次。

ajax

什么是ajax？ajax有什么优缺点？

ajax不是语言，ajax是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术 优点 1、最大的一点是页面无刷新，用户的体验非常好。 2、使用异步方式与服务器通信，具有更加迅速的响应能力。 缺点 1、ajax不支持浏览器back按钮。 2、安全问题 AJAX暴露了与服务器交互的细节。 3、对搜索引擎的支持比较弱。 4、破坏了程序的异常机制。 5、不容易调试

原生Ajax的创建过程

1. 1.创建xhr 核心对象
2. var xhr=new XMLHttpRequest();
4. 2.调用open 准备发送
5. 参数一：请求方式
6. 参数二: 请求地址
7. 参数三：true异步，false 同步
8. xhr.open('post','http://www.baidu.com/api/search',true)
10. 3.如果是post请求，必须设置请求头。
11. xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
13. 4.调用send 发送请求 （如果不需要参数，就写null）
14. xhr.send('user=tom&age=10&sex=女')
16. 5.监听异步回调 onreadystatechange
17. 判断readyState 为4 表示请求完成
18. 判断status 状态码 为 200 表示接口请求成功
19. responeseText 为相应数据。字符串类型。
20. xhr.onreadystatechange=function(){
21. if(xhr.readyState==4){
22. if(xhr.status==200){
23. console.log(xhr.responseText);
24. var res=JSON.parse(xhr.responseText);
25. console.log(res);
26. if(res.code==1){
27. modal.modal('hide');
28. location.reload();
29. }
30. }
33. 备注：如果是post请求，想要传json格式数据。
34. 设置请求头
36. 1.xhr.setRequestHeader('Content-Type', 'application/json')
38. open发送数据
39. 2.xhr.open({_id:xxx,user:xxxx,age:xxxx})

web安全及防护

1.XSS攻击原理：

XSS(Cross-Site Scripting，跨站脚本攻击)是一种代码注入攻击。攻击者在目标网站上注入恶意代码，当被攻击者登陆网站时就会执行这些恶意代码，这些脚本可以读取 cookie，session tokens，或者其它敏感的网站信息，对用户进行钓鱼欺诈，甚至发起蠕虫攻击等。 XSS避免方式：

1. url参数使用encodeURIComponent方法转义
2. 尽量不是有InnerHtml插入HTML内容
3. 使用特殊符号、标签转义符。

2.CSRF攻击（跨站请求伪造）：

CSRF（Cross-site request forgery）跨站请求伪造：攻击者诱导受害者进入第三方网站，在第三方网站中，向被攻击网站发送跨站请求。利用受害者在被攻击网站已经获取的注册凭证，绕过后台的用户验证，达到冒充用户对被攻击的网站执行某项操作的目的。 CSRF避免方式：

1. 添加验证码
2. 使用token
   • 服务端给用户生成一个token，加密后传递给用户
   • 用户在提交请求时，需要携带这个token
   • 服务端验证token是否正确

3.SQL注入攻击

就是通过吧SQL命令插入到Web表单递交或输入域名，最终达到欺骗服务器执行恶意的SQL命令。 解决：表单输入时通过正则表达式将一些特殊字符进行转换

4、DDoS攻击

DDoS又叫分布式拒绝服务，全称 Distributed Denial of Service，其原理就是利用大量的请求造成资源过载，导致服务不可用。 解决：

1. 限制单IP请求频率。
2. 防火墙等防护设置禁止ICMP包等
3. 检查特权端口的开放

使用基于token的登录流程

1. 客户端使用用户名跟密码请求登录 2. 服务端收到请求，去验证用户名与密码 3. 验证成功后，服务端会签发一个 Token，再把这个 Token 发送给客户端 4. 客户端收到 Token 以后可以把它存储起来，比如放在 Cookie 里或者 Local Storage 里 5. 客户端每次向服务端请求资源的时候需要带着服务端签发的 Token 6. 服务端收到请求，然后去验证客户端请求里面带着的 Token，如果验证成功，就向客户端返回请求的数据

状态码

常见http状态码分类：

1. 200响应成功
2. 301永久重定向
3. 302临时重定向
4. 304资源缓存
5. 403服务器禁止访问
6. 404服务器资源未找到
7. 500 502服务器内部错误
8. 504 服务器繁忙
9. 1xx Informational（信息状态码） 接受请求正在处理
10. 2xx Success（成功状态码） 请求正常处理完毕
11. 3xx Redirection（重定向状态码） 需要附加操作已完成请求
12. 4xx Client Error（客户端错误状态码） 服务器无法处理请求
13. 5xx Server Error（服务器错误状态码） 服务器处理请求出错

浏览器从输入url到渲染页面，发生了什么？

这玩意一定要说全了装逼 用户输入阶段 合成 URL：浏览区会判断用户输入是合法 URL，比如用户输入的是搜索的关键词，默认的搜索引擎会合成新的，如果符合url规则会根据url协议，在这段内容加上协议合成合法的url 查找缓存 网络进程获取到 URL，先去本地缓存中查找是否有缓存资源，如果有则拦截请求，直接将缓存资源返回给浏览器进程；否则，进入网络请请求阶段； DNS 解析： DNS 查找数据缓存服务中是否缓存过当前域名信息，有则直接返回；否则，会进行 DNS 解析返回域名对应的 IP 和端口号，如果没有指定端口号，http 默认 80 端口，https 默认 443。如果是 https 请求，还需要建立 TLS 连接； 建立 TCP 连接： TCP 三次握手与服务器建立连接，然后进行数据的传输；（三次握手开喷） 发送 HTTP 请求： 浏览器首先会向服务器发送请求行，它包含了请求方法、请求 URI 和 HTTP 协议的版本；另外还会发送请求头，告诉服务器一些浏览器的相关信息，比如浏览器内核，请求域名； 服务器处理请求： 服务器首先返回响应行，包括协议版本和状态码，比如状态码 200 表示继续处理该请求；如果是 301，则表示重定向，服务器也会向浏览器发送响应头，包含了一些信息； 页面渲染: 查看响应头的信息，做不同的处理，比如重定向，存储cookie 看看content-type的值，根据不同的资源类型来用不同的解析方式 浏览器渲染原理直接开干..... 浏览器将获取的HTML文档解析成DOM树。 处理CSS标记，构成层叠样式表模型CSSOM(CSS Object Model)。 将DOM和CSSOM合并为渲染树(rendering tree)，代表一系列将被渲染的对象。 渲染树的每个元素包含的内容都是计算过的，它被称之为布局layout。浏览器使用一种流式处理的方法，只需要一次绘制操作就可以布局所有的元素。 将渲染树的各个节点绘制到屏幕上，这一步被称为绘制painting。 断开 TCP 连接： 数据传输完成，正常情况下 TCP 将四次挥手断开连接。但是如果浏览器或者服务器在HTTP头部加上 Connection: keep-alive，TCP 就会一直保持连接。

网络安全、HTTP协议

TCP UDP 区别

1.`TCP`向上层提供面向连接的可靠服务 ，`UDP`向上层提供无连接不可靠服务。 2.虽然 `UDP` 并没有 `TCP` 传输来的准确，但是也能在很多实时性要求高的地方有所作为 3.对数据准确性要求高，速度可以相对较慢的，可以选用`TCP`

Http和Https区别（高频）

1. 1.`HTTP` 的URL 以http:// 开头，而HTTPS 的URL 以https:// 开头
2. 2.`HTTP` 是不安全的，而 HTTPS 是安全的
3. 3.`HTTP` 标准端口是80 ，而 HTTPS 的标准端口是443
4. 4.`在OSI` 网络模型中，HTTP工作于应用层，而HTTPS 的安全传输机制工作在传输层
5. 5.`HTTP` 无法加密，而HTTPS 对传输的数据进行加密，证的网络协议，安全性高于HTTP协议。
6. 6.`HTTP`无需证书，而HTTPS 需要CA机构wosign的颁发的SSL证书，一般免费证书少，因而需要一定费用。

GET和POST区别（高频）

1. 1.GET在浏览器回退不会再次请求，POST会再次提交请求
2. 2.GET请求会被浏览器主动缓存，POST不会，要手动设置
3. 3.GET请求参数会被完整保留在浏览器历史记录里，POST中的参数不会
4. 4.GET请求在URL中传送的参数是有长度限制的，而POST没有限制
5. 5.GET参数通过URL传递，POST放在Request body中
6. 6.GET参数暴露在地址栏不安全，POST放在报文内部更安全
7. 7.GET一般用于查询信息，POST一般用于提交某种信息进行某些修改操作
8. 8.GET产生一个TCP数据包；POST产生两个TCP数据包
9. Ge和post的选择：
10. 1.私密性的信息请求使用post（如注册、登陆）。
11. 2.查询信息使用get。

三次握手和四次挥手

三次握手：

第一次：建立连接时，客户端发送syn包到服务器，等待服务端确认 第二次：服务器收到syn包，必须确认客户的syn，同时也发送一个syn包，即syn+ACK包 第三次：客户端收到服务器的syn和ack包，向服务器发送确认包ack，发送完毕，客户端和服务端连接成功，完成三次握手

四次挥手：

第一次：浏览器发送完数据后，发送fin请求断开连接 第二次：服务器发送ack到客户端，确认客户端的断开请求 第三次：服务器请求断开fin的请求 第四次：客户端确认服务器的断开ack

POST的content-type几种方式

POST 方法中对发送数据编码的方式，也就是 Content-Type 有四种方式，其中默认是 application/x-www-form-urlencoded，最方便的是 application/json 。 四种方式包括：

• application/x-www-form-urlencoded （URL encoded）
• multipart/form-data （键值对型数据）
• application/json (Json 类型数据)
• text/xml （xml）

传统的ajax请求时候，Content-Type默认为"文本"类型。 传统的form提交的时候，Content-Type默认为"Form"类型。 axios传递字符串的时候，Content-Type默认为"Form"类型。 axios传递对象的时候，Content-Type默认为"JSON"类型

http1.0、http1.1、http2.0的区别

1. 1和1.0相比，1.1可以一次传输多个文件
2. http1.x解析基于文本，
3. http2.0采用二进制格式，新增特性 多路复用、header压缩、服务端推送(静态html资源)

浏览器缓存的作用

浏览器缓存的作用：减少冗余的数据传输，节省网络带宽，更快加载页面，缓存降低了服务器的要求，有更快的响应

http如何实现缓存

个人理解： 强制缓存：浏览器在加载资源的时候，会根据本地缓存中的headers中的信息(expires,cache-control)是否要强缓存，如果命中的话，则会使用缓存中的资源，否则继续发送请求。 协商缓存：客户端向服务端发送请求，服务端检测是否有对应的标识，如果没有服务端会返回客户端对应的标识，客户端在下次请求把标识带过去服务器会验证标识，如果通过了，则会响应304，告诉浏览器读取缓存，如果没有通过则返回请求的资源。 两类缓存规则可以同时存在，强制缓存优先级高于对比缓存，也就是说，当执行强制缓存的规则时，如果缓存生效，直接使用缓存，不再执行对比缓存规则。 基于对比缓存，不管是否使用缓存都需要向服务器发送请求，那么还用缓存干什么？ 服务端在进行标识比较后，只返回header部分，通过状态码通知客户端使用缓存，不再需要将报文主体部分返回给客户端。

缓存的资源去哪里了

memory cache 将资源文件缓存到内存中，下次请求读取的是内存中的 disk cache 将资源存到硬盘中，下次请求从硬盘中读取

http报文

HTTP报文就是浏览器和服务器间通信时发送及响应的数据块。 浏览器向服务器请求数据，发送请求(request)报文； 服务器向浏览器返回数据，返回响应(response)报文。 报文信息主要分为两部分：header,数据主体部分(body)

能不能说一说浏览器的本地存储？各自优劣如何？

浏览器的本地存储主要分为Cookie、WebStorage和IndexDB, 其中WebStorage又可以分为localStorage和sessionStorage。 共同点: 都是保存在浏览器端、且同源的 不同点：

1. cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下sessionStorage和localStorage不会自动把数据发送给服务器，仅在本地保存。
2. 存储大小限制也不同，

• cookie数据不能超过4K，sessionStorage和localStorage可以达到5M
• sessionStorage：仅在当前浏览器窗口关闭之前有效；
• localStorage：始终有效，窗口或浏览器关闭也一直保存，本地存储，因此用作持久数据；
• cookie：只在设置的cookie过期时间之前有效，即使窗口关闭或浏览器关闭

1. 作用域不同

• sessionStorage：不在不同的浏览器窗口中共享，即使是同一个页面；
• localstorage：在所有同源窗口中都是共享的；也就是说只要浏览器不关闭，数据仍然存在
• cookie: 也是在所有同源窗口中都是共享的.也就是说只要浏览器不关闭，数据仍然存在

第一期：前端面试题---JS部分

第二期：前端面试题 ---Vue部分

以上就是本期内容了！！！