前端面试题每日一学_2

news2024/11/27 9:58:37

今日一题:

下面JS代码执行后,最终的三个console.log的输出结果是什么?
var obj = { num: 1 };
var arr1 = [1, 2, obj];
var arr2 = arr1.slice(1);
arr2[0]++;
arr2[1].num++;
obj.num++;
arr1[2].num++;
console.log(arr1[1] === arr2[0]);
console.log(arr1[2] === arr2[1]);
console.log(obj.num);

​ 答案和解析可在文章底部查看。

今日面试题:

1、浏览器地址栏中输入URL到显示页面,中间都经历了什么?
① 输入URL并回车之后,首先查找是否有对应资源的缓存。

​ 浏览器查找资源缓存,如果找到该资源的缓存,则将缓存中的资源直接返回显示。

​ 如果未缓存该资源,则会继续向下执行。

② 解析URL,获取对应的协议、ip、端口等信息。

​ 获取主机ip地址,会按照以下路径进行查找:浏览器缓存 — 系统缓存 — 系统的hosts文件 — 路由缓存 — DNS服务器。

③ 浏览器根据获取的相关信息,构建HTTP请求,进行三次握手,建立TCP链接,发起请求。

​ TCP三次握手,下面有详细介绍。

④ 服务器接收请求,并转发到具体应用程序进行处理,将对应的html作为响应结果通过TCP链接返回给浏览器。
⑤ 浏览器接收请求响应结果,并关闭TCP连接,关闭时需要进行四次挥手。

​ TCP四次挥手,下面有详细介绍。

⑥ 浏览器解析响应的HTML文档,构建DOM树和CSSOM树,并加载相关资源。

​ 在构建DOM树时,如果遇到同步 JS 代码,则暂停构建DOM树,先去执行 JS,执行结束之后,再继续构建DOM树 。如果是异步的JS代码,则会边构建DOM树,边加载JS代码,并在加载完成后尽快执⾏。

​ DOM树和CSSOM树构建完成之后,合并构建一棵渲染树,从DOM树的根节点遍历所有可⻅节点,对每个可⻅节点,找到对应的CSSOM规则并应⽤,然后布局和渲染页面。其中不可见的节点包括:被CSS隐藏的节点,如:设置display: none;的节点;或者像是scriptmeta等本身就不可见的节点。

​ 在渲染页面时,如果遇到了图片、视频等外部资源,则会并行下载这些资源(浏览器对每个域的并行下载数量有限制,一般为4-6个)。

⑦ 在HTML解析过程中,会逐步显示页面内容,直到页面渲染结束,内容全部展示。
2、请解释一下TCP建立连接时的三次握手?
① 第一次握手

​ 客户端先发送一个带有SYN标志的数据包给服务端,请求建立连接,并进入SYN_SENT等待状态,在一定的延迟时间内等待服务端的回复。如果客户端在规定延迟时间内没有收到回复则默认服务端没有收到请求,而再次发送,直到收到回复为止。

② 第二次握手

​ 服务端收到SYN数据包后,先对客户端的SYN进行确认,确认后返回一个带有SYN/ACK标志的数据包,确认自己收到了客户端的请求,并进入SYN_RECV状态,等待客户端回应是否收到服务端的回应。

② 第三次握手

​ 客户端收到SYN/ACK数据包后,再向服务端发送一个带有ACK标志的确认数据包,确认收到了服务端的回应。服务端接收数据包并确认后,客户端和服务端进入ESTABLISHED(TCP连接成功)状态。至此完成三次握手,可以开始传输数据了。

在这里插入图片描述

注:SYN是指同步序列编号(Synchronize Sequence Numbers)

3、请解释一下TCP断开连接时的四次挥手?
① 第一次挥手

​ 客户端进程向服务端发出连接释放报文,停止发送数据,并进入FIN-WAIT-1(终止等待1)状态,等待服务端的确认。

② 第二次挥手

​ 服务端接收到客户端的连接释放报文,并返回一个确认报文,服务端进入CLOSE-WAIT(关闭等待状态)。客户端接收到服务器的确认请求之后,进入FIN-WAIT-2(终止等待2)状态,等待服务端发送连接释放报文。此时TCP连接处于半关闭状态,即客户端不能向服务端发送数据,但服务端可以继续向客户端发送数据,客户端也能正常接收数据,这种状态还会持续一段时间,也就是服务端CLOSE-WAIT 状态的持续时间。

③ 第三次挥手

​ 服务端将所有数据发送完毕后,向客户端发送连接释放报文,并且服务器进入LAST-ACK(最后确认)状态,等待客户端的回应。

④ 第四次挥手

​ 客户端收到服务端连接释放报文后,返回一个确认报文,并且客户端进入TIME-WAIT(时间等待)状态,但TCP连接还需要经过2MSL(MSL-最长报文段寿命,一般为两分钟)的等待时间,如果服务端接收到确认报文,且没有传输新的数据,客户端就会关闭TCP连接,进入CLOSED状态。服务端在接收到客户端返回的确认报文之后,会立即进入CLOSED状态,所以服务端进入CLOSED状态的时间会比客户端早一些。

​ 2MSL等待时间的主要目的是为了确保服务端收到了最后的确认报文,如果服务器未收到确认报文,则会向客户端发送重传FIN报文,客户端会在2MSL等待时间内重新发送ACK报文。

在这里插入图片描述

今日一题答案:false、true、4

答案解析:

​ 本题考验的重点是简单数据类型和引用数据类型的区别,下面我们来逐句分析这段代码

var obj = { num: 1 };

​ 这一句是通过字面量在内存中声明了一个对象数据,并将该对象的引用地址赋值给变量obj,此时我们应该注意对象数据属于引用类型。

var arr1 = [1, 2, obj];

​ 这一句是通过字面量在内存中声明了一个数组,并把数组的引用地址赋值给变量arr1,其中前两个元素为Number类型,第三个元素是前面声明的对象变量obj,也就是对内存中对象数据的引用。

var arr2 = arr1.slice(1);

​ 这一句是借助数组的slice()方法从arr1中截取生成一个新数组。此时应该想到slice(1) 截取的是下标从1到最后一个元素,返回的是截取元素组成的新数组[2, obj],且不会对原数组arr1产生影响。

​ 由于2是简单数据类型,所以会在内存中拷贝数据,arr2中的2arr1中的2无关联,是两份独立的数据;但是obj是对象数据的引用(关键),因此拷贝的是对数据的引用,arr2中的objarr1中的obj指向内存中的同一份数据。

arr2[0]++;

​ 这一句将arr2中第一个元素2进行加一操作,此时arr2的内容变为:[3, obj]

arr2[1].num++;

​ 这一句是将arr2中第二个元素obj中的num字段进行加一操作,此时obj的内容变为:{ num: 2 }

obj.num++;

​ 这一句是直接操作obj变量中的num字段进行加一操作,此时obj的内容变为:{ num: 3 }

arr1[2].num++;

​ 这一句是将arr1中第三个元素obj中的num字段进行加一操作,此时obj的内容变为:{ num: 4 }。至此,所有数据操作都已完成,此时声明的三个变量的值分别为:

// obj的值
{ num: 4 }

// arr1的值
[1, 2, obj]

// arr2的值
[3, obj]

​ 根据上面各个变量的值,我们开始看第一个console.log语句

console.log(arr1[1] === arr2[0]);
// arr1[1] 的值为 2
// arr2[0] 的值为 3
// 所以 2 === 3 结果为false 

​ 第二个console.log语句

console.log(arr1[2] === arr2[1]);
// arr1[2] 的值为 obj 注意是引用类型
// arr2[1] 的值为 obj 注意是引用类型
// 两者的 obj 指向同一份数据
// 所以 obj === obj 结果为true

​ 第三个console.log语句

console.log(obj.num);
// obj.num 初始值为1
// arr2[1].num++; 进行了一次+1 值为2
// obj.num++; 进行第二次+1 值为3
// arr1[2].num++; 进行第三次+1 值为4
// 所以最终结果为 4

请关注公众号,查看更多优质资源:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2062888.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

家政预约小程序源码+快速搭建全攻略

前言: 家政预约小程序是一种便捷的家政服务预约平台,它通过互联网技术将家政服务资源与用户连接起来,为用户提供高效、便捷的家政服务预约体验。 一、家政服务小程序开发架构 前端:小程序前端开发主要使用的技术包括HTML、CSS、…

向量嵌入是什么?理解LLM数据表示的基础

向量嵌入将数据转换为数学方程,赋予了人工智能的认知能力,但它们是如何使机器能够“学习”和“成长”的呢? 向量嵌入是什么? 向量嵌入这玩意儿,其实就是给数据穿上一件数学的外衣,让它们之间的关系和相似…

【SQL】三角形判断

目录 题目 分析 代码 题目 表: Triangle ------------------- | Column Name | Type | ------------------- | x | int | | y | int | | z | int | ------------------- 在 SQL 中,(x, y, z)是该表的主键列。 该表的每一行包…

生信圆桌x生信豆芽菜:生物信息学新手的学习与成长平台

生信豆芽菜是一个专门为生物信息学初学者创建的学习与交流平台,致力于帮助新手们快速入门并掌握生信分析的基础知识与技能。随着生物信息学在科研中的重要性日益提升,越来越多的学生和研究人员开始接触这一领域。生信豆芽菜正是为了满足这些新手的需求&a…

土壤墒情固定监测站的工作原理

TH-GTS03土壤墒情固定监测站是一种专门用于监测土壤墒情信息的设备,它通过一系列精密的传感器和数据处理系统,实时、准确地获取土壤的水分含量、温度以及其他相关参数,为农业生产、生态保护和水资源管理等提供重要依据。 土壤墒情固定监测站通…

实用库/函数之链表的使用

目录 1.1结点的建立 1.2为链表结点分配内存空间 1.stdlib:malloc函数与free函数 2.new运算符与delete运算符 1.3链表的基本操作 1.链表的创建 (1)头插法 (2)尾插法 2.查找 3.插入 4.删除 5.总结(小tip) 1.4静态链表(类似于数组) 1.1结点的建立 typedef str…

基于Java语言实现Creo二次开发的环境搭建

# 安装JAVA JDK 通常我们下载JDK在Oracle(甲骨文公司)官网下载即可:Java Downloads | Oracle 双击下载的软件后进行安装。安装过程可以选择自己想安装的位置(安装的路径中最好不要存在中文和空格) 这里由于我们是先安装Java编译及运行环境默…

上传PDF、DOC文件到SAP HCM系统中案例

背景:公司最近在上电子签系统,以实现劳动合同、保密协议等文件的去纸质化,保存为电子档文件,而企业的信息化的中心是SAP ERP,于是领导要求将签好的电子文件存储到HCM中。 题主写了如下代码实现需求: FUNCTION ZHR_SA…

数据恢复技巧:Windows降级后如何恢复数据

将 Windows 11 回滚到 Windows 10 或将 Windows 10 回滚到 Windows 7 后文件消失了?Windows降级后如何恢复数据?在这里,这篇关于MiniTool的帖子将向您展示最好的数据恢复软件,以帮助您执行Windows文件恢复。 Windows 降级后&#…

短视频SDK解决方案,Flutter赋能,跨平台无缝体验

如何快速、高效地创作出既吸引人眼球又富有个性的短视频,成为了众多内容创作者、APP开发者及企业营销团队共同关注的焦点。美摄科技作为视频技术领域的佼佼者,凭借其强大的技术实力与创新精神,推出了基于Flutter框架的短视频SDK解决方案&…

NC 矩阵元素查找

系列文章目录 文章目录 系列文章目录前言 前言 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站,这篇文章男女通用,看懂了就去分享给你的码吧。 描述 已知一个有序…

npm error network ‘proxy‘ config is set properly. See: ‘npm help config‘

使用" npm install " 或者 " npm i " 初始化项目依赖失败 npm error network proxy config is set properly. See: npm help config 出现这样的解决方法如下: 1.查看代理 //代理 npm config get proxy //缓存 npm config get npm config …

【工控】线扫相机小结

背景简介 我目前接触到的线扫相机有两种形式: 无采集卡,数据通过网线传输。 配备采集卡,使用PCIe接口。 第一种形式的数据通过网线传输,速度较慢,因此扫描和生成图像的速度都较慢,参数设置主要集中在相机本身。第二种形式的相机配备采集卡,通常速度更快,但由于相机和…

汇智ERP Upload.aspx 文件上传致RCE漏洞复现

0x01 产品简介 汇智ERP是一款由江阴汇智软件技术有限公司开发的企业资源规划(ERP)软件,旨在通过信息化手段帮助企业优化业务流程,提升管理效率,增强综合竞争力。适用于各类企业,包括大型企业、中小型企业以及集团化企业。根据企业规模和业务需求,汇智ERP提供了不同的版…

权重pt文件(.pth后缀)如何查看?|编程tips·24-08-22

权重pt文件(.pth后缀)如何查看? 小罗碎碎念 我们在查看源码的时候,如果是预训练的模型,或者我们之前说的基础模型,那么就会涉及到一个内容——权重。但是可能有的人没有具体接触过,只是停留在“…

(苍穹外卖)day01项目介绍以及环境搭建

(新版)苍穹外卖:前后端分离(主流)的企业级实战项目---外卖点餐 用户在线点餐 可作为毕业设计 开发方式由传统开发升级为前后端分离开发 用户端实现由H5升级为小程序 服务端实现由有状态升级…

有界注意力:增强文本到图像合成中的控制

人工智能咨询培训老师叶梓 转载标明出处 传统的文本到图像扩散模型虽然能够生成多样化和高质量的图像,但在处理包含多个主题的复杂输入提示时,往往难以准确捕捉预期的语义。特别是当这些主题在语义上或视觉上相似时,模型生成的图像常常出现语…

SpringBootWeb 篇-深入了解 SpringBoot + Vue 的前后端分离项目部署上线与 Nginx 配置文件结构

🔥博客主页: 【小扳_-CSDN博客】 ❤感谢大家点赞👍收藏⭐评论✍ 文章目录 1.0 云服务器的准备 2.0 Xshell 和 Xftp 软件 2.1 Xshell 介绍 2.2 Xftp 介绍 3.0 在云服务器进行环境配置 3.1 安装 JDK 3.2 安装 MySQL 3.3 安装 Nginx 4.0 SpringB…

换代危机,极氪不得不闯的一关

文|刘俊宏 编|王一粟 “今年,不容我们有任何犯错的机会,如果犯错,一定会全盘皆输。” 面临智能化愈发重要的汽车市场,极氪智能科技CEO安聪慧曾在今年初提醒着极氪汽车(下简称极氪&#xff09…

团队管理三大核心要点

团队管理不仅关乎任务的完成效率,更关乎团队成员的成长与团队的持续发展。一个高效、和谐的团队背后,往往离不开管理者对以下几个关键要点的深刻理解和有效实践。 一、以人为本 管理的本质不是简单地“管人”,而是通过管事来激发人的潜能&a…