浅谈从URL输入到页面展现

在这个信息公开透明化和信息爆炸的年代，越来越多的人通过网络来获得自己想要的内容，短短一个网址就能直接进入想要内容的网站。那计算机是如何实现从你输入网址到反馈给你信息的呢？

主要从以下几个步骤来实现

• 输入URL
• DNS域名解析
• 服务器处理
• 浏览器处理
• 绘制页面

---

• 输入URL：

URL是统一资源定位符，用来定位互联网上的资源

第一步我们把www.baidu.com输入到浏览器、

其实我们真正需求的是网址对应的IP地址，但因为IP地址的复杂，语义化的网址更加容易让人记住，例如我ping出来的百度IP地址是14.215.177.38，这应该是对我来说最优的IP地址之一，但现在连自己女朋友的电话号码都记不住（女朋友可能都没有）谁还记得住这么长一串IP

其中URL含有多种协议，类似www.baidu.com就是以hhtp://开头，但是http协议传输没有加密，容易被信息传输的过程中被拦截抓包，现在普遍使用拥有加密传输的https协议，保护性更强

协议类型	默认端口
http	80；8080
https	443
ftp	21
file	本地

• DNS域名解析：

DNS（Domain Name System，域名系统），因特网上作为域名和IP地址相互映射的一个分布式数据库，能够使我们更方便地访问网站，而不用去记住一串一串的IP地址。通过主机名，最终得到该主机名对应的IP地址的过程叫做域名解析

1. 此时浏览器会首先在浏览器缓存中查找这个网址解析过的对应的IP地址（每次我们访问某个网页的时候都会留下页面缓存在某个位置，那最近的就是浏览器缓存）如果有就解析结束，返回结果，如果没有，则继续下一步
2. 查找操作系统中的是否存在缓存，如果有解析结束，返回结果，如果没有，继续下一步
3. 查找路由器中是否存在缓存，如果有解析结束，返回结果，如果没有，继续下一步
4. 查找ISP（服务商，比如中国电信）DNS缓存，如果有解析结束返回结果，如果没有，继续下一步

5. 递归查询

   递归查询

   • DNS客户委托，以本地服务器为基础向根域名服务器发送www.baidu.com的DNS解析请求
   • 根域名服务器（互联网域名解析系统（DNS）中最高级别的域名服务器，负责返回顶级域的权威域名服务器地址）会查询自身是否有缓存，有的话解析结束，返回结果给本地服务器，再反馈给DNS客户。如果没有，发送该地址的顶级域名服务器地址到本地服务器，本地服务器继续向顶级域名服务器发送域名解析请求
   • 顶级域名服务器（如www.baidu.com的顶级域名服务器就是com服务器）会查询自身是否有缓存，有的话解析结束，返回结果给本地服务器，再反馈给DNS客户。如果没有，发送该地址的二级域名服务器地址到本地服务器，本地服务器继续向顶级域名服务器发送域名解析请求
   • 二级域名服务器（如www.baidu.com的二级域名服务器就是baidu.com）会查询自身是否有缓存，有的话解析结束，返回结果给本地服务器，再反馈给DNS客户。如果没有，发送该地址的权威域名服务器地址到本地服务器，本地服务器继续向顶级域名服务器发送域名解析请求
   • 子域名服务器（如zhidao.baidu.com就是子域名服务器）会直接将请求的URL地址对应IP发送给本地服务器，再反馈给DNS客户

   迭代查询

   迭代查询

   • 以DNS客户为基础，分别向本地服务器，根域名服务器，顶级域名服务器，二级域名服务器，权威域名服务器查询并得到返回结果

   一般默认使用的都是递归查询

• 服务器处理：

服务器是一台安装系统的机器，常见的系统有Linux，Windows Server 2012等
每台服务器上都会安装处理请求的应用——Web server
常见的web server产品有apache、nginx、IIS、Lighttpd等

此时你的www.baidu.com的HTTP请求已经发送给服务器，这个时候web服务器会开始接受的你请求（request），交给网站代码或者接受请求反向代理到其他web服务器，最后返回响应（response），比如一个HTML页面。对于不同用户发送的请求，会结合配置文件，把不同请求委托给服务器上处理对应请求的程序进行处理（例如CGI脚本，JSP脚本，servlets，ASP脚本，服务器端JavaScript，或者一些其它的服务器端技术等）

如果一些网站访问量非常大（如www.baidu.com），网站越来越慢，一台服务器已经不够用了。于是会将同一个应用部署在多台服务器上，将大量用户的请求分配给多台机器处理。此时，客户端不是直接通过HTTP协议访问某网站应用服务器，而是先请求到Nginx，Nginx再请求应用服务器，然后将结果返回给客户端，这里Nginx的作用是反向代理服务器。同时也带来了一个好处，其中一台服务器万一挂了，只要还有其他服务器正常运行，就不会影响用户使用。而这个时候用户解析到的就是负载均衡服务器的IP，而不是网站的IP

负载均衡系统，如Nginx等，实现反向代理

服务器得到请求以后，就是后台的处理过程，现在后台开发现在有很多框架，但大部分都还是按照MVC设计模式进行搭建的

MVC是三个单词的首字母缩写，它们是Model（模型）、View（视图）和Controller（控制）

• 最上面的一层，是直接面向最终用户的"视图层"（View）。它是提供给用户的操作界面，是程序的外壳。
• 最底下的一层，是核心的"数据层"（Model），也就是程序需要操作的数据或信息。

• 中间的一层，就是"控制层"（Controller），它负责根据用户从"视图层"输入的指令，选取"数据层"中的数据，然后对其进行相应的操作，产生最终结果。

  
  MVC模式
  

  当发送请求以后，MVC会用户输入的请求发送给控制器接收，控制器决定用哪个模型来进行处理，然后模型用业务逻辑来处理用户的请求并返回数据，最后控制器确定用哪个视图模型，用相应的视图格式化模型返回给浏览器，并通过显示页面呈现给用户

• 浏览器处理：

接下来就是浏览器进行处理， 通过后台处理返回的HTML字符串被浏览器接受后被一句句读取解析，html页面经历三个部分
加载-->解析-->渲染
浏览器接受html字符串后，被一句句读取解析。遇到link标签，浏览器会再次向服务器发送请求获取css文件；遇到image标签，发送请求获取图片资源；遇到script标签时，发送请求获取js文件，并执行js代码

• 绘制页面：

最后浏览器根据HTML和CSS计算得到渲染树，绘制到屏幕上JS会被执行，得到我们想要的页面

---

最后放上一张能直观感受从URL输入到页面展现图：

从URL输入到页面展现