前言:本月博主去面试了,会分类写面试题分享给大家的,前端领域,共同进步!
文章目录
上一篇是 TypeScript相关问题,点击超链接查看。
Q1: http协议中,从用户输入url地址,会发生什么?
A1:会发生从解析url到渲染页面的过程。
- 首先浏览器会解析url,查看本地缓存(浏览器缓存、系统缓存、路由缓存等),如果有则直接显示。
- 如果都没有,则进行DNS域名解析,解析出对应的IP地址。
- 浏览器与服务器三次握手,成功建立TCP连接。
- 浏览器发出http请求。
- 服务器收到请求,返回资源。
- 浏览器接收数据后,进行解析、渲染。
- 最后显示出页面。
由于提到了浏览器渲染,有些面试官就会接着问下去。
Q1-1:浏览器是怎么渲染的呢?CSS/DOM这些。
A1-1:过程如下。
- 解析HTML,生成DOM树。
- 解析CSS,生成CSSOM树。
- 将DOM和CSSOM合并,生成渲染树(Render-Tree)。
- 计算渲染树的布局Layout, 将布局Paint渲染到屏幕上。
如图所示(原创勿盗):
还可能涉及到回流、重绘的问题。
本篇文章主要是http协议相关,不过多赘述渲染问题。将文章看完,再点击 这里, 有很详细的浏览器渲染的资料推荐给大家。
Q2: http协议中,缓存机制有哪些,如何命中?
A2:强缓存、协商缓存。
强缓存与协商缓存的命中,由响应头Response Headers
确定(服务器返回)。
-
强缓存
响应头中的 status 是 200,相关字段有expires(http1.0),cache-control(http1.1)
,两者同时出现时 cache-control 优先级更高。主要是利用cache-control
的max-age
值来进行判断。浏览器再次请求服务器时,浏览器会先判断max-age,如果到期则直接请求服务器,否则直接从缓存中读取。
响应头的字段如图所示:
-
协商缓存
响应头中的 status 是 304,相关字段有Etag / If-No-Match
,Last-Modified / If-Modified-Since
。
(1)服务器的 ETag 和 浏览器的 If-None-Match 对应
:Etag(服务器): 上次加载时,服务器的 response header 返回的;
If-No-Match(浏览器): 浏览器请求时的 request header 里的,取的是 Etag 的值。如果服务器为请求的资源确定的
ETag
标头的值与浏览器请求中的If-None-Match
值相同,则服务器将返回304 Not Modified
。表示资源文件没有发生改变,命中协商缓存。服务器优先考虑Etag。
Etag 与 Last-Modifed 均是服务器的响应头返回的,如图所示:
(2)
服务器的 Last-Modified 和 浏览器请求的 If-Modified-Since 对应
:Last-Modified(服务器):该资源文件最后一次更改时间,服务器的 response header 里返回;
If-Modified-Since(浏览器):浏览器请求时的 request header 里的,取的是 Last-Modify 的值。
在下一次发送请求时,服务器在接收到会做比对,如果相同,则命中协商缓存。
If-No-Match 与 If-Modified-Since 是浏览器发送的,请求头可以简略为以下格式:
GET / HTTP/1.1
Host: example.com
Cache-Control: max-age=0
If-None-Match: "deadbeef" // 对应服务端的标记Etag
If-Modified-Since: Tue, 22 Feb 2022 20:20:20 GMT // 对应服务端的Last-Modified
Q3: http协议中,常见的状态码有哪些?
A3:以2开头的代表的成功的返回,以3开头代表重定向,以4开头是客户端、用户操作的问题,以5开头是服务器端的错误。
状态码 | 含义 |
---|---|
200 | 请求成功。 |
301 | 永久重定向,请求的网页已永久移动到新位置,浏览器会自动重定向到新的 url 地址。 |
302 | 临时重定向,服务器目前从不同位置的网页响应请求,可使用原有 url 地址。 |
303 | 查看其它位置,重定向。 |
304 | Not Modified,资源未作修改。协商缓存。 |
305 | 所访问资源必须通过代理访问。 |
401 | 要求用户要进行身份验证,未登录等情形。 |
403 | 请求已发出,但服务端禁止访问。 |
404 | 页面无法找到。 |
500 | 服务器内部错误。 |
501 | 服务器不支持请求的功能。 |
502 | 网关错误,通常需要后端找原因。 |
503 | 服务器超载或系统维护。 |
Q4:http协议 与 https协议 有什么区别?
A4:http协议是明文传输,https协议是http协议+ssl协议构建的,加密传输协议。
- http 的连接很简单,是无状态的。
- http 传输的数据都是未加密的,是明文传输。
- https 协议是由
http和ssl协议
构建的可进行加密传输和身份认证的网络协议,比http协议的安全性更高。可防止数据在传输过程中不被窃取、改变,确保数据的完整性。 - https 协议需要ca证书,费用较高。ssl 证书也需要钱,功能越强大的证书费用越高。
Q5: TCP和UDP的区别
A5: 区别如下。
- TCP是面向连接的,UDP 是无连接的,即发送数据前不需要先建立链接。
- TCP提供可靠的服务。也就是说,通过TCP连接传送的数据,无差错,不丢失,不重复,且按序到达;UDP尽最大努力交付,即不保证可靠交付。 并且因为tcp可靠,面向连接,不会丢失数据因此适合大数据量的交换。
- TCP是面向字节流,UDP面向报文,并且网络出现拥塞不会使得发送速率降低(因此会出现丢包,对实时的应用比如IP电话和视频会议等)。
- TCP只能是1对1的,UDP支持1对1,1对多。
- TCP是面向连接的可靠性传输,而UDP是不可靠的。
其他知识点,三次握手、四次挥手能说出来就可以了,详细过程点击这里
图是知乎的,这里为说明三次握手是如何交互的使用:
针对以上还可能会顺便问到 网站性能优化 等问题,大家自行再研究,本文主题暂不涉及。(文章持续维护中,如有不足,请指正。)
Q6:Http1.1与2.0的区别
- 多路复用。做到同一个连接并发处理多个请求,而且并发请求的数量比HTTP1.1大了好几个数量级。
- 头部数据压缩。HTTP2.0使用 HPACK 算法对 header 的数据进行压缩,体积变小后,网络传输速度会更快。 (HTTP/1.1版本的
头部信息
是文本,数据部分
可以是文本也可以是二进制;HTTP/2版本的头部和数据部分
都是二进制,且统称为‘帧’。) - 服务器推送。服务器会将一些资源推到浏览器端。
本文为原创文章,转载需经本人同意并注明出处。