前端必懂面试题之浏览器输入URL之后发生了什么

 

该题是一道特别经典的面试题了,涉及到前端人员应该掌握的基础网络知识,相信很多前端同学都了解。但是如果问深了,也能问出很多子问题来,也更能考验出面试者的知识深度和灵活运用程度。

浏览器输入URL之后大致有这么几个阶段:

DNS域名解析建立TCP链接发送HTTP请求服务端处理请求服务端返回响应结果关闭TCP连接浏览器解析HTML并渲染布局


1. DNS域名解析

  • 我们访问一个网站的时候,可以通过主机名或者域名来访问。但是绝大多数的时候是使用域名来访问网站。因为相对于主机名的ip地址,域名更能让人记住。
  • 但是TCP/IP协议是通过IP地址来访问的,所以就需要一个机制,将域名转换为IP地址
  • 而DNS服务就是做这件事情,它提供了域名到IP地址之间的解析服务

DNS解析过程1 . 访问www.baidu.com到DNS服务器2 . DNS服务器返回www.baidu.com的IP地址115.182.4X.18X3 . 接着请求IP地址为115.182.4X.18X的服务器4 . 成功访问到www.baidu.com的真正服务器DNS的优先级

本地电脑会将一些经常使用的域名和对应的IP地址建立一个映射关系,并保存到本地host文件中。当DNS解析的时候,会优先从本地host文件中查找映射的IP地址映射

1 . 如果在本地host文件中找到了域名对应的IP地址映射,会直接使用host文件中的IP地址2 . 如果在本地host文件中没有找到域名对应的IP地址映射,会从本地DNS服务器中查找3 . 如果在本地DNS服务器中也没有找到域名对应的IP地址映射,会继续向上一级的DNS服务器发送请求,直到DNS根服务器。如果找到,就进行回传,返回给浏览器。


2. 建立TCP链接

先了解一个知识点: TCP/IP协议族TCP/IP协议族是由四层协议组成的系统。分别是:

  • 1 . 应用层(http)
  • 2 . 传输层(tcp)
  • 3 . 网络层(ip)
  • 4 . 链路层(网络硬件)

 

 

 

我的理解是:我们访问一个网站之前,首先要保证有网络对吧?那么此时,链路层就是ok的。经过上面第一步,已经知道了该域名映射的IP地址,并且可以访问,那么此时网络层也是ok的。那么接下来,就是传输层,也就是TCP。其实这里说的也不是很严谨,传输层不仅仅是TCP一种协议,还有UDP协议。UDP协议是无连接的,因为其不需要连接,所以效率比较高,但是也是因为不需要连接验证 所以安全性和可靠性得不到保障。而TCP是面向连接的,有校验机制。所以用的较广泛。但是也有缺点: 因为提前建立了连接,所以效率就较低。本文说的传输层指的是TCP协议。为了确保连接双方的可靠性,在双方建立连接时,TCP采用了三次握手策略

TCP三次握手建立连接1 . 第一次握手

客户端发送带有SYN标志的连接请求报文段,然后客户端就进入了SYN_SEND状态 等待服务器确认

2 . 第二次握手

服务端接收到了客户端浏览器发送的SYN标志报文段后,需要发送ACK确认报文段对这个SYN报文段进行确认。同时又会向客户端发生自己的SYN请求信息。服务端会将上述信息放到一个报文段(SYN+ACK报文段)中 一同发送给客户端。此时服务端进入SYN_RECV阶段

第三次握手

客户端浏览器接收到了服务端返回的SYN+ACK报文段(请求+返回)后,会向服务器发送新的ACK确认报文段。该报文段发送完毕后,客户端和服务端都进入到了ESTABLISHED状态,此时 就完成了三次握手

 

知其然更要知其所以然,为什么要进行三次握手才能建立TCP连接?

根本原因就是为了确保客户端和服务端双方的接收和发送能力都是ok的。经过第一次握手后,服务端收到了客户端的SYN请求标志,那么此时服务端就可以知道:客户端的发送能力是ok的,服务端本身自己的接收能力是ok的。经过第二次握手后,客户端收到了服务端的SYN+ACK请求+返回标志,那么此时,客户端就可以知道:客户端本身的发送和接收能力是ok的,服务端的发送和接收能力有是ok的。经过第三次握手后,服务端接收到了客户端的ACK返回标志,那么此时,服务端就可以知道:服务端本身自己的接收和发送能力是ok的。

  • 4
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在Vue前端实习的面试中,常常涉及到Vue的生命周期、组件通信、Vue的指令、Vue的路由等方面的问题。以下是一些可能被问到的问题和答案: 1. Vue的生命周期有哪些?每个生命周期的作用是什么? 答:Vue的生命周期分为8个阶段,分别是beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed。每个生命周期的作用如下: beforeCreate:实例刚被创建,数据观测和事件机制都未形成,无法访问data、computed、methods等属性和方法。 created:实例已经创建完成,可以访问data、computed、methods等属性和方法,但是DOM还未生成,无法访问$el。 beforeMount:模板已经编译完成,但是还未挂载到页面上。 mounted:模板已经挂载到页面上,可以访问到DOM元素。 beforeUpdate:数据更新前触发,此时可以对数据进行操作。 updated:数据更新后触发,DOM已经重新渲染。 beforeDestroy:实例销毁前触发,可以进行一些清理工作。 destroyed:实例已经销毁,无法访问data、computed、methods等属性和方法。 2. Vue的组件通信有哪些方式? 答:Vue的组件通信有以下几种方式: props和$emit:父组件通过props向子组件传递数据,子组件通过$emit触发事件向父组件传递数据。 $parent和$children:通过$parent和$children可以访问父组件和子组件的实例,从而实现组件之间的通信。 $refs:通过$refs可以访问子组件的实例,从而实现组件之间的通信。 Vuex:Vuex是Vue的状态管理工具,可以实现组件之间的状态共享。 事件总线:通过事件总线可以实现任意组件之间的通信。 3. Vue的指令有哪些?分别用于什么场景? 答:Vue的指令有以下几种: v-if:根据表达式的值的真假来切换元素的显示和隐藏。 v-show:根据表达式的值的真假来切换元素的显示和隐藏,但是不重新渲染DOM。 v-for:根据数据源循环渲染元素。 v-bind:动态绑定属性或者class、style等。 v-on:绑定事件。 v-model:实现双向数据绑定。 v-text:将元素的textContent设置为表达式的值。 v-html:将元素的innerHTML设置为表达式的值。 4. Vue的路由有哪些?如何实现路由懒加载? 答:Vue的路由有以下几种: hash模式:使用URL的hash值来作为路由地址。 history模式:使用HTML5的history API来实现路由。 abstract模式:不依赖于浏览器URL,主要用于测试。 路由懒加载可以通过Webpack的动态import()方法来实现,例如: const Foo = () => import('./Foo.vue')

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值