概述一个页面从输入URL到页面加载完的过程


Posted in Javascript onDecember 16, 2016

过程概述

  • 浏览器查找域名对应的 IP 地址;
  • 浏览器根据 IP 地址与服务器建立 socket 连接;
  • 浏览器与服务器通信: 浏览器请求,服务器处理请求;
  • 浏览器与服务器断开连接。

以下为详细解析:

根据域名查找 IP 地址

概念解释

  • IP 地址:IP 协议为互联网上的每一个网络和每一台主机分配的一个逻辑地址。IP 地址如同门牌号码,通过 IP 地址才能确定一台主机位置。服务器本质也是一台主机,想要访问某个服务器,必须先知道它的 IP 地址;
  • 域名( DN ):IP 地址由四个数字组成,中间用点号连接,在使用过程中难记忆且易输入错误,所以用我们熟悉的字母和数字组合来代替纯数字的 IP 地址,比如我们只会记住 www.baidu.com(百度域名) 而不是 220.181.112.244(百度的其中一个 IP 地址);
  • DNS: 每个域名都对应一个或多个提供相同服务服务器的 IP 地址,只有知道服务器 IP 地址才能建立连接,所以需要通过 DNS 把域名解析成一个 IP 地址。

知道了上面的概念,大概就知道了想要获得服务器的门牌号码,需要先将域名转换成 IP 地址。转换过程如下(以查询 www.baidu.com 的 IP 地址为例,其中2、3、4步均在上一步未查询成功的情况下进行):

查找过程

1.浏览器搜索自己的 DNS 缓存(维护一张域名与 IP 地址的对应表);

2.搜索操作系统中的 DNS 缓存(维护一张域名与 IP 地址的对应表);

3.搜索操作系统的 hosts 文件( Windows 环境下,维护一张域名与 IP 地址的对应表);

4.操作系统将域名发送至 LDNS(本地区域名服务器,如果你在学校接入互联网,则 LDNS 服务器就在学校,如果通过电信接入互联网,则 LDNS 服务器就在你当地的电信那里。)LDNS 查询自己的 DNS 缓存(一般查找成功率在 80% 左右),查找成功则返回结果,失败则发起一个迭代 DNS 解析请求;

  • LDNS 向 Root Name Server (根域名服务器,其虽然没有每个域名的的具体信息,但存储了负责每个域,如 com、net、org等的解析的顶级域名服务器的地址)发起请求,此处,Root Name Server 返回 com 域的顶级域名服务器的地址;
  • LDNS 向 com 域的顶级域名服务器发起请求,返回 baidu.com 域名服务器地址;
  • LDNS 向 baidu.com 域名服务器发起请求,得到 www.baidu.com 的 IP 地址;

5.LDNS 将得到的 IP 地址返回给操作系统,同时自己也将 IP 地址缓存起来;

6.操作系统将 IP 地址返回给浏览器,同时自己也将 IP 地址缓存起来;

7.至此,浏览器已经得到了域名对应的 IP 地址。

补充说明

  • 域名与 URL 是两个概念:域名是一台或一组服务器的名称,用来确定服务器在 Internet 上的位置;URL 是统一资源定位符,用来确定某一个文件的具体位置,例如,zhihu.com 是 知乎的域名,根据这个域名可以找到知乎的服务器,zhihu.com/people/CompileYouth 是 URL ,可以根据这个 URL 定位我的知乎主页;
  • IP 地址与域名不是一一对应的关系:可以把多个提供相同服务的服务器 IP 设置为同一个域名,但在同一时刻一个域名只能解析出一个 IP地址;同时,一个 IP 地址可以绑定多个域名,数量不限;

建立连接--三次握手

知道了服务器的 IP 地址,下面便开始与服务器建立连接了。

通俗地讲,通信连接的建立需要经历以下三个过程:

  • 主机向服务器发送一个建立连接的请求(您好,我想认识您);
  • 服务器接到请求后发送同意连接的信号(好的,很高兴认识您);
  • 主机接到同意连接的信号后,再次向服务器发送了确认信号(我也很高兴认识您),自此,主机与服务器两者建立了连接。

补充说明

  • TCP 协议:三次握手的过程采用 TCP 协议,其可以保证信息传输的可靠性,三次握手过程中,若一方收不到确认信号,协议会要求重新发送信号。

网页请求与显示

当服务器与主机建立了连接之后,下面主机便与服务器进行通信。网页请求是一个单向请求的过程,即是一个主机向服务器请求数据,服务器返回相应的数据的过程。

1.浏览器根据 URL 内容生成 HTTP 请求,请求中包含请求文件的位置、请求文件的方式等等;

2.服务器接到请求后,会根据 HTTP 请求中的内容来决定如何获取相应的 HTML 文件;

3.服务器将得到的 HTML 文件发送给浏览器;

4.在浏览器还没有完全接收 HTML 文件时便开始渲染、显示网页;

5.在执行 HTML 中代码时,根据需要,浏览器会继续请求图片、CSS、JavsScript等文件,过程同请求 HTML ;

断开连接--四次挥手

1.主机向服务器发送一个断开连接的请求(不早了,我该走了);

2.服务器接到请求后发送确认收到请求的信号(知道了);

3.服务器向主机发送断开通知(我也该走了);

4.主机接到断开通知后断开连接并反馈一个确认信号(嗯,好的),服务器收到确认信号后断开连接;

补充说明

  • 为什么服务器在接到断开请求时不立即同意断开:当服务器收到断开连接的请求时,可能仍然有数据未发送完毕,所有服务器先发送确认信号,等所有数据发送完毕后再同意断开。
  • 第四次握手后,主机发送确认信号后并没有立即断开连接,而是等待了 2 个报文传送周期,原因是:如果第四次握手的确认信息丢失,服务器将会重新发送第三次握手的断开连接的信号,而服务器发觉丢包与重新发送的断开连接到达主机的时间正好为 2 个报文传输周期。

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
javascript+css 网页每次加载不同样式的实现方法
Dec 27 Javascript
Jquery替换已存在于element上的event的方法
Mar 09 Javascript
基于JQuery的模拟苹果桌面Dock效果(稳定版)
Oct 15 Javascript
jquery分页对象使用示例
Apr 01 Javascript
解决bootstrap中modal遇到Esc键无法关闭页面
Mar 09 Javascript
Flash图片上传组件 swfupload使用指南
Mar 14 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之主动触发事件和模拟冒泡处理
Nov 24 Javascript
javascript性能优化之DOM交互操作实例分析
Dec 12 Javascript
基于Javascript实现二级联动菜单效果
Mar 04 Javascript
Javascript缓存API
Jun 14 Javascript
element-ui 的el-button组件中添加自定义颜色和图标的实现方法
Oct 26 Javascript
一个小时快速搭建微信小程序的方法步骤
Apr 15 Javascript
详解MVC如何使用开源分页插件(shenniu.pager.js)
Dec 16 #Javascript
js继承实现方法详解
Dec 16 #Javascript
详解jQuery简单的表格应用
Dec 16 #Javascript
JS中parseInt()和map()用法分析
Dec 16 #Javascript
HTML5canvas 绘制一个圆环形的进度表示实例
Dec 16 #Javascript
JS数字千分位格式化实现方法总结
Dec 16 #Javascript
jquery插件锦集【推荐】
Dec 16 #Javascript
You might like
在Zeus Web Server中安装PHP语言支持
2006/10/09 PHP
shopex中集成的站长统计功能的代码简单分析
2011/08/11 PHP
php_screw安装使用教程(另一个PHP代码加密实现)
2014/05/29 PHP
php版阿里大于(阿里大鱼)短信发送实例详解
2016/11/30 PHP
Jquery replace 字符替换实现代码
2010/12/02 Javascript
ejs v9 javascript模板系统
2012/03/21 Javascript
最佳6款用于移动网站开发的jQuery 图片滑块插件小结
2012/07/20 Javascript
js中的数组Array定义与sort方法使用示例
2013/08/29 Javascript
jquery购物车实时结算特效实现思路
2013/09/23 Javascript
jQuery 隐藏和显示 input 默认值示例
2014/06/03 Javascript
js简单实现标签云效果实例
2015/08/06 Javascript
JS实现灵巧的下拉导航效果代码
2015/08/25 Javascript
Angular.js 4.x中表单Template-Driven Forms详解
2017/04/25 Javascript
nodejs socket实现的服务端和客户端功能示例
2017/06/02 NodeJs
关于vue-resource报错450的解决方案
2017/07/24 Javascript
如何让你的JS代码更好看易读
2017/12/01 Javascript
用p5.js制作烟花特效的示例代码
2018/03/21 Javascript
js实现延迟加载的几种方法详解
2019/01/19 Javascript
详解babel升级到7.X采坑总结
2019/05/12 Javascript
vue实现移动端返回顶部
2020/10/12 Javascript
Python 代码性能优化技巧分享
2012/08/07 Python
python用opencv批量截取图像指定区域的方法
2019/01/24 Python
对DJango视图(views)和模版(templates)的使用详解
2019/07/17 Python
python实现while循环打印星星的四种形状
2019/11/23 Python
使用CSS3美化HTML表单的技巧演示
2016/05/17 HTML / CSS
css3实现简单的白云飘动背景特效
2020/10/28 HTML / CSS
印度低票价航空公司:GoAir
2017/10/11 全球购物
顶丰TOPPIK台湾官网:增发纤维假发,告别秃发困扰
2018/06/13 全球购物
豪华床上用品 :Jennifer Adams
2019/09/15 全球购物
在c#中using和new这两个关键字有什么意义
2013/05/19 面试题
大学生自我鉴定
2013/12/16 职场文书
小班重阳节活动方案
2014/02/08 职场文书
Python 使用dict实现switch的操作
2021/04/07 Python
Mysql存储过程、触发器、事件调度器使用入门指南
2022/01/22 MySQL
CDPR谈《巫师》新作用虚幻5原因 称不会为Epic独占
2022/04/06 其他游戏
画错魏国疆域啦!《派对咖孔明》动画因作画失误于官网致歉
2022/04/07 日漫