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

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

此篇文章会长期进行更新

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 指向的是全局对象。

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. 逻辑运算符 || (逻辑或)，&& (逻辑与) 左边的操作数（作为条件表达式）
posted @ 2020-03-20 13:55  qiqf  阅读(669)  评论(1)  编辑  收藏  举报