JavaScript基础之浏览器地址栏输入URL会发生什么

最新推荐文章于 2024-04-24 21:52:41 发布

leelxp

最新推荐文章于 2024-04-24 21:52:41 发布

阅读量5.4k

点赞数 2

分类专栏： Javascript 文章标签： javascript es6 html5 前端 typescript

lee前端技术站

本文链接：https://blog.csdn.net/leelxp/article/details/107049469

版权

23 篇文章 2 订阅

订阅专栏

当我们在浏览器的地址栏输入一个地址后，接下来到底会发生什么呢？

当你在浏览器中输入一个地址的时候，浏览器会从浏览历史记录，或者书签等地方模糊匹配出你想要的地址，提示补全url，对于Chrome来说，可以做到你想搜索的网页已经呈现出来。这个时候，其实还没有按下回车或者是搜索按钮。那么当一旦按下回车或者是搜索键后会发生什么呢？

首先，浏览器会将输入的地址解析成对应的IP

因为浏览器一般都会有2-30分钟左右的dns缓存，所以首先回去缓存中去查找对应的IP,如果有，则返回IP;
dns中没有查找到IP,那么就会进行系统调用，查找本地host文件，如果有，则返回IP;
借助网络去查找路由器的dns缓存，将请求发给路由器，查找ISP 服务商缓存 DNS的服务器，如果有，则返回IP。
如果以上步骤还找不到，则ISP的DNS服务器就会进行递归查询，所谓递归查询就是如果主机所询问的本地域名服务器不知道被查询域名的IP地址，那么本地域名服务器就以DNS客户的身份，向其他根域名服务器继续发出查询请求报文，而不是让该主机自己进行下一步查询。（本地域名服务器地址是通过DHPC协议获取地址，DHPC是负责分配IP地址的）；
本地域名服务器采用迭代查询，它先向一个根域名服务器查询。本地域名服务器向根域名服务器的查询一般都是采用迭代查询。所谓迭代查询就是当根域名服务器收到本地域名服务器发出的查询请求报文后，要么告诉本地域名服务器下一步应该查询哪一个域名服务器，然后本地域名服务器自己进行后续的查询。（而不是替代本地域名服务器进行后续查询）。

其次，浏览器与目标服务器建立TCP连接

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

然后，浏览器向 web 服务器发送一个 HTTP 请求

浏览器向主机发起一个HTTP-GET方法报文请求。请求中包含访问的URL，也就是http://www.csdn.com/ ，KeepAlive，长连接，还有User-Agent用户浏览器操作系统信息，编码等。值得一提的是Accep-Encoding和Cookies项。Accept-Encoding一般采用gzip，压缩之后传输html文件。Cookies如果是首次访问，会提示服务器建立用户缓存信息，如果不是，可以利用Cookies对应键值，找到相应缓存，缓存里面存放着用户名，密码和一些用户设置项。

第四，服务器的永久重定向响应

对于大型网站存在多个主机站点，为了负载均衡或者导入流量，提高SEO排名，往往不会直接返回请求页面，而是重定向。返回的状态码就不是200OK，而是301,302以3开头的重定向码，浏览器在获取了重定向响应后，在响应报文中Location项找到重定向地址，浏览器重新第一步访问即可。
重定向的作用：重定向是为了负载均衡或者导入流量，提高SEO排名。利用一个前端服务器接受请求，然后负载到不同的主机上，可以大大提高站点的业务并发处理能力；重定向也可将多个域名的访问，集中到一个站点；由于baidu.com，www.baidu.com会被搜索引擎认为是两个网站，照成每个的链接数都会减少从而降低排名，永久重定向会将两个地址关联起来，搜索引擎会认为是同一个网站，从而提高排名。

第五，浏览器跟踪重定向地址

第六，服务器处理请求

第七，服务器发出一个HTML响应

返回状态码200 OK，表示服务器可以响应请求，返回报文，由于在报头中Content-type为“text/html”，浏览器以HTML形式呈现，而不是下载文件。

第八，释放TCP连接

第九，浏览器显示页面

在浏览器没有完整接受全部HTML文档时，它就已经开始显示这个页面了，浏览器接收到返回的数据包，根据浏览器的渲染机制对相应的数据进行渲染。渲染后的数据，进行相应的页面呈现和脚步的交互。

第十，浏览器发送获取嵌入在HTML中的其他内容

比如一些样式文件，图片url，js文件url等，浏览器会通过这些url重新发送请求，请求过程依然是HTML读取类似的过程，查询域名，发送请求，重定向等。不过这些静态文件是可以缓存到浏览器中的，有时访问这些文件不需要通过服务器，直接从缓存中取。某些网站也会使用第三方CDN进行托管这些静态文件。

浏览器输入地址后，就发生了这么多的故事。

关注

专栏目录