2022年最新前端面试题（大前端时代来临卷起来吧小伙子们..持续维护走到哪记到哪）2022年最新前端面试题热门题目（面经最全版）（蛋糕）...持续维护中，HTML和Css部分vue部分，Null，undefined，Boolean，Number，String，BigInt、BigInt、Object、")；

说出5个以上Math对象中的成员。

3.如果是post请求，必须设置请求头。 4.调用send 发送请求 （如果不需要参数，就写null） 判断status 状态码 为 200 表示接口请求成功 备注：如果是post请求，想要传json格式数据。

XSS(Cross-Site Scripting，跨站脚本攻击)是一种代码注入攻击。攻击者在目标网站上注入恶意代码，当被攻击者登陆网站时就会执行这些恶意代码，这些脚本可以读取 cookie，session tokens，或者其它敏感的网站信息，对用户进行钓鱼欺诈，甚至发起蠕虫攻击等。

1. 使用特殊符号、标签转义符。

2.CSRF攻击（跨站请求伪造）：

CSRF（Cross-site request forgery）跨站请求伪造：攻击者诱导受害者进入第三方网站，在第三方网站中，向被攻击网站发送跨站请求。利用受害者在被攻击网站已经获取的注册凭证，绕过后台的用户验证，达到冒充用户对被攻击的网站执行某项操作的目的。

1. • 服务端给用户生成一个token，加密后传递给用户

   • 用户在提交请求时，需要携带这个token

   • 服务端验证token是否正确

就是通过吧SQL命令插入到Web表单递交或输入域名，最终达到欺骗服务器执行恶意的SQL命令。

解决：表单输入时通过正则表达式将一些特殊字符进行转换

DDoS又叫分布式拒绝服务，全称 Distributed Denial of Service，其原理就是利用大量的请求造成资源过载，导致服务不可用。

1. 防火墙等防护设置禁止ICMP包等

使用基于token的登录流程

1. 客户端使用用户名跟密码请求登录

2. 服务端收到请求，去验证用户名与密码

3. 验证成功后，服务端会签发一个 Token，再把这个 Token 发送给客户端

5. 客户端每次向服务端请求资源的时候需要带着服务端签发的 Token

6. 服务端收到请求，然后去验证客户端请求里面带着的 Token，如果验证成功，就向客户端返回请求的数据

常见http状态码分类：

404服务器资源未找到 2xx Success（成功状态码） 请求正常处理完毕 3xx Redirection（重定向状态码） 需要附加操作已完成请求 4xx Client Error（客户端错误状态码） 服务器无法处理请求 5xx Server Error（服务器错误状态码） 服务器处理请求出错

浏览器从输入url到渲染页面，发生了什么？

这玩意一定要说全了装逼

合成 URL：浏览区会判断用户输入是合法 URL，比如用户输入的是搜索的关键词，默认的搜索引擎会合成新的，如果符合url规则会根据url协议，在这段内容加上协议合成合法的url 
网络进程获取到 URL，先去本地缓存中查找是否有缓存资源，如果有则拦截请求，直接将缓存资源返回给浏览器进程；否则，进入网络请请求阶段；    
DNS 查找数据缓存服务中是否缓存过当前域名信息，有则直接返回；否则，会进行 DNS 解析返回域名对应的 IP 和端口号，如果没有指定端口号，http 默认 80 端口，https 默认 443。如果是 https 请求，还需要建立 TLS 连接；
TCP 三次握手与服务器建立连接，然后进行数据的传输；（三次握手开喷）

浏览器首先会向服务器发送请求行，它包含了请求方法、请求 URI 和 HTTP 协议的版本；另外还会发送请求头，告诉服务器一些浏览器的相关信息，比如浏览器内核，请求域名；

服务器首先返回响应行，包括协议版本和状态码，比如状态码 200 表示继续处理该请求；如果是 301，则表示重定向，服务器也会向浏览器发送响应头，包含了一些信息；

查看响应头的信息，做不同的处理，比如重定向，存储cookie 看看content-type的值，根据不同的资源类型来用不同的解析方式

浏览器渲染原理直接开干.....

浏览器将获取的HTML文档解析成DOM树。
渲染树的每个元素包含的内容都是计算过的，它被称之为布局layout。浏览器使用一种流式处理的方法，只需要一次绘制操作就可以布局所有的元素。
将渲染树的各个节点绘制到屏幕上，这一步被称为绘制painting。

数据传输完成，正常情况下 TCP 将四次挥手断开连接。但是如果浏览器或者服务器在HTTP头部加上 Connection: keep-alive，TCP 就会一直保持连接。

网络安全、HTTP协议

1.`TCP`向上层提供面向连接的可靠服务 ，`UDP`向上层提供无连接不可靠服务。
2.虽然 `UDP` 并没有 `TCP` 传输来的准确，但是也能在很多实时性要求高的地方有所作为
3.对数据准确性要求高，速度可以相对较慢的，可以选用`TCP`

不可靠传输，不使用流量控制和拥塞控制	可靠传输，使用流量控制和拥塞控制
支持一对一，一对多，多对一和多对多交互通信
首部最小20字节，最大60字节
适用于实时应用（IP电话、视频会议、直播等）	适用于要求可靠传输的应用，例如文件传输

4.`在OSI` 网络模型中，HTTP工作于应用层，而HTTPS 的安全传输机制工作在传输层 5.`HTTP` 无法加密，而HTTPS 对传输的数据进行加密，证的网络协议，安全性高于HTTP协议。 6.`HTTP`无需证书，而HTTPS 需要CA机构wosign的颁发的SSL证书，一般免费证书少，因而需要一定费用。

1.GET在浏览器回退不会再次请求，POST会再次提交请求
2.GET请求会被浏览器主动缓存，POST不会，要手动设置
3.GET请求参数会被完整保留在浏览器历史记录里，POST中的参数不会
4.GET请求在URL中传送的参数是有长度限制的，而POST没有限制
6.GET参数暴露在地址栏不安全，POST放在报文内部更安全
7.GET一般用于查询信息，POST一般用于提交某种信息进行某些修改操作
1.私密性的信息请求使用post（如注册、登陆）。
2.查询信息使用get。

第一次：建立连接时，客户端发送syn包到服务器，等待服务端确认

第二次：服务器收到syn包，必须确认客户的syn，同时也发送一个syn包，即syn+ACK包

第三次：客户端收到服务器的syn和ack包，向服务器发送确认包ack，发送完毕，客户端和服务端连接成功，完成三次握手

第一次：浏览器发送完数据后，发送fin请求断开连接

第二次：服务器发送ack到客户端，确认客户端的断开请求

第三次：服务器请求断开fin的请求

第四次：客户端确认服务器的断开ack

1. 1和1.0相比，1.1可以一次传输多个文件

2. http2.0采用二进制格式，新增特性 多路复用、header压缩、服务端推送(静态html资源)

浏览器缓存的作用：减少冗余的数据传输，节省网络带宽，更快加载页面，缓存降低了服务器的要求，有更快的响应

强制缓存：浏览器在加载资源的时候，会根据本地缓存中的headers中的信息(expires,cache-control)是否要强缓存，如果命中的话，则会使用缓存中的资源，否则继续发送请求。

协商缓存：客户端向服务端发送请求，服务端检测是否有对应的标识，如果没有服务端会返回客户端对应的标识，客户端在下次请求把标识带过去服务器会验证标识，如果通过了，则会响应304，告诉浏览器读取缓存，如果没有通过则返回请求的资源。

两类缓存规则可以同时存在，强制缓存优先级高于对比缓存，也就是说，当执行强制缓存的规则时，如果缓存生效，直接使用缓存，不再执行对比缓存规则。

基于对比缓存，不管是否使用缓存都需要向服务器发送请求，那么还用缓存干什么？
服务端在进行标识比较后，只返回header部分，通过状态码通知客户端使用缓存，不再需要将报文主体部分返回给客户端。

memory cache 将资源文件缓存到内存中，下次请求读取的是内存中的
disk cache 将资源存到硬盘中，下次请求从硬盘中读取

HTTP报文就是浏览器和服务器间通信时发送及响应的数据块。
浏览器向服务器请求数据，发送请求(request)报文；
服务器向浏览器返回数据，返回响应(response)报文。
报文信息主要分为两部分：header,数据主体部分(body)

共同点: 都是保存在浏览器端、且同源的

1. cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下sessionStorage和localStorage不会自动把数据发送给服务器，仅在本地保存。

• sessionStorage：仅在当前浏览器窗口关闭之前有效；

• localStorage：始终有效，窗口或浏览器关闭也一直保存，本地存储，因此用作持久数据；

• cookie：只在设置的cookie过期时间之前有效，即使窗口关闭或浏览器关闭

• sessionStorage：不在不同的浏览器窗口中共享，即使是同一个页面；

• localstorage：在所有同源窗口中都是共享的；也就是说只要浏览器不关闭，数据仍然存在

• cookie: 也是在所有同源窗口中都是共享的.也就是说只要浏览器不关闭，数据仍然存在