用户从输入URL到页面显示都发生了什么

先上结论

  • 用户输入网址
  • DNS解析
  • TCP连接
  • 服务器处理请求
  • 浏览器解析html为dom树
  • 解析css为cssom树
  • dom+cssom生成渲染树
  • 加载js并执行

输入URL

  • 定义:url是统一资源定位系统,指定信息位置,生活中一般称之为网站网址

  • url组成

    • https:协议,https=http+ssl(ssl用于加密,保证http传输通道安全)
    • juele.cn:主机
    • 433:端口号
    • 5562/search:路径
    • query=url组成:查询参数,比如百度搜索 ”url参数“,当你在输入框里输入它并回车后,百度的地址栏中就会显示你的查询参数
    • #bottom:锚点,用于页面跳转时定位到相应内容。比如在页面html文件底部的某元素上加上属性 ”id=”bottom“,则别的网页携带bottom锚点跳转到该网页后就会直接下拉到底部相应位置
    https://juele.cn: 433/5562/search?query=url组成/#bottom
    
  • URL解析

    • 输入URL后,浏览器会解析出上述信息,并发送http请求
    • 发送请求前,会检查是否命中强制缓存,没有则继续检查是否命中协商缓存,还没有的话再发送请求从服务器获取资源(缓存通俗说,是之前的访问记录,如果访问过该网址并有记录,则直接用该记录,不去服务器请求资源,更高效)

DNS解析

  • 发送http请求前,浏览器得获取要访问的网页的ip地址

  • DNS指域名系统,比如www.baidu.com就是一个域名;IP地址是一个32位的二进制数,通常被分为4个8位的二进制数。比如百度的ip为202.108.22.5

  • DNS解析就是将域名解析为ip地址

  • 域名和ip一般都是用于表示主机或网络地址的,前者便于人们理解,后者便于机器理解,所以便出现了两种形式,之间还得转换(也就是解析)

TCP连接

  • 既然浏览器识别了IP地址,那么就得和它建立联系了。

  • 这里就牵扯到了最常见的TCP连接方式:三次握手

    • 不讲复杂的东西,就谈通俗理解。用户(客户端)想访问网页(服务端),给网页发送 “建立连接请求”(一次握手),网页收到消息后,告诉用户 “你的消息我收到了,可以建立连接”(二次握手),用户再发一次消息 “你的消息我也收到了,即将建立连接”(三次握手),然后TCP连接便建立了
    • **为什么要三次握手呢?**根本原因:TCP是可靠传输,得保证可靠性。首先用户得确认网页是否可以建立连接(一次),网站收到消息后,告诉用户可以(二次),此时用户知道了自己的发送和接收功能都没问题,然后告诉网页可以建立连接了(三次),网页收到消息后就知道了自己的发送和接收功能也没问题,然后就可以放心的建立连接了

HTTP请求

  • TCP连接建立后,就可以发送请求(请求报文)了
  • 请求报文包括报文首部、空行、报文主体,报文首部包含了请求方法、请求URL、HTTP协议版本,比较关键
    • 请求方法:get、head、post、put、delete、trace、options

服务端处理请求

  • 服务器解析报文

  • 返回响应报文,其包含报文首部、空行、报文主体

  • 就前端知识来说,服务器一般返回先html文件,如果浏览器加载html文件时遇到引入的css文件,会再次向服务器请求对应的文件

  • 响应时的http状态码:1xx(临时响应)、2xx(成功响应)、3xx(已重定向:跳转到其他网页)、4xx(客户端请求错误)、5xx(服务端错误)

TCP关闭请求(四次挥手)

  • 通俗理解:用户(客户端)想关闭网页(服务端),给网页发送 “关闭连接请求”(一次挥手),网页收到消息后,告诉用户 “你的消息我收到了”(二次挥手),如果网页准备好了关闭连接则再次向用户发送消息“可以关闭连接”(三次挥手),用户再发一次消息 “你的消息我也收到了,同意关闭连接”(四次挥手),然后TCP连接便完全关闭了
  • **为什么比三次握手多了一次?**显然,第二次握手相当于二次、三次挥手的结合,这里没有一步到位是因为,关闭连接时,网页得先检查并确定自己不再有需要发送的数据,才能告诉用户 “可以关闭连接”

解析html为dom树

  • 转换:浏览器将读取的HTML内容,按照指定的编码他们转换为各个字符(例如utf-8编码,将 ”郭沫若“ 转换为 “郭沫若”)
  • 令牌化:浏览器将字符串转换成各种令牌
  • 词法分析:令牌转换成定义其属性和规则的 “对象”
  • DOM构建:按照html节点间的关系,创建的对象链接在一个树(数据结构)内,比如html对象是body对象的父节点,以此类推

解析css为cssom树

  • 流程和dom树生成差不多,转换、令牌化、词法分析、cssom构建

生成渲染树(render-tree)

  • dom树与cssom树结合生成渲染树
  • 渲染树只包含渲染可见节点(比如被css隐藏的节点就不可见)
  • 布局,计算每个对象的精确位置和大小
  • 绘制,使用最终渲染树将像素渲染到屏幕上

加载js

  • 创建window对象:window是全局执行环境,所有的全局变量和函数都是它的属性和方法。而dom树也会映射在它的document对象上,dom操作也都是通过这个对象操作
  • 加载文件
  • 预编译(执行Script代码前)
    • 全局预编译:全局函数提前声明、全局变量提前声明,全都挂载到window上
    • 局部预编译:类似全局预编译
  • 解释执行
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 好的,我了解了。关于您的问题,整个过程可以分为以下几个步骤: 1. 输入URL:当您在浏览器地址栏中输入URL时,浏览器会将该URL发送到域名系统(DNS),通过域名系统将URL转化为IP地址。 2. 发送HTTP请求:浏览器根据URL发起HTTP请求,请求访问Web服务器的特定资源。 3. 服务器响应:当Web服务器接收到请求时,它将处理请求并返回所请求的资源。 4. 浏览器渲染:浏览器收到服务器响应后,它将解析HTML源代码,并根据CSS样式表和JavaScript代码来渲染页面。 5. 页面展示:最终,浏览器将HTML、CSS和JavaScript代码解析毕后,它会在屏幕上展示出页面内容。 以上就是从输入URL页面展示的整个过程,希望能够帮到您。 ### 回答2: 当我们在浏览器的地址栏中输入URL时,整个过程可以分为以下几个步骤: 1. DNS解析:浏览器首先会根据URL中的域名(例如www.example.com)进行DNS解析,将域名解析为对应的IP地址。这一步骤是为了找到存放网页的服务器。 2. 建立TCP连接:浏览器通过IP地址与服务器建立TCP连接。TCP协议提供可靠的连接,确保数据的整性。 3. 发起HTTP请求:一旦建立了TCP连接,浏览器会向服务器发起HTTP请求,请求包括请求方法、请求头、请求体等信息。请求方法可以是GET、POST等,服务器根据请求的不同做出相应的响应。 4. 服务器处理请求并响应:服务器接收到浏览器的请求后,会根据请求的内容进行相应的处理。处理包括读取数据库、执行后端代码等操作。之后,服务器会生成响应对象,包含响应状态码、响应头、响应体等信息。 5. 接收服务器响应:浏览器接收到服务器的响应后,根据响应头中的Content-Type确定响应的数据类型。如为HTML类型,则浏览器会将响应的HTML代码解析成DOM树。 6. 解析页面并渲染:浏览器根据DOM树构建渲染树,并依据CSS样式对各元素进行布局和样式计算,最终生成页面的渲染结果。同时,浏览器也会执行页面中的JavaScript代码。 7. 页面展示:最后,浏览器将渲染好的页面内容显示用户的视窗中,用户可以看到页面的展示效果。 总结起来,从输入URL页面展示,经历了DNS解析、建立TCP连接、发起HTTP请求、服务器处理请求并响应、接收服务器响应、解析页面并渲染等多个步骤。最终,浏览器将渲染好的页面内容显示用户。 ### 回答3: 从输入URL页面展示,大致经历如下步骤: 1. 域名解析:当我们在浏览器中输入URL后,首先会进行域名解析。浏览器会向DNS服务器发送域名请求,获取该域名对应的IP地址。 2. 建立连接:浏览器通过获取到的IP地址与Web服务器建立TCP连接。这个过程使用的是三次握手协议,确保连接的可靠性。 3. 发送请求:建立连接后,浏览器会发送HTTP请求给Web服务器,请求的内容包括请求的类型(GET/POST等)、地址、头部信息、可能还包括cookie等相关信息。 4. 服务器处理请求:Web服务器收到请求后,会根据请求内容进行处理。处理过程可能包括调取数据库、运行后台程序等动作。 5. 服务器响应:Web服务器根据请求的内容,返回一个HTTP响应给浏览器。响应的内容包括状态码、响应头部、实际的网页内容等。 6. 下载页面资源:浏览器接收到服务器返回的响应后,会开始下载网页的资源,如HTML、CSS、JavaScript、图片等。浏览器会根据响应头部中的Content-Type确定如何解析资源。 7. 页面渲染:当所有的资源下载成后,浏览器会根据HTML结构、CSS样式,解析并渲染出网页。浏览器会从上到下解析HTML文档,解析过程包括构建DOM树、计算CSS样式、布局页面等。 8. JavaScript执行:在渲染过程中,浏览器会遇到JavaScript代码。浏览器会逐行解析执行JavaScript代码,并根据代码修改DOM树和样式,可能还会触发网络请求等。 9. 页面展示:当页面渲染和JavaScript执行成后,页面便可以整地展示给用户了。用户可以看到页面内容,与页面进行交互。 以上仅是一个大致的过程,实际上还有很多细节和额外的步骤,比如缓存机制、重定向、Cookie处理等等。不同的浏览器、服务器也可能会有些许差异。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值