2020-11-02 HTTP面试题总结-持续更新

xumaozeng
240 阅读8分钟

1、浏览器如何渲染页面

渲染的过程如下：

  1. 浏览器获取HTML文件，然后对文件进行解析，形成DOM Tree
  2. 与此同时，进行CSS解析，生成Style Rules
  3. 接着将DOM Tree与Style Rules合并成Render Tree
  4. 再进入布局（Layout）阶段，也就是为每个节点分配一个应出现在屏幕上的确切坐标
  5. 随后调用GPU进行绘制（Paint），遍历Render Tree的节点，并将元素呈现出来

2、简述什么是HTTP缓存

动机

当浏览器加载一个页面时HTML引用的外部资源也会加载。但这些外部资源比如图片、css和js都不经常变化。如果每次都加载这些资源势必会带来资源的浪费，而且加载时间过长也会影响用户体验

HTTP缓存技术就是为了解决这个问题而出现的，简单讲HTTP缓存就是将静态资源存储在浏览器内部，下次请求相同资源时可以直接使用。当然何时使用与不使用要有一些策略保证如果资源一旦更新，缓存也要随之更新

作用

  • 提高首屏加载速度，优化用户体验
  • 减少流量消耗
  • 减轻服务器压力

两种策略

  • 强缓存-直接从本地副本读取，不去请求服务器，返回的状态码200，如果资源更新则使用定时器的方式设置资源的有效期，超过有效期认为缓存作废。设置强缓存的方式如下：

    1. HTTP 1.0 头部设置expires字段，该字段是一个时间戳，表示再次请求资源的时间戳大于该字段的值，表示资源过期，否则直接使用该缓存资源
    2. HTTP 1.1 设置cache-control字段，优先级大于expires字段，其值主要有max-age表示缓存的内容将在多少秒后失效，如果使用no-cache表示使用协商缓存

  • 协商缓存-简单来说就是浏览器和服务器就是否需要使用缓存做协商，如果协商的结果是需要更新就会返回200并返回更新内容；如果不需要则返回状态码304。设置协商缓存的方式如下：

    • 设置头部cache-control字段为no-cache
    • 设置last-modified&if-Modified-Since字段，修改时间
    • 设置etag&if-None-Match字段，内容hash判断是否更新

3、浏览器输入URL到页面呈现发生了什么

  1. 浏览器的地址栏输入URL后并按下回车
  2. 浏览器查找当前URL的DNS缓存记录
  3. DNS解析URL对应的IP地址
  4. 根据IP建立TCP连接（三次握手）
  5. HTTP发起请求
  6. 服务器处理请求，浏览器接收HTTP响应
  7. 渲染页面，构建DOM树
  8. 关闭TCP连接（四次挥手）

4、HTTPS与HTTP的区别

  • HTTP通信使用明文（不加密），内容可能会被窃听；而HTTPS使用SSL+HTTP协议组合使用，将通信加密
  • HTTP不验证通信方的身份，有可能遭遇伪装；而HTTPS则使用证书的手段验证通信方的身份，完成认证
  • HTTP无法验证报文的完整性，可能遭遇篡改；而HTTPS则提供了完整性保护

5、简述一下跨域

浏览器处于安全考虑，有同源策略

同源策略是浏览器最核心也是最基本的安全功能，如果缺少了同源策略，则浏览器很容易受到XSS、CSFR等攻击

所谓同源是指协议+端口+域名都相同，反之三者有一个不同就是跨域

同源策略限制以下几种行为：

  • Cookie、LocalStorage和IndexDB无法获取
  • DOM和JS对象无法获得
  • AJAX请求不能发送

注意：浏览器中的大部分内容都受到同源策略的限制，但是以下三个标签可以不受限制：

  • <img src=XXX>
  • <link src=XXX>
  • <script scr=XXX>

跨域常用解决方案：

  1. JSONP(JSON with Padding)跨域，利用<script>标签没有跨域限制原理，通过script标签src属性，发送带有callback参数的GET请求，服务端将接口返回数据拼凑到callback函数中，返回给浏览器，浏览器解析执行，从而前端拿到callback函数返回的数据。JSONP使用简单且兼容性不错，但是只限于get请求

  2. CORS(Cross Origin Resource Share)-跨域资源共享，需要浏览器和后端同时支持

     具体分为简单请求和非简单请求：
 - 简单请求就是简单的HTTP方法（如GET、POST和HEAD）与简单的HTTP请求头信息结合，服务端要配置头信息Access-Control-Allow-Origin为*或者包含请求时Origin字段的值
 - 非简单请求（如PUT或DELETE）则会先发出预检请求，询问服务器当前所在域名是否在服务器的许可名单之中，得到了肯定回复后才会正式发出请求

  3. 代理服务器，webpack配置devServer.proxy属性设置开发坏境跨域

6、TCP三次握手和四次挥手

三次握手

  • 第一次握手：首先客户端发送一个带有SYN标志的数据包给服务端
  • 第二次握手：服务端收到后，回传一个带有SYN/ACK标志的数据包以示传达确认信息
  • 第三次握手：最后，客户端再回传一个带有ACK标志的数据包，代表握手结束

四次挥手

  • 第一次挥手：发送端发送带有FIN标志的数据包给对方，等待接收端的确认
  • 第二次挥手：接收端收到后，回传一个带有ACK标志的数据包
  • 第三次挥手：接收端发送带有FIN标志的数据包给发送端表示断开连接
  • 第四次挥手：发送端收到FIN标志的数据包后，一样发送ACK数据包给接收端，代表挥手结束

7、get和post有什么区别

  • get请求主要从服务端获取数据，post请求主要向服务端发送数据
  • get请求刷不刷新没关系，post请求刷新了会再次向服务端发送数据
  • get请求可以在书签里收藏，post则不可以
  • get请求可以被缓存，post不能
  • get请求数据长度是有限制的，一般放在URL里有2048KB大小限制，而post数据放在请求体body里，没有限制
  • post比get更安全

8、聊一聊HTTP常见的状态码有哪些

2xx-成功

  • 200 OK，表示客户端发来的请求在服务端被正确处理

3xx-重定向

  • 301 moved permanently，永久性重定向，表示资源已被分配了新的URL
  • 302 found，临时性重定向，表示资源临时被分配了新的URL
  • 304 not modified，表示资源未修改，本地缓存仍然可以使用，通常用作协商缓存的返回状态码

4xx-客户端错误

  • 400 bad request，请求报文存在语法错误
  • 401 unauthorized，表示发送的请求需要有通过HTTP认证的认证信息
  • 403 forbidden，表示对请求资源的访问被服务器拒绝
  • 404 not found，表示在服务器上没有找到请求的资源

5xx-服务端错误

  • 500 internal server error，表示服务端在执行请求时发生了错误

9、简述HTTPS的过程

https = http+通信加密+证书+完整性保护

https是采用共享密钥加密和公开密钥加密两者并用的混合加密机制

  • 使用公开密钥加密方式安全的交换在稍后的共享密钥加密中要使用的密钥
  • 确保交换的密钥是安全的前提下，使用共享密钥加密方式进行通信

10、TCP与UDP的区别

  • TCP是面向连接的，UDP是无连接的，即发送数据前不需要建立连接
  • TCP是可靠性传输，UDP是不可靠的
  • TCP是面向字节流，UDP面向报文
  • TCP只能一对一，UDP支持一对多

11、简述HTTP2.0的多路复用

  • 首先它引入了帧(frame)和流(stream)，因为HTTP1是基于文本传输的，因为是文本导致不可切割，必须整体去传输
  • 既然HTTP2是基于二进制流的，那么它可以把HTTP消息分解成独立的帧，交错发送，然后在另一端通过帧的标识去去重新组装，这就是多路复用
  • 实现了在同一个TCP连接中，同一时刻可以发送多个请求和响应，且不用按照顺序一一对应，即使某个请求耗时严重，也不会影响其他连接的正常执行

12、script脚本中的async与defer的区别以及DOM事件中DOMContentLoaded与load的区别

async与defer的区别：

- 两者都是异步加载script脚本，而且只适用与外部脚本，对行内脚本无效
- 两都都是立即下载脚本，但是执行的时间和顺序可能会不一样
- async不会遵循脚本的出现的次序，一旦脚本下载完成后会立即执行可能会修改dom
- defer会遵循脚本的出现的次序，而且会在DOMContentLoaded事件之前执行，也就是不会更改dom结构

DOMContentLoaded与load的区别：

- load事件是指在全部文档脚本、图片等外部资源加载完成后执行，会花很长时间
- DOMContentLoaded事件是指DOM树构建完成后立即触发，而不用等到图片或其他脚本加载完成

持续更新...

avatar
文章
阅读
粉丝