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

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



七十一、一个页面从输入 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搭建和管理企业级网站应用
相关文章
|
3月前
|
缓存 前端开发 JavaScript
"面试通关秘籍:深度解析浏览器面试必考问题,从重绘回流到事件委托,让你一举拿下前端 Offer!"
【10月更文挑战第23天】在前端开发面试中,浏览器相关知识是必考内容。本文总结了四个常见问题:浏览器渲染机制、重绘与回流、性能优化及事件委托。通过具体示例和对比分析,帮助求职者更好地理解和准备面试。掌握这些知识点,有助于提升面试表现和实际工作能力。
87 1
|
5月前
|
Web App开发 前端开发 Linux
「offer来了」浅谈前端面试中开发环境常考知识点
该文章归纳了前端开发环境中常见的面试知识点,特别是围绕Git的使用进行了详细介绍,包括Git的基本概念、常用命令以及在团队协作中的最佳实践,同时还涉及了Chrome调试工具和Linux命令行的基础操作。
「offer来了」浅谈前端面试中开发环境常考知识点
|
6月前
|
存储 JavaScript 前端开发
2022年前端js面试题
2022年前端js面试题
130 57
|
6月前
|
存储 XML 移动开发
前端大厂面试真题
前端大厂面试真题
|
4月前
|
Web App开发 JavaScript 前端开发
前端Node.js面试题
前端Node.js面试题
|
6月前
|
存储 前端开发 JavaScript
44 个 React 前端面试问题
【8月更文挑战第18天】
80 2
|
6月前
|
存储 前端开发 JavaScript
44 个 React 前端面试问题
44 个 React 前端面试问题
|
6月前
|
存储 Java
【IO面试题 四】、介绍一下Java的序列化与反序列化
Java的序列化与反序列化允许对象通过实现Serializable接口转换成字节序列并存储或传输,之后可以通过ObjectInputStream和ObjectOutputStream的方法将这些字节序列恢复成对象。
|
3月前
|
存储 缓存 算法
面试官:单核 CPU 支持 Java 多线程吗?为什么?被问懵了!
本文介绍了多线程环境下的几个关键概念,包括时间片、超线程、上下文切换及其影响因素,以及线程调度的两种方式——抢占式调度和协同式调度。文章还讨论了减少上下文切换次数以提高多线程程序效率的方法,如无锁并发编程、使用CAS算法等,并提出了合理的线程数量配置策略,以平衡CPU利用率和线程切换开销。
面试官:单核 CPU 支持 Java 多线程吗?为什么?被问懵了!
|
3月前
|
存储 算法 Java
大厂面试高频:什么是自旋锁?Java 实现自旋锁的原理?
本文详解自旋锁的概念、优缺点、使用场景及Java实现。关注【mikechen的互联网架构】,10年+BAT架构经验倾囊相授。
大厂面试高频:什么是自旋锁?Java 实现自旋锁的原理?

热门文章

最新文章

  • 1
    【Java若依框架】RuoYi-Vue的前端和后端配置步骤和启动步骤
  • 2
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 3
    【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 4
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 5
    详解智能编码在前端研发的创新应用
  • 6
    巧用通义灵码,提升前端研发效率
  • 7
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 8
    智能编码在前端研发的创新应用
  • 9
    【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
  • 10
    抛弃node和vscode,如何用记事本开发出一个完整的vue前端项目