在浏览器地址栏输入URL，按下回车后发生了什么

URL是什么意思

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

当我们输入URL，发生了什么？

用一个例子来说明把。当我们打开https://datura900607.github.io/home-automation/ 这个网页的时候发生了什么？

1.通过URL定位到主机。

当我们在浏览器输入url后，浏览器通过DNS服务器，将网站中的URl中的主机域名解析为，web服务器中所对应的IP地址。顺序:

• 先在浏览器缓存中查询。

因为浏览器一般会缓存DNS记录一段时间，不同浏览器的时间可能不一样，一般2-30分钟不等，浏览器去查找这些缓存，如果有缓存，直接返回IP，否则下一步
DNS（域名系统）：:是互联网的一项服务。它作为将域名和IP地址相互映射的一个分布式数据库，能够使人更方便地访问互联网。

• 系统缓存中查询。

浏览器缓存中找不到IP之后，浏览器会进行系统调用（windows中是gethostbyname），查找本机的hosts文件，如果找到，直接返回IP，否则下一步

• 系统缓存中没有在路由器缓存中查询。

网络，路由器一般都有自己的DNS缓存，将前面的请求发给路由器，查找ISP 服务商缓存 DNS的服务器，如果查找到IP则直接返回，没有的话继续查找。

• 路由器找不到在web服务器中查询，直到找到这个IP地址。

递归查询：如果以上步骤还找不到，则ISP的DNS服务器就会进行递归查询，所谓递归查询就是如果主机所询问的本地域名服务器不知道被查询域名的IP地址，那么本地域名服务器就以DNS客户的身份，向其他根域名服务器继续发出查询请求报文，而不是让该主机自己进行下一步查询。（本地域名服务器地址是通过DHPC协议获取地址，DHPC是负责分配IP地址的）

迭代查询：本地域名服务器采用迭代查询，它先向一个根域名服务器查询。本地域名服务器向根域名服务器的查询一般都是采用迭代查询。所谓迭代查询就是当根域名服务器收到本地域名服务器发出的查询请求报文后，要么告诉本地域名服务器下一步应该查询哪一个域名服务器，然后本地域名服务器自己进行后续的查询。（而不是替代本地域名服务器进行后续查询。

2.通过TCP协议与Web服务器创建连接。(俗称三次握手)，向服务器发送请求

TCP3次握手连接：浏览器所在的客户机向服务器发出连接请求报文（SYN标志为1）；服务器接收报文后，同意建立连接，向客户机发出确认报文（SYN，ACK标志位均为1）；客户机接收到确认报文后，再次向服务器发出报文，确认已接收到确认报文；此处客户机与服务器之间的TCP连接建立完成，开始通信。

在客户机和服务器之间建立正常的TCP网络连接时，客户机首先发出一个SYN消息，服务器使用SYN+ACK应答表示接收到了这个消息，最后客户机再以ACK消息响应。

3.在确认与服务器建立连接后，便会发送一个HTTP请求

4.web服务器接收请求，交给相关进程处理

web服务器在收到浏览器发送的HTTP请求之后，会将收到的HTTP报文封装成HTTP的Request对象，并通过不同的Web服务器进行处理，处理完的结果以HTTP的Response对象返回，主要包括状态码，响应头，响应报文三个部分。

如果后台语言是PHP类型，则web服务器在接收到用户的请求后将请求转交给PHP应用服务器来处理，（web服务器本身不能处理PHP动态语言文件）

状态码主要包括以下部分

1xx：指示信息–表示请求已接收，继续处理。
2xx：成功–表示请求已被成功接收、理解、接受。
3xx：重定向–要完成请求必须进行更进一步的操作。
4xx：客户端错误–请求有语法错误或请求无法实现。
5xx：服务器端错误–服务器未能实现合法的请求。
响应头主要由Cache-Control、 Connection、Date、Pragma等组成
响应体为服务器返回给浏览器的信息，主要由HTML，css，js，图片文件组成

服务器响应请求，通过TCP协议回传响应
这里因为此家居网站就是一个静态HTML。就直接找到HTML文件就会通过TCP协议回传了。如果是php文件。则还需要PHP应用服务器将PHP文件，翻译成HTML静态代码，传回Web服务器，然后再通过TCP协议回传响应。

5.浏览器接收响应，开始下载并渲染，将页面呈现在我们面前

1. 解析HTML生成DOM树，
2. 解析CSS文件生成CSSOM树，并解析Javascript代码
3. CSS和DOM组合形成渲染树，
4. 进行布局，在浏览器中绘制渲染树中节点的属性(位置，宽度，大小等)
5. 绘制元素，绘制各个节点的可视属性(颜色背景等，此时可能会形成多个图层)
6. 合并图层，将页面呈现给用户面前

6.关闭连接

在服务器接收响应请求的时候，会因为一些不同的因素呈现出不同的页面主要因素是：

• 请求方式（例：get、post当然请求方式不止这两种。）的不同
• 路径的不同：（url不同服务器结果当然不同！！）
• query string 传参的不同
• cookie ————用于用户身份识别的
• 服务器自身的配置
• 后台语言的逻辑（java和php）

状态码

状态码常见的大致可分为以下几种：
200 （正常OK）
304 （请求的网页与上次比没有更新）刷新的时候出现
301 （重定向）换域名
403 （配置服务器没权限）
404 （没找到文件（找到了服务器））
500 （没找到服务器）

关于浏览器渲染页面的一些细节

** JS加载阻塞的原因**
JS加载阻塞主要是因为浏览器需要一个稳定的DOM树，而JS本质就是操作DOM元素，就很有可能改变DOM树的机构，为了防止出现修改DOM树的情况后重铸DOM树的情况，先等JS下载并解析完之后 再渲染DOM树
CSS与JS一般情况下的放置位置
一般来说css放置在Head，JS放置在底部 主要原因有：

• 上面提过到JS的加载阻塞
• 因为HTML的下载和解析是从上到下的顺序解析的，如果CSS不都放在HEAD里面，有的放前面后的放后面就会造成 放在前面的CSS元素渲染一次之后，后面如果出现重复（这里涉及到一个优先级，假设优先级一致）后面的CSS样式也会重新覆盖前面的样式，再讲前元素再渲染一边(包括已经渲染过的) 就会造成重复渲染。而全放在HEAD里面 CSS文件会先合并，只会形成CSSDOM，进行渲染。从性能和用户体验 来看 一般CSS放置在HEAD，JS放置在底部