震惊，整个过程发生了什么？从用户打开浏览器，输入 baidu.com，到页面展示百度首页

本文目的：
此篇博客 通过简要地讲解“浏览器访问百度”的计算机运作过程，了解“从URL输入到页面展示”的基本网络原理，并进一步了解 web前端 的网络技术背景。

1. 第一步：浏览器内输入域名
首先，浏览器输入了URL “https://www.baidu.com/”。有不同的网络协议实现了URL，如HTTP协议，其访问网络文件。

Note：

• URL (Uniform Resource Locator)
  统一资源定位符，对可以从互联网上得到的资源的位置和访问方法的一种简洁的表示，是互联网上标准资源的地址 [1]。互联网上的每个文件都有一个唯一的URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它 [1]。
• 域名
  https://www.baidu.com/”中，baidu.com是域名。域名(domain name)是由一串用点分隔的字符组成的互联网上某一台计算机或计算机组的名称，用于在数据传输时标识计算机的电子方位 [2]。域名可以说是一个IP地址的代称 [2]。不直接用IP是因为域名方便记忆，且一个域名对应多个IP，一个IP也可对应多个域名。

2. 第二步：域名解析
对于https://www.baidu.com/的URL，其实浏览器不知道baidu.com是什么（换言之，对应到哪个IP），需要查找baidu.com网站所在服务器的IP地址，才能找到目标，获取网络资源。

解析域名的过程顺序，会从1-4的DNS缓存中，找域名的IP，都找不到，才去在DNS服务商中查询，如下：
1）浏览器缓存 - 浏览器会缓存 域名baidu.com 的DNS记录一段时间。
2）系统缓存 - 从本机系统中的Hosts文件中，查找是否有该域名和对应IP。
3）路由器缓存 - 一般路由器也会缓存域名信息。
4）ISP DNS缓存 - 比如到电信的DNS上查找缓存。
5）如果都没找到，则向根域名服务器查找 域名baidu.com 对应IP，根域名服务器把请求转发到下一级，直到找到IP。

Note:

• IP是什么？
  IP（Internet Protocol）)是一套计算机网络的通讯规则，该协议给处于互联网的计算机设备都规定了唯一的地址，如192.168.0.1，换言之，是分配给网络上使用IP协议的设备的数字标签 [3]。
  其中，局域网IP和公网Ip是有差别的，比如127.0.0.1是电脑本机内，标明本机自身的IP。公司内大家都连着一个wifi路由器，即在一个局域网中，大家都是此WiFi路由器的IP，此局域网的IP。可以在局域网中，用192.168.0.1访问到此局域网的其他机器（这是个”假“地址，只能局域网内的人用，外网的人不能用，外网人需要ip全址）。也有用 http://192.168.1.1 。另外，手机测试访问 电脑上写的网页代码，但网页还没有服务器域名，怎么办？可以让手机连接和电脑同一个wifi，用局域网中电脑的IP地址，访问网页代码。
• DNS(Domain Name System，域名服务)
  是互联网的一项服务。它作为将域名和IP地址相互映射的一个分布式数据库，能够使人更方便地访问互联网。
• 什么是Hosts文件
  Hosts是一个没有扩展名的本机系统文件，其基本作用就是将一些常用的网址域名与其对应的IP地址建立一个关联“数据库”，当用户在浏览器中输入一个需要登录的网址时，系统会首先自动从Hosts文件中寻找对应的IP地址，一旦找到，系统会立即打开对应网页；如果没有找到，则系统再会将网址提交DNS域名解析服务器进行IP地址的解析；如果发现是被屏蔽的IP或域名，就会禁止打开此网页。
• Hosts文件的用处
  比如，我的网站资源在我的本机上，若让访客只能请求我本机的上的文件，不能让访客由我本机，再去访问相连的远程服务器上的数据。这就可以用Hosts文件，把网站域名 在本机的hosts文件中 设置成对应到127.0.0.1，而非远程服务器的IP，这样访问就会定位到本机了。
• ISP (Internet Service Provider)，互联网服务提供商（电信运营商）。

3. 第三步：服务器处理
朝着不同域名的网络请求，通过http协议，可以定位到同一个IP主机上的Web Server（如niginx），Server作为管理web请求的入口，处理请求，并从该主机不同文件路径中得到网站资源。百度公司的服务器可以处理它旗下不同域名网站的请求。

服务器是一台安装系统的机器，常见系统如Linux、windows server 2012。系统内安装的处理web请求的应用叫Web Server。常见web server有Apache、Niginx。
Web Server接受用户的Request交给网站代码，或者反向代理到其他Web Server。

4. 第四步：网站处理流程
MVC 模型(model)-视图(view)-控制器(controller)
大体上百度的服务器是用的MVC架构处，但一部分请求也有用MVVM架构，这个暂且不提及。

Image.png

如上图，不同标号的步骤，下面进行了解释。
1）访问网站中 users文件/文件夹。
2）后台语言（rails）把请求匹配给一个程序/代码（名为 控制器），控制器进行请求的统一管理
3）"模型"(后端代码，将数据库查询语句抽象得更易用，方便操作数据库）会从数据库中查找数据。
6&7）"视图"会根据查到的数据，通过"模板"生成网页代码。
8）生成的网页代码，发回给浏览器。
其中，前端负责图中的“视图”部分。

5. 第五步：浏览器处理和绘制网页
最后，浏览器得到通过URL协议获取的网站数据后，开始处理数据和绘制网页。
HTML字符串被浏览器接收后，被一句句读取解析：解析到link标签，就重发请求获取CSS；解析到script标签，就重发请求获取js，并执行代码；解析到img标签，就重发请求获取图片资源。
之后，浏览器根据HTML和CSS计算得到渲染树，绘制到屏幕上，js被执行。换言之，浏览器显示的网页，就是浏览器根据前端代码画的画。

引用
[1] https://baike.baidu.com/item/URL
[2] https://zh.wikipedia.org/wiki/%E5%9F%9F%E5%90%8D
[3] https://zh.wikipedia.org/wiki/IP%E5%9C%B0%E5%9D%80