前端面试基础题库——关于底层原理的面试题

本文涉及的产品
容器服务 Serverless 版 ACK Serverless,317元额度 多规格
容器服务 Serverless 版 ACK Serverless,952元额度 多规格
简介: 前端面试基础题库——关于底层原理的面试题



七十一、一个页面从输入 URL 到页面加载显示完成,这个过程中都发生了什么

       1、浏览器查找域名对应的 IP 地址(DNS 查询:浏览器缓存->系统缓存->路由器缓存->ISP DNS 缓存->根域名服务器)

       2、浏览器向 Web 服务器发送一个 HTTP 请求(TCP 三次握手)

       3 服务器 301 重定向(从 HTTP://example.com  重定向到 HTTP://www.example.com

       4、浏览器跟踪重定向地址,请求另一个带 www 的网址

       5、服务器处理请求(通过路由读取资源)

       6、服务器返回一个 HTTP 响应(报头中把 Content-type 设置为 'text/html')

       7、浏览器进 DOM 树构建

       8、浏览器发送请求获取嵌在 HTML 中的资源(如图片、音频、视频、 CSS、JS 等)

       9、浏览器显示完成页面

       10、浏览器发送异步请求


七十二、什么是 TCP 连接的三次握手

       TCP 是因特网中的传输层协议,使用建立连接,完成三次握手, 与服务器开始传送。


       第一次握手:建立连接时,发送包(syn=j)到服务器,并进入等待状态, 等待服务器确 认; SYN:同步序列编号(Synchronize Sequence Numbers)。

       第二次握手: 收到 SYN 包,必须确认客户的 SYN(syn=j+1),同时自己也发送一个   SYN包(syn=k),即 SYN+ACK 包,此时服务器进入等待状态;

       第三次握手:客户端收到服务器器的 SYN+ACK 包, 向服务器发送确认包 ACK(ack=k+1), 此包发送完毕, 客户端和服务器进入(TCP 连接成功) 状态,完成三次握手。


       TCP 协议优点

       TCP 发送的包有序号,对方收到包后要给一个反馈,如果超过一定时间还没收到反馈就自动执 行超时重发,因此 TCP 最大的优点是可靠。


       TCP 协议缺点

       很简单,就是麻烦, 如果数据量比较小的话建立连接的过程反而占了大头,不断地重发 也会造成网络延迟, 因此比如视频聊天通常就使用 UDP,因为丢失一些包也没关系,速度流畅才是重要的。


七十三、为什么 TCP 连接需要三次握手四次挥手


       为什么是三次握手

为了防止已失效的连接请求报文段突然有送到了服务器, 因而产生错误,假设两次握手时,


客户发出的第一个请求连接报文段在某一网络节点长时间滞留, 以致延误到连接释放后才 到达服


务器。服务器收到失效的连接请求报文段后,认为是客户又发出一次新的连接请求。于是 向客户


发送确认报文段,同意建立连接, 此时在假定两次握手的前提下,连接建立成功。这样会导致服务器的资源白白浪费


       为什么是四次挥手

               TCP 协议是全双工通信, 这意味着客户端和服务器端都可以向彼此发送数据, 所以关


闭连接 是双方都需要确认的共同行为,假设是三次挥手时, 首先释放了客户到服务器方向的连


接, 此时 TCP 连接处于半关闭状态,这时客户不能向服务器发送数据,而服务器还是可以向客 户


发送数据。如果此时客户收到了服务器的确认报文段后,就立即发送一个确认报文段, 这会导致


服务器向客户还在发送数据时连接就被关闭。这样会导致客户没有完整收到服务器所发的报文段


七十四、介绍一下 websocket

       什么是 websocket

       websocket 是一种网络通信协议, 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通信的协议,这个对比着 HTTP 协议来说,HTTP 协议是一种无状态的、无连接的、单向的应用 层协议,通信请求只能由客户端发起,服务端对请求做出应答处理。 HTTP 协议无法实现服务器 主动向客户端发起消息,websocket 连接允许客户端和服务器之间进行全双工通信,  以便任一方都可以通过建立的连接将数据推送到另一端。 websocket 只需要建立一次连接,  就可以一直保持连接状态。

七十五、setTimeout、Promise、Async/Await 的区别

       事件循环中分为宏任务队列和微任务队列

               宏任务(macrotask):在新标准中叫 task

               主要包括:script(整体代码),setTimeout,setInterval,setImmediate,I/O,ui rendering 微任务(microtask):在新标准中叫 jobs

               主要包括:process.nextTick, Promise,MutationObserver(html5 新特性)


       setTimeout、Promise、Async/Await 的区别

               setTimeout 的回调函数放到宏任务队列里, 等到执行栈清空以后执行

               Promise.then 里的回调函数会放到相应宏任务的微任务队列里,等宏任务里面的同步代码 执  行完再执行

               async 函数表示函数里面可能会有异步方法,await 后面跟一个表达式

               async 方法执行时, 遇到 await 会立即执行表达式, 然后把表达式后面的代码放到微任务队 列里,让出执行栈让同步代码先执行


 

相关实践学习
通过Ingress进行灰度发布
本场景您将运行一个简单的应用,部署一个新的应用用于新的发布,并通过Ingress能力实现灰度发布。
容器应用与集群管理
欢迎来到《容器应用与集群管理》课程,本课程是“云原生容器Clouder认证“系列中的第二阶段。课程将向您介绍与容器集群相关的概念和技术,这些概念和技术可以帮助您了解阿里云容器服务ACK/ACK Serverless的使用。同时,本课程也会向您介绍可以采取的工具、方法和可操作步骤,以帮助您了解如何基于容器服务ACK Serverless构建和管理企业级应用。 学习完本课程后,您将能够: 掌握容器集群、容器编排的基本概念 掌握Kubernetes的基础概念及核心思想 掌握阿里云容器服务ACK/ACK Serverless概念及使用方法 基于容器服务ACK Serverless搭建和管理企业级网站应用
相关文章
|
22天前
|
JavaScript 前端开发
【Vue面试题二十五】、你了解axios的原理吗?有看过它的源码吗?
这篇文章主要讨论了axios的使用、原理以及源码分析。 文章中首先回顾了axios的基本用法,包括发送请求、请求拦截器和响应拦截器的使用,以及如何取消请求。接着,作者实现了一个简易版的axios,包括构造函数、请求方法、拦截器的实现等。最后,文章对axios的源码进行了分析,包括目录结构、核心文件axios.js的内容,以及axios实例化过程中的配置合并、拦截器的使用等。
【Vue面试题二十五】、你了解axios的原理吗?有看过它的源码吗?
|
22天前
|
安全 Java 容器
【Java集合类面试二十七】、谈谈CopyOnWriteArrayList的原理
CopyOnWriteArrayList是一种线程安全的ArrayList,通过在写操作时复制新数组来保证线程安全,适用于读多写少的场景,但可能因内存占用和无法保证实时性而有性能问题。
|
22天前
|
JavaScript 前端开发
【Vue面试题二十七】、你了解axios的原理吗?有看过它的源码吗?
文章讨论了Vue项目目录结构的设计原则和实践,强调了项目结构清晰的重要性,提出了包括语义一致性、单一入口/出口、就近原则、公共文件的绝对路径引用等原则,并展示了单页面和多页面Vue项目的目录结构示例。
|
26天前
|
存储 XML 移动开发
前端大厂面试真题
前端大厂面试真题
|
7天前
|
消息中间件 Java 编译器
面试官:说说Lambda表达式底层原理?
面试官:说说Lambda表达式底层原理?
15 2
面试官:说说Lambda表达式底层原理?
|
22天前
|
存储 缓存 JavaScript
【Vue面试题十八】、你知道vue中key的原理吗?说说你对它的理解
这篇文章详细介绍了Vue中的`keep-alive`组件,解释了其作用是缓存不活动的组件实例以避免重复渲染DOM,并阐述了`keep-alive`的使用场景、props属性配置、以及如何通过源码理解其缓存机制和原理。
【Vue面试题十八】、你知道vue中key的原理吗?说说你对它的理解
|
22天前
|
JavaScript 算法
【Vue面试题十七】、你知道vue中key的原理吗?说说你对它的理解
这篇文章深入探讨了Vue中`key`的原理及其作用,解释了`key`是为每个虚拟DOM节点提供的唯一标识符,作为`diff`算法的优化策略,有助于更快速准确地识别和重用DOM元素。文章通过实际代码示例展示了使用`key`与否在列表渲染时对DOM操作的影响,分析了`key`在不同场景下的性能表现,并提供了源码层面的分析,解释了Vue如何通过`key`来识别和更新虚拟DOM节点。
【Vue面试题十七】、你知道vue中key的原理吗?说说你对它的理解
|
22天前
|
Java
【Java集合类面试二十一】、请介绍TreeMap的底层原理
TreeMap基于红黑树实现,能够根据键的自然顺序或提供的Comparator排序,其基本操作的时间复杂度为O(log N)。
|
22天前
|
Java
【Java集合类面试二十】、请介绍LinkedHashMap的底层原理
LinkedHashMap的底层原理是在HashMap的基础上,通过维护一条双向链表来保持键值对的插入和遍历顺序,同时继承HashMap的多数方法并重写部分方法以维护链表。
|
22天前
|
存储 前端开发 JavaScript
44 个 React 前端面试问题
【8月更文挑战第18天】
23 2