路径

• 硬件角度
• 网络安全角度
• 后端角度
• 前端角度
  科普，用最简洁的语言说明复杂的原理。

硬件角度

1. 输入到识别

每次输入的过程，都是硬件之间交互的过，是键盘与显示终端交互的过程。如果有外接键盘的话，情况会更加复杂一些。外接键盘，又分为有线键盘和蓝牙无线键盘等。具体来说，无论是有线键盘，还是蓝牙键盘，都需要在电脑上安装驱动程序，让计算机能够识别到这个键盘的存在。只是说蓝牙键盘，这个设备并没有直接与计算机产生联系，而是通过另一种网络来传递信号。这个时候，传递的速度，可能赶不上有线键盘那么快。

键盘的输入，是电信号。电信号需要转化成数字信号，才能够最终被计算机识别，再呈现在显示屏上面。以前我们说，计算机主要由四个部分组成，主机，显示器，键盘，鼠标，其中，显示器，键盘，鼠标都是外部设备，只有主机才是核心设备。主机又可以细分为CPU，硬盘，显卡，内存，散热器等等。我们键盘输入，最后文字显示在显示器上面的过程，其实是包含了主机计算的过程，由键盘先到主机，再到显示器。

输入结束之后，接下来，如果我们按下了回车键，这个时候，就又与前端知识相关联了。

浏览器

浏览器是个啥，浏览器是一个电脑应用程序，它的作用就是展示网页。网页，也就是HTML，超文本标记语言，我们按照约定,这个约定就是这门语言，HTML，这个约定告诉我们应该怎样书写，才能够实现我们想要的布局，排版。网页作为一个载体，需要承载的内容会非常多，非常全面，它需要支持文字，视频，音频等众多媒体形式，这也就决定了浏览器需要支持这些内容的展示。于是，如果你细心的话，你会发现：如果你的电脑上没有安装视频播放器或者图片预览器，那么随便找一个MP4格式的视频，或者一jpeg格式的图片，直接将他们拖动到浏览器中，都是能够播放或查看的。注意，我这里特别强调了视频或图片的格式，并不是所有的视频格式的视频都能够在浏览器上面播放，浏览器并不是专业的视频播放器，它还要好多其他的重要任务，因此它只约定播放某些特定格式的视频资源。

当我们按下回车键的时候，浏览器就认为你的输入已经完成，可以跳转到输入的网址了。

一旦建立起了通信，这个时候，服务端得到了客户端的请求了.但是还有一个问题，就是我们在浏览器地址栏输入的其实是域名，而服务器真正认识的是ip地址，这里就有一个DNS的过程了。所谓的DNS，就是domain name system。我在写到这里的时候，以为是domain name service，只是一个服务，而不是一个系统了。因为DNS确实也只是做了一件事情，那就是把域名解析为ip地址。

浏览器又做了什么事情呢，在此过程之中？

一、浏览器解析域名一般包含以下步骤。

1.浏览器查询自身的DNS缓存。没找到继续。

2.浏览器向本机查询域名对应ip地址。windows操作系统的域名和IP的映射关系存在host文件中。没找到继续。

3.本机向本地的DNS服务器请求解析。本地的服务器一般指公司，学校或者运营商的DNS。没找到继续。

4.本地的DNS服务器向根服务器发起解析请求，返回顶级国际域名服务器解析地址。继续。

5.本地的DNS服务器向顶级域名服务器地址请求解析，返回域名服务商的解析地址。继续。

6.本地的DNS服务器向域名服务商请求解析，得到对应的ip，告知浏览器。

本地域名服务器 (本地DNS) 是什么鬼？我们通过网络属性看一看↓↓↓

v2-727c5491ef9501f7f7a53efdec8ed969_hd.jpg

通过DNS的过程，找到ip地址。

但是这个过程其实是相对的，客户端当然想去找到一个ip地址，但是服务端也当然希望找到一个能够让客户端访问速度最快的ip给到客户端。现在很多大型网站，都有很多的ip地址。把访问最快的ip给到客户端当然最好。

DNSPod 是一款免费智能DNS产品。DNSPod 可以为同时有电信、网通、教育网服务器的网站提供智能的解析，让电信用户访问电信的服务器，网通的用户访问网通的服务器，达到互联互通的效果。能够让使用 双线路或拥有多镜像的网站站长轻松实现智能DNS解析，让用户仅用单域名即可访问到最快速的镜像。

这个问题，也跟国情有关系，我国的网络情况，再我天朝，各个运营商控制的网络之间进行通信，往往速度会差很多。单个运营商网络内部的通信，才能够保证速度。因此，如果我们留心发现，也能够看到在一些资源下载网站，时至今日还会在下载的位置提供多个下载按钮，每一个按钮对应一条线路，也就对应了一个下载服务器，其原因，也是想优化用户的体验。然而，其实说起来，大部分用户都是小白，他们可能也就随便找条线路下载罢了。

总之，DNS的过程是双向的，客户端在努力去找到访问最好的服务端线路，服务端也想提供一条最好的线路给客户端 。

现在DNS的问题解决了，我们已经能够根据地址栏上输入的www.google.com 去找到它的真实ip地址了。这个时候，还有一个小问题，假如我们输入的是http://www.google.com ，那么如果是在chrome最新版浏览器(version 76)上，会优先去寻找它的https站点，从地址栏上可以看到这些变化，地址栏上去掉了http://www.这部分内容，在google.com前面加了一把锁，指示这时候已经用上了https。

我们可以进一步拓展一下，

https有证书。

http 默认监听80端口
https 默认监听443端口。在http下加入了ssl层，https的安全基础是https。

如果攻击者截取了web浏览器和网站服务器之间的传输报文，就可以直接读懂其中的信息。

https的缺点：

https证书需要钱，https连接缓存不如http高效，会增加数据开销和功耗。https握手阶段比较费时，会使页面加载时间延长，会更耗电。

• http承载层是tcp层,https是在http协议之上加了一个ssl，tsl安全协议层。

• http的默认端口号是80端口，https协议的默认端口号是443端口

为什么说https更加安全呢，普通的架构在http协议之上的网站，他是可以通过运营商劫持来给网站注入内容的，运营商或者其他人也是可以直接来得到你的访问的具体内容。如果你在这个网站有用户名密码等信息，很有可能会泄漏。但是https的话，是不存在运营商挟持的问题的。整个数据的传输过程，只有你和站点才有密钥。

像chrome这样的浏览器，在推动着web安全的发展，之前也是chrome最早将非https的站点，标记为不安全的。这样看来，https是大势所趋。

有了https，可以简单地理解为报文非明文传输，而是在传输过程中经过了一层加密。

请求

好了，好了，现在双方已经建立起了桥梁，可以互相通信了。

随着网络情况越来越好，浏览器上出现的空白页非常短，随即就展示了谷歌的网站首页。那么浏览器又是怎么做到的呢？这就牵扯到了另外一门计算机课程，《计算机网络》。

计算机科学的发展，是建立在种种的协议和标准之上的。到我们现在要谈论的这个话题上，用到了TCP/IP 协议，这个协议规定了两台计算机之间如何通信。下面具体来说一说，所谓的TCP/IP协议，分为两部分，TCP协议规定了中间过程的实现，IP协议规定了怎样找到对方，给对方发送信息。

知道了这些，就可以详细点来解答我们的问题了。首先，当你在浏览器上完成输入，敲击回车键的时候，随即浏览器作为客户端，就向服务端发送了一条请求，希望能够得到谷歌首页的网页响应。

对于新同学来讲，可能又懵逼了。这些客户端，服务端又是啥。毫无疑问，这也是计算机科学里面的术语。他们都描述了计算机的状态，如果换到我们经常使用的场景来看，如果你玩《和平精英》这样的游戏的话，那么我们自己的每一台手机都是客户端，相对应的，在腾讯那里，也将会有数不清的服务端机器，也就是服务器来做支撑，确保我们的游戏体验顺畅。客户端和服务端就像是它们各自的名字所描述的那样，一个负责服务他人，一个负责享受服务。其实有点像是你去餐馆吃饭，点菜的过程，就是客户端向服务端发送请求的过程，服务端当然也会有应答，也会最终上来一大桌美食。

切回到我们说的实际工作，客户端与服务端之间要进行通信，服务端才能够将信息发送给客户端。然而，客户端与服务端又不能是简单通信，需要进行三次握手，这是一个授信的过程，目的就是确保我信任你。

七层的协议。那么又在第几层呢？又经历了三次握手，最后才终于建立了联系。

TCP协议，

返回内容

报文的内容是怎样的呢？

请求头，请求的body

HTTP Request
HTTP 的请求报文分为三个部分 请求行、请求头和请求体。

其中请求头说的是请求的基本信息，请求体说的是携带的大量信息。请求行

具体的可以参见这篇文章： https://segmentfault.com/a/1190000006689767

有请求，当然也要有响应。

响应也是如是一样，分为响应头，响应体。

在响应头，又有很多常规的字段，来说明一些常规事情，比如响应状态，status 200 ok等等。为什么要设计成响应头和响应体这样的区分开来的响应结构呢？我们可以结合实际调用来看，如果我们有一个接口，一般来说，我们会把结构的返回值，放到响应体中，而把其他的信息放到响应头之中，有个响应头，我们可以鉴权，可以判断响应是否正常，而把这两部分分开有助于我们代码的书写。

回传部分

这里涉及到一些网页基础知识。前面其实已经简单介绍了浏览器，接下来就说一说网页，我们必须承认今天看到的网页，已经远比20年前要更加复杂了，这种复杂度，从表面上看来，体现在网页更加酷炫，现代化，而从更深层次来看，则体现了网页前端技术的变革。然而，我也不打算在这里再拓展到前端技术变革的话题，我想说的是，无论技术如何变革，网页这个诞生三十年左右的事物，也始终是核心是由三部分组成。即HTML,JS,CSS，这三部分是网页技术的核心。

一般来说，每一个网页，就是一个html页面。HTML是基本，JS和CSS只不过是潜入在HTML页面内部而已，只不过相比于其他的潜入资源，比如视频，音频，图片等多媒体资源用于作为内容来进行展示，JS和CSS的作用并不是作为内容，而是辅助内容去进行展示，甚至是进行交互。(展示还只是UI层面，交互就是UE层面的事情了)。

如果我们探寻，网页技术的历史，很有意思。网页（HTML）的发明是在20世纪90年代初

根据维基百科：

HTML规范虽然规定了网页中的标题、段落应该使用的标签，但是没有涉及这些内容应该以何种样式(比如大小、位置、间距、缩进等属性)呈现在浏览器中。从1990年代初HTML被发明开始，样式表就以各种形式出现了。不同的浏览器结合了它们各自的样式语言，读者(也就是浏览网页的用户)可以使用这些样式语言来调节网页的显示方式。一开始样式表是给读者用的，最初的HTML版本只含有很少的显示属性，读者来决定网页应该怎样被显示。

1993年，Robert Raisch提出了一种名为“RRP”的样式规则建议。但这个RRP只允许网页使用1个样式表，不像现在的CSS能支持同时加载多个。不久后出现的Mosaic浏览器就采用增加新种类的HTML标签实现样式的表达，以满足设计师的要求，这也与现在的CSS设计原则不符。随着HTML自带的样式功能的增加，外来定义样式的语言逐渐减弱了。1993年发布的这个Mosaic浏览器是第一款用户界面，并支持书签、图标按钮和图片显示。^[8]之前的浏览器都是纯文字浏览器。即使在今天，只使用操作系统命令行自带的Telnet命令，也可以查看网页的源代码。^[9]

后来，台湾人魏培源开发的ViolaWWW浏览器使用了一种规则具有层次嵌套性的样式表，并第1个支持通过<link>标签引用外部样式表。FOSI最早支持以相对尺寸值来表示字体大小。函数式风格的DSSSL语言支持在样式表中进行定义变量、继承变量、定义函数等功能，但是语法复杂。1994年，万维网之父蒂姆·伯纳斯-李在欧美众多高能物理研究者和技术人员的支持下，于美国麻省理工学院创立了万维网联盟（W3C），其职责是提供网络标准化建议。^[10]1994年，Håkon W Lie提出层叠HTML样式表（Cascading HTML Style Sheets，CHSS）。CHSS既支持用户自定义样式表，也支持网页作者样式表，而且可以满足不同规则以百分比的方式组合使用。它的权重规则计算方式不够直观，当不同规则混合时会得到什么实际效果并不容易从代码中看出。1996年，出现了与CSS语法很像的表现指明语言（Presentation Specification Language，简称"PSL 96"）。PSL 96除表达样式外，也支持条件判断等功能，还可根据对浏览器信息的判断来使用不同的样式，但未获得青睐。

其实可以看出来，如果简单地去认为，CSS是实现UI层面地内容，JS是实现UE层面的内容，那么也就不难理解，这三者的诞生顺序了。当然是先要有基础的HTML，先要能够展示内容，无论美丑，之后是一个视觉上UI层面的提升，最后才是UE层面的完善（JS语言在1996年发明），有兴趣的同学，可以自行看一下《javascript高级程序设计》，这本书的前几章，就是在介绍网页技术的历史，还是蛮有趣的。

回来说，网页，遍历，渲染，浏览器的工作，最后呈现出来页面的内容。

现在，我们想想，我们已经完成了这么多的工作了。