最新前端面试题收集(一)

收集最新大厂前端面试题，主要来自别人的面经分享。
以下答案为个人理解和查阅资料后的补充，如果理解有误或不全欢迎您的补充!!

此篇文章会长期进行更新

HTTP1.1和HTTP2.0有什么区别?

HTTP1.1是目前最流行的协议，支持GET、POST、DELETE、PUT等请求方法，支持Keep-Alive长连接，减少不必要的三次握手造成的损耗。增加了缓存管理和控制，还支持响应数据的分块传输，支持大文件的传输等。但是HTTP1.1也存在一些缺点，一次只允许在一个TCP连接上发起一个请求、单向请求，只能由客户端向服务器发送、请求和响应报文首部信息冗余量大、数据未压缩导致传输量大等。
HTTP2.0的特点有:

1. 支持二进制传输，所有传输的数据都会被分割，采用二进制编码。
2. 多路复用，一个TCP连接中存在多个流，既可以同时发送多个请求。避免旧版本的队头阻塞问题，极大提高传输效率。
3. 头部压缩，降低传输的开销。两端都会维护一张索引表，记录出现过的头部字段。
4. 支持服务器推送技术
5. 对协议做了升级，对TLS安全性也做了加强，整体来说传输安全性更高
6. 新增了QUIC协议

---

TCP和HTTP有什么区别?

HTTP协议是一种计算机世界中用于两点之间传输图片、文本、音频、视频等超文本数据的规范与约定。HTTP属于应用层协议，是建立在TCP/IP协议栈基础之上。
TCP是一种面向连接的、安全、可靠的传输层协议，每次请求都会和服务器进行三次握手，确保收发双方都具备通讯的能力，在传输过程中出现包丢失情况下进行丢包重发等机制。

---

TCP为何要进行三次握手?

因为TCP是传输层协议，主要确保数据的完整性和安全性。通过三次握手可以确保双发是否都具备收发的能力，双方还交换seq等初始化序号信息。

---

父元素绝对定位，子元素设置绝对定位，也可以生效吗?

生效，绝对定位 position: absolute 元素相对于最近的有定位元素（非static）的父元素进行定位，如果没有定位的父元素则相对于 body定位。

---

浏览器调试工具Preformance和Network主要用来做什么?

Preformance主要用于查看页面的性能、一些性能统计图表。
Network 主要用于记录页面上网络请求的详细信息，分析HTTP请求后得到的各种资源信息，后续可以做一些请求优化相关的。

---

DomContentLoaded 和 Load 有什么区别?

HTML文档和DOM被解析完成之后立即触发 DomContentLoaded事件，触发这个事件的时候，css样式和图片不一定完全加载完成，所以无需等待样式表、Img标签中图像完全加载。
一个资源及其依赖的资源都加载完成(图像、音视频)，才会触发 Load 事件。

---

页面中的script和link标签对页面渲染有什么影响吗?

有影响，如果合理应用会加快HTML的解析，如果没有合理应用就会影响HTML的解析，可能导致页面一段时间的白屏现象，这是因为阻塞造成的。
如果script标签放在头部来引入外部的JS文件的话，在解析HTML阶段，遇到 script 标签就会暂停HTML的解析，立即下载外部的JS文件，下载完成后就会立即执行 script 脚本，如果脚本中包含大量运算很耗时的话，就会出现页面白屏的现象。可以根据业务场景来选择 异步(async) 或 延迟 defer 脚本的执行，这样就不会影响后续的HTML解析。

当解析到 link 标签时，会下载外部的css文件，但是它不会阻塞后续 js 脚本的下载，后面 js 脚本下载完成之后不会立即执行，必须等到 css 下载完成并完全解析后才执行。link 标签会阻塞后面 script 脚本的执行，等下载并解析完 css 样式后才会执行后面的脚本。

---

Webpack的流程

一个大概的编译过程是:

1. 初始化参数，根据入口文件 webpack.config.js 和 命令行参数进行合并和初始化参数
2. 开始编译，根据参数初始化 Compiler 对象，加载所有的插件，再执行 run 方法，根据配置的 enter 找到所有的入口文件
3. 编译模块，从入口文件出发，调用配置的 Loader 对模块进行转换，再找到当前模块的依赖模块，进行递归查找和转换。直到入口文件依赖模块都已被转换处理。
4. 完成模块编译，所有模块经过 Loader的转换后会得到 模块路径 和 转换后的 最终内容 的映射关系。
5. 输出资源
6. 打包完成，在确定好输出内容后，根据配置中的 output 出口路径，把文件内容写到文件系统中。

以上的构建过程，webpack 会在特定的阶段广播出特定的事件，插件可以订阅某个阶段的事件来加入生产线，可以调用 webpack 提供的方法来改变 webpack 的运行结果。

---

ES6的新特性有哪些?

1. let const 块级作用域
2. 字符串、数组、对象和正则的一些扩展方法
3. 新增了 Promise 异步解决方案
4. Proxy 拦截器
5. Generate
6. 箭头函数
7. ES6 支持了类的定义
8. 新增了模块系统 import 和 export
9. Async 函数，使异步变得更加方便
10. 新增了 Set 集合 和 Map映射
11. 新增 Symbol 数据类型

---

箭头函数的 this 指向？

this 指向的是箭头函数定义时所在作用域中的 this对象，对象并不构成单独作用域，所以对象的方法使用箭头函数会得到和预期不一样的结果。

---

事件监听器中普通函数和箭头函数的 this 指向有什么区别？

如果给一个按钮通过 addEventListener 绑定一个点击事件，普通函数内部的 this 指的是 按钮DOM元素。如果是在全局作用域中给按钮绑定的点击事件，并且是箭头函数的情况下，箭头函数内部的 this 指向的是全局对象。

---

cookie 有哪些属性？

path：cookie 生效的url路径，如果不设置默认为当前文档位置的路径
domain：cookie 生效的域名，默认为当前文档的路径的域名部分
max-age：cookie 过期的秒数
expires：cookie 过期的日期，如果没有指定则为临时 cookie，整个浏览器关闭后既失效
secure：指定 cookie 是在 http 还是 https 协议下生效

---

localStorage 和 sessionStorage 的区别？

1. localStorage 本地存储的数据没有时间限制，而 sessionStorage 存储的数据在页面回话结束时会被清除
2. 当同时存储 localStoreage 和 sessionStorage 时，再打开一个新的相同的窗口，localStoreage的数据仍然存在，而 sessionStorage的数据就已被清除了

---

localStorage 能跨域吗？

可以，通过 postmessage 和 localStoreage 实现数据跨域共享

---

谈谈你对回流和重绘的理解

当页面加载时，浏览器会把HTML通过解析器解析成一个 DOM 树，其中包括所有的 HTML标签，以及 DOMContentLoaded 事件触发之前通过 js 动态增删的 HTML节点。css 会被解析成样式结构体。然后将 DOM 树和样式结构体结合就构建出了 渲染树（render tree）。在构建过程中会把 display:none 的元素以及 head 标签等不需要渲染在页面上的节点都进行过滤。渲染树的部分或者全部因为元素的尺寸、布局或display的影响都会进行重新构建，这个部分就被称为 回流。页面加载过程肯定会发生一次回流，这是不可避免的。在回流的时候，浏览器会让渲染树中受影响的部分失效，并重新构建渲染树，完成回流后，浏览器会重新绘制受影响的部分到屏幕中，这个过程被称为 重绘 。所以，回流会引发重绘，但重绘不一定会引起回流。浏览器也做了相关的优化，内部会维护一个队列，将回流和重绘操作都放到队列中，当达到一个值或者某个时间点后会将多次的回流和重绘合并成一次。

---

csrf 和 xss攻击原理以及预防措施？

1. cookie: 登录后后端生成一个 sessionid 放在cookie中返回给客户端，并且服务端一直记录着这个 sessionid对应的用户。客户端以后每次请求都会携带这个sessionid，服务端通过这个sessionid来验证身份之类的操作。所以攻击者通过 xss 注入恶意脚本获取到用户的cookie也就是服务器端的 sessionid后，就可以完全替代你。
2. token：登录后后端返回一个token给客户端，客户端将这个token存储起来，一般都存储在 cookie或localStorage和sessionStoreage中，然后每次客户端请求都需要开发者手动将 token 放在header中带过去，头部的 key字段需要前后端协商好。服务端每次只需要对这个 token进行验证就能使用token中的信息来进行下一步操作了。
3. xss（跨站脚本攻击）：用户通过各种方式将恶意代码注入到其他用户的页面中，就可以通过脚本获取其他用户cookie信息发送到攻击者服务器，然后攻击者可以通过cookie欺骗服务器发起恶意请求。
4. csrf：（跨站请求伪造），简单来说，当用户A登录一个银行网站，在未退出登录的情况下，通过诱惑广告等方式点击进入攻击者的网站。攻击者网站向A的银行网站发起一个转账请求，由于A并没有退出银行网站，所以浏览器认为请求是A发出的，就会向银行服务器发送请求，在A不知情的情况下完成扣款操作。简单的身份验证只能保证发自某个用户的浏览器，但不能保证请求本身是用户自愿发出的。
   xss预防：不要相信用户的输入，将用户输入的内容进行编码。
   csrf预防：1. 通过验证码的方式。 2. 通过referer判断请求的来源。3. 通过 token 进行身份验证

以上两种攻击方式：

1. 如果被xss攻击了，不管是token还是cookie，都能被拿到。
2. 如果遭受csrf攻击
   • cookie：用户点击了链接，cookie 未失效，导致发起请求后后端以为是用户正常操作，于是进行扣款操作
   • token：用户点击了链接，由于浏览器请求头不会自动带上 token，所以即使发送了请求，后端的token验证不会通过，所以不会进行扣款操作

http和https的区别?

1. http协议是明文传输, 如果在传输过程中被第三方劫持, 对用户来说是不安全的。https是密文传输, 传输之前会经过(SSL/TLS)加密，如果被第三方劫持用户数据也是安全的。
2. http协议浏览器默认端口是80，https协议浏览器默认端口是 443
3. 协议栈也有区别，http 协议应用层的下层是传输层（TCP），https协议应用层的下层是安全套接层（SSL/TLS）。
   本质的区别是传输加密，安全性提升的区别。

var 和 let 的区别?

1. var 声明的变量存在变量提升，let 声明的变量不存在变量提升
2. let 声明的变量会绑定在当前的作用域内，会出现暂时性死区的现象，所以在 let 声明变量之前对变量修改会报错
3. let 不允许在相同的作用域重复声明同一个变量
4. let 和 const 都会产生会产生块级作用域
5. let 和 const 以及 class 声明的变量都不会挂载到 window 对象上, 而var 声明的变量会

TCP和UDP的区别?

1. 基于连接和无连接
2. 对系统资源的要求（TCP较多，UDP少）
3. UDP程序结构比较简单
4. 流模式与数据报模式
5. TCP保证数据正确性，UDP可能丢包
6. TCP保证数据顺序，UDP不保证

什么情况下会发生布尔值的隐式类型转换?

1. if (...) {}, 语句中的条件表达式
2. for (.., .., ..), 循环语句中的第二个判断表达式
3. while (...) 循环中的条件表达式
4. ? : 一元操作符中的条件表达式
5. 逻辑运算符 || (逻辑或)，&& (逻辑与) 左边的操作数（作为条件表达式）