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

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

此篇文章会长期进行更新

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

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

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

一个大概的编译过程是:

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

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

ES6的新特性有哪些?

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

箭头函数的 this 指向？

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

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

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

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

localStorage 和 sessionStorage 的区别？

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

localStorage 能跨域吗？

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