浅议从URL输入到页面展现

图片
什么是URL
url是统一资源定位符，对可以从互联网上得到的资源的位置和访问方法的一种简洁的表示，是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它。 ^[1]

它最初是由蒂姆·伯纳斯·李发明用来作为万维网的地址。现在它已经被万维网联盟编制为互联网标准RFC1738了。

一、在浏览器的地址栏中敲入了url

结构（一）
基本URL包含模式（或称协议）、服务器名称（或IP地址）、路径和文件名，如“协议://授权/路径?查询”。完整的、带有授权部分的普通统一资源标志符语法看上去如下：协议://用户名:密码@子域名.域名.顶级域名:端口号/目录/文件名.文件后缀?参数=值#标志。

简单可以理解为：协议类型://<主机名IP>:<端口>/<路径>/文件名
协议类型（scheme）最常用的有超文本传输协议（Hypertext Transfer Protocol，缩写为HTTP）也就是我们所说的HTTP协议，协议如下：

协议类型	中文名称	默认端口号
http	超文本传输协议资源	80
https	用安全套接字层传送的超文本传输协议	443
ftp	文件传输协议	21
TELNET	远程终端协议	23

以上四个比较常见 其它的还有
-mailto——电子邮件地址
-ldap——轻型目录访问协议搜索
-file——当地电脑或网上分享的文件
-news——Usenet新闻组
-gopher——Gopher协议

结构（二）
IP是因特网中的每台连接到网络的计算机为实现相互通信而遵循的规则协议。每个处于互联网中的设备都有IP 地址，形如 192.168.0.1，而127.0.0.1代表本机的 IP。IP又分为局域网IP和公网IP。而局域网 IP 和公网 IP 是有差别的。每个网站就是靠IP来定位的。
为了便于记忆或辨识，人们使用域名来登录网站，每个域名背后有对应的IP地址。
比如对于 http://www.jianshu.com的URL，浏览器实际上不知道 www.jianshu.com到底是什么东西，需要查找www.jianshu.com网站所在服务器的IP地址，才能找到目标，这就是下文要说的域名解析。

二、域名解析

根据URL，在本地DNS缓存中查找域名对应的IP地址

1-查找浏览器缓存
浏览器和操作系统在获取网站域名的实际IP地址后会对其IP进行缓存，在短时间内重复访问同一域名时，会直接在DNS缓存中读取域名对应的IP地址，以减少网络请求的损耗（先在浏览器DNS缓存中查找，如果没有找到，则会在操作系统DNS缓存中查找）。浏览器和操作系统都有一个固定的DNS缓存时间，其中Chrome的过期时间是1分钟，在这个期限内不会重新请求DNS。Chrome浏览器看本身的DNS缓存时间比较方便，在地址栏输入:

chrome://net-internals/#dns

image

2-查找操作系统缓存(查询hosts文件)

如果在本地DNS缓存中没有找到域名对应的IP地址，则会查询hosts文件，看其中是否已经有与当前域名对应的 IP 地址，如果有就会直接采用，如果没有，那么就得由DNS服务器进行域名解析完成域名与IP的转换工作。

3-查找路由器缓存

如果系统缓存中也找不到，那么查询请求就会发向路由器，路由器一般会有自己的DNS缓存。

4-查找ISP(Internet Service Provider) DNS 缓存

如果路由器缓存中也找不到，那么就查询ISP DNS 缓存服务器了。
我们都知道在我们的网络配置中都会有"DNS服务器地址"这一项，操作系统会把这个域名发送给这里设置的DNS，比如114.114.114.114,也就是本地区的域名服务器，通常是提供给你接入互联网的应用提供商。而114.114.114.114是国内移动、电信和联通通用的DNS。

5-迭代查询

如果前面都找不到DNS缓存的话，会有以下几个步骤：

-本地 DNS服务器将该请求转发到互联网上的根域（根域没有名字，在DNS系统中就用一个空字符串来表示。例如www.baidu.com.现在的DNS系统都不会要求域名以.来结束，即www.baidu.com就可以解析了，但是现在很多DNS解析服务商还是会要求在填写DNS记录的时候以.来结尾域名。）

-根域将所要查询域名中的顶级域（比如要查询www.baidu,com，该域名的顶级域就是com）的服务器IP地址返回到本地DNS。

-本地DNS根据返回的IP地址，再向顶级域（就是com域）发送请求， com域服务器再将域名中的二级域（即www.baidu.com中的baidu.com）的IP地址返回给本地DNS。

-本地DNS再向二级域发送请求进行查询。
之后不断重复这样的过程，直到本地DNS服务器得到最终的查询结果，并返回到主机。这时候主机才能通过域名访问该网站。
下图能很好的说明这个迭代查询:

image

当查找到对应的IP地址之后，通过IP地址查找到对应的服务器，浏览器将用户发起的http请求发送给服务器。例如：GET http://www.baidu.com/ HTTP/1.1

三、服务器处理请求

浏览器与服务器建立连接，并发送请求给服务器
每台服务器上都会安装处理请求的应用——Web server。常见的web server产品有apache、nginx、IIS、Lighttpd等。

当web server接收到一个HTTP请求(request)，会返回一个HTTP响应(response)，例如送回一个HTML页面。对于不同用户发送的请求，会结合配置文件，把不同请求委托给服务器上处理对应请求的程序进行处理（例如CGI脚本，JSP脚本，servlets，ASP脚本，服务器端JavaScript，或者一些其它的服务器端技术等）。

无论它们(脚本)的目的如何，这些服务器端(server-side)的程序通常产生一个HTML的响应(response)来让浏览器可以浏览。

那么如何处理请求？实际上就是后台处理的工作。后台开发现在有很多框架，但大部分都还是按照MVC设计模式进行搭建的。

处理过程图：

image

MVC的处理过程是这样的：对于每一个用户输入的请求，首先被控制器接收，控制器决定用哪个模型来进行处理，然后模型用业务逻辑来处理用户的请求并返回数据，最后控制器确定用哪个视图模型，用相应的视图格式化模型返回html字符串给浏览器，并通过显示页面呈现给用户。

四、浏览器处理

浏览器收到来自服务器的响应后，会将响应中的HTML字符串一句句读取解析，解析到link标签后重新发送请求下载css文件，解析到script标签后重新发送请求下载js文件，并执行代码，解析到img标签后重新发送请求获取图片资源。

浏览器根据html、css计算得到渲染树，结合相关js的执行结果，最终将网页绘制到屏幕上。
-加载

浏览器对一个html页面的加载顺序是从上而下的。如果加载过程中遇到外部css文件，浏览器另外发出一个请求，来获取css文件。遇到图片资源，浏览器也会另外发出一个请求，来获取图片资源。但是当文档加载过程中遇到js文件，html文档会挂起渲染（加载解析渲染同步）的线程，不仅要等待文档中js文件加载完毕，还要等待解析执行完毕，才可以恢复html文档的渲染线程。

-解析
解析文档是指将文档转化成为有意义的结构，也就是可让代码理解和使用的结构。解析得到的结果通常是代表了文档结构的节点树，它称作解析树或者语法树，也就是DOM树。如下图：

image

css解析将css文件解析为样式表对象。如下图：

image
js解析文件在加载的同时也进行解析
浏览器的工作原理：新式网络浏览器幕后揭秘
-渲染
即为构建渲染树的过程，就是将DOM树进行可视化表示。构建这棵树是为了以正确的顺序绘制文档内容。

五、绘制网页

即为构建渲染树的过程，就是将DOM树进行可视化表示。构建这棵树是为了以正确的顺序绘制文档内容。浏览器根据html、css计算得到渲染树，结合相关js的执行结果，最终将网页绘制到屏幕上。