【整理七】

1、Vue2和Vue3的区别至少说5点

点击查看详情

2、Vue3中组件通信的流程【父传子，子传父】

• 父组件传到子组件

父组件是通过props属性给子组件通信的
数据是单向流动 父—>子

（子组件中修改props数据，是无效的，会有一个红色警告）

• 子组件向父组件传值
• 通过绑定事件然后及$emit传值

vue2.0只允许单向数据传递，我们通过出发事件来改变组件的数据

父组件通过绑定自定义事件，接受子组件传递过来的参数

子组件通过$emit触发父组件上的自定义事件，发送参数

3、Apply/call/bind的原理是什么？

call、apply 和 bind 是挂在 Function 对象上的三个方法，调用这三个方法的必须是一个函数

• 在浏览器里，在全局范围内this 指向window对象；
• 在函数中，this永远指向最后调用他的那个对象；
• 构造函数中，this指向new出来的那个新的对象；
• call、apply、bind中的this被强绑定在指定的那个对象上；
• 箭头函数中this比较特殊,箭头函数this为父作用域的this，不是调用时的this.要知道前四种方式,都是调用时确定,也就是动态的,而箭头函数的this指向是静态的,声明的时候就确定了下来；
• apply、call、bind都是js给函数内置的一些API，调用他们可以为函数指定this的执行,同时也可以传参

4、说说你对原型和原型链的理解？

点击查看详情

5、说说你对ES6中Generator的理解

Generator 函数是 ES6 提供的一种异步编程解决方案

执行 Generator 函数会返回一个遍历器对象，可以依次遍历 Generator 函数内部的每一个状态

形式上，Generator 函数是一个普通函数，但是有两个特征：

• function 关键字与函数名之间有一个星号
• 函数体内部使用 yield 表达式，定义不同的内部状态

 Generator 函数会返回一个遍历器对象，即具有 Symbol.iterator 属性，并且返回给自己

通过 yield 关键字可以暂停 generator 函数返回的遍历器对象的状态

6、说说你对Event Loop的理解

Eventloop 是一种在编程语言中常用的编程模型，用于处理任务队列中的事件

它可以被用来处理各种任务，包括网络事件、文件读写、定时器、用户界面事件等
Eventloop 的工作原理是，它会按顺序处理在任务队列中的事件，当它处理完一个事件之后，就会检查队列中的下一个事件，并继续处理，直到队列中的事件全部处理完毕

 Eventloop 同时会检查任务队列中是否有新的事件，如果有的话就会把它加入到队列虫，然后继续处理
Evcntloop 也可以用来处理异步任务，异步任务一般是指需要运行一段时问才能完成的任务。当一个异步任务被添加到任务队列中时，Eventloop 就会自动开始处理它，并在完成之后将处理结果返回给调用者
Eventloop 还可以用来处理多线程应用，它可以让多个线程之间共享任务队列，并共同处理任务，这样可以提高程序的执行效率。
Eventloop 的优势在于它能够有效地处理大量的事件，而不用担心处理的任务会超出系统的处理能力。此外，Eventloop 还可以提高程序的执行效率，因为它可以让任务在合适的时间执行，而不用担心系统会因为处理任务而受到阻碍
总之，Eventloop 是一种非常有用的编程模型，它可以帮助我们有效地处理大量的任务，提高程序的执行效率，提升编程的效率

7、说说Promise和async/await 的区别？

• promise和 async/await都是解决异步编程的一种方式，但是async/await使得异步代码看起来像同步代码。
• 函数前面多了一个async关键字。await关键字只能用于async定于的函数内。async函数会隐式地返回一个Promise,该promise的resolve值就是return的值。 

为什么async/await更好？
使用async函数可以让代码简洁很多，不需要像Promise一样需要then,不需要写匿名函数处理Promise的resolve的值，也不需要定义多余的data变量，还避免了嵌套代码

async/await 让 try/catch可以同时处理同步和异步的错误。在下面的示例中，try/catch不能处理JSON.parse的错误，因为它在Promise中,我们需要使用.catch,这样的错误会显得代码非常的冗余

8、说说浏览器事件循环和nodeJs的事件循环的区别？

浏览器事件循环机制中，微任务的任务队列是在每个宏任务执行完之后执行。

Node事件循环机制中，微任务会在事件循环的各个阶段之间执行，也就是说，一个阶段执行完毕，就会去执行微任务队列的任务。

9、说说你对浏览器缓存机制的理解

浏览器首次请求资源后，需要再次请求时，浏览器会首先获取该资源缓存的header信息，
然后根据Cache-Control和expires来判断该资源在本地缓存否过期
没过期：直接从本地缓存中获取资源信息，浏览器就不再向服务器重新请求资源，
过期：需重新发送请求，重新缓存资源，更新缓存时间
强缓存是利用http请求头中的Expires和Cache-Control两个字段来进行控制，用来表示资源的缓存时间

协商缓存是服务器用来确定缓存资源是否可用过期
因为服务器需要向浏览器确认缓存资源是否可用，二者要进行通信，
而通信的过程就是发送请求，所以在header中就需要有专门的标识来让服务器确认请求资源是否可以缓存访问，
所以就有了两组header字段
Etag和If-None-Match
Last-Modified和If-Modified-Since 

10、说说你对浏览器内核的理解

主要分为两部分：渲染引擎和js引擎。

渲染引擎：是负责取得网页的内容（html、xml、图像等），整理讯息（比如加入css等），以及计算网页的显示方式，然后会输出到显示器或者打印。 浏览器的内核不同，对网页语法的解释也就不同，渲染的效果就不同。所有的浏览器等以及需要编辑，显示网络内容的应用程序需要内核。

js引擎：则用来解析JavaScript来实现网页的动态效果
最开始两个引擎区分不是很明确，后来js引擎越来越独立，内核就倾向于只能渲染引擎。 

11、说说你对Vue的响应式原理的理解

    响应式基本原理是基于Object.defineProperty(obj, prop, descriptor), descriptor里面可以定义get和set方法，可以在获取属性值事触发get方法（可以收集依赖），设置属性值时触发set方法（更新依赖）

        扩展：上面是vue2.0的响应式基本原理，vue3.0的基本原理是Proxy，可以监听属性的get和set方法，监听属性的添加和删除等等，比Object.defineProperty能力更强，但是不兼容IE11。 

13、说说你对Virtual  DOM的理解？

 Virtual DOM是对DOM的抽象本质上是JavaScript对象,这个对象就是更加轻量级的对DOM的描述.

既然我们已经有了DOM,为什么还需要额外加一层抽象?
首先,我们都知道在前端性能优化的一个秘诀就是尽可能少地操作DOM,不仅仅是DOM相对较慢,更因为频繁变动DOM会造成浏览器的回流或者重回,这些都是性能的杀手,因此我们需要这一层抽象,在patch过程中尽可能地一次性将差异更新到DOM中,这样保证了DOM不会出现性能很差的情况.
其次,现代前端框架的一个基本要求就是无须手动操作DOM,一方面是因为手动操作DOM无法保证程序性能,多人协作的项目中如果review不严格,可能会有开发者写出性能较低的代码,另一方面更重要的是省略手动DOM操作可以大大提高开发效率.
最后,也是Virtual DOM最初的目的,就是更好的跨平台,比如Node.js就没有DOM,如果想实现SSR(服务端渲染),那么一个方式就是借助Virtual DOM,因为Virtual DOM本身是JavaScript对象.

14、说说你对nextTick的理解和作用

vue的$nextTick其本质是对js执行原理EventLoop的一种应用
$nextTick的核心是利用promise，mutationObserver、setImmediate、setTimeout的原生
javascript方法来模拟对应的微/宏任务的实现，本质是为了利用JavaScript的这些异步回调任务队列来实现vue框架中自己的异步回调队列。 

nextTick是典型的将底层的javascript执行原理应用到具体案例中的示例，引入异步更新队列机制的原因:

• 如果是同步更新，则多次对一个或者多个属性赋值，会频繁触发dom的渲染，可以减少一些无用的渲染。
• 同时由于virtualDom的引入，每一次状态发生变化之后，状态变化的信号会发送给组件，组件内部使用virtualDom进行计算得出需要更新的具体的dom节点，然后对dom进行更新操作，每次更新状态后的渲染过程需要更多的计算，而这种无用功也将浪费更多的性能，所以异步渲染变得更加至关重要。
•  vue采用了数据驱动的思想，但是在一些情况下，仍然需要操作dom。有时候，可能遇到这样的情况，dom1的数据发生了变化，而dom2需要从dom1中获取数据，那这时候就会发现dom2的试图并没有更新，这时就需要用到nextTick了。 

15、说说你对webpack的理解

WebPack 是一个模块打包工具，可以使用WebPack管理模块，并分析模块间的依赖关系，最终编绎输出模块为HTML、JavaScript、CSS以及各种静态文件（图片、字体等），让开发过程更加高效。

webpack的基本功能（也就是各种loader的作用）

1. 代码转换：TypeScript 编译成 JavaScript、ES6转ES5、SCSS 编译成 CSS 等等(各种loader)

2. 代码语法检测：自动检测代码是否符合语法 （eslint-loader）

3. 代码分割：打包代码时，可以将代码切割成不同的chunk(块)，实现按需加载，降低了初始化时间，提升了首屏渲染效率

4. 监测代码更新，自动编译，刷新页面：监听本地源代码的变化，自动构建，刷新浏览器（自动刷新）

5. 自动发布：更新完代码后，自动构建出线上发布代码并传输给发布系统(没用过)。

6. 文件压缩：压缩 JavaScript、CSS、HTML 代码，缩小文件体积(比如说，打包后的js、css、html文件会去掉代码之间的空隔，紧凑显示)

7. 模块合并：由于模块化的开发，一个页面可能会由多个模块组成，所以编译时需要把各个模块合并成一个文件（模块化开发引出的功能）

webpack的两大特色

• 自动分割(code splitting)

  code splitting，即打包代码时，可以将代码切割成不同的chunk(块)，实现按需加载，降低了初始化时间，提升了首屏渲染效率

• loader 加载器可以处理各种类型的静态文件，并且支持串联操作

16、谈谈GET和POST的区别

GET产生一个TCP数据包；POST产生两个TCP数据包。

对于GET方式的请求，浏览器会把http header和data一并发送出去，服务器响应200（返回数据）；

而对于POST，浏览器先发送header，服务器响应100 continue，浏览器再发送data，服务器响应200 ok（返回数据）。

因为POST需要两步，时间上消耗的要多一点，看起来GET比POST更有效

 GET与POST都有自己的语义，不能随便混用。

据研究，在网络环境好的情况下，发一次包的时间和发两次包的时间差别基本可以无视。而在网络环境差的情况下，两次包的TCP在验证数据包完整性上，有非常大的优点。

并不是所有浏览器都会在POST中发送两次包，Firefox就只发送一次。

17、说说HTTP和HTTPS的区别，HTTPS加密原理是?

HTTP协议以明文方式发送内容，不提供任何方式的数据加密。HTTP协议不适合传输一些敏感信息，比如：信用卡号、密码等支付信息。https则是具有安全性的ssl加密传输协议。http和https使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443。并且https协议需要到ca申请证书。HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，要比http协议安全。

HTTPS加密原理：

点击查看详情

18、TCP为什么要三次握手？

• 防止重复连接
• 同步初始化序列化

19、说说Proxy代理的原理

用户在浏览器中设定 Proxy之后，用户通过浏览器访问 WWW网站的请求不会直接发送到目标主机，而是发送到代理服务器上，代理服务器接收到用户的请求，接收到目标主机的数据，存储到代理服务器的硬盘中，再将用户需要的信息发送到用户的服务器上。

20、说说内存泄漏的理解？内存泄漏的情况有哪些?

内存泄漏是指程序中己动态分配的堆内存由于某种原因程序未释放或无法释放，造成系统内存的浪费，导致程序运行速度减慢甚至系统崩溃等严重后果

内存泄漏的几种场景

• 全局变量过多。通常是变量未被定义或者胡乱引用了全局变量
• 闭包。 未手动解决必包遗留的内存引用。定义了闭包就要消除闭包带来的副作用。
• 事件监听未被移除
• 缓存。建议所有缓存都设置好过期时间