访问一个网页的全过程详解!

打开一个网页的过程中,浏览器会因页面上的css/js/image等静态资源会多次发起连接请求,所以我们暂且把这个网页加载过程分成两部分:

(1)html(jsp/php/aspx) 页面加载(假设存在简单的Nginx负载均衡)
(2)css/js/image等 网页静态资源加载(假设使用CDN)

一:整体流程图

二:具体步骤

1.DNS解析

  什么是DNS解析?当用户输入一个网址并按下回车键的时候,浏览器得到了一个域名。而在实际通信过程中,我们需要的是一个IP地址。因此我们需要先把域名转换成相应的IP地址,这个过程称作DNS解析。

(1)浏览器首先搜索浏览器自身缓存的DNS记录。

  浏览器自身也带有一层DNS缓存。Chrome 缓存1000条DNS解析结果,缓存时间大概在一分钟左右。

(Chrome浏览器通过输入:chrome://net-internals/#dns 打开DNS缓存页面)

(2)如果浏览器缓存中没有找到需要的记录或记录已经过期,则搜索hosts文件。

  (linux系统的hosts文件在/etc/hosts下。)

(3)如果在hosts文件中没有找到需要的记录或记录已经过期,则向域名解析服务器发送解析请求。

  系统会向DNS服务器正式发出解析请求。这里是真正意义上开始解析一个未知的域名。

(4)如果域名解析服务器也没有该域名的记录,则开始递归+迭代解析。

  这里我们举个例子,如果我们要解析的是mail.google.com。

  
1)首先我们的域名解析服务器会向根域服务器(全球只有13台)发出请求。显然,仅凭13台服务器不可能把全球所有IP都记录下来。所以根域服务器记录的是com域服务器的IP、cn域服务器的IP、org域服务器的IP。如果我们要查找.com结尾的域名,那么我们可以到com域服务器去进一步解析。根域服务器告诉我们com域服务器的IP。

2)接着我们的域名解析服务器会向com域服务器发出请求。根域服务器并没有mail.google.com的IP,但是却有google.com域服务器的IP。我们的域名解析服务器会向google.com域服务器发出请求。如此重复,直到获得mail.google.com的IP地址。

为什么是递归:问题由一开始的本机要解析mail.google.com变成域名解析服务器要解析mail.google.com,这是递归。
为什么是迭代:问题由向根域服务器发出请求变成向com域服务器发出请求再变成向google.com域发出请求,这是迭代。

(5)获取域名对应的IP后,一步步向上返回,直到返回给浏览器。

2.发起TCP请

浏览器会选择一个大于1024的本机端口向目标IP地址的80端口发起TCP连接请求。经过标准的TCP握手流程,建立TCP连接。

3.发起HTTP请求

其本质是在建立起的TCP连接中,按照HTTP协议标准发送一个索要网页的请求。

4.负载均衡

(1)什么是负载均衡?当一台服务器无法支持大量的用户访问时,将用户分摊到两个或多个服务器上的方法叫负载均衡。
(2)负载均衡的方法很多,Nginx负载均衡、LVS-NAT、LVS-DR等。这里,我们以简单的Nginx负载均衡为例。
(3)什么是Nginx?Nginx是一款面向性能设计的HTTP服务器,相较于Apache、lighttpd具有占有内存少,稳定性高等优势。Nginx有4种类型的模块:core、handlers、filters、load-balancers。我们这里讨论其中的2种,分别是负责负载均衡的模块load-balancers和负责执行一系列过滤操作的filters模块。

(1)如果我们的平台配备了负载均衡的话,前一步DNS解析获得的IP地址应该是我们Nginx负载均衡服务器的IP地址。所以,我们的浏览器将我们的网页请求发送到了Nginx负载均衡服务器上。
(2)Nginx根据我们设定的分配算法和规则,选择一台后端的真实Web服务器,与之建立TCP连接、并转发我们浏览器发出去的网页请求。
(3)Web服务器收到请求,产生响应,并将网页发送给Nginx负载均衡服务器。
(4)Nginx负载均衡服务器将网页传递给filters链处理,之后发回给我们的浏览器.

5.浏览器渲染

(1)浏览器根据页面内容,生成DOM Tree。根据CSS内容,生成CSS Rule Tree(规则树)。调用JS执行引擎执行JS代码。
(2)根据DOM Tree和CSS Rule Tree生成Render Tree(呈现树)。
(3)根据Render Tree渲染网页。
在浏览器解析页面内容的时候,发现页面引用了其他未加载的image、css文件、js文件等静态内容,因此开始了第二部分。

6.网页静态资源加载

以阿里巴巴的淘宝网首页的logo为例,其url地址为img.alicdn.com/tps/i2/TB1bNE7LFXXXXaOXFXXwFSA1XXX-292-116.png_145x145.jpg

我们清楚地看到了url中有cdn字样。

  
什么是CDN?如果我在广州访问杭州的淘宝网,跨省的通信必然造成延迟。如果淘宝网能在广东建立一个服务器,静态资源我可以直接从就近的广东服务器获取,必然能提高整个网站的打开速度,这就是CDN。CDN叫内容分发网络,是依靠部署在各地的边缘服务器,使用户就近获取所需内容,降低网络拥塞,提高用户访问响应速度。

接下来的流程就是浏览器根据url加载该url下的图片内容。本质上是浏览器重新开始第一部分的流程,所以这里不再重复阐述。区别只是负责均衡服务器后端的服务器不再是应用服务器,而是提供静态资源的服务器。

访问一个网页的全过程详解相关推荐

  1. HTTP访问一个网站的过程详解

    访问一个网站的过程详解 例如访问:http://www.baidu.com HTTP请求的准备 浏览器会将www.baidu.com这个域名发送给DNS服务器,让它解析成IP地址.由于HTTP是基于T ...

  2. 访问一个网页的全过程(根据7层协议分析)

    应用层: 1.浏览器向DNS服务器发起DNS请求,进行域名解析,获得相应的IP地址 2.根据HTTP协议生成HTTP报文请求 在应用层将要发送的数据内容形成了应用层的报文data,发送到传输层 传输层 ...

  3. 访问一个网页的全过程

    原文链接:访问一个网页的全过程(超详细版) 学习:访问一个网站的全过程 补充 总体来说分为以下几个过程: DNS解析 TCP连接 发送HTTP请求 服务器处理请求并返回HTTP报文 浏览器解析渲染页面 ...

  4. 【总结】访问一个网页的全过程

    # 引言 打开浏览器,在地址栏输入URL,回车,出现网页内容.整个过程发生了什么?其中的原理是什么?以下进行整理和总结. 整个过程可以概括为几下几个部分: 域名解析成IP地址: 与目的主机进行TCP连 ...

  5. 浏览器访问一个页面的步骤详解

    面试时经常被问到:浏览器访问一个页面的时候背后的步骤是怎样的? 我往往是把HTTP请求和响应讲了一下. 现在想想,感觉仅仅回答HTTP请求和响应有点太窄了. 所以,这里主要从计算机网络的角度将浏览器访 ...

  6. 新手必看:访问url到加载全过程详解(看完不会我吃shi)

    新手必看:访问url到加载全过程详解(看完不会我吃shi) 1.放在前面:新手必须知道的那些概念 1.1 什么是IP.域名.主机名.url.服务器 1.2 http & https 1.3 O ...

  7. 《HTML5网页开发实例详解》连载(四)HTML5中的FileSystem接口

    HTML 5除了提供用于获取文件信息的File对象外,还添加了FileSystem相关的应用接口.FileSystem对于不同的处理功能做了细致的分类,如用于文件读取和处理的FileReader和Fi ...

  8. WSO2安装使用的全过程详解

    WSO2安装使用的全过程详解 1. Wso2 Install 1.0 Port 1.1 Docker Install 1.2 Uninstall 2. Git Install 2.0 Port 2.1 ...

  9. 微信机器人网页版接口详解

    微信网页版接口详解 本系列会讲述微信机器人技术的实现,第一讲主要了解微信网页版给我们提供的http接口,这一步是做一个基于微信网页版机器人的基础和难点. 本讲将微信网页版的主要接口罗列出,并给出了入参 ...

  10. Android网页浏览器开发详解(一)

    Android网页浏览器开发详解(一) 请支持原创,尊重原创,转载请注明出处:http://blog.csdn.net/kangweijian(来自kangweijian的csdn博客) Androi ...

最新文章

  1. 要活102年,阿里凭借的是什么?
  2. Java--Dom解析XML文件
  3. rocketmq中consumer设计与实现
  4. 一分钟检测应用状态 | 企业应用健康扫描中心发布
  5. js - prototype 继承
  6. C++ dll的隐式与显式调用
  7. Hamcrest总结--思维导图
  8. JBoss4.2.3GA 配置 Quartz
  9. C#socket通信时,怎样判断socket双方是否断开连接
  10. 英特尓祭出开挖数据价值的“六脉神剑”!
  11. CentOS 6.3最小化安装后,有些必备工作才可以正常使用
  12. gps模拟器 matlab,基于Matlab/Simulink的数字中频GPS信号软件模拟器
  13. 什么是 0day 漏洞,1day 漏洞和 nday 漏洞?
  14. 削峰填谷 matlab,风电与电动汽车协同并网调度环境模型
  15. sharkle里的链接
  16. 二---------
  17. 自学大数据入门全套学习资料(视频+课程大纲+笔记)
  18. linux怎么创建一个c文件,如何在Ubuntu Linux中创建一个简单的C项目
  19. RK3399-RGA使用
  20. 世界各大操作系统发展史

热门文章

  1. keil5图标变成白色_桌面图标出现白块,显示图标异常的解决方法
  2. LeetCode解题汇总目录
  3. 用VB创建一个对象数组
  4. C语言实验:输入任意一个日期的年、月、日的值,求出从公元1年1月1日到这一天总共有多少天,并求出这一天是星期几。
  5. 罗马数字相加java_LeetCode题库 13罗马数字转整数(java)
  6. 细胞器标记物丨FUS抗体高品质结果展示
  7. 【转】江枫:在ubuntu10.04上安装oracle 10g(学习一下)
  8. 车轮轨迹原理_三张图告诉你倒车入库的原理
  9. Win10 解决电脑插入耳机没声音。
  10. mysql时间串工具_时间戳_时间戳转换工具_阿波罗查询