前端八股文经验分享：面试拷打经历 与 知识总结（纯个人总结）（五） - 持续更新ing

1. splice 三个参数什么意思

array.splice (index, howmany, item1, ... , item x)

• index：规定从何处添加/删除元素（必须）
• howmany：规定应该删除多少元素（可选）
• item1, ... , item x ：要添加到数组的新元素（可选）

2. git reset 和 git revert 的区别

git reset	git revert
reset 是彻底回退到指定的commit版本，该commit后的所有commit都被清除	revert 仅是撤销指定commit的修改，并不会影响后续的commit
reset执行后不会产生记录	revert执行后产生记录

3. 为什么要组件化开发

在正常业务场景下，我们会对项目做这样的分层。

• 基础组件：
  所谓基础组件，我们也可以把它理解成widget，也就是元件。比如Input，Button，AutoComplete等等。它们可以被用在任何地方。
• 业务组件：
  我理解的业务组件也就是component，这些组件由基础组件构成，根据不同的业务场景，形成了带有数据，带有逻辑的业务组件。当然这些业务组件同样可以被抽象成一个能够被多个模块组件使用的组件，比如页面底部fix的footer，它有可能集成了首页模块，用户信息模块，产品列表模块的跳转信息等，所以每个模块都需要拥有它。
• 模块组件：
  这是我们根据具体的业务需求具体提出的一个一个的模块，比如登录，商品详情页等等。它是业务组件与基础组件的集成。

组件化可以让代码低耦合，不用像传统开发一样把所有的东西都揉在一起，从而极大的提高了我们的开发效率，提高代码质量，降低维护成本

4. 与keep-alive 相关的生命周期

activated 与 deactivated

• activated钩子：在组件第一次渲染时会被调用，之后每次缓存组件被激活时调用
• deactivated钩子：组件被停用（离开路由）时调用

5. 谈一下对Vue框架的认识

Vue是一套用于构建用户界面的渐进式框架。

官方解读:
Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图
层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue也完全能够
为复杂的单页应用提供驱动。

简单来说其实就是:
vue是一套构建用户界面的框架。在我看来，渐进式代表的含义是：主张最少。每个框架都不可避免会有自己的一些特点，从而会对使用
者有一定的要求，这些要求就是主张，主张有强有弱，它的强势程度会影响在业务开发中的使用方式。简单说就是对于vue中你不熟悉不
太把握的模块或者功能，你可以不用它，或者你可以用你熟悉有把握的技术进行代替这样子看来是不是感觉很友好，相对于其他框架
硬要求很少了，你可以逐渐性的使用框架。

一、什么是Vue?
为了实现前后端分离的开发理念，开发前端SPA (single page web appllcation)项目，实现数据绑定，路由配置，项目编译打包等一系
列工作的技术框架。

二、vue全家桶
Vue有著名的全家桶系列，包含了vue-router(http：//router.vuejs.org)，vuex(http://vuex.vuejs.org)，

vue-resource(https://github.com/pagekit/vue-resource)再加上构建工具vue-cli，sass样式，就是一个完整的vue项目的核心构成。

概括起来就是：1. 项目构建工具、2. 路由、3. 状态管理、4. http请求工具

三、vue优缺点
其实Vue.js不是一个框架，因为它只聚焦视图层，是一个构建数据驱动的Web界面的库。
Vue.js通过简单的API(应用程序编程接口)提供高效的数据绑定和灵活的组件系统。

Vue.js的特性如下:
1. 轻量级的框架(相对而言)
2. 双向数据绑定Q
3. 指令
4. 插件化

优点:

1. 简单：官方文档很清晰，比AngularQ简单易学 (国内框架，demo，文档多)
2. 快速：异步批处理方式更新DOM(同时进行)
3. 组合：用解耦的、可复用的组件组合你的应用程序 (功能由不同的单个功能组件构成)
4. 紧凑:~18kb min+gzip，且无依赖。
5. 强大：表达式&无需声明依赖的可推导属性(computed properties)。
6. 对模块友好：可以通过NPM、Bower或Duo安装，不强迫你所有的代码都遵循Angular的各种规定，使用场景更加灵活。

缺点:

1. 新生儿：Vue.js是一个新的项目，没有angular那么成熟
2. 影响度不是很大
3. 不支持IE8
4. 无成名库

6. 知道webpack吗

概念：

webpack本身是node的一个第三方模块包，用于打包代码
现代JS应用程序的静态模块打包器（module bundler）

能做什么？

        less/sass ——> css

        ES6/7/8 ——> ES5

        html/js/css ——> 压缩合并

7. 知道label吗

一、Babel 是什么，有什么用

Babel 是 JavaScript 编译器：它能让开发者在开发过程中，直接使用各类方言（如TS、Flow、JSX）或新的语法特性，而不需要考虑运行环境，因为Babel可以做到按需转换为低版本的代码；Babel内部原理将JS代码转换为AST，对AST应用各种插件进行处理，最终输出编译后的JS代码。

二、AST 抽象语法树

简单定义：以树的形式来表现编程语言的语法结构

三、Babel编译流程

1. 解析阶段：Babel默认使用@babel/parser将代码转换为AST。解析一般分为两个阶段：词法分析和语法分析
           词法分析：对输入的字符序列做标记化（tokenization）操作
           语法分析：处理标记与标记之间的关系，最终形成一颗完整的AST结构
2. 转换阶段：Babel 使用 @babel/traverse 提供的方法对AST进行深度优先遍历，调用插件对关注节点的处理函数，按需对AST节点进行增删改查操作
3. 生成阶段：Babel默认使用@babel/generator将上一阶段处理后的AST转换为代码字符串

8. 什么情况会内存泄漏

• 意外的全局变量
• 被遗忘的计时器或回调函数
• 脱离DOM引用
• 闭包

9. event loop

任务的执行顺序
先到后：同步任务——微任务——宏任务。

任务在哪里执行
无论是同步任务还是异步任务，都是在主线程执行。

什么是event loop
事件循环(event loop)就是任务在主线程不断进栈出栈的一个循环过程。任务会在将要执行时进入主线程，
在执行完毕后会退出主线
程。
下面就是这个循环的步骤：
1. 把同步任务队列或者微任务队列或者宏任务队列中的任务放入主线程
2. 同步任务或者微任务或者宏任务在执行完毕后会全部退出主线程。

在实际场景下大概是这么一个顺序：
1. 把同步任务相继加入同步任务队列。
2  把同步任务队列的任务相继加入主线程。
3. 待主线程的任务相继执行完毕后，把主线程队列清空。

4. 把微任务相继加入微任务队列。
5. 把微任务队列的任务相继加入主线程
6. 待主线程的任务相继执行完毕后，把主线程队列清空

7. 把宏任务相继加入宏任务队列。无time的先加入，像网络请求。有time的后加入，像setTimeout(()=>{}，time)，在他们中time短的先加入。
8. 把宏任务队列的任务相继加入主线程
9. 待主线程的任务相继执行完毕后，把主线程队列清空。

10. generator

一、什么是generator

        是ES6提供的一个异步编程解决方案，语法不同于普通函数，简单的把Generator理解为一个状态机，封装了多个内部状态，执行Generator函数返回一个迭代器对象，可以通过调用迭代器next依序遍历Generator函数内部的每一个状态

二、特征

        function关键字与函数名之间有个星号；函数内部使用yield表达式

11. 面向对象语言的三个特点

封装：封装就是隐藏掉具体的内部实现细节，只向外部提供简单的接口。优点就是减少耦合，可以单独的开发不同的功能模块，减轻代码维护的负担，可以更容易的被程序员理解

继承：是一种能力，它可以使用现有的类的所有功能，并在无需重新编写原来的类的情况下对这些功能进行扩展。一些面向对象中如
c++支持多继承Ω，而java只支持单继承。此外，继承也是多态这一特性的前提。

多态：字面意思就是多种形态，具体来说就是去完成某个行为时，当不同的对象去完成时会体现出不同的形态。此外，多态可以分为编译时多态和运行时多态。其中编译时多态是静态的，通过方法的重载实现，根据参数列表的不同区分不同的方法，比如说构造器的重载。因此该实现方式在编译时就已经确定了，所以称为静态实现。其次，运行时多态是动态的，是通过动态绑定来实现的，主要用重写的方式实现。所谓动态绑定就是指在执行期间判断所引用的对象的实际类型，根据实际类型调用其方法。其实重写实现的多态才是真正的多态。

12. 小程序开发和普通的web开发有什么区别

1）小程序开发中，渲染线程和脚本线程是分开的，分别在不同的线程中

        web开发中，渲染线程和脚本线程是互斥的

2）web开发中，可以使用特定的API

        小程序开发中，没有特定API的使用

3）运行环境不同

4）小程序开发中，需要面对多操作系统问题

        web开发中，需要面对多浏览器问题

13. h5页面和小程序页面渲染原理上有什么区别

运行环境不一样，h5可以直接用浏览器打开，小程序要运行在微信平台，h5的开发成本更高

14. 在h5的开发中经常碰到1px问题，产生的原因和解决办法是什么？

原因：1px问题在Rentina高清屏上出现，由于高清屏用多个物理像素显示一个css像素，所以1css像素会用2个物理像素显示，所以看起来1px的线条特别宽

解决办法：缩放；边框固定；把元素先放大再缩小

15. Vue2中有一个数组，我改变了第一项，响应式会生效吗

不会，vue2 不能监听到数组下标

16. 内存管理中，是怎么回收内存的

1. 后台回收
   在物理内存紧张时，会唤醒kswapd内核线程来回收内存，这个回收内存的过程是异步的，不会阻塞进程的执行
2. 直接内存回收
   如果后台异步回收跟不上进程内存申请的速度，就会开始直接回收，这个回收的过程是同步的，会阻塞进程的执行
3. OOM机制
   如果直接内存回收后，空闲的物理内存仍无法满足此次物理内存的申请，那么内核触发OOM机制，根据算法选择一个占用物理内存较高的进程，然后将其杀死释放内存资源，直到释放足够的内存

17. 有没有了解ECMA2022的内容

1）模块顶层作用域支持await表达式

2）新增私有类元素，静态块；in操作符支持私有类元素

3）正则新增d标志和其他对应的haslndices属性，提供了获取捕获组开始索引和结束索引的方法

4）Error实例增加cause属性，可携带更多错误信息

5）String，Arrays，TypedArrays 新增at方法，支持关联访问

6）Object.hasOwn 代替 Object.prototype.hasOwnProperty 判断对象是否含有属性

18. TCP 与 UDP 基本区别

• 基于连接和无连接
• TCP要求系统资源较多，UDP较少
• UDP程序结构比较简单
• 流模式（TCP）与 数据报模式（UDP）
• TCP 保证数据正确性，UDP可能丢包
• TCP保证数据顺序，UDP不保证

19. diff 算法

什么是diff算法?
diff算法就是进行虚拟节点对比，并返回一个patch对象，用来存储两个节点不同的地方，最后用patch记录的消息去局部更新Dom。

简单来说Diff算法就是在虚拟DOM树从上至下进行同层比对，如果上层已经不同了，那么下面的DOM全部重新渲染。这样的好处是算法简单，减少比对次数，加快算法完成速度。

有两个特点

• 比较只会在同层级进行，不会跨层级比较
• 在diff比较的过程中，循环从两边向中间比较

diff算法的步骤
用JavaScript对象结构表示DOM树的结构；然后用这个树构建一个真正的DOM树，插到文档当中当状态变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树进行比较(diff)，记录两棵树差异把第二棵树所记录的差异应用到第一棵树所构建的真正的DOM树上(patch)，视图就更新了

20. 什么是对头堵塞

一、TCP队头堵塞
        队头堵塞发生在一个TCP分节丢失，导致其后续分节不按顺序到达接收端的时候
        解决办法：

                只能舍弃TCP协议，使用UDP

二、HTTP队头堵塞

        HTTP管道化要求服务端必须按照请求发送的顺序返回响应，如果一个响应延迟了，那么其他后续的响应都会被延迟，直到队头的响应送达

        解决办法：       

                使用HTTP2，但是HTTP2底层使用的是TCP协议，仍可能堵塞

21. ETag 和 Last-Modified 的区别及优缺点

一、ETag 和 Last-Modified

• 协商缓存靠ETag 和 Last-Modified 控制
• Last-Modified 是通过最后一次修改时间来判断资源是否发生改变
• ETag是通过hash内容对比判断是否资源发生改变

       
二、既然有了Last-Modified为什么还要用ETag

        Last-Modified以秒为单位，如果不超过1s内不会检测到资源发生改变，资源走完一整个生命周期回到原来的状态，其实没发生改变，但会判断发生改变，因为ETag hash 值内容是唯一的，通过对比就很快知道资源是否发生改变。

22. 手写：找出两个数组中的重复元素，比如[2，2，3，5]，[1，2，2，2，5]两个数组，输出[2，2，5] （先口述思路，再手写实现）

function findSame(arr1, arr2) {
    let res = []
    for (let i = 0; i < arr1.length; i++){
        let index = arr2.indexOf(arr1[i])
        if (index != -1) {
            res.push(arr2[index])
            arr2.splice(index,1)
        }
    }
    return res
}
let arr1 = [2, 2, 3, 5], arr2 = [1, 2, 2, 2, 5]
console.log(findSame(arr1,arr2)) // [2,2,5]

 23. ES6新特性

1. var，let，const
2. 数组新增扩展（扩展运算符，构造函数新增方法 Array.from()， Array.of() ；实例对象新增方法 copyWithin()，find()，flat() ... ；数组的空位）
3. 对象新增扩展（属性简写，属性名表达式，super关键字，属性遍历，对象新增方法 Object.is() ... ）
4. 函数新增扩展（参数，属性，作用域，严格模式，箭头模式）
5. Set 和 Map
6. Promise
7. Generator
8. Proxy
9. Module
10. Decorator

24. 箭头函数和普通函数的区别

1）外形，箭头函数用箭头定义；普通函数没有

2）箭头函数全都是匿名函数；普通函数可以有匿名函数，也可以有具名函数

3）箭头函数不能用于构造函数；普通函数可以用于构造函数，以此创建实例对象

4）箭头函数中的this的指向不同，在普通函数中，this指向调用它的对象；在构造函数中，this指向对象实例

5）箭头函数不具有arguments对象；每一个普通函数调用后都具有argument对象，用来存储实际传递的参数

6）箭头函数不具有prototype对象，不具有super，不具有new.target

25. 闭包的优缺点

一、优点

• 可以将一个变量长期存在内存中，用于缓存
• 可以避免全局变量的污染
• 加强封装性，实现了对变量的隐藏和封装

二、缺点

• 因为函数执行上下文AO执行完不被释放，所以会导致内存消耗很大，增加了内存消耗量，影响网页性能出现问题
• 过度使用闭包会导致内存泄漏，或程序加载运行过慢、卡顿等问题

26. 原型的顶端是什么

object.prototype

27. 怎么实现文字阴影效果

text.shadow

28. 毛玻璃怎么实现

filter：frop-shadow()

29. watch 和 computed在哪个环节依赖收集

• watch 在get() 方法被触发时，进行依赖收集
• computed 在组件挂载前进行依赖收集

30. data为什么是一个函数

1. 组件实例对象data必须为函数，目的是为了防止多个实例对象之间共用一个data产生数据污染，采用函数得形式，initData时，会将其作为工厂函数都返回全新data对象
2. Object是引用数据类型，如果不用function返回，每个组件得data都是内存得同一个地址，一个数据改变了，其它也改变，js只有函数构成作用域，data是一个函数时，每个组件实例都有自己得作用域，每个实例相互独立，不会互相影响

31. 怎么在data里定义不可修改的值

用 Object.freeze()  冻结

32. 怎么拿到data中数据的初始值

用 $options 获取

33. 怎么手写一个eventbus

<script>
    class EventBus {
    //定义所有事件列表，此时需要修改格式：
        //  {
        // key:{
        //       D+id:Function
        //       id:Function        
        //  },
        //    key:Object
        // }
        // Array存储的时注册的回调函数

        constructor() {
        this.eventObj = {};// 用于存储所有订阅事件
        this.callbackId = 0; //每个函数的ID
        }
    // 订阅事件，类似监听事件 $on('key',()=>{ })
    $on(name,callback){
        // 判断是否存储过
        if(!this.eventObj[name]) {
            this.eventObj[name] = {};
        }
    // 定义当前回调函数id
    const id = this.callbackId++;
    this.eventObj[name][id] = callback; // 以键值对的形式存储回调函数
    return id; // 将id返回出去，可以利用该id取消订阅
    }

    // 发布事件，类似于触发事件$emit('key')
    $emit(name,...args) {
        //获取存储的事件回调函数数组
        const eventList = this.eventObj[name];
        // 执行所有回调函数且传入参数
        for (const id in eventList) {
            eventList[id](...args);
        //如果订阅一次，则删除
            if(id.indexOf('D')!==-1){
                delete eventList[id];
            }
        }
    }
    // 取消订阅函数,类似于，类似于$off('key1',id) 
    $off(name, id) {
        console.log(this.eventObj)
        //删除存储在事件列表中的该事件
        delete this.eventObj[name][id];
        console.info(`${id}id事件已被取消订阅`)
        //如果这是最后一个订阅者，则删除整个对象
        if(!Object.keys(this.eventObj[name].length)) {
            delete this.eventObj[name];
        }
    }
    //订阅事件，只会执行一次，为了方便，id上直接加上一个标识id
    $once(name, callback){
        // 判断是否存储过
        if(!this.eventObj[name]) {
            this.eventObj[name] = {};
        }
    // 定义当前回调函数id，添加D则代表只执行一次
    const id='D' + this.callback++;
    this.eventObj[name][id] = callback // 以键值对的形式存储回调函数
    return  id; // 将id返回出去，可以利用该id取消订阅
    }
    //初始化EventBus
    let EB = new EventBus();

    //订阅事件
    EB.$on('key1', (name,age)=>{
        console.info('我是订阅事件A：', name, age);
    })
     EB.$once('key1', (name,age)=>{
        console.info('我是订阅事件B：', name, age);
    })
     EB.$on('key2', (name,age)=>{
        console.info('我是订阅事件C：', name);
    })

    //发布事件key1
    EB.$emit('key1','小猪课堂', 26)
    console.info('在触发一次key1')
    EB.$emit('key1','小猪课堂', 26)
    //发布事件
    EB.$emit('key2','小猪课堂')
</script>

34. 如果有两个页面 A 和 B ，一打开页面A，在created里面就发送了10个请求，但立刻跳转到了页面B，怎么取消发送的请求？

XMLHttpRequest.abort() 方法

35. 如果页面B也发送了多个请求，怎么只取消页面A的请求呢

在离开页面的路由钩子函数里

36. Https加密的过程

1. 首先TCP三次握手建立链接，这是数据传输基础，在此之上开始SSL加密；
2. 客户端首先发送Client Hello开始SSL通信，报文中包含客户端支持的SSL版本、随机值Random1、加密算法以及密钥长度等；
3. 服务器发送Server Hello，和客户端一样，在报文中包含SSL版本、随机值Random2以及加密组件，此后服务端将证书也发送到客户端;
4. 此时客户端需要对服务端发送的证书进行验证，通过操作系统内置的CA证书Ω，将服务器发送的证书的数字签名进行解密，并将证书的公钥进行相同算法的HASH与解密的数字签名解密的内容进行对比，验证证书是否合法有效，是否被劫持更换；
5. 客户端验证证书合法，然后生成一个随机值Random3，用公钥对Random3进行加密，生成Pre Master Key,客户端以Client KeyExchange报文将Pre Master Key发送到服务端，此后发送Change Cipher Spec报文表示此后数据传输进行加密传输；
6. 服务端将Pre Master Key用自己的私钥解密为Random3，服务端发送Change Cipher Spec报文表示此后数据传输进行加密传输；这时客户端与服务端都拥有三个随机字符串，且Random3是密文传输的，是安全状态的，此时则可以使用这三个字符串进行对称加密传输。由于非对称加密慢，不能每次传输数据都进行非对称加密，所以使用非对称加密将密钥协商好然后使用对称加密进行数据传输;

其中2、3、5、6也被称为SSL四次握手。

37. https为什么要用非对称加密和对称加密相结合

在传输数据阶段依然使用对称加密，但对称加密的密钥采用非对称加密，提高安全性

38. 协商缓存的ETag是怎么生成的？

1）对于静态文件，ETag生成策略是：文件大小的16进制 + 修改时间

2）对于字符串或Buffer，ETag的生成策略是：字符串/Buffer长度的16进制 + 对应的hash值

39. 状态码 301，302，401，403

301 永久移动                401 未授权

302 临时移动                403 禁止

40. link标签加载css会阻塞dom渲染

link不会阻塞dom的解析，但会阻塞dom渲染

41. src 和 href 的区别

1.href
href：是指向网络资源所在位置，建立和当前元素(锚点)或当前文档(链接)之间的链接，用于超链接。标识超文本引用，用在link和a等元素上，href是引用和页面关联，是在当前元素和引用资源之间建立联系
<link href="common.css"rel="stylesheet"/>当浏览器解析到这一句的时候会识别该文档为css文件，会下载井且不会停止对当前文档的处理，这也是为什么建议使用link方式来加载css而不是使用@import.

2.src
src:是指向外部资源的位置，指向的内部会迁入到文档中当前标签所在的位置；在请求src资源时会将其指向的资源下载井应用到当前文档中，例如js脚本Q，img图片和frame等元素。表示引用资源，表示替换当前元素，用在img，script,iframe上，src是页面内容不可缺少的一部分。
<script src="js.js"></script>当浏览器解析到这一句的时候会暂停其他资源的下载和处理，直至将该资源加载，编译，执行完毕，图片和框架等元素也是如此，类似于该元素所指向的资源嵌套如当前标签内，这也是为什么要把js饭再底部而不是头部。

3.src和href的区别:
1. 当浏览器遇到href会并行下载资源井且不会停止对当前文档的处理。(同时也是为什么建议使用link方式加载CSS，而不是使用@import方式)
2. 当浏览器解析到src，会暂停其他资源的下载和处理，直到将该资源加载或执行完毕。(这也是script标签为什么放在底部而不是头部的原因)
 

42. http 1.0 1.1 2.0 的区别

HTTP1.0与HTTP1.1主要区别

长连接
HTTP 1.0需要使用keep-alive参数来告知服务器端要建立一个长连接，而HTTP1.1默认支持长连接，这样减少创建连接的开销，提高了效
率。（HTTP是基于TCP/IP协议的，创建一个TCP连接是需要经过三次握手的，有一定的开销，如果每次通讯都要重新建立连接的话，对性能有影响）

节约带宽
HTTP 1.1支持只发送headerΩ信息(不带任何body信息)，如果服务器认为客户端有权限请求服务器，则返回100，否则返回401。客户端
如果接受到100，才开始把请求body发送到服务器。这样当服务器返回401的时候，客户端就可以不用发送请求body了，节约了带宽。另
外HTTP还支持传送内容的一部分。这样当客户端已经有一部分的资源后，只需要跟服务器请求另外的部分资源即可。这是支持文件断点
续传的基础。

HOST域
现在可l以web server例如tomat，设置虚拟站点是非常常见的，也即是说，web server上的多个虚拟站点可以共享同一个ip和端口。HTTP1.0是没有host域的，HTTP1.1才支持这个参数。

 

HTTP1.1 HTTP 2.0主要区别

多路复用

HTTP2.0使用了多路复用的技术，做到同一个连接并发处理多个请求，而且并发请求的数量比HTTP1.1大了好几个数量级，当然HTTP1.1也可以多建立几个TCP连接，来支持处理更多并发的请求，但是创建TCP连接本身也是有开销的。TCP连接有一个预热和保护的过程，先检查数据是否传送成功，一旦成功过，则慢慢加大传输速度。因此对应瞬时并发的连接，服务器的响应就会变慢。所以最好能使用一个建立好的连接，并且这个连接可以支持瞬时并发的请求。关于多路复用，可以参看学习NIO

数据压缩

HTTP1.1不支持header数据的压缩，HTTP2.0使用HPACK算法对header的数据进行压缩，这样数据体积小了，在网络上传输就会更快。

服务器推送

当我们对支持HTTP2.0的web server请求数据的时候，服务器会顺便把一些客户端需要的资源一起推送到客户端，免得客户端再次创建连接发送请求到服务器端获取。这种方式非常合适加载静态资源。服务器端推送的这些资源其实存在客户端的某处地方，客户端直接从本地加载这些资源就可以了，不用走网络，速度自然是快很多的。

43. websocket 和 HTTP 2.0 的服务器推送有什么区别

1．http2.0需要客户端发起请求以后，进行响应，再附带推送，需要客户端发起请求。websocket不需要客户端发请求，就能实现推送。

2．http2.0的推送内容只是浏览器能够感知即存放在浏览器的缓存中，代码是无法获取到数据的，所以还得配合SSE获取数据。http2.0的推送内容典型场景：向后端请求一个html，服务器把html页面中的css，js等资源也推送到了浏览器，这是客户端发起请求时，直接在缓存中读取。websocket可以拿到数据，在代码中使用。

3．HTTP／2连接不确定性会永远保持连接，而websocket有onclose事件，对代码友好。

44. fetch 和 ajax 的区别

传统AJAX指的是XMLHttpRequest，最早出现的发送后端请求的技术

fetch是基于Promise设计的，fetch不是AJAX的进一步封装，而是原生JS

区别：

• fetch返回错误的http状态码时不会reject；fetch只对网络请求报错，400 500 都当作成功
• 默认情况下，fetch不会携带cookie
• fetch没有设置超时时间

45. 进程和线程

1．根本区别：进程是操作系统进行资源分配的最小单元，线程是操作系统进行运算调度的最小单元。

2．从属关系不同：进程中包含了线程，线程属于进程。

3．开销不同：进程的创建、销毁和切换的开销都远大于线程。

4．拥有资源不同：每个进程有自己的内存和资源，一个进程中的线程会共享这些内存和资源。

5．控制和影响能力不同：子进程无法影响父进程，而子线程可以影响父线程，如果主线程发生异常会影响其所在进程和子线程。

6．CPU利用率不同：进程的CPU利用率较低，因为上下文切换开销较大，而线程的CPU的利用率较高，上下文的切换速度快。

7．操纵者不同：进程的操纵者一般是操作系统，线程的操纵者一般是编程人员。

46. 浏览器是多进程还是单进程？多线程还是单线程？

浏览器是多进程多线程

47. JS引擎是单线程还是多线程

JS引擎是单线程

48. 浏览器有哪些进程？

浏览器进程、渲染进程、GPU进程、网络进程、插件进程

49. 时间复杂度怎么求？

1）找到执行次数最多的语句

2）计算语句执行次数的数量级

3）用大O来表示结果

50. 关于常用算法的时间复杂度

diff 算法的时间复杂度？O(n)

插入排序的时间复杂度？O(n^2)

冒泡排序的时间复杂度？O(n^2)

快速排序的时间复杂度？O(nlog n)