澎贝科技 前端 秋招面经

全程1h左右，唉，又没录上屏，但是收获了很多有价值的问题。

1. 自我介绍
2. 说说你是怎么接触前端的？明明学的是物联网，但为什么选择这个领域？
3. 大学三年期间，有没有什么课程让你收获最大的
4. 能说说你在webpack构建上做了什么优化吗
5. 具体说说Gzip，压缩的什么资源呢？Gzip的原理了解过吗
6. 了解Websocket实现心跳检测机制原理，能具体说说这个吗
7. 能具体说说路由权限分配吗，你是怎么做这个东西的呢
8. Promise怎么处理请求之间的依赖关系呢
9. 讲一下“用setTimeout包装函数解决同步代码中DOM操作不生效问题”
10. 0.1+0.2等于什么呢（=0.30000000000000004）

JavaScript中只有一种数值类型Number，是基于64位双精度浮点型实现的。

具体而言，双精度浮点数使用 64 个二进制位来表示一个数值，其中 1 位用于表示符号位，11 位用于表示指数位，剩下的 52 位用于表示尾数位。

0.1和 0.2 在二进制中都表示为无限循环小数。

然而双精度浮点数的尾数位只有 52 位，所以只能保留有限的二进制位数。系统会根据规则进行舍入处理，导致会存在舍入误差和精度损失的问题。

用toFixed，(0.1 + 0.2).toFixed(1)保留一位小数

会的。除了 JavaScript，C、C++、Java、Python 等许多编程语言也都采用 IEEE 754 标准的双精度浮点数表示法，同样会存在这个问题。

1. 了解过ES6+的语法吗
2. 说说箭头函数（允许用箭头来定义函数）

箭头函数和普通函数的区别：

• 写法上的差异，箭头函数相比普通函数写法更简洁，用箭头定义函数即可
• 箭头函数没有自己的this值
• 箭头函数没有arguments对象

箭头函数的出现主要是为了解决普通函数中 this 绑定的问题。在普通函数中，this 值的指向在运行时是动态决定的，而箭头函数通过捕获外层作用域的 this 值，使得 this 的行为更加直观和可控。

this 既不指向函数自身也不指向函数的词法作用域。

this 实际上是在函数被调用时发生的绑定，它指向什么完全取决于函数在哪里被调用。

作用域和作用域链：

作用域是程序中定义变量和访问变量的范围。它规定了变量在哪里和如何被访问。

在 JavaScript 中，有以下几种类型的作用域：

1. 全局作用域：全局作用域是在整个代码文件中定义的变量的最外层作用域。它在程序启动时创建，并在程序执行期间一直存在。
2. 函数作用域：函数作用域是在函数内部定义的变量的作用域。它仅在函数执行期间存在，并且每次函数调用都创建一个新的函数作用域。
3. 块级作用域：块级作用域是在块（如 if 语句、for 循环等）内定义的变量的作用域。ES6 引入了 let 和 const 关键字，允许在块级作用域中声明变量。

作用域链是在嵌套的作用域中查找变量的机制。

作用域链是由一系列嵌套的作用域对象组成的。当查找一个变量时，JavaScript 引擎首先在当前作用域中查找，如果找不到，则向上一级作用域继续查找，直到找到匹配的变量或达到全局作用域。如果变量在任何作用域中都没有找到，那么引发 ReferenceError 错误。

作用域链的形成是在函数定义时确定的，而不是在函数调用时。当函数被定义时，它会记住它定义时所处的作用域。当函数被调用时，它会使用保存的作用域链来访问外部变量。

1. 输入一个url到页面渲染的过程

过程如下：

• DNS 解析：浏览器首先会对输入的 URL 进行 DNS 解析，将域名解析为对应的 IP 地址。浏览器会查询本地 DNS 缓存，如果找不到缓存记录，则向 DNS 服务器发送请求获取 IP 地址。
• 建立 TCP 连接：浏览器使用 HTTP 协议与服务器建立 TCP 连接。这个过程涉及三次握手，即客户端发送 SYN（同步）包，服务器返回 SYN+ACK（同步+确认）包，最后客户端发送 ACK（确认）包。
• 发送 HTTP 请求：TCP 连接建立后，浏览器向服务器发送 HTTP 请求。请求中包含了请求方法（GET、POST 等）、路径、头部信息、Cookie 等。
• 服务器处理请求：服务器接收到浏览器发送的请求后，根据请求的路径和其他信息进行处理。处理过程可能包括解析动态请求，读取数据库，处理业务逻辑等。
• 返回 HTTP 响应：服务器生成响应数据并将其打包成 HTTP 响应，包括状态码、头部信息、响应体等。响应中常见的状态码有 200 表示成功，404 表示未找到资源，500 表示服务器内部错误等。
• 接收响应内容：浏览器接收到服务器返回的 HTTP 响应后，开始接收响应内容。如果响应中包含 HTML 页面，浏览器会根据页面中的字符编码（如 UTF-8）解码响应内容。
• 解析 HTML 并构建 DOM 树：浏览器将接收到的 HTML 文档解析成 DOM（文档对象模型）树，树中包含了网页的结构和标签信息。
• 解析 CSS 和构建 CSSOM 树：浏览器解析页面中的 CSS 样式表，并根据样式规则构建 CSSOM（CSS 对象模型）树，用于表示页面的样式信息。
• 构建渲染树：浏览器将 DOM 树和 CSSOM 树合并，生成渲染树（Render Tree），渲染树只包含需要显示的节点和对应的样式信息。
• 布局和绘制：浏览器根据渲染树进行布局（Layout）计算，确定每个节点在屏幕中的位置和大小。然后进行绘制（Paint），将页面内容绘制到屏幕上。
• 加载并执行 JavaScript：如果页面中有 JavaScript 代码，浏览器会加载并执行 JavaScript。JavaScript 可以修改 DOM、处理事件、发送网络请求等操作。
• 页面完成加载：当所有资源（包括图片、样式表、脚本等）都加载完成，页面渲染完毕后，触发页面加载完成的事件，表示页面已就绪。

1. 了解过options吗
2. 给了一道题

let a = function(){console.log(this)};
a();
// this ==> window

1. 反问

今天需要复盘完的几个重要知识点：

• 作用域、作用域链和this
• 从输入url到页面渲染的详细过程
• 箭头函数
• 0.1+0.2的问题