概念

进阶必备的网络基础

前言

在不那么遥远的一些年以前,一个在江湖中行走的前端,只需要了解“前端三剑客”就足以找到一份工作。很多前端只限于 CSS,HTML、JS,网络基础,数据结构之类的都不甚了解。不过这个时期的前端也是最受鄙视的时期,这个时期前端的大量工作依赖于后端,且不需要动画效果和交互效果。

现如今前端圈已经发生翻天覆地的变化, Vue,React,ES6,HTML5,CSS3,Webpack,PostCss 等技术层出不穷。作为一个有格局的前端,对网络基础定是要了然于心的。

如果你对网络基础还不太了解,以下的内容可以给你提供一个思路;如果你对此已经了然于心,以下的内容烦请批评指正。

入题

任何事物的诞生,最初都是服务于极少数人的。渐渐地被这极少数人推而广之,我们大众就开始接触了解它,互联网是如此,麻将亦是如此。不管是互联网还是麻将,它们都增强了人与人之间的交流。接下来我会讲以下内容:

  1. 五层因特网协议栈

  2. HTTP 与 HTTPS 的区别

  3. TCP/IP 协议

  4. 三次握手和四次挥手

  5. DNS 域名解析

  6. 五类 IP 地址

  7. 跨域的原因及处理方式

  8. 正向代理和反向代理

  9. CDN 带来的性能优化

  10. HTTP 强缓存&协商缓存

五层因特网协议栈 TOP

五层因特网协议栈这个知识点对你来说或许有点枯燥,不过当你对这个协议栈有了一个初步的了解之后,你之前的某些疑问就会很明朗。

一、应用层

            

你猜一个 TCP 连接上面能发多少个 HTTP 请求

一道经典的面试题是从 URL 在浏览器被被输入到页面展现的过程中发生了什么,大多数回答都是说请求响应之后 DOM 怎么被构建,被绘制出来。但是你有没有想过,收到的 HTML 如果包含几十个图片标签,这些图片是以什么方式、什么顺序、建立了多少连接、使用什么协议被下载下来的呢?

要搞懂这个问题,我们需要先解决下面五个问题:

  1. 现代浏览器在与服务器建立了一个 TCP 连接后是否会在一个 HTTP 请求完成后断开?什么情况下会断开?
  2. 一个 TCP 连接可以对应几个 HTTP 请求?
  3. 一个 TCP 连接中 HTTP 请求发送可以一起发送么(比如一起发三个请求,再三个响应一起接收)?
  4. 为什么有的时候刷新页面不需要重新建立 SSL 连接?
  5. 浏览器对同一 Host 建立 TCP 连接到数量有没有限制?

先来谈谈第一个问题:现代浏览器在与服务器建立了一个 TCP 连接后是否会在一个 HTTP 请求完成后断开?什么情况下会断开?

在 HTTP/1.0 中,一个服务器在发送完一个 HTTP

            

可能是最被误用的 HTTP 响应头之一 Cache-Control: must-revalidate

在 HTTP 客户端(浏览器或者缓存服务器)上,如果某个 URL 对应的缓存过期了,客户端会再次向该 URL 发送一个条件请求(带有If-Modified-Since/If-None-Match请求头),如果服务端(缓存服务器或者源站)返回的状态码是 304(没有响应体),则客户端会根据该304响应所包含的一些响应头(DateLast-ModifiedCache-Control等)重新计算出这条缓存的过期时间,比如:

HTTP/2 304
Cache-Control: max-age=86400

这样的 304响应,就能让这条缓存重新续命一天;如果返回的状态码是 200,则整条缓存会被新返回的响应体替换掉。无论是哪种情况,这条缓存都重新变的有效了,HTTP 规范里把这一“让过期的缓存重新变的有效”过程,叫做 revalidate,英语翻译过来应该是“使重新生效”。…

HTTP3 与 HTTP2 协议比较

责编 | 郭芮

HTTP/2 相比于 HTTP/1,可以说是大幅度提高了网页的性能,只需要升级到该协议就可以减少很多之前需要做的性能优化工作,当然兼容问题以及如何优雅降级应该是国内还不普遍使用的原因之一。

虽然 HTTP/2 提高了网页的性能,但是并不代表它已经是完美的了,HTTP/3 就是为了解决 HTTP/2 所存在的一些问题而被推出来的。

HTTP协议

HTTP协议是HyperText Transfer Protocol(超文本传输协议)的缩写,它是互联网上应用最为广泛的一种网络协议。所有的WWW文件都必须遵守这个标准。

伴随着计算机网络和浏览器的诞生,HTTP1.0也随之而来,处于计算机网络中的应用层,HTTP是建立在TCP协议之上,所以HTTP协议的瓶颈及其优化技巧都是基于TCP协议本身的特性,例如TCP建立连接的3次握手和断开连接的4次挥手以及每次建立连接带来的RTT延迟时间。…