资讯专栏INFORMATION COLUMN

一个网页的形成过程

WelliJhon / 1032人阅读

摘要:一个网页从我们输入网址到打开经历了以下步骤。如果没有或记录已经过期,则向域名解析服务器发送解析请求。服务器收到请求,产生响应,并将网页发送给负载均衡服务器。负载均衡服务器将网页传递给链处理,之后发回给我们的浏览器。

一个网页从我们输入网址到打开经历了以下步骤。

DNS解析
DNS(域名系统 Domain Name System)由解析器域名服务器组成,域名服务器保存着该网络中所有主机的域名和对应的IP地址,域名有唯一对应的IP地址,但是IP地址不一定对应一个域名,我们就是根据DNS来上网的。

当用户输入一个网址并按下回车键时,浏览器得到一个域名。而实际通讯过程中我们需要一个IP地址。因此我们需要先把域名转化成对应的IP地址,这个过程就叫做DNS解析。

过程

简述

浏览器搜索缓存-->hosts文件和操作系统缓存-->域名解析服务器-->递归迭代
YSE-->返回给浏览器
NO-->向下找

详细描述

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

如果没有或记录已经过期,则搜索hosts文件和操作系统缓存。

如果没有或记录已经过期,则向域名解析服务器发送解析请求。

如果还是没有,则开始递归 + 迭代解析。

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

发起TCP请求(三次握手)

简述

客户端(发送连接请求)-->服务器端
服务器端(建立连接并发送确认报文)-->客户端
客户端(发送确认收到确认报文)-->服务器端

详细描述

客户端向服务器端发送连接请求的报文。

服务器端收到请求后,同意建立连接,并向客户端发送确认报文。

客户端收到后,再次向服务器端发送报文,确认已经收到确认报文。

建立起TCP连接后,开始进行通信。

建立TCP连接后,浏览器向服务器发送HTTP请求

如:浏览器发出取文件指令GET

负载均衡
当一台服务器无法支持大量用户访问时,将用户分摊到两个或多个服务器上的方法叫负载均衡
过程

简述

浏览器(发送请求)-->Nginx(建立TCP连接,转发请求)-->web服务器(发送网页)-->Nginx(传递网页)-->filter链(处理)-->浏览器

详细描述

一般,如果我们的平台配备了负载均衡的话,前一步DNS解析获得的IP地址应该是我们Nginx负载均衡服务器的IP地址。所以,我们的浏览器将我们的请求发送到了Nginx负载均衡服务器上。

Nginx根据我们设定的分配算法和规则,选择一台后端的真实Web服务器,与之建立TCP连接、并转发我们浏览器发出去的网页请求。

Web服务器收到请求,产生响应,并将网页发送给Nginx负载均衡服务器。

Nginx负载均衡服务器将网页传递给filter链处理,之后发回给我们的浏览器。

服务器响应HTTP请求,将请求的资源发送给浏览器。 浏览器释放TCP连接(四次挥手)
浏览器(发送释放连接报文)-->服务器
服务器(发送确认报文并发送完数据)-->浏览器
服务器(发送释放连接请求)-->浏览器
浏览器(发出确认)-->服务器
等待一段时间后,浏览器释放TCP连接

浏览器向服务器发送释放连接报文。

服务器收到后,发出确认报文,然后将服务器上未传送完的数据发送完。

服务器数据传输完成后,向浏览器发送释放连接请求。

浏览器收到后,发出确认,然后等待一段时间,释放TCP连接。

浏览器渲染
浏览器接收到服务器服务器返回的HTML页面代码,在解析和渲染这个页面时,里面的JSCSS图片等静态资源,也是一个个HTTP请求,都需要经过上面的步骤。

浏览器根据页面内容,生成DOM Tree

根据css内容,生成CSS Rule Tree(规则树)

调用JS执行引擎执JS代码。

根据DOM TreeCSS Rule Tree生成 Render Tree(呈现树)

根据根据Render Tree渲染网页。

文章参考自https://www.jianshu.com/p/0c8c7cecf946https://www.jianshu.com/p/cc1d185a7842

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/53799.html

相关文章

  • 最全知识图谱综述#1: 概念以及构建技术

    摘要:本质上知识图谱旨在描述真实世界中存在的各种实体或概念及其关系其构成一张巨大的语义网络图,节点表示实体或概念,边则由属性或关系构成。图知识图谱示例知识图谱的架构知识图谱的架构包括自身的逻辑结构以及构建知识图谱所采用的技术体系架构。 引言随着互联网的发展,网络数据内容呈现爆炸式增长的态势。由于互联网内容的大规模、异质多元、组织结构松散的特点,给人们有效获取信息和知识提出了挑战。知识图谱(Know...

    wujl596 评论0 收藏0
  • 前端黑科技:美团网页首帧优化实践

    摘要:在美团支付的前端技术体系里,通过预渲染提升网页首帧优化,从而优化了白屏问题,提升用户体验,并形成了最佳实践。我们团队主要负责美团支付相关的业务,如果网站太慢会影响用户的支付体验,会造成客诉或资损。 前言 自JavaScript诞生以来,前端技术发展非常迅速。移动端白屏优化是前端界面体验的一个重要优化方向,Web 前端诞生了 SSR 、CSR、预渲染等技术。在美团支付的前端技术体系里,通...

    mrli2016 评论0 收藏0
  • 《Webkit技术内幕》之页面渲染过程

    摘要:文章同步到技术内幕之页面渲染过程最近拜读了传说中的技术内幕一书,有很大收获,尤其是对页面渲染有了较深的认识。解析语法分析,基于词法解释器生成的新标记,构建成抽象语法树,解析器尝试将其与某条语法规则进行匹配。 文章同步到github《Webkit技术内幕》之页面渲染过程 最近拜读了传说中的《Webkit技术内幕》一书,有很大收获,尤其是对页面渲染有了较深的认识。由于功力有限,而且书中设...

    vvpvvp 评论0 收藏0
  • 《Webkit技术内幕》之页面渲染过程

    摘要:文章同步到技术内幕之页面渲染过程最近拜读了传说中的技术内幕一书,有很大收获,尤其是对页面渲染有了较深的认识。解析语法分析,基于词法解释器生成的新标记,构建成抽象语法树,解析器尝试将其与某条语法规则进行匹配。 文章同步到github《Webkit技术内幕》之页面渲染过程 最近拜读了传说中的《Webkit技术内幕》一书,有很大收获,尤其是对页面渲染有了较深的认识。由于功力有限,而且书中设...

    adam1q84 评论0 收藏0

发表评论

0条评论

WelliJhon

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<