浏览器原理面试题前端「前端面试进阶之浏览器原理」(17) _为什么网页跳转到淘宝

当然事件委托不是只有优点，它也是有缺点的，事件委托会影响页面性能，主要影响因素有：
元素中，绑定事件委托的次数；
点击的最底层元素，到绑定事件元素之间的DOM层数；
在必须使用事件委托的地方，可以进行如下的处理：
只在必须的地方，使用事件委托，比如：ajax的局部刷新区域
尽量的减少绑定的层级，不在body元素上，进行绑定
减少绑定的次数，如果可以，那么把多个事件的绑定，合并到一次事件委托中去，由这个事件委托的回调，来进行分发。
4. 事件委托的使用场景
场景：给页面的所有的a标签添加click事件，代码如下：
document.addEventListener("click", function(e) {
if (e.target.nodeName == "A")
console.log("a");
}, false);
但是这些a标签可能包含一些像span、img等元素，如果点击到了这些a标签中的元素，就不会触发click事件，因为事件绑定上在a标签元素上，而触发这些内部的元素时，e.target指向的是触发click事件的元素（span、img等其他元素）。
这种情况下就可以使用事件委托来处理，将事件绑定在a标签的内部元素上，当点击它的时候，就会逐级向上查找，知道找到a标签为止，代码如下：
document.addEventListener("click", function(e) {
var node = e.target;
while (node.parentNode.nodeName != "BODY") {
if (node.nodeName == "A") {
console.log("a");
break;
}
node = node.parentNode;
}
}, false);
5. 同步和异步的区别
同步指的是当一个进程在执行某个请求时，如果这个请求需要等待一段时间才能返回，那么这个进程会一直等待下去，直到消息返回为止再继续向下执行。
异步指的是当一个进程在执行某个请求时，如果这个请求需要等待一段时间才能返回，这个时候进程会继续往下执行，不会阻塞等待消息的返回，当消息返回时系统再通知进程进行处理。
6. 对事件循环的理解
因为 js 是单线程运行的，在代码执行时，通过将不同函数的执行上下文压入执行栈中来保证代码的有序执行。在执行同步代码时，如果遇到异步事件， js 引擎并不会一直等待其返回结果，而是会将这个事件挂起，继续执行执行栈中的其他任务。当异步事件执行完毕后，再将异步事件对应的回调加入到一个任务队列中等待执行。任务队列可以分为宏任务队列和微任务队列，当当前执行栈中的事件执行完毕后， js 引擎首先会判断微任务队列中是否有任务可以执行，如果有就将微任务队首的事件压入栈中执行。当微任务队列中的任务都执行完成后再去执行宏任务队列中的任务。
image
Event Loop 执行顺序如下所示：
首先执行同步代码，这属于宏任务
当执行完所有同步代码后，执行栈为空，查询是否有异步代码需要执行
执行所有微任务
当执行完所有微任务后，如有必要会渲染页面
然后开始下一轮 Event Loop，执行宏任务中的异步代码
7. 宏任务和微任务分别有哪些
微任务包括： promise 的回调、node 中的 process.nextTick 、对 Dom 变化监听的 MutationObserver 。
宏任务包括： script 脚本的执行、setTimeout ， setInterval，setImmediate 一类的定时事件，还有如 I/O 操作、UI 渲染等。
8. 什么是执行栈
可以把执行栈认为是一个存储函数调用的栈结构，遵循先进后出的原则。
image

浏览器原理面试题 前端「前端面试进阶之浏览器原理」(17)

浏览器原理面试题前端「前端面试进阶之浏览器原理」(17)