从 URL 输入到页面展现

第一步. 在浏览器输入URL

URL是什么

• URL: 统一资源定位符，Uniform Resource Locator，用于定位互联网上的资源

• URL对应：

  1. 传送协议。
  2. 服务器。（通常为域名，有时为IP地址）
  3. 端口号。（以数字方式表示，若为HTTP的默认值“:80”可省略）
  4. 路径。（以“/”字符区别路径中的每一个目录名称）
  5. 查询。（GET模式的窗体参数，以“?”字符为起点，每个参数以“&”隔开，再以“=”分开参数名称与数据，通常以UTF8的URL编码，避开字符冲突的问题）
  6. 片段。以“#”字符为起点（URL的井号 - 阮一峰的网络日志）

  以http://zh.wikipedia.org:80/w/index.php?title=Special:%E9%9A%8F%E6%9C%BA%E9%A1%B5%E9%9D%A2&printable=yes 为例, 其中：
  http，是协议；
  zh.wikipedia.org，是服务器；
  80，是服务器上的网络端口号；
  /w/index.php，是路径；
  ?title=Special:%E9%9A%8F%E6%9C%BA%E9%A1%B5%E9%9D%A2&printable=yes，是询问。
  大多数网页浏览器不要求用户输入网页中“http://”的部分，因为绝大多数网页内容是超文本传输协议文件。同样，“80”是超文本传输协议文件的常用端口号，因此一般也不必写明。一般来说用户只要键入统一资源定位符的一部分（zh.wikipedia.org/wiki/Special:%E9%9A%8F%E6%9C%BA%E9%A1%B5%E9%9D%A2）就可以了。
  由于超文本传输协议允许服务器将浏览器重定向到另一个网页地址，因此许多服务器允许用户省略网页地址中的部分，比如 www。从技术上来说这样省略后的网页地址实际上是一个不同的网页地址，浏览器本身无法决定这个新地址是否通，服务器必须完成重定向的任务。

• http、https、ftp、file 协议
  • http : 协议Hyper Text Transfer Protocol（超文本传输协议）的缩写,是用于从万维网（WWW:World Wide Web ）服务器传输超文本到本地浏览器的传送协议。
  • https : 经过加密的http协议，已达到不被人拦截
  • ftp : File Transfer Protocol，文件传输协议
  • file : 访问本地计算机中的文件

第二步. 域名解析

对于 http://jirengu.com的URL，浏览器实际上不知道 jirengu.com到底是什么东西，需要查找jirengu.com网站所在服务器的IP地址，才能找到目标

为什么要发明域名，不直接用IP?

• 方便记忆对应的网站
• 一个服务器上可能部署了多个网站，只能通过服务器+端口的方式，比如101.33.21.104:3000、101.33.21.104:3001、101.33.21.104:3002,更难记忆

域名是什么

• 对于http://jirengu.com:8080/blog , jirengu.com就是域名

IP地址是什么

• 每个处于互联网中的设备都有IP 地址，形如 192.168.0.1
• 局域网 IP 和公网 IP 是有差别的
  • 局域网IP，比如只装了路由器，还没有交网费，只建立了本地网络，无法访问外网
  • 公网IP，由于局域网IP可能是一样的，所以真正接入互联网的都有一个公网IP，任何人访问你的公网IP，都可以访问到服务器，公网IP是需要申请的
• 127.0.0.1代表本机的 IP

域名解析的流程

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

电脑上不了网，为什么修改dns为8.8.8.8 或者114.114.114.114?

• 8.8.8.8是google提供的dns服务器，打不开网站可能是环节中找不到IP，若把dns直接改为8.8.8.8则不从以上的那些路径一一查找，而是直接从google服务器查找域名所对应的IP。114.114.114.114（国内一个较权威的dns服务商）同理。

什么是dns劫持？

• dns劫持：又称域名劫持，是指在劫持的网络范围内拦截域名解析的请求，分析请求的域名，把审查范围以外的请求放行，否则返回假的IP地址或者什么都不做使请求失去响应，其效果就是对特定的网络不能访问或访问的是假网址。（攻击根域名服务器，使所查找的IP变更为一个恶意网站IP，危害较大）。

第三步. 服务器处理

服务器是一台安装系统的机器，常见的系统如Linux、windows server 2012。系统里安装的处理请求的应用叫 Web server。

Web服务器

• 常见的 web服务器有 Apache、Nginx、IIS、Lighttpd

• web服务器接收用户的Request 交给网站代码，或者接受请求反向代理到其他 web服务器

  
  

第四步. 网站处理流程

MVC 模型(model)-视图(view)-控制器(controller)

第五步. 浏览器处理

HTML字符串被浏览器接受后被一句句读取解析

• 解析到link 标签后重新发送请求获取css
• 解析到 script标签后发送请求获取 js，并执行代码
• 解析到img 标签后发送请求获取图片资源

第六步. 绘制网页

浏览器根据 HTML 和 CSS 计算得到渲染树，绘制到屏幕上，js 会被执行

参考文章

• 前端经典面试题: 从输入URL到页面加载发生了什么？
• 当你输入一个网址的时候，实际会发生什么?