小红书前端笔试题目+解答 2023.3.26

笔试得分60%一般通过，面试答对80%才能通过

单选20题40分+编程3题60分

知识点覆盖到HTML+CSS+JS+数据库+操作系统+数据结构与算法

小红书：前端，计算机基础，常规算法（前端：计算机基础=3：1）

计算机基础（数据库，操作系统，数据结构与算法，计算机网络）

编程：

1.加密：a-z中的任意字母加密模式为往后移动三位，超过z的，会循环到a处，求加密前的字符串

2.K排序：每次取数组中k个元素，排好序后，放到数组末尾，其他的元素往前移动，求最少需要几趟排序

3.涂色：对数组Left，Right区间的元素，与指定的X进行‘|’，‘&’，‘=’，求M趟后的数组

选择题

提交用户名或password使用的方法：post，pull，push，get

当您需要提交用户名和密码（如登录操作）时，应该使用HTTP的POST方法。POST方法用于向服务器发送数据，以便创建或更新资源。在这种情况下，数据通常是表单中的用户名和密码。与GET方法相比，POST方法更安全，因为它不会在URL中公开传输敏感信息，而是将其放在请求正文中。
这里是其他HTTP方法的简要概述：
GET：用于从服务器检索信息，但不应用于发送敏感数据，因为数据会在URL中传输。
PUT：用于更新服务器上的现有资源，通常需要提供完整的资源数据。
PATCH：类似于PUT方法，但只更新资源的部分属性，而不是整个资源。
DELETE：用于删除服务器上的资源。

进程七态模型和进程五态模型相比，新增的状态有哪些

五态模型和七态模型都是用于描述操作系统中进程生命周期的模型。五态模型包括以下五种状态：
新建（New）：进程刚被创建，等待系统分配资源。
就绪（Ready）：进程已获得所需资源，等待分配到CPU时间片进行执行。
运行（Running）：进程正在CPU上运行。
阻塞（Blocked）：进程在等待某个事件（如I/O操作完成）时被暂停，直到事件完成。
结束（Terminated）：进程完成执行并释放其占用的资源。
七态模型在五态模型的基础上添加了两个额外的状态：
挂起就绪（Suspended Ready）：在这个状态下，进程已被移出内存（换出）并存储在磁盘上，但仍然具备执行所需的所有资源。当系统资源充足时，挂起就绪的进程可以重新加载到内存并返回到就绪状态。
挂起阻塞（Suspended Blocked）：与挂起就绪类似，进程已被移出内存并存储在磁盘上。不过，在这种情况下，进程仍然在等待某个事件完成。当该事件完成且系统资源充足时，进程可以重新加载到内存并转换为阻塞状态。
因此，相较于五态模型，七态模型新增了两个状态：挂起就绪（Suspended Ready）和挂起阻塞（Suspended Blocked）。这些状态反映了进程在磁盘上被换出的情况，以便更好地管理系统资源。

不属于触摸/手势事件的是：touchcancle，gesturechange，gestureend，getsturemove

在提供的选项中，不属于触摸/手势事件的是：getsturemove。这个选项中的单词拼写错误，因此它不是一个有效的触摸/手势事件。
其他选项均属于触摸/手势事件：
touchcancel：当触摸事件被取消时触发，例如当触摸点离开了浏览器窗口或者操作被系统中断。
gesturechange：当两个手指放在屏幕上且移动时触发，可用于处理缩放和旋转等手势。
gestureend：当两个手指放在屏幕上并最终离开时触发，表示手势操作已经完成。

MYSQL的使用方法中，错误的是：

a. OPEN 打开游标；

b. DELETE 删除游标；

c.FETCH INTO 获取游标处数据；

d.DECLARE 声明游标

在MySQL的使用方法中，错误的选项是：
b. DELETE 删除游标；
MySQL中并没有使用DELETE来删除游标的操作。DELETE语句用于从表中删除记录。
正确的游标操作如下：
a. OPEN 打开游标：用于打开先前声明的游标，以便可以从中检索行。
c. FETCH INTO 获取游标处数据：用于从游标检索数据，并将数据放入变量中。
d. DECLARE 声明游标：用于声明一个游标，指定其检索的数据集。
要关闭游标，可以使用CLOSE语句。

分别使用css link和@import 加载的内容、方式的区别

<link>标签和@import规则都可以用于在HTML文档中加载外部CSS样式表，但它们之间存在一些差异：
加载顺序：
<link>：当浏览器解析HTML文档时，它会并行下载<link>标签引用的样式表，但是应用样式表的过程是按照出现的顺序来的。
@import：在浏览器解析包含@import规则的样式表时，它会在当前样式表加载完毕后，再去加载被@import的样式表。这会导致样式表的加载变成串行，可能影响页面加载速度。
兼容性：
<link>：所有现代浏览器和较早版本的浏览器都支持<link>标签。
@import：早期的浏览器（如IE4和Netscape 4）不支持@import规则。但在当前的Web开发中，这不再是一个问题，因为现代浏览器都支持@import规则。
用途：
<link>：<link>标签不仅可以用于加载CSS样式表，还可以定义其他类型的文档关系，例如预加载、预渲染和图标等。
@import：@import规则专门用于加载CSS样式表。
JavaScript操作：
<link>：通过JavaScript操作<link>标签相对简单，可以轻松地更改或删除样式表的引用。
@import：通过JavaScript操作@import规则较为复杂，需要操作CSS样式表的规则集。
总之，<link>标签和@import规则在加载外部CSS样式表时具有不同的特点。通常，由于其并行加载和更广泛的浏览器兼容性，<link>标签是首选方法。

下面的代码输出内容为？

<scripttype="text/javascript">

varst1='var';

letst2='let';

console.log(this.st1);

console.log(this.st2);

</script>

输出为：

"var"

undefined

解释：

var声明的变量会成为当前执行上下文（在这种情况下是全局执行上下文）的属性。因此，this.st1（在全局上下文中，this指向window对象）可以访问到st1变量，输出为"var"。
let声明的变量具有块级作用域，它们不会成为当前执行上下文的属性。因此，this.st2无法访问到st2变量，输出为undefined。

TCP连接中，等待多久后进入CLOSED状态：TTL,2TTL,MSL,2MSL

在TCP连接中，主动关闭方在完成四次挥手过程之后，会进入TIME_WAIT状态，等待2倍的最长报文段生存时间（2MSL）后，才会进入CLOSED状态。这里的MSL指的是Maximum Segment Lifetime。
2MSL等待期的目的是确保在TCP连接关闭之前，所有在传输中的数据包都有足够的时间到达目的地，以及所有的确认数据包也能正确地返回。此外，这个等待时间还可以防止来自之前连接的“老”数据包干扰新连接。

HTML语义优化的意义？div失去作用？

HTML语义优化是指使用恰当的HTML标签来表示内容的结构和意义。使用具有明确语义的HTML标签（如<header>、<article>、<nav>等）能使页面结构更加清晰，有以下几个意义：
有助于搜索引擎优化（SEO）：搜索引擎更容易理解具有良好语义结构的页面，从而有助于提高页面的搜索排名。
提高可访问性：使用语义标签有助于屏幕阅读器等辅助技术更好地解释页面内容，使其对残障用户更友好。
便于维护：具有清晰的语义结构的HTML代码更易于阅读和维护。其他开发人员可以更快地了解代码的结构和意图。
简化样式表和脚本：利用语义标签，可以减少样式表和JavaScript脚本的复杂性，从而提高代码的可读性和可维护性。
在引入语义化HTML标签之后，<div>标签并没有失去作用。<div>标签仍然是一个非常有用的通用容器元素，用于创建页面布局或包装没有特定语义的内容。在需要的时候，仍然可以使用<div>标签。然而，当有更具语义的标签可用时（例如<section>、<aside>等），使用这些标签通常是更好的选择。

介绍类的继承属性，并回答构造函数能不能当做普通函数调用

类的继承是面向对象编程中的一个核心概念，它允许一个类（子类）从另一个类（父类）继承属性和方法。子类可以重写或扩展父类的属性和方法，从而实现代码的复用和模块化。
在JavaScript中，类的继承通过extends关键字实现。
对于构造函数能否作为普通函数调用的问题，答案是取决于编程语言。在JavaScript中，构造函数（类的构造器）通常可以作为普通函数调用，但这并不是一个推荐的做法，因为它可能会导致意外的行为。在ES6的类语法中，如果你尝试将一个类的构造函数当作普通函数调用，将会抛出一个TypeError。
为了避免这种问题，应该始终使用new关键字来调用构造函数。

IO多路复用中，属于epoll机制的是：epoll_wait, epoll_etc, select, poll

在I/O多路复用中，属于epoll机制的是：epoll_wait 和 epoll_ctl。
这里是 epoll 机制相关的函数：
epoll_create：创建一个 epoll 实例。
epoll_ctl：用于向 epoll 实例中添加、修改或删除文件描述符。
epoll_wait：等待事件发生，获取已经准备好的文件描述符。
而select和poll分别属于其他两种I/O多路复用机制：
select：这是一种较早的I/O多路复用技术，它的缺点是每次调用时需要遍历所有的文件描述符，效率较低。
poll：与select类似，但它使用数据结构来存储文件描述符，因此效率略高于select。

活动图中，使用什么形状表示动作状态，开始节点，结束节点。并回答是不是每个活动只能属于一个泳道。

在UML活动图中，各种元素使用不同的形状表示：
动作状态：使用圆角矩形表示。其中，动作名称通常在圆角矩形内部标注。
开始节点：使用一个实心圆表示。
结束节点：使用一个实心圆（较大）表示，内部有一个较小的实心圆。
关于活动是否只能属于一个泳道的问题，答案是是的。在活动图中，泳道（又称分区）表示参与者的职责范围。每个活动通常仅属于一个泳道，以表示该活动是由特定参与者执行的。当然，活动之间可以通过流程线跨泳道连接，以表示参与者之间的协作。然而，在实际情况下，每个活动仍然只属于一个泳道。

序列图中，纵向代表什么？生命线，时间轴

在序列图中，纵向代表时间轴。生命周期（Lifeline）是表示对象在序列图中的垂直线，它反映了对象在整个交互过程中的存在。沿着生命周期的垂直线向下，时间轴表示时间的流逝。序列图通过时间轴描述了对象之间在时间顺序上的交互和消息传递。

div占用的总长度计算是：border+margin+padding+width 吗

是的，div占用的总长度 = width + 左padding + 右padding + 左border + 右border + 左margin + 右margin

Kruskal算法使用的策略是：贪心，动态规划，分治，回溯？

Kruskal算法使用的策略是贪心算法。贪心算法在每一步都选择局部最优解，希望最终达到全局最优解。Kruskal算法用于解决最小生成树问题，其核心思想是按照边的权值从小到大的顺序选择边，并确保这些边不会形成环，直至选取了 n - 1 条边为止，其中 n 为图中顶点的数量。通过这种贪心的策略，Kruskal算法能够找到具有最小权值和的生成树。

参考

https://www.nowcoder.com/discuss/469650107760115712?sourceSSR=search

其他说明

我把今年前端面试遇到的问题和相关的答案整理并收录到了这个仓库： https://github.com/Doriyz/Front-end-Interview ，有需要的小伙伴可以star和fork进行参考。有问题也可以issue提出，大家一起进步耶~