本文已参与「新人创作礼」活动，一起开启掘金创作之路
拆解URL
统一资源定位符（Uniform Resource Locator，URL） 是互联网上用来标识某一处资源的地址。以下面这个URL为例，介绍下普通URL的各部分组成：
http://www.baidu.com:8080/news/index.php?boardID=5&ID=24618&page=1#name
从上面的URL可以看出，一个完整的URL包括以下几部分：
-
协议部分：该URL的协议部分为“http：”，这代表网页使用的是HTTP协议。在Internet中可以使用多种协议，如HTTP，FTP等等本例中使用的是HTTP协议。在"HTTP"后面的“//”为分隔符。
-
域名部分：该URL的域名部分为“www.baidu.com”。一个URL中，也可以使用IP地址作为域名使用。
-
端口部分：跟在域名后面的是端口，域名和端口之间使用“:”作为分隔符。端口不是一个URL必须的部分，如果省略端口部分，将采用默认端口80，8080端口是被用于WWW代理服务的，可以实现网页浏览，经常在访问某个网站或使用代理服务器的时候，会加上":8080"端口号。另外Apache Tomcat web server安装后，默认的服务端口就是8080.
-
虚拟目录部分：从域名后的第一个“/”开始到最后一个“/”为止，是虚拟目录部分。虚拟目录也不是一个URL必须的部分。本例中的虚拟目录是“/news/”
-
文件名部分：从域名后的最后一个“/”开始到“？”为止，是文件名部分，如果没有“?”,则是从域名后的最后一个“/”开始到“#”为止，是文件部分，如果没有“？”和“#”，那么从域名后的最后一个“/”开始到结束，都是文件名部分。本例中的文件名是“index.asp”。文件名部分也不是一个URL必须的部分，如果省略该部分，则使用默认的文件名。
-
参数部分：从“？”开始到“#”为止之间的部分为参数部分，又称搜索部分、查询部分。本例中的参数部分为“username=lisi&password=24618&page=1”。参数可以允许有多个参数，参数与参数之间用“&”作为分隔符。
-
锚部分：从“#”开始到最后，都是锚部分,#是用来指导浏览器动作的，#后面的字符串，都会被浏览器解析为位置标识符。本例中的锚部分是“name”。锚部分也不是一个URL必须的部分。
浏览器与服务器的爱恨情仇
讲完了URL，接下来就说说当我们在浏览器输入一个网址之后，浏览器与服务器之间的交互
主要流程：
1、浏览器向 DNS 服务器请求解析该 URL 中的域名所对应的 IP 地址;
2、解析出 IP 地址后，根据该 IP 地址和默认端口 80，和服务器建立TCP连接;
3、浏览器发出读取文件(URL中域名后面部分对应的文件)的HTTP 请求，该请求消息作为 TCP三次握手的第三个报文的数据发送给服务器;
4、服务器对浏览器请求作出响应，并把对应的 html 文本发送给浏览器
5、释放TCP连接;
6、浏览器加载该 html 文本并显示内容;
详细流程：
1、 首先，在浏览器地址栏中输入url。
2、 浏览器先查看浏览器缓存-系统缓存-路由器缓存，如果缓存中有，会直接在屏幕中显示页面内容。若没有，则跳到第三步操作。
3、 在发送http请求前，需要域名解析(DNS解析)(DNS（域名系统，Domain Name System）是互联网的一项核心服务，它作为可以将域名和IP地址相互映射的一个分布式数据库，能够使人更方便的访问互联网，而不用去记住IP地址。)，解析获取相应的IP地址。
4、 浏览器向服务器发起tcp连接，与浏览器建立tcp三次握手。（TCP即传输控制协议。TCP连接是互联网连接协议集的一种。）
5、 握手成功后，浏览器向服务器发送http请求，请求数据包。
6、 服务器处理收到的请求，将数据返回至浏览器。
7、 浏览器收到HTTP响应。
8、 读取页面内容，浏览器渲染，解析html源码。
9、 生成Dom树、解析css样式、js交互。
10、客户端和服务器交互。
11、ajax查询。
