从 URL 输入到页面展现

[TOC]

0. 输入 URL

认识 URL

统一资源定位符（或称统一资源定位器 /定位地址、URL 地址等，英语：Uniform / Universal Resource Locator，常缩写为 URL），有时也被俗称为网页地址（网址）。——摘自维基百科

URL 的主要用作定位互联网的资源，标准格式为协议类型:// 服务器地址（必要时需加上端口号）/ 路径 / 文件名

网络协议

• HTTP
• HTTPS
• FTP
• file
• ...

多数网页使用 HTTP 协议，但其安全性不如 HTTPS。目前可以预见 HTTPS 是未来。

1. 域名解析

域名

在形如 http://jscode.me/t/topic/32 的一段网址中 jscode.me 就是域名。但域名并不直接等于服务器地址

IP 地址

互联网协议地址（英语：Internet Protocol Address，又译为网际协议地址），缩写为 IP 地址（英语：IP Address），是分配给网络上使用网络协议的设备的数字标签。常见的 IP 地址分为 IPv4 与 IPv6 两大类。——摘自维基百科

常见如行 192.168.0.1 的 IP 地址便是 IPv4 类型。在不同的网络（如公网、局域网）下，IP 地址也会有差异。本机 IP 固定为 127.0.0.1。

域名解析

为什么

• 车
• 车牌
• 车主

和家人解释这些概念十分费力，发现如此比喻轻松不少，不过也未必恰当。

车是服务器，域名是车主，IP 地址是车牌。

IP 地址才是服务器地址，装在车上的是车牌。根据域名查找网站所在服务器的 IP 地址，便是域名解析。

Q: 为什么不直接使用 IP，而发明域名，再解析它？

1. 「老王的车」比「牌号为 XXXX 的车」更好记
2. 老王未必只有一辆车
3. 所以，出门有事请找老王（咦？）

同样，访问一个网站：

1. 同 IP 地址相比，域名更语意化
2. 域名可以绑定多个 IP
3. 所以，访问网站使用域名

流程

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

2. 服务器处理

这个服务器（Server）为硬件，是安装着操作系统及 Web Server的网络主机。其中，Web Server 常称 Web 服务器，是软件。

• 常见的 web 服务器有 Apache、Nginx、IIS、Lighttpd
• web 服务器接收用户的 Request 交给网站代码，或者接受请求反向代理到其他 web 服务器

3. 网站处理流程

MVC： 模型（model）- 视图（view）- 控制器（controller）

如果是静态页面则简单许多

4. 浏览器处理与绘制网页

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