从URL输入到页面展现

认识URL

统一资源定位符，英文名称Uniform Resource Locator，简称URL，即通常所说的网页地址（网址），用于定位互联网上的资源。URL由协议、主机地址（域名或IP地址）、路径等组成，具体如下图所示。

URL的组成格式

其中，
协议类型，常见http、https、file、ftp等；
主机地址，为域名或IP地址；
端口号，以数字形式表示，http协议默认端口 :80 可省略；
路径，网络资源在服务器中的指定路径，以 / 区别目录名称；
查询，以 ? 为起点，后接查询字符串；
片段， # 网页位置指定标识符，可到达页面指定位置。

以http://baidu.com为例，简述从用户打开浏览器，输入URL，到页面展示百度首页的整个过程。

第一步，在浏览器输入URL

在浏览器中输入http://baidu.com，http为超文本传输协议，baidu.com为域名。

第二步，域名解析

URL中的域名并不能直接定位到网站服务器，每个连接互联网的设备都是依靠读取IP地址相互进行通信。

但由于IP地址是数字标识，使用时难以记忆和书写，因此在此基础上发展出域名。

域名虽然便于使用，但由于机器之间只能互相识别IP地址，便由专门的域名解析服务器DNS完成从域名到IP地址的转换。

具体流程

1. 首先查找浏览器缓存的域名IP信息
2. 查找系统缓存，在Hosts文件中查找是否有该域名和对应IP
3. 查找路由器缓存的域名IP信息
4. 查找ISP（互联网服务供应商）DNS缓存，如果均无记录则
5. 向根域名服务器查询该域名的对应IP，根域名服务器把请求转发到下一级，直到找到IP

第三步，服务器处理

查找到baidu.com对应的IP地址后，浏览器向IP所在服务器发送请求。

服务器，是指运行某些特定软件的计算机，这些软件可以管理资源并为用户提供服务，其中，接收处理http请求的软件名为Web server。

Web服务器

常见的Web服务器有：Apache、IIS、Nginx、Lighttpd、Fontpage等。

接收到用户请求后，Web服务器会把URL对照到本地文件系统中，交给baidu.com对应目录下的网站代码处理。

第四步，网站处理

MVC模式

模型（Model）- 视图（View）- 控制器（Controller）

• 模型：掌管数据源，负责访问数据（库）。
• 视图：负责数据显示，多为前端应用。
• 控制器：处理消息并作出响应。

MVC架构

具体流程

1. 控制器根据用户需求选择适当模型进行处理
2. 模型从数据库中读取相应数据
3. 模型把数据列表返回给控制器
4. 控制器把处理后的数据传入视图
5. 视图把页面渲染成HTML
6. 控制器返回HTML给浏览器

第五步，浏览器处理

• 浏览器接收HTML字符串并一句句读取解析
• 解析到link标签后重新发送请求获取CSS
• 解析到script标签后发送请求获取JS，并执行代码
• 解析到img标签后发送请求获取图片
• 浏览器根据HTML和CSS计算得到渲染树，绘制到屏幕上

至此，完成了从用户打开浏览器输入baidu.com，到页面展示百度首页的整个过程。