前端 Http 面试题大汇总

帅帅的大男孩
1,008 阅读8分钟

# 浏览器输入地址后到看到页面发生了什么？

  1. 对URL进行DNS解析得到对应的IP地址
    DNS域名解析采用的是递归查询，顺序为：
    先找DNS缓存=>根域名服务器=>继续查找下一级
    找到之后给浏览器缓存查找顺序大概是：
    浏览器DNS缓存=>系统DNS缓存=>host文件查找=>递归去服务器查找

  2. 根据IP地址找到对应的服务器并发起TCP三次握手
    TCP是一个端到端的可靠的面向链接的协议，HTTP基于传输层TCP协议不用担心数据传输的各种问题，如会错传重传等问题。 建立一个TCP链接时需要客户端和服务端共发送三个包：
    (a). 客户端发送一个包到服务器并等待确认
    (b). 服务器收到客户端的包，并向客户端发送一个确认包
    (c). 客户端接收到服务端的确认包，三次握手，TCP链接成功

  3. 建立TCP链接后发送HTTP请求(请求头和请求体)

  4. 服务器响应HTTP请求，返回响应的数据包
    服务器收到处理的请求开始做负载均衡和跨域等
    文件处理完毕生成响应数据包(响应头和响应体)并返回

  5. 经过网络传输文件被下载到本地客户端，浏览器收到HTTP响应，客户端开始加载

  6. 浏览器得到HTML代码后开始解析，并请求HTML代码中的资源，如CSS、JS和图片

  7. 浏览器开始对页面进行渲染并呈现给用户
    (1). 解析HTML文件是自上问下即先是头部后是Body
    (2). 当解析到头部CSS/JS外部链接时，同步下载
    (3). 接着解析Body部分，将HTML文件解析成DOM树
    (4). 同时等待CSS文件下载完成后解析成CSSOM树
    (5). DOM树和CSSOM树就组成了Render Tree渲染树
    (6). CSS文件加载不会阻塞HTML的解析，但是会阻塞DOM的渲染及后面JS语句的执行
    (7). 在下载JS时会阻塞HTML的解析和渲染，有分几种情况\

    • (a). 没有defer和async标签的script会立即加载并执行
    • (b). 有async属性会异步下载，完成后立即执行，且不一定按顺序，有可能会阻塞HTML渲染。
    • (c). 有defer属性会异步下载，完成会等到DOM生成以后再按顺序执行，不会阻塞HTML解析和渲染。
      (8). 渲染树一旦有了结构模型，就会同步计算渲染树节点的布局位置
      (9). 计算出渲染坐标后开始同步渲染
      (10). 进行过程中如遇到图片则跳过去，渲染下面的内容，等图片下载成功后返回来再渲染原来图片的位置
      (11). 如果渲过程中出现JS代码调整DOM树结构的情况，会再次从修改DOM开始
      (12). 最终所有节点和资源全都渲染完成，页面渲染结束

  8. 服务器关闭TCP链接，TCP四次挥手

# 一个 TCP 链接能发几个 HTTP 请求

HTTP 1.0一般情况下不支持长连接，因此在每次请求发送完毕之后，TCP 连接会立即断开
故此HTTP 1.0 一个 TCP 发送一个 HTTP 请求。
但是通过在请求头带上Connection: Keep-Alive将一条TCP连接保持在活跃状态，并且客户端和服务端都支持的情况下，其实也可以发送多条，不过此方式也有限制。

HTTP 1.1支持了长连接，HTTP 2.0版本协议支持了多用复用。
故此只要不断开TCP的连接，HTTP请求数也是可以没有上限地持续发送。

# HTTP 与 HTTPS 的区别

HTTP是超文本传输协议，设计目的是为了提供一种发布和接收HTML页面的方法
HTTPS是以数据保密性完整性和身份校验安全性为目标的HTTP安全版

之间区别具有以下几种：

  1. 传输信息安全不同
    HTTP 是超文本传输协议，明文传输
    HTTPS 是SSL机密传输协议，密文传输

  2. 端口不同
    HTTP 默认是80，HTTPS 默认是443 \

  3. 链接方式不同
    HTTP 是无状态链接
    HTTPS 是SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，安全性更高

  4. 证书申请方式不同
    HTTP 协议免费，HTTPS 需要CA证书，一般需要付费

与 HTTP 相比 HTTPS 有哪些改进：

  1. 双向的身份认证
  2. 数据传输的机密性
  3. 防止重放攻击

HTTPS 优点：

  1. 可认证用户和服务器，确保数据发送到正确的客户机和服务器
  2. 是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，比HTTP协议安全
  3. 是现行架构下最安全的解决方案(虽然不是绝对安全)

HTTPS 缺点

  1. 握手阶段比较费时，使页面加载时间延长
  2. HTTPS 连接缓存不如 HTTP 高效，会增加数据开销和功耗，甚至已有的安全措施也会因此而受到影响
  3. SSL 证书需要钱，功能越强大费用越高，且 SSL 证书通常需要绑定 IP，不能在同一 IP上绑定多个域名

# GET请求 和 POST请求的 区别

  1. 从安全性讲两者都不安全
    GET请求参数在URL地址上直接暴露
    POST请求的参数Body部分按F12也暴露了

  2. GET请求因为是向URL添加数据，不同的浏览器厂商、代理服务以及web服务器都可能会有自己的长度限制，而POST请求没有长度限制。

  3. GET请求一般不具有请求体，因此只能进行URL编码，而POST请求支持多种编码。

  4. GET请求可以收藏为书签，POST请求不可以收藏为书签。

  5. GET请求可以被缓存，POST请求不可以被缓存

  6. GET生产一个TCP数据包，POST产生两个数据包
    (GET)：浏览器回吧Http header 和 data一并发出去，服务器响应200
    (POST)：浏览器先发送Header，服务器响应100 continue，浏览器再发送data服务器响应200。

# 如何进行Web性能监控

Web的性能一定程度上影响了用户留存率，经有关研究表明：如果一个移动端页面加载时常超过3秒，用户就会舍弃离开，并且网页加载时常每增加1秒用户就会流失10%。

具体监控什么可以用Google提出的RAIL模型来衡量性能：Response、Animation、Idle、Load，并指出最好的性能指标是：

  1. 100ms内响应用户的输入
  2. 动画或者滚动需在10ms内产生下一帧
  3. 最大化空闲时间
  4. 页面加载时长不烧过5秒

RAIL主要思想

  • 以用户为中心：最终目标不是让网站在任何特定的设备上都能运行很快，而是让用户满意
  • 立即响应用户：在100ms以内确认用户输入
  • 设置动画或滚动时：在10ms以内生成帧
  • 最大程度增加主线程的空闲时间
  • 持续吸引用户：在1000ms以内呈现交互内容

具体可分为三个方面

  1. 响应速度：页面初始访问速度 + 交互响应速度
  2. 页面稳定性：页面出错率
  3. 外部服务调用：网络请求访问速度

监控分两类

  1. 合成监控采用Web浏览器模拟器来加载网页：
    Lighthouse、PageSpeed、WebPageTest、Pingdom
  2. 真实用户监控是一种服务，可通过SDK方式接入，收集用户真实数据：
    oneapm、datadog、frontJs

# HTTPS 工作原理

  1. 首先HTTPS请求服务端生成证书，客户端对证书的有效期、合法性、域名是否与请求域名一直以及证书公钥（RSA加密）等进行校验。

  2. 客户端如果校验通过后，就根据证书的公钥有效期生成随机数，随机数使用公钥进行加密（RSA加密）

  3. 消息体产生后对它的摘要进行MD5加密/SHA1算法加密，此时就得到了RSA签名

  4. 发送服务端，此时只有服务端（RAS私钥）能解密

  5. 解密得到的随机数再用AES加密作为秘钥，此时的秘钥只有客户端和服务端知道

# 常见的HTTP相应状态码

200：请求被正常处理
204：请求被受理但没有资源可以返回
301：永久性重定向
302：临时重定向
303：与302功能相似，只是它希望客户端在请求一个URL时，能通过GET方法重定向到另一个URL上
304：发送附带条件的请求时，条件不满足时返回，与重定向无关
307：临时重定向，与302类似，只是强制要求使用POST方法
400：请求报文语法有误，服务器无法识别
401：请求需要认证
403：请求的对应资源禁止被访问
404：服务器无法找到对应资源
500：服务器内部错误
503：服务器正忙

avatar
文章
阅读
粉丝