前端面试题汇总（四）

1.宏任务与微任务

浏览器的事件循环：执行js代码的时候，遇见同步任务，直接推入调用栈中执行，遇到异步任务，将该任务挂起，等到异步任务有返回之后推入到任务队列中，当调用栈中的所有同步任务全部执行完成，将任务队列中的任务按顺序一个一个的推入并执行，重复执行这一系列的行为。
异步任务又分为宏任务和微任务。 宏任务：任务队列中的任务称为宏任务，每个宏任务中都包含了一个微任务队列。 微任务：等宏任务中的主要功能都完成后，渲染引擎不急着去执行下一个宏任务，而是执行当前宏任务中的微任务 宏任务包含：执行script标签内部代码、setTimeout/setInterval、ajax请、postMessageMessageChannel、setImmediate，I/O（Node.js） 微任务包含：Promise、MutonObserver、Object.observe、process.nextTick（Node.js）
浏览器和Node 环境下，microtask 任务队列的执行时机不同 Node端，microtask 在事件循环的各个阶段之间执行 浏览器端，microtask 在事件循环的 macrotask 执行完之后执行

2.深拷贝和浅拷贝

浅拷贝：
浅拷贝是指只复制对象的引用，而不复制对象本身。当对一个对象进行浅拷贝时，只复制对象的第一层属性，而不会复制对象内部的嵌套对象。因此，当对一个对象进行浅拷贝后，原对象和复制后的对象会共享同一个嵌套对象，即修改其中一个对象的嵌套对象会影响另一个对象。
方法：使用ES6的展开运算符（…），使用Object.assign()方法
深拷贝：
深拷贝是指复制对象本身以及对象内部的所有嵌套对象。当对一个对象进行深拷贝时，会递归复制对象所有的属性和嵌套对象，从而创建一个完全独立的新对象。因此，新增、删除、修改原对象或复制后的对象中的嵌套对象都不会相互影响。
方法：使用JSON序列化/反序列化JSON.parse(JSON.stringify(obj));、递归方式

3.fetch 请求方式

fetch是一种HTTP数据请求的方式，是XMLHttpRequest的一种替代方案。Fetch函数就是原生js，没有使用XMLHttpRequest对象。fetch()方法返回一个Promise解析Response来自Request显示状态（成功与否）的方法。
XMLHTTPRequest特点：
1、所有功能集中在一个对象上，写的代码可维护性不强且容易混乱。
2、不能适配新的promise API；
Fetch特点：
1、精细的功能分割：头部信息，请求信息，响应信息等均分布在不同的对象上，可以处理各种复杂的数据交互场景。
2、也可以适配promise API；
3、同源请求也可以自定义不带cookie，某些服务不需要cookie的场景下能少些流量。

4.什么方法可以保持前后端实时通信

1.轮询
轮询是客户端和服务器之间会一直进行连接，每隔一段时间就询问一次。
优点就是实现简单，无需做过多的更改。
缺点是轮询的间隔过长，会导致用户不能及时接收到更新的数据；轮询的间隔过短，会导致查询请求过多，增加服务器端的负担
2.长轮询
客户端发送HTTP给服务器之后，如果没有新消息，就一直等待。有新消息，才会返回给客户端。
优点是做了优化，有较好的时效性。
缺点是保持连接会消耗资源; 服务器没有返回有效数据，程序超时。
3.iframe流
iframe流方式是在页面中插入一个隐藏的iframe，利用其src属性在服务器和客户端之间创建一条长连接，服务器向iframe传输数据（通常是HTML，内有负责插入信息的javascript），来实时更新页面。
优点是消息能够实时到达；浏览器兼容好。
缺点是服务器维护一个长连接会增加开销
4.WebSocket
WebSocket是类似Socket的TCP长连接的通讯模式，一旦WebSocket连接建立后，后续数据都以帧序列的形式传输。在客户端断开WebSocket连接或Server端断掉连接前，不需要客户端和服务端重新发起连接请求。
优点是在海量并发和客户端与服务器交互负载流量大的情况下，极大的节省了网络带宽资源的消耗，有明显的性能优势，且客户端发送和接受消息是在同一个持久连接上发起，实时性优势明显。
缺点是浏览器支持程度不一致，不支持断开重连。
5.SSE(Server-Sent Event)
SSE(Server-Sent Event)是建立在浏览器与服务器之间的通信渠道，然后服务器向浏览器推送信息。SSE 是单向通道，只能服务器向浏览器发送，因为 streaming 本质上就是下载。
优点是SSE 使用 HTTP 协议，现有的服务器软件都支持。SSE 属于轻量级，使用简单；SSE 默认支持断线重连；

轮询适用于：小型应用，实时性不高
长轮询适用于：一些早期的对及时性有一些要求的应用：web IM 聊天 iframe适用于：客服通信等
WebSocket适用于：微信、网络互动游戏等
SSE适用于：金融股票数据、看板等

5.浏览器输入URL发生了什么

1、URL解析：判断浏览器输入的是搜索内容还是URL；
2、查找缓存：如果能找到缓存则直接返回页面，如果没有缓存则需要发送网络请求页面；
3、DNS域名解析；
4、三次握手建立TCP连接；
5、发起HTTP请求；
6、服务器响应并返回结果；
7、通过四次握手释放TCP连接；
8、浏览器渲染；
9、js引擎解析

6.浏览器如何渲染页面的

1、HTML被HTML解析器解析成DOM树。
2、CSS被CSS解析器解析成CSS规则树。
3、浏览器会将CSS规则树附着在DOM树上，并结合两者生成渲染树Render Tree。
4、生成布局，浏览器通过解析计算出每一个渲染树节点的位置和大小，在屏幕上画出渲染树的所有节点。
5、将布局绘制在屏幕上，显示出整个页面

7.重绘、重排区别如何避免

重绘是元素的外观样式改变，但位置和大小不变，只需要重新绘制样式，不会改变布局。
重排是页面布局发生改变，导致所有元素的位置和大小需要重新计算，会触发重绘，并且会改变整个页面的布局结构。重排必定发生重绘
避免操作
1.使用虚拟DOM技术
在开发大型单页应用时，可以使用虚拟DOM技术（如React、Vue等）来优化页面的重绘和重排，减少不必要的DOM操作。
2.使用transform属性代替top/left等属性
transform只会引起重绘，而不会引发重新布局。
3.避免频繁操作样式
尽量一次性修改样式，而不是多次单独操作。
4.使用visibility属性代替display属性
隐藏元素时，尽量使用visibility: hidden;而不是display: none;。前者只会触发重绘，而后者会触发重排。
5.简化dom操作
尽量将所有DOM操作尽可能地合并在一起，一次性进行，以减少触发重排和重绘的次数。
6.使用文档碎片
在需要创建大量DOM元素时，可以使用文档碎片来一次性向DOM添加一组元素，而不是逐个添加，从而减少重绘次数。

8.浏览器垃圾回收机制

浏览器垃圾回收机制根据数据的存储方式分为栈垃圾回收和堆垃圾回收
栈垃圾回收的方式非常简便，当一个函数执行结束之后，JavaScript 引擎会通过向下移动 ESP 来销毁该函数保存在栈中的执行上下文，遵循先进后出的原则。
为了使堆垃圾回收达到更好的效果，根据对象的生命周期不一样，使用不同的垃圾回收的算法。
在 V8 中会把堆分为新生代和老生代两个区域，新生代中存放的是生存时间短的对象，老生代中存放的生存时间久的对象。新生区中使用Scavenge算法，老生区中使用标记-清除算法和标记-整理算法。

Scavenge算法：
1.标记：对对象区域中的垃圾进行标记
2.清除垃圾数据和整理碎片化内存：将存活的对象复制到空闲区域，并整理到有序排列，消除内存碎片化
3.角色翻转：对象区域与空闲区域进行角色翻转，完成垃圾对象的回收操作，实现区域无限重复使用

标记-清除算法：
1.标记：从根元素开始递归遍历，活动对象标记为存活对象，未到达的元素标记为垃圾数据
2.清除：清除垃圾数据
3.产生内存碎片：重复执行标记 - 清除算法会导致内存碎片增加，影响大对象分配

标记-整理算法
1.标记：从根元素开始递归遍历，标记活动对象
2.整理：移动存活对象到内存一端
3.清除：清理端边界外的内存

V8使用副垃圾回收器和主垃圾回收器处理垃圾回收，减少全停顿。增量标记算法将标记过程分解为子标记过程，使垃圾回收标记与JavaScript逻辑交替进行，减少老生代垃圾回收引起的卡顿。

9.跨域是什么？如何解决跨域问题

跨域：当前页面中的某个接口请求的地址和当前页面的地址如果协议、域名、端口其中有一项不同，就说该接口跨域了。
跨域限制的原因：浏览器为了保证网页的安全，出的同源协议策略。
1.CORS（跨域资源共享）：在服务端设置响应头部，允许特定域的请求访问资源。
2.JSONP（JSON with Padding）：通过动态创建<script>标签，实现跨域请求数据
3.代理服务器：在本地服务端设置代理服务器将请求代理到目标服务器，再将响应返回给前端。
4.iframe跨域通信：通过在iframe中加载不同域下的页面，利用postMessage API实现通信。
5.WebSocket：利用WebSocket协议进行跨域通信。
nginx使用反向代理进行解决。

10.vue钩子函数

Vue组件的生命周期钩子函数按照阶段分为挂载阶段、更新阶段和销毁阶段。

挂载阶段：
beforeCreate、created、beforeMounted、mounted

更新阶段：
beforeUpdate、updated

销毁阶段：
beforeDestroy、destroyed

在各个阶段的钩子函数中可以做一些特定的操作，例如在created阶段可以进行数据初始化和简单的ajax请求；在mounted阶段可以访问DOM节点和执行操作；在beforeUpdate阶段可以操作现有的DOM等。

在父子组件中，各阶段的钩子函数执行顺序是：
挂载阶段：父created > 子created > 子mounted > 父mounted
更新阶段：父beforeUpdate > 子beforeUpdated > 子updated > 父updated
销毁阶段：父beforeDestroy > 子beforeDestroy > 子destroyed > 父destroyed