乐趣区

关于java:面试题2020前端HTTP浏览器相关面试题

jiezi

面试题（2020）前端 HTTP 浏览器相干面试题

<!– more –>

博客阐明

文章所波及的材料来自互联网整顿和集体总结，意在于集体学习和教训汇总，如有什么中央侵权，请分割自己删除，谢谢！

1、HTTP1.1 是以后应用最为宽泛的 HTTP 协定

  • HTTP1.0 和 HTTP1.1 相比

    • HTTP1.0 定义了三种申请办法：GET, POST 和 HEAD 办法。HTTP1.1 新增了六种申请办法：OPTIONS、PUT、PATCH、DELETE、TRACE 和 CONNECT 办法。
    • 缓存解决：在 HTTP1.0 中次要应用 header 里的 If-Modified-Since,Expires 来做为缓存判断的规范，HTTP1.1 则引入了更多的缓存控制策略例如 Entity tag，If-Unmodified-Since, If-Match, If-None-Match 等更多可供选择的缓存头来管制缓存策略。
    • 带宽优化及网络连接的应用：HTTP1.0 中，存在一些节约带宽的景象，例如客户端只是须要某个对象的一部分，而服务器却将整个对象送过来了，并且不反对断点续传性能，HTTP1.1 则在申请头引入了 range 头域，它容许只申请资源的某个局部，即返回码是 206（Partial Content），这样就不便了开发者自在的抉择以便于充分利用带宽和连贯。
    • 谬误告诉的治理：在 HTTP1.1 中新增了 24 个谬误状态响应码，如 409（Conflict）示意申请的资源与资源的以后状态发生冲突；410（Gone）示意服务器上的某个资源被永久性的删除。
    • Host 头解决：在 HTTP1.0 中认为每台服务器都绑定一个惟一的 IP 地址，因而，申请音讯中的 URL 并没有传递主机名（hostname）。但随着虚拟主机技术的倒退，在一台物理服务器上能够存在多个虚拟主机（Multi-homed Web Servers），并且它们共享一个 IP 地址。HTTP1.1 的申请音讯和响应音讯都应反对 Host 头域，且申请音讯中如果没有 Host 头域会报告一个谬误（400 Bad Request）。
    • 长连贯：HTTP 1.1 反对长连贯（PersistentConnection）和申请的流水线（Pipelining）解决，在一个 TCP 连贯上能够传送多个 HTTP 申请和响应，缩小了建设和敞开连贯的耗费和提早，在 HTTP1.1 中默认开启 Connection：keep-alive，肯定水平上补救了 HTTP1.0 每次申请都要创立连贯的毛病。通过设置 http 的申请头部和应答头部，保障本次数据申请完结之后，下一次申请仍能够重用这一通道，防止从新握手。

  • HTTP2.0 和 HTTP1.X 相比

    • 新的二进制格局（Binary Format）：HTTP1.x 的解析是基于文本。基于文本协定的格局解析存在人造缺点，文本的表现形式有多样性，要做到健壮性思考的场景必然很多，二进制则不同，只认 0 和 1 的组合。基于这种思考 HTTP2.0 的协定解析决定采纳二进制格局，实现不便且强壮。
    • 多路复用（MultiPlexing）：即连贯共享，即每一个 request 都是是用作连贯共享机制的。一个 request 对应一个 id，这样一个连贯上能够有多个 request，每个连贯的 request 能够随机的混淆在一起，接管方能够依据 request 的 id 将 request 再归属到各自不同的服务端申请外面。
    • header 压缩：如上文中所言，对后面提到过 HTTP1.x 的 header 带有大量信息，而且每次都要反复发送，HTTP2.0 应用了专门为首部压缩而设计的 HPACK 算法，应用 encoder 来缩小须要传输的 header 大小，通信单方各自 cache 一份 header fields 表，既防止了反复 header 的传输，又减小了须要传输的大小。
    • 服务端推送（server push）：服务端推送能把客户端所须要的资源随同着 index.html 一起发送到客户端，省去了客户端反复申请的步骤。正因为没有发动申请，建设连贯等操作，所以动态资源通过服务端推送的形式能够极大地晋升速度。例如我的网页有一个 sytle.css 的申请，在客户端收到 sytle.css 数据的同时，服务端会将 sytle.js 的文件推送给客户端，当客户端再次尝试获取 sytle.js 时就能够间接从缓存中获取到，不必再发申请了。

  • HTTPS 与 HTTP 相比

    • HTTPS 协定须要到 CA 申请证书，个别收费证书很少，须要交费。
    • HTTP 协定运行在 TCP 之上，所有传输的内容都是明文，HTTPS 运行在 SSL/TLS 之上，SSL/TLS 运行在 TCP 之上，所有传输的内容都通过加密的。
    • HTTP 和 HTTPS 应用的是齐全不同的连贯形式，用的端口也不一样，前者是 80，后者是 443。
    • HTTPS 能够无效的避免运营商劫持，解决了防劫持的一个大问题。

2、HTTPS 介绍

HTTPS 在传输数据之前须要客户端（浏览器）与服务端（网站）之间进行一次握手，在握手过程中将确立单方加密传输数据的明码信息。TLS/SSL 协定不仅仅是一套加密传输的协定，TLS/SSL 中应用了非对称加密，对称加密以及 HASH 算法

3、HTTPS 握手过程的简略形容如下：

1、浏览器将本人反对的一套加密规定发送给网站。

2、网站从中选出一组加密算法与 HASH 算法，并将本人的身份信息以证书的模式发回给浏览器。证书外面蕴含了网站地址，加密公钥，以及证书的颁发机构等信息。

3、取得网站证书之后浏览器要做以下工作：

​ a. 验证证书的合法性（颁发证书的机构是否非法，证书中蕴含的网站地址是否与正在拜访的地址统一等），如果证书受信赖，则浏览器栏外面会显示一个小锁头，否则会给出证书不受信的提醒。

​ b. 如果证书受信赖，或者是用户承受了不受信的证书，浏览器会生成一串随机数的明码，并用证书中提供的公钥加密。

​ c. 应用约定好的 HASH 计算握手音讯，并应用生成的随机数对音讯进行加密，最初将之前生成的所有信息发送给网站。

4、网站接管浏览器发来的数据之后要做以下的操作：

​ a. 应用本人的私钥将信息解密取出明码，应用明码解密浏览器发来的握手音讯，并验证 HASH 是否与浏览器发来的统一。

​ b. 应用明码加密一段握手音讯，发送给浏览器。

5、浏览器解密并计算握手音讯的 HASH，如果与服务端发来的 HASH 统一，此时握手过程完结，之后所有的通信数据将由之前浏览器生成的随机明码并利用对称加密算法进行加密。

4、cookie 和 session 的机制是什么？有什么区别？

session 是基于 cookie 实现的。cookie 保留在客户端浏览器中，而 session 保留在服务器上。cookie 机制是通过查看客户身上的“通行证”来确定客户身份的话，那么 session 机制就是通过查看服务器上的“客户明细表”来确认客户身份。session 相当于程序在服务器上建设的一份客户档案，客户来访的时候只须要查问客户档案表就能够了。

cookie 和 session 的区别：

  1. 存在的地位：
    cookie 存在于客户端，长期文件夹中；session 存在于服务器的内存中，一个 session 域对象为一个用户浏览器服务
  2. 安全性
    cookie 是以明文的形式寄存在客户端的，安全性低，能够通过一个加密算法进行加密后寄存；session 寄存于服务器的内存中，所以安全性好
  3. 生命周期 (以 20 分钟为例)
    cookie 的生命周期是累计的，从创立时，就开始计时，20 分钟后 cookie 生命周期完结；
    session 的生命周期是距离的，从创立时，开始计时如在 20 分钟，没有拜访 session，那么 session 生命周期被销毁。然而，如果在 20 分钟内（如在第 19 分钟时）拜访过 session，那么，将从新计算 session 的生命周期。关机会造成 session 生命周期的完结，然而对 cookie 没有影响
  4. 拜访范畴
    cookie 为多个用户浏览器共享；session 为一个用户浏览器独享

5、浏览器的存储

个性 cookie localStorage sessionStorage indexedDB
数据生命周期 个别由服务器生成，能够设置过期工夫 除非被清理，否则始终存在 页面敞开就清理 除非被清理，否则始终存在
数据存储大小 4K 5M 5M 有限
与服务端通信 每次都会携带在 header，中，对于申请性能影响 不参加 不参加 不参加

补充：cookie 本来并不是用来贮存的，而是用来与服务端通信的，须要存取请自行封装 api。
而 localStorage 则自带 getItem 和 setItem 办法，应用很不便。

localStorage 留神点：

  1. localStorage 只能存字符串，存取 JSON 数据需配合 JSON.stringify() 和 JSON.parse()
  2. 遇上禁用 setItem 的浏览器，须要应用 try…catch 捕捉异样

6、输出 URL 产生什么？

  1. DNS 域名解析（域名解析成 ip 地址，走 UTP 协定，因而不会有握手过程）：浏览器将 URL 解析出绝对应的服务器的 IP 地址（1. 本地浏览器的 DNS 缓存中查找 2. 再向零碎 DNS 缓存发送查问申请 3. 再向路由器 DNS 缓存 4. 网络运营商 DNS 缓存 5. 递归搜寻），并从 url 中解析出端口号
  2. 浏览器与指标服务器建设一条 TCP 连贯（三次握手）
  3. 浏览器向服务器发送一条 HTTP 申请报文
  4. 服务器返回给浏览器一条 HTTP 响应报文
  5. 浏览器进行渲染
  6. 敞开 TCP 连贯（四次挥手）

7、浏览器渲染的步骤

  1. HTML 解析出 DOM Tree
  2. CSS 解析出 Style Rules
  3. 两者关联生成 Render Tree
  4. Layout（布局）依据 Render Tree 计算每个节点的信息
  5. Painting 依据计算好的信息进行渲染整个页面

浏览器解析文档的过程中，如果遇到 script 标签，会立刻解析脚本，进行解析文档（因为 JS 可能会扭转 DOM 和 CSS, 如果持续解析会造成节约）。
如果是内部 script, 会期待脚本下载实现之后在持续解析文档。当初 script 标签减少了 defer 和 async 属性，脚本解析会将脚本中扭转 DOM 和 css 的中央 > 解析进去，追加到 DOM Tree 和 Style Rules 上

8、什么是同源策略及其限度内容？

同源策略是一种约定，它是浏览器最外围也最根本的平安性能，如果短少了同源策略，浏览器很容易受到 XSS、CSRF 等攻打。所谓同源是指 ” 协定 + 域名 + 端口 ” 三者雷同，即使两个不同的域名指向同一个 ip 地址，也非同源。

9、同源策略限度内容有：

  • Cookie、LocalStorage、IndexedDB 等存储性内容
  • DOM 节点
  • AJAX 申请发送后，后果被浏览器拦挡了

然而有三个标签是容许跨域加载资源：

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

10、跨域解决方案

1.jsonp

利用 <script> 标签没有跨域限度的破绽，网页能够失去从其余起源动静产生的 JSON 数据。JSONP 申请肯定须要对方的服务器做反对才能够。

2.cors

CORS 须要浏览器和后端同时反对。IE 8 和 9 须要通过 XDomainRequest 来实现 。

浏览器会主动进行 CORS 通信，实现 CORS 通信的要害是后端。只有后端实现了 CORS，就实现了跨域。

3、postMessage

postMessage() 办法容许来自不同源的脚本采纳异步形式进行无限的通信，能够实现跨文本档、多窗口、跨域消息传递。

4、websocket

WebSocket 是一种双向通信协定，在建设连贯之后，WebSocket 的 server 与 client 都能被动向对方发送或接收数据

5.nginx 反向代理

实现原理相似于 Node 中间件代理，须要你搭建一个直达 nginx 服务器，用于转发申请。

6、iframe

11、页面渲染优化

基于对渲染过程的理解，举荐一下优化：

  1. HTML 文档构造档次尽量少，最好不深于 6 层
  2. 脚本尽量放后边，防止组织页面加载
  3. 大量首屏款式能够放在便签内
  4. 款式构造档次尽量简略
  5. 脚本缩小 DOM 操作，缩小回流，尽量缓存拜访 DOM 的款式信息
  6. 尽量减少 JS 批改款式，能够通过批改 class 名的形式解决
  7. 缩小 DOM 查找，缓存 DOM 查找后果
  8. 动画在屏幕外或页面滚动时，尽量进行

12、强制缓存和协商缓存

  • 强制缓存是咱们在第一次申请资源时在 http 响应头设置一个过期工夫，在时效内都将间接从浏览器进行获取，常见的 http 响应头字段如 Cache-Control 和 Expires
  • 协商缓存是咱们通过 http 响应头字段 etag 或者 Last-Modified 等判断服务器上资源是否批改，如果批改则从服务器从新获取，如果未修改则 304 指向浏览器缓存中进行获取

13、GET 和 POST 申请的区别

  • GET 参数通过 url 传递，POST 放在 body 中。（http 协定规定，url 在申请头中，所以大小限度很小）
  • GET 申请在 url 中传递的参数是有长度限度的，而 POST 没有。
  • GET 在浏览器回退时是有害的，而 POST 会再次提交申请
  • GET 申请会被浏览器被动 cache，而 POST 不会，除非手动设置
  • GET 比 POST 更不平安，因为参数间接裸露在 url 中，所以不能用来传递敏感信息
  • 对参数的数据类型，GET 只承受 ASCII 字符，而 POST 没有限度
  • GET 申请只能进行 url(x-www-form-urlencoded) 编码，而 POST 反对多种编码方式
  • GET 产生一个 TCP 数据包；POST 产生两个 TCP 数据包 。对于 GET 形式的申请，浏览器会把 http 的 header 和 data 一并发送进来，服务器响应 200（返回数据）。而对于 POST，浏览器先发送 header，服务器响应 100 continue，浏览器再发送 data，服务器响应 200 ok（返回数据）

14、介绍下 304 过程

a. 浏览器申请资源时首先命中资源的 Expires 和 Cache-Control，Expires 受限于本地工夫，如果批改了本地工夫，可能会造成缓存生效，能够通过 Cache-control: max-age 指定最大生命周期，状态依然返回 200，但不会申请数据，在浏览器中能显著看到 from cache 字样。

b. 强缓存生效，进入协商缓存阶段，首先验证 ETagETag 能够保障每一个资源是惟一的，资源变动都会导致 ETag 变动。服务器依据客户端上送的 If-None-Match 值来判断是否命中缓存。

c. 协商缓存 Last-Modify/If-Modify-Since 阶段，客户端第一次申请资源时，服务服返回的 header 中会加上 Last-Modify，Last-modify 是一个工夫标识该资源的最初批改工夫。再次申请该资源时，request 的申请头中会蕴含 If-Modify-Since，该值为缓存之前返回的 Last-Modify。服务器收到 If-Modify-Since 后，依据资源的最初批改工夫判断是否命中缓存。

15、HTTP 状态码

  • 1xx（长期响应）示意长期响应并须要请求者继续执行操作的状态码

    • 100 – 持续 请求者该当持续提出申请。服务器返回此代码示意已收到申请的第一局部，正在期待其余部分
    • 101 – 切换协定 请求者已要求服务器切换协定，服务器已确认并筹备切换

  • 2xx（胜利）示意胜利解决了申请的状态码

    • 200 – 胜利 服务器曾经胜利解决了申请。通常，这示意服务器提供了申请的网页
    • 201 – 已创立 申请胜利并且服务器创立了新的资源
    • 202 – 已承受 服务器已承受申请，但尚未解决
    • 203 – 非受权信息 服务器曾经胜利解决了申请，但返回的信息可能来自另一起源
    • 204 – 无内容 服务器胜利解决了申请，但没有返回任何内容
    • 205 – 重置内容 服务器胜利解决了申请，但没有返回任何内容
    • 206 – 局部内容 服务器胜利解决了局部 GET 申请

  • 3xx（重定向）示意要实现申请，须要进一步操作；通常，这些状态代码用来重定向

    • 300 – 多种抉择 针对申请，服务器可执行多种操作。服务器可依据请求者（user agent）抉择一项操作，或提供操作列表供请求者抉择
    • 301 – 永恒挪动 申请的网页已永恒挪动到新地位。服务器返回此响应（对 GET 或 HEAD 申请的响应）时，会主动将请求者转到新地位
    • 302 – 长期挪动 服务器目前从不同地位的网页响应申请，但请求者应持续应用原有地位来进行当前的申请
    • 303 – 查看其它地位 请求者该当对不同的地位应用独自的 GET 申请来检索响应时，服务器返回此代码
    • 304 – 未修改 自上次申请后，申请的网页未修改过。服务器返回此响应，不会返回网页的内容
    • 305 – 应用代理 请求者只能应用代理拜访申请的网页。如果服务器返回此响应，还示意请求者应应用代理
    • 307 – 临时性重定向 服务器目前从不同地位的网页响应申请，但请求者应持续应用原有的地位来进行当前的申请

  • 4xx（申请谬误）这些状态码示意申请可能出错，障碍了服务器的解决

    • 400 – 谬误申请 服务器不了解申请的语法
    • 401 – 未受权 申请要求身份验证。对于须要登录的网页，服务器可能返回此响应
    • 403 – 禁止 服务器拒绝请求
    • 404 – 未找到 服务器找不到申请的网页
    • 405 – 办法禁用 禁用申请中指定的办法
    • 406 – 不承受 无奈应用申请的内容个性响应申请的网页
    • 407 – 须要代理受权 此状态码与 401（未受权）相似，但指定请求者该当受权应用代理
    • 408 – 申请超时 服务器等待申请时产生超时
    • 409 – 抵触 服务器在实现申请时发生冲突。服务器必须在响应中蕴含无关抵触的信息
    • 410 – 已删除 如果申请的资源已永恒删除，服务器就会返回此响应
    • 411 – 须要无效长度 服务器不承受不含无效内容长度标头字段的申请
    • 412 – 未满足前提条件 服务器未满足请求者在请求者设置的其中一个前提条件
    • 413 – 申请实体过大 服务器无奈解决申请，因为申请实体过大，超出了服务器的解决能力
    • 414 – 申请的 URI 过长 申请的 URI（通常为网址）过长，服务器无奈解决
    • 415 – 不反对媒体类型 申请的格局不受申请页面的反对
    • 416 – 申请范畴不符合要求 如果页面无奈提供申请的范畴，则服务器会返回此状态码
    • 417 – 未满足期望值 服务器未满足“冀望”申请标头字段的要求

  • 5xx（服务器谬误）这些状态码示意服务器在尝试解决申请时产生外部谬误。这些谬误可能是服务器自身的谬误，而不是申请出错

    • 500 – 服务器外部谬误 服务器遇到谬误，无奈实现申请
    • 501 – 尚未施行 服务器不具备实现申请的性能。例如，服务器无奈辨认申请办法时可能会返回此代码
    • 502 – 谬误网关 服务器作为网关或代理，从上游服务器无奈收到有效响应
    • 503 – 服务器不可用 服务器目前无奈应用（因为超载或者停机保护）。通常，这只是临时状态
    • 504 – 网关超时 服务器作为网关代理，然而没有及时从上游服务器收到申请
    • 505 – HTTP 版本不受反对 服务器不反对申请中所用的 HTTP 协定版本

感激

万能的网络

以及勤奋的本人，集体博客，GitHub

退出移动版