2022秋招前端面试题（六）（附答案）_填空10分1. console.log(1):settimeout(( ) => console.l-优快云博客

本文链接：https://blog.youkuaiyun.com/helloworld1024fd/article/details/126220394

本文详细讲解了前端面试中的常见问题，包括代码输出逻辑、事件流的三个阶段、浏览器缓存的作用、事件触发的过程、构造函数与bind的结合使用、本地存储（Cookie、LocalStorage、SessionStorage）及其应用场景，以及数组原型方法（forEach、map、filter、some、reduce）的实现。此外，还讨论了浏览器的理解、事件总线、数据类型判断、节流防抖函数的实现、网络劫持的防范措施、Webpack打包优化策略、事件传播和事件循环机制，以及Vue路由守卫的设置和使用场景。这些问题涵盖了前端开发的重要知识点，有助于准备面试的开发者深入理解前端技术。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

代码输出结果

console.log(1);

setTimeout(() => {
   
  console.log(2);
  Promise.resolve().then(() => {
   
    console.log(3)
  });
});

new Promise((resolve, reject) => {
   
  console.log(4)
  resolve(5)
}).then((data) => {
   
  console.log(data);
})

setTimeout(() => {
   
  console.log(6);
})

console.log(7);
复制代码

代码输出结果如下：

1
4
7
5
2
3
6
复制代码

代码执行过程如下：

首先执行scrip代码，打印出1；
遇到第一个定时器setTimeout，将其加入到宏任务队列；
遇到Promise，执行里面的同步代码，打印出4，遇到resolve，将其加入到微任务队列；
遇到第二个定时器setTimeout，将其加入到红任务队列；
执行script代码，打印出7，至此第一轮执行完成；
指定微任务队列中的代码，打印出resolve的结果：5；
执行宏任务中的第一个定时器setTimeout，首先打印出2，然后遇到 Promise.resolve().then()，将其加入到微任务队列；
执行完这个宏任务，就开始执行微任务队列，打印出3；
继续执行宏任务队列中的第二个定时器，打印出6。

前端进阶面试题详细解答

事件流

事件流是网页元素接收事件的顺序，"DOM2级事件"规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段。
首先发生的事件捕获，为截获事件提供机会。然后是实际的目标接受事件。最后一个阶段是时间冒泡阶段，可以在这个阶段对事件做出响应。
虽然捕获阶段在规范中规定不允许响应事件，但是实际上还是会执行，所以有两次机会获取到目标对象。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件冒泡</title>
</head>
<body>
    <div>
        <p id="parEle">我是父元素    <span id="sonEle">我是子元素</span></p>
    </div>
</body>
</html>
<script type="text/javascript">
var sonEle = document.getElementById('sonEle');
var parEle = document.getElementById('parEle');parEle.addEventListener('click', function () {
         alert('父级 冒泡');}, false);parEle.addEventListener('click', function () {
         alert('父级 捕获');}, true);sonEle.addEventListener('click', function () {
         alert('子级冒泡');}, false);sonEle.addEventListener('click', function () {
         alert('子级捕获');}, true);

</script>
复制代码

当容器元素及嵌套元素，即在捕获阶段又在冒泡阶段调用事件处理程序时：事件按DOM事件流的顺序执行事件处理程序：

父级捕获
子级捕获
子级冒泡
父级冒泡

且当事件处于目标阶段时，事件调用顺序决定于绑定事件的书写顺序，按上面的例子为，先调用冒泡阶段的事件处理程序，再调用捕获阶段的事件处理程序。依次alert出“子集冒泡”，“子集捕获”。

为什么需要浏览器缓存？

对于浏览器的缓存，主要针对的是前端的静态资源，最好的效果就是，在发起请求之后，拉取相应的静态资源，并保存在本地。如果服务器的静态资源没有更新，那么在下次请求的时候，就直接从本地读取即可，如果服务器的静态资源已经更新，那么我们再次请求的时候，就到服务器拉取新的资源，并保存在本地。这样就大大的减少了请求的次数，提高了网站的性能。这就要用到浏览器的缓存策略了。

所谓的浏览器缓存指的是浏览器将用户请求过的静态资源，存储到电脑本地磁盘中，当浏览器再次访问时，就可以直接从本地加载，不需要再去服务端请求了。

使用浏览器缓存，有以下优点：

减少了服务器的负担，提高了网站的性能
加快了客户端网页的加载速度
减少了多余网络数据传输

事件触发的过程是怎样的

事件触发有三个阶段：

window 往事件触发处传播，遇到注册的捕获事件会触发
传播到事件触发处时触发注册的事件
从事件触发处往 window 传播，遇到注册的冒泡事件会触发

事件触发一般来说会按照上面的顺序进行，但是也有特例，如果给一个 body 中的子节点同时注册冒泡和捕获事件，事件触发会按照注册的顺序执行。

// 以下会先打印冒泡然后是捕获
node.addEventListener(
  'click',
  event => {
   
    console.log('冒泡')
  },
  false
)
node.addEventListener(
  'click',
  event => {
   
    console.log('捕获 ')
  },
  true
)
复制代码