【愚公系列】2023年03月 其他-Web前端基础面试题（http_20道）

一、http/浏览器

1、说一下http和https

https 的 SSL 加密是在传输层实现的。

(1)http 和 https 的基本概念

http: 超文本传输协议，是互联网上应用最为广泛的一种网络协议，是一个客户端和服

务器端请求和应答的标准（TCP），用于从 WWW 服务器传输超文本到本地浏览器的传

输协议，它可以使浏览器更加高效，使网络传输减少。

https: 是以安全为目标的 HTTP 通道，简单讲是 HTTP 的安全版，即 HTTP 下加入 SSL

层，HTTPS 的安全基础是 SSL，因此加密的详细内容就需要 SSL。

https 协议的主要作用是：建立一个信息安全通道，来确保数组的传输，确保网站的真实

性。

(2)http 和 https 的区别？

http 传输的数据都是未加密的，也就是明文的，网景公司设置了 SSL 协议来对 http 协议

传输的数据进行加密处理，简单来说 https 协议是由 http 和 ssl 协议构建的可进行加密传

输和身份认证的网络协议，比 http 协议的安全性更高。

主要的区别如下：

Https 协议需要 ca 证书，费用较高。

http 是超文本传输协议，信息是明文传输，https 则是具有安全性的 ssl 加密传输协议。

使用不同的链接方式，端口也不同，一般而言，http 协议的端口为 80，https 的端口为

443

http 的连接很简单，是无状态的；HTTPS 协议是由 SSL+HTTP 协议构建的可进行加密传

输、身份认证的网络协议，比 http 协议安全。

(3)https 协议的工作原理

客户端在使用 HTTPS 方式与 Web 服务器通信时有以下几个步骤，如图所示。

客户使用 https url 访问服务器，则要求 web 服务器建立 ssl 链接。

web 服务器接收到客户端的请求之后，会将网站的证书（证书中包含了公钥），返回或

者说传输给客户端。

客户端和 web 服务器端开始协商 SSL 链接的安全等级，也就是加密等级。

客户端浏览器通过双方协商一致的安全等级，建立会话密钥，然后通过网站的公钥来加

密会话密钥，并传送给网站。

web 服务器通过自己的私钥解密出会话密钥。

web 服务器通过会话密钥加密与客户端之间的通信。

(4)https 协议的优点

使用 HTTPS 协议可认证用户和服务器，确保数据发送到正确的客户机和服务器；HTTPS 协议是由 SSL+HTTP 协议构建的可进行加密传输、身份认证的网络协议，要比

http 协议安全，可防止数据在传输过程中不被窃取、改变，确保数据的完整性。

HTTPS 是现行架构下最安全的解决方案，虽然不是绝对安全，但它大幅增加了中间人攻

击的成本。

谷歌曾在 2014 年 8 月份调整搜索引擎算法，并称“比起同等 HTTP 网站，采用 HTTPS

加密的网站在搜索结果中的排名将会更高”。

(5)https 协议的缺点

https 握手阶段比较费时，会使页面加载时间延长 50%，增加 10%~20%的耗电。

https 缓存不如 http 高效，会增加数据开销。

SSL 证书也需要钱，功能越强大的证书费用越高。

SSL 证书需要绑定 IP，不能再同一个 ip 上绑定多个域名，ipv4 资源支持不了这种消耗。

2、TCP 和 UDP 的区别

（1）TCP 是面向连接的，udp 是无连接的即发送数据前不需要先建立链接。

（2）TCP 提供可靠的服务。也就是说，通过 TCP 连接传送的数据，无差错，不丢失，

不重复，且按序到达;UDP 尽最大努力交付，即不保证可靠交付。 并且因为 tcp 可靠，

面向连接，不会丢失数据因此适合大数据量的交换。

（3）TCP 是面向字节流，UDP 面向报文，并且网络出现拥塞不会使得发送速率降低（因

此会出现丢包，对实时的应用比如 IP 电话和视频会议等）。

（4）TCP 只能是 1 对 1 的，UDP 支持 1 对 1,1 对多。

（5）TCP 的首部较大为 20 字节，而 UDP 只有 8 字节。

（6）TCP 是面向连接的可靠性传输，而 UDP 是不可靠的。

3、fetch 发送 2 次请求的原因

fetch 发送 post 请求的时候，总是发送 2 次，第一次状态码是 204，第二次才成功？

原因很简单，因为你用 fetch 的 post 请求的时候，导致 fetch 第一次发送了一个 Options

请求，询问服务器是否支持修改的请求头，如果服务器支持，则在第二次中发送真正的

请求。

4、Cookie、sessionStorage、localStorage 的区别

共同点：都是保存在浏览器端，并且是同源的

Cookie：cookie 数据始终在同源的 http 请求中携带（即使不需要），即 cookie 在浏览器

和服务器间来回传递。而 sessionStorage 和 localStorage 不会自动把数据发给服务器，仅

在本地保存。cookie 数据还有路径（path）的概念，可以限制 cookie 只属于某个路径下,

存储的大小很小只有 4K 左右。 （key：可以在浏览器和服务器端来回传递，存储容量

小，只有大约 4K 左右）

sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持，localStorage：

始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie 只在设置的 cookie

过期时间之前一直有效，即使窗口或浏览器关闭。（key：本身就是一个回话过程，关

闭浏览器后消失，session 为一个回话，当页面不同即使是同一页面打开两次，也被视为

同一次回话）

localStorage：localStorage 在所有同源窗口中都是共享的；cookie 也是在所有同源窗口中

都是共享的。（key：同源窗口都会共享，并且不会失效，不管窗口或者浏览器关闭与

否都会始终生效）

补充说明一下 cookie 的作用：

保存用户登录状态。例如将用户 id 存储于一个 cookie 内，这样当用户下次访问该页面

时就不需要重新登录了，现在很多论坛和社区都提供这样的功能。 cookie 还可以设置

过期时间，当超过时间期限后，cookie 就会自动消失。因此，系统往往可以提示用户保

持登录状态的时间：常见选项有一个月、三个 月、一年等。

5、iframe 是什么？有什么缺点？

定义：iframe 元素会创建包含另一个文档的内联框架

提示：可以将提示文字放在之间，来提示某些不支持 iframe 的浏览器

缺点：

会阻塞主页面的 onload 事件

搜索引擎无法解读这种页面，不利于 SEO

iframe 和主页面共享连接池，而浏览器对相同区域有限制所以会影响性能。

6、Cookie 如何防范 XSS 攻击

XSS（跨站脚本攻击）是指攻击者在返回的 HTML 中嵌入 javascript 脚本，为了减轻这些

攻击，需要在 HTTP 头部配上，set-cookie：

httponly-这个属性可以防止 XSS,它会禁止 javascript 脚本来访问 cookie。

secure - 这个属性告诉浏览器仅在请求为 https 的时候发送 cookie。

结果应该是这样的：Set-Cookie=

7、介绍知道的 http 返回的状态码

100 Continue 继续。客户端应继续其请求

101 Switching Protocols 切换协议。服务器根据客户端的请求切换协议。只能切换到更

高级的协议，例如，切换到 HTTP 的新版本协议

200 OK 请求成功。一般用于 GET 与 POST 请求

201 Created 已创建。成功请求并创建了新的资源

202 Accepted 已接受。已经接受请求，但未处理完成

203 Non-Authoritative Information 非授权信息。请求成功。但返回的 meta 信息不在原

始的服务器，而是一个副本

204 No Content 无内容。服务器成功处理，但未返回内容。在未更新网页的情况下，

可确保浏览器继续显示当前文档205 Reset Content 重置内容。服务器处理成功，用户终端（例如：浏览器）应重置文

档视图。可通过此返回码清除浏览器的表单域

206 Partial Content 部分内容。服务器成功处理了部分 GET 请求

300 Multiple Choices 多种选择。请求的资源可包括多个位置，相应可返回一个资源特

征与地址的列表用于用户终端（例如：浏览器）选择

301 Moved Permanently 永久移动。请求的资源已被永久的移动到新 URI，返回信息会

包括新的 URI，浏览器会自动定向到新 URI。今后任何新的请求都应使用新的 URI 代替

302 Found 临时移动。与 301 类似。但资源只是临时被移动。客户端应继续使用原有

URI

303 See Other 查看其它地址。与 301 类似。使用 GET 和 POST 请求查看

304 Not Modified 未修改。所请求的资源未修改，服务器返回此状态码时，不会返回

任何资源。客户端通常会缓存访问过的资源，通过提供一个头信息指出客户端希望只返

回在指定日期之后修改的资源

305 Use Proxy 使用代理。所请求的资源必须通过代理访问

306 Unused 已经被废弃的 HTTP 状态码

307 Temporary Redirect 临时重定向。与 302 类似。使用 GET 请求重定向

400 Bad Request 客户端请求的语法错误，服务器无法理解

401 Unauthorized 请求要求用户的身份认证

402 Payment Required 保留，将来使用

403 Forbidden 服务器理解请求客户端的请求，但是拒绝执行此请求

404 Not Found 服务器无法根据客户端的请求找到资源（网页）。通过此代码，网站

设计人员可设置"您所请求的资源无法找到"的个性页面

405 Method Not Allowed 客户端请求中的方法被禁止

406 Not Acceptable 服务器无法根据客户端请求的内容特性完成请求

407 Proxy Authentication Required 请求要求代理的身份认证，与 401 类似，但请求者

应当使用代理进行授权

408 Request Time-out 服务器等待客户端发送的请求时间过长，超时

409 Conflict 服务器完成客户端的 PUT 请求是可能返回此代码，服务器处理请求时发

生了冲突

410 Gone 客户端请求的资源已经不存在。410 不同于 404，如果资源以前有现在被永

久删除了可使用 410 代码，网站设计人员可通过 301 代码指定资源的新位置

411 Length Required 服务器无法处理客户端发送的不带 Content-Length 的请求信息

412 Precondition Failed 客户端请求信息的先决条件错误

413 Request Entity Too Large 由于请求的实体过大，服务器无法处理，因此拒绝请求。

为防止客户端的连续请求，服务器可能会关闭连接。如果只是服务器暂时无法处理，则

会包含一个 Retry-After 的响应信息

414 Request-URI Too Large 请求的 URI 过长（URI 通常为网址），服务器无法处理

415 Unsupported Media Type 服务器无法处理请求附带的媒体格式

416 Requested range not satisfiable 客户端请求的范围无效

417 Expectation Failed 服务器无法满足 Expect 的请求头信息

500 Internal Server Error 服务器内部错误，无法完成请求

501 Not Implemented 服务器不支持请求的功能，无法完成请求

502 Bad Gateway 作为网关或者代理工作的服务器尝试执行请求时，从远程服务器接

收到了一个无效的响应503 Service Unavailable 由于超载或系统维护，服务器暂时的无法处理客户端的请求。

延时的长度可包含在服务器的 Retry-After 头信息中

504 Gateway Time-out 充当网关或代理的服务器，未及时从远端服务器获取请求

505 HTTP Version not supported 服务器不支持请求的 HTTP 协议的版本，无法完成处理 ；

8、强缓存、协商缓存什么时候用哪个

因为服务器上的资源不是一直固定不变的，大多数情况下它会更新，这个时候如果我们

还访问本地缓存，那么对用户来说，那就相当于资源没有更新，用户看到的还是旧的资

源；所以我们希望服务器上的资源更新了浏览器就请求新的资源，没有更新就使用本地

的缓存，以最大程度的减少因网络请求而产生的资源浪费。

9、前端优化

降低请求量：合并资源，减少 HTTP 请求数，minify / gzip 压缩，webP，lazyLoad。

加快请求速度：预解析 DNS，减少域名数，并行加载，CDN 分发。

缓存：HTTP 协议缓存请求，离线缓存 manifest，离线数据缓存 localStorage。

渲染：JS/CSS 优化，加载顺序，服务端渲染，pipeline。

10、GET 和 POST 的区别

get 参数通过 url 传递，post 放在 request body 中。

get 请求在 url 中传递的参数是有长度限制的，而 post 没有。

get 比 post 更不安全，因为参数直接暴露在 url 中，所以不能用来传递敏感信息。

get 请求只能进行 url 编码，而 post 支持多种编码方式get 请求会浏览器主动 cache，而 post 支持多种编码方式。

get 请求参数会被完整保留在浏览历史记录里，而 post 中的参数不会被保留。

GET 和 POST 本质上就是 TCP 链接，并无差别。但是由于 HTTP 的规定和浏览器/服务器

的限制，导致他们在应用过程中体现出一些不同。

GET 产生一个 TCP 数据包；POST 产生两个 TCP 数据包。

11、输入 URL 到页面加载显示完成发生了什么?

DNS 解析

TCP 连接

发送 HTTP 请求

服务器处理请求并返回 HTTP 报文

浏览器解析渲染页面

连接结束

12、CDN的优化原理

许多网站运营者都信奉着一个原则，这个原则指导着运营者们优化网站的访问速度、页面效果等，它就是“8秒原则”。“8秒原则”是指，用户在打开网站时，记载时间不能超过8秒，一旦时间过长，网站将会失去这个用户，即便网站的页面制作精美、内容丰富。

如今，越来越多的站长为了提升网站的访问速度，使用cdn加速来为网站加持。

cdn加速的工作原理

cdn加速的工作原理，就是将源站的各类资源像复制粘贴一样，缓存到全国各地甚至全球各地的cdn节点上，当用户对源站发起访问时，用户就可以获取到离自己最近的数据信息，不必到源站进行访问。这样，避免访问源站时的线路拥堵，也减轻了源站的访问压力，同时，让用户得到更快的访问体验。

cdn加速的好处

1、提高安全性

网站与cdn加速服务建立连接后，用户在访问时只能访问cdn节点，源站就会隐藏起来，在一定的程度上起到保护源站被攻击的风险。由于cdn加速的各个节点较为分散，攻击者在发起攻击时无法全部下手，增加了他们的攻击难度，攻击一个节点仅仅是影响一个节点的缓存访问而已。

2、提升网站的访问速度

cdn加速最直接的好处的就是大大提升了网站的访问速度，cdn加速可以突破带宽的速度瓶颈限制，扩大了带宽的可接待容量，用户在访问网站时就不会拥挤。cdn加速的多个节点布置，能够让用户在不同地方都能访问到最近的节点资源上，让用户更快获取消息。

3、网站不容易挂机

当网站同时间涌入巨大流量时，使用了cdn之后，可以减少网站宕机的情况，同时你的网站可以接收更多的流量。用户访问网站的时间提高了，跳出率将会大大降低，这也有利于网站的各类转化。

13、浏览器的内核分别是什么?

（1）Mozilla Firefox的Gecko

（2）Chrome的Blink（WebKit的分支）

（3）Opera的内核原为Presto，现为Blink

（4）IE的内核Trident

（5）Safari的内核WebKit

14、浏览器是如何渲染页面的？

渲染的流程如下：

1.解析HTML文件，创建DOM树。

自上而下，遇到任何样式（link、style）与脚本（script）都会阻塞（外部样式不阻塞后续外部脚本的加载）。

2.解析CSS。优先级：浏览器默认设置<用户设置<外部样式<内联样式<HTML中的style样式；

3.将CSS与DOM合并，构建渲染树（Render Tree）

4.布局和绘制，重绘（repaint）和重排（reflow）

15、GET请求方式的长度限制到底是多少？

误区：我们经常以为GET请求参数的大小存在限制，而POST请求参数大小的无限制的

实际上HTTP协议从没有规定GET/POST的请求长度显示是多少。对GET请求参数的限制是来源于浏览器或者web服务器，浏览器或web服务器限制了url的长度。对POST请求起限制作用的是服务器处理程序的处理能力。

再次强调：

HTTP 协议 未规定 GET 和 POST 的长度限制

GET 的最大长度显示是因为浏览器和 web 服务器限制了 URL 的长度

不同的浏览器和 WEB 服务器，限制的最大长度不一样

要支持 IE，则最大长度为 2083 byte，若只支持 Chrome，则最大长度 8182 byte

补充各大浏览器对url的最大长度限制：

Firefox：对Firefox浏览器URL的长度限制为：65536个字符。

Safari：URL最大长度限制为80000个字符。

Opera：URL最大长度限制为190000个字符。

Google(chrome)：URL最大长度限制为8182个字符。

Apache(Server)：能接受的最大url长度为8192个字符

Microsoft Internet Information Server(IIS)：n能接受最大url的长度为16384个字符。

注意：（若长度超限，则服务端返回414标识）

16、什么是同源策略（Same origin policy）？

同源策略是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。

同源策略是浏览器的行为，是为了保护本地数据不被JavaScript代码获取回来的数据污染，因此拦截的是客户端发出的请求回来的数据接收，即请求发送了，服务器响应了，但是无法被浏览器接收。

同源策略的作用：

为了保护用户信息的安全，防止恶意的网络窃取

什么是同源：

端口、域名、协议相同

安全限制具体都阻止了哪些东西不可以被访问：

⽆法读取⾮同源策略下的cookie、localstorage

⽆法解除⾮同源的dom

⽆法向⾮同源的地址发送ajax请求

跨域访问：

跨域访问的解决方案是 CORS！

17、什么是跨域资源共享（CORS）？

CORS，全称Cross-Origin Resource Sharing，是一种允许当前域（domain）的资源（比如html/js/web service）被其他域（domain）的脚本请求访问的机制，通常由于同域安全策略（the same-origin security policy）浏览器会禁止这种跨域请求。

怎么用CORS：

CORS 可以配合 token 来防止 CSRF（跨站请求伪造） 攻击

18、什么是跨站请求伪造（CSRF）？

跨站请求伪造（英语：Cross-site request forgery），也被称为 one-click attack 或者 session riding，通常缩写为 CSRF 或者 XSRF， 是一种挟制用户在当前已登录的Web应用程序上执行非本意的操作的攻击方法。

简单的说是攻击者通过伪造用户的浏览器的请求，向一个用户自己曾经认证访问过的网站发送出去，使目标网站接收并误以为是用户的真实操作而去执行命令。常用于盗取账号、转账、发送虚假消息等

CSRF 攻击攻击原理及过程：

（1）用户 C 打开浏览器，访问受信任网站 A，输入用户名和密码请求登录网站 A；

（2）在用户信息通过验证后，网站 A 产生 Cookie 信息并返回给浏览器，此时用户登录网站 A 成功，可以正常发送请求到网站 A；

（3）用户未退出网站 A 之前，在同一浏览器中，打开一个 TAB 页访问网站 B；

（4）网站 B 接收到用户请求后，返回一些攻击性代码，并发出一个请求要求访问第三方站点 A；

（5）浏览器在接收到这些攻击性代码后，根据网站 B 的请求，在用户不知情的情况下携带 Cookie 信息，向网站 A 发出请求。网站 A 并不知道该请求其实是由 B 发起的，所以会根据用户 C 的Cookie 信息以 C 的权限处理该请求，导致来自网站 B 的恶意代码被执行。

如何预防CSRF：

1、提交验证码

在表单中添加一个随机的数字或字母验证码。通过强制用户和应用进行交互。来有效地遏制CSRF攻击。

2、Referer Check

检查假设是非正常页面过来的请求，则极有可能是CSRF攻击。

3、token验证

在 HTTP 请求中以參数的形式添加一个随机产生的 token，并在服务器端建立一个拦截器来验证这个 token，假设请求中没有 token 或者 token 内容不对，则觉得可能是 CSRF 攻击而拒绝该请求。token必须足够随机。敏感的操作应该使用POST，而不是GET。比如表单提交。

4、在HTTP头中自己定义属性并验证

这样的方法也是使用 token 并进行验证。这里并非把 token 以參数的形式置于 HTTP 请求之中，而是把它放到 HTTP 头中自己定义的属性里。通过 XMLHttpRequest 这个类，能够一次性给全部该类请求加上 csrftoken 这个 HTTP 头属性。并把 token 值放入当中。这样攻克了上种方法在请求中添加 token 的不便。同一时候，通过 XMLHttpRequest 请求的地址不会被记录到浏览器的地址栏，也不用操心 token 会透过 Referer 泄露到其它站点中去。

19、什么是跨站攻击（XXS）？

跨站攻击，即Cross Site Script Execution(通常简写为XSS)是指攻击者利用网站程序对用户输入过滤不足，输入可以显示在页面上对其他用户造成影响的HTML代码，从而盗取用户资料、利用用户身份进行某种动作或者对访问者进行病毒侵害的一种攻击方式。

如何预防XXS：

1、HttpOnly防止获取cookie

在cookie中设置了HttpOnly属性，那么通过js脚本将无法读取到cookie信息，这样能有效的防止XSS攻击

2、输入检查（不要相信用户的所有输入）

3、输出检查（存的时候转义或者编码

20、HTTP的几种请求方法用途?

1、GET方法

发送一个请求来取得服务器上的某一资源

2、POST方法

向URL指定的资源提交数据或附加新的数据

3、PUT方法

跟POST方法很像，也是想服务器提交数据。但是，它们之间有不同。PUT指定了资源在服务器上的位置，而POST没有

4、HEAD方法

只请求页面的首部

5、DELETE方法

删除服务器上的某资源

6、OPTIONS方法

它用于获取当前URL所支持的方法。如果请求成功，会有一个Allow的头包含类似“GET,POST”这样的信息

7、TRACE方法

TRACE方法被用于激发一个远程的，应用层的请求消息回路

8、CONNECT方法

把请求连接转换到透明的TCP/IP通道