【高薪宝典】2021年最新的前端大厂面经（详解答案）

前言：在职业发展道路上，需要不断提升自己，需要学习资源的，一起学习交流的欢迎加群【443128517】，小编准备了学习视频，学习线路，自学书籍，职业发展视频。也可以加美女老师七七的微信。二维码放在下面！

 

 简单

1 从输入一个 URL 地址到浏览器完成渲染的整个过程

这个问题属于老生常谈的经典问题了 下面给出面试简单版作答

1. 浏览器地址栏输入 URL 并回车
2. 浏览器查找当前 URL 是否存在缓存，并比较缓存是否过期
3. DNS 解析 URL 对应的 IP
4. 根据 IP 建立 TCP 连接（三次握手）
5. 发送 http 请求
6. 服务器处理请求，浏览器接受 HTTP 响应
7. 浏览器解析并渲染页面
8. 关闭 TCP 连接（四次握手）

注意！ 面试官可以基于这道题进行前端很多知识点的考察 从 http 网络知识到浏览器原理再到前端性能优化 这个题目都可以作为引子开始

2 什么是事件代理（事件委托） 有什么好处

事件委托的原理：不给每个子节点单独设置事件监听器，而是设置在其父节点上，然后利用冒泡原理设置每个子节点。

优点：

• 减少内存消耗和 dom 操作，提高性能 在 JavaScript 中，添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能，因为需要不断的操作 dom,那么引起浏览器重绘和回流的可能也就越多，页面交互的事件也就变的越长，这也就是为什么要减少 dom 操作的原因。每一个事件处理函数，都是一个对象，多一个事件处理函数，内存中就会被多占用一部分空间。如果要用事件委托，就会将所有的操作放到 js 程序里面，只对它的父级进行操作，与 dom 的操作就只需要交互一次，这样就能大大的减少与 dom 的交互次数，提高性能；

• 动态绑定事件 因为事件绑定在父级元素 所以新增的元素也能触发同样的事件

3 addEventListener 默认是捕获还是冒泡

默认是冒泡

addEventListener第三个参数默认为 false 代表执行事件冒泡行为。

当为 true 时执行事件捕获行为。

4 css 的渲染层合成是什么 浏览器如何创建新的渲染层

在 DOM 树中每个节点都会对应一个渲染对象（RenderObject），当它们的渲染对象处于相同的坐标空间（z 轴空间）时，就会形成一个 RenderLayers，也就是渲染层。渲染层将保证页面元素以正确的顺序堆叠，这时候就会出现层合成（composite），从而正确处理透明元素和重叠元素的显示。对于有位置重叠的元素的页面，这个过程尤其重要，因为一旦图层的合并顺序出错，将会导致元素显示异常。

浏览器如何创建新的渲染层

• 根元素 document

• 有明确的定位属性（relative、fixed、sticky、absolute）

• opacity < 1

• 有 CSS fliter 属性

• 有 CSS mask 属性

• 有 CSS mix-blend-mode 属性且值不为 normal

• 有 CSS transform 属性且值不为 none

• backface-visibility 属性为 hidden

• 有 CSS reflection 属性

• 有 CSS column-count 属性且值不为 auto 或者有 CSS column-width 属性且值不为 auto

• 当前有对于 opacity、transform、fliter、backdrop-filter 应用动画

• overflow 不为 visible

注意！不少人会将这些合成层的条件和渲染层产生的条件混淆，这两种条件发生在两个不同的层处理环节，是完全不一样的 具体可以看看这篇文章 浏览器层合成与页面渲染优化

5 webpack Plugin 和 Loader 的区别

• Loader：

  用于对模块源码的转换，loader 描述了 webpack 如何处理非 javascript 模块，并且在 buld 中引入这些依赖。loader 可以将文件从不同的语言（如 TypeScript）转换为 JavaScript，或者将内联图像转换为 data URL。比如说：CSS-Loader，Style-Loader 等。

• Plugin

  目的在于解决 loader 无法实现的其他事,它直接作用于 webpack，扩展了它的功能。在 webpack 运行的生命周期中会广播出许多事件，plugin 可以监听这些事件，在合适的时机通过 webpack 提供的 API 改变输出结果。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。插件接口功能极其强大，可以用来处理各种各样的任务。

webpack 相关知识可以看鲨鱼哥这篇文章 前端进阶高薪必看-Webpack 篇 说的很通俗易懂 基本应对简单的面试足够了

6.apply call bind 区别

• 三者都可以改变函数的 this 对象指向。
• 三者第一个参数都是 this 要指向的对象，如果如果没有这个参数或参数为 undefined 或 null，则默认指向全局 window。
• 三者都可以传参，但是 apply 是数组，而 call 是参数列表，且 apply 和 call 是一次性传入参数，而 bind 可以分为多次传入。
• bind 是返回绑定 this 之后的函数，便于稍后调用；apply 、call 则是立即执行 。
• bind()会返回一个新的函数，如果这个返回的新的函数作为构造函数创建一个新的对象，那么此时 this 不再指向传入给 bind 的第一个参数，而是指向用 new 创建的实例

注意！很多同学可能会忽略 bind 绑定的函数作为构造函数进行 new 实例化的情况

7 举出闭包实际场景运用的例子

比如常见的防抖节流

// 防抖
function debounce(fn, delay = 300) {
  let timer; //闭包引用的外界变量
  return function () {
    const args = arguments;
    if (timer) {
      clearTimeout(timer);
    }
    timer = setTimeout(() => {
      fn.apply(this, args);
    }, delay);
  };
}
复制代码

使用闭包可以在 JavaScript 中模拟块级作用域

function outputNumbers(count) {
  (function () {
    for (var i = 0; i < count; i++) {
      alert(i);
    }
  })();
  alert(i); //导致一个错误！
}
复制代码

闭包可以用于在对象中创建私有变量

var aaa = (function () {
  var a = 1;
  function bbb() {
    a++;
    console.log(a);
  }
  function ccc() {
    a++;
    console.log(a);
  }
  return {
    b: bbb, //json结构
    c: ccc,
  };
})();
console.log(aaa.a); //undefined
aaa.b(); //2
aaa.c(); //3
复制代码

8 css 优先级是怎么计算的

• 第一优先级：!important 会覆盖页面内任何位置的元素样式
• 1.内联样式，如 style="color: green"，权值为 1000
• 2.ID 选择器，如#app，权值为 0100
• 3.类、伪类、属性选择器，如.foo, :first-child, div[class="foo"]，权值为 0010
• 4.标签、伪元素选择器，如 div::first-line，权值为 0001
• 5.通配符、子类选择器、兄弟选择器，如*, >, +，权值为 0000
• 6.继承的样式没有权值

9 事件循环相关题目--必考（一般是代码输出顺序判断）

setTimeout(function () {
  console.log("1");
}, 0);
async function async1() {
  console.log("2");
  const data = await async2();
  console.log("3");
  return data;
}
async function async2() {
  return new Promise((resolve) => {
    console.log("4");
    resolve("async2的结果");
  }).then((data) => {
    console.log("5");
    return data;
  });
}
async1().then((data) => {
  console.log("6");
  console.log(data);
});
new Promise(function (resolve) {
  console.log("7");
  //   resolve()
}).then(function () {
  console.log("8");
});
复制代码

输出结果：247536 async2 的结果 1

注意！我在最后一个 Promise 埋了个坑 我没有调用 resolve 方法 这个是在面试美团的时候遇到了 当时自己没看清楚 以为都是一样的套路 最后面试官说不对 找了半天才发现是这个坑 哈哈

10 http 状态码 204 301 302 304 400 401 403 404 含义

• http 状态码 204 （无内容） 服务器成功处理了请求，但没有返回任何内容
• http 状态码 301 （永久移动） 请求的网页已永久移动到新位置。 服务器返回此响应（对 GET 或 HEAD 请求的响应）时，会自动将请求者转到新位置。
• http 状态码 302 （临时移动） 服务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求。
• http 状态码 304 （未修改） 自从上次请求后，请求的网页未修改过。 服务器返回此响应时，不会返回网页内容。
• http 状态码 400 （错误请求） 服务器不理解请求的语法（一般为参数错误）。
• http 状态码 401 （未授权） 请求要求身份验证。 对于需要登录的网页，服务器可能返回此响应。
• http 状态码 403 （禁止） 服务器拒绝请求。（一般为客户端的用户权限不够）
• http 状态码 404 （未找到） 服务器找不到请求的网页。

11 http2.0 做了哪些改进 3.0 呢

http2.0 特性如下

• 二进制分帧传输
• 多路复用
• 头部压缩
• 服务器推送

Http3.0 相对于 Http2.0 是一种脱胎换骨的改变！

http 协议是应用层协议，都是建立在传输层之上的。我们也都知道传输层上面不只有 TCP 协议，还有另外一个强大的协议 UDP 协议，2.0 和 1.0 都是基于 TCP 的，因此都会有 TCP 带来的硬伤以及局限性。而 Http3.0 则是建立在 UDP 的基础上。所以其与 Http2.0 之间有质的不同。

http3.0 特性如下

• 连接迁移
• 无队头阻塞
• 自定义的拥塞控制
• 前向安全和前向纠错

12 position 有哪些值，作用分别是什么

• static

  static(没有定位)是 position 的默认值，元素处于正常的文档流中，会忽略 left、top、rig