从 URL 输入到页面展现

[HarleyWang93]

流程

1. 在浏览器输入URL
2. 域名解析
3. 服务器处理
4. 网站处理流程
5. 浏览器处理
6. 绘制网页

流程简述

1. 在浏览器输入 URL

什么是 URL？

• 统一资源定位符（Uniform / Universal Resource Locator，常缩写为 URL），俗称网页地址（网址）。
• 用于定位互联网上的资源。
• URL 包含协议部分。协议是浏览器和 www万维网之间的沟通方式，它会告诉浏览器在网络上正确找到资源位置。常见的协议有 http、https、ftp、file 等。其中 http 是最常见的网络传输协议，而 https 则是进行加密的网络传输。

2. 域名解析

• 域名解析是把域名指向网站空间IP，让人们通过注册的域名可以方便地访问到网站的一种服务。
• 对于 https://github.com/HarleyWang93/blog， github.com 就是域名。
• 对于 http://github.com 的 URL，浏览器实际上不知道 github.com 到底是什么东西，需要查找 github.com 网站所在服务器的IP地址，才能找到目标。
• IP 地址很难记，所以发明了域名。语义化的域名更利于人们记忆，可是电脑收到用户输入的网址后，要想让电脑理解这一串字符串，就有些困难了，因为计算机更擅长处理一长串数字，那么 IP 地址和 DNS服务就显得非常重要了。

IP 地址是什么？

• IP 地址是指互联网协议地址，每个处于互联网中的设备都有 IP 地址，形如192.168.0.1
• 局域网 IP 和公网 IP 是有差别的
• 127.0.0.1代表本机的 IP

域名解析的流程

1. 浏览器缓存 – 浏览器会缓存 DNS 记录一段时间
2. 系统缓存 - 从 Hosts 文件查找是否有该域名和对应 IP
3. 路由器缓存 – 一般路由器也会缓存域名信息
4. ISP DNS 缓存 – 比如到电信的 DNS 上查找缓存
5. 如果都没有找到，则向根域名服务器查找域名对应 IP，根域名服务器把请求转发到下一级，直到找到 IP

• 8.8.8.8 —— Google 提供的免费 DNS 服务器的 IP 地址 114.114.114.114 —— 是国内第一个、全球第三个开放的 DNS 服务地址，又称114DNS

• DNS劫持：DNS劫持又称域名劫持，是指在劫持的网络范围内拦截域名解析的请求，分析请求的域名，把审查范围以外的请求放行，否则返回假的IP地址或者什么都不做使请求失去响应，其效果就是对特定的网络不能反应或访问的是假网址。

3. 服务器处理

什么是服务器？

• 服务器是一台机器安装系统的机器，每个服务器里都安装有处理请求的应用——web server。
• 常见的web server产品有 apache、nginx、IIS 或 Lighttpd 等。
• web服务器接收用户的 Request 交给网站代码，或者接受请求反向代理到其他 web服务器。

4. 网站处理流程

• 网站处理，就是实际后台处理的工作。后台开发现在有很多框架，但大部分都还是按照MVC设计模式进行搭建的。
• MVC是一个设计模式，将应用程序分成三个核心部件：模型（model）-- 视图（view）--控制器（controller），它们各自处理自己的任务，实现输入、处理和输出的分离。

1. 视图（view） 视图是用户看到并与之交互的界面。这是前端工作的主力部分。

2. 模型（model） 模型是将实际开发中的业务规则和所涉及的数据格式模型化，应用于模型的代码只需写一次就可以被多个视图重用。在MVC的三个部件中，模型拥有最多的处理任务。一个模型能为多个视图提供数据。

3. 控制器（controller） 控制器接受用户的输入并调用模型和视图去完成用户的需求。Controller处于管理角色，从视图接收请求并决定调用哪个模型构件去处理请求，然后再确定用哪个视图来显示模型处理返回的数据。

• 总结，首先控制器接收用户的请求，并决定应该调用哪个模型来进行处理，然后模型用业务逻辑来处理用户的请求并返回数据，最后控制器用相应的视图格式化模型返回html字符串给浏览器，浏览器呈现网页给用户。因此，下一步就来到浏览器处理阶段。

5. 浏览器处理

• HTML 字符串被浏览器接受后被一句句读取解析
• 解析到 link 标签后重新发送请求获取 css
• 解析到 script 标签后发送请求获取 js，并执行代码
• 解析到 img 标签后发送请求获取图片资源

6. 绘制网页

• 浏览器根据 HTML 和 CSS 计算得到渲染树（DOM 树的可视化表示），绘制到屏幕上，js 也会被执行，最终完成了整个页面的展示。

推荐阅读

说说从URL输入到页面展现的过程 从URL输入到页面展现的全过程