前端面试笔试（二）

在HTTP/1.1中，每个请求通常都需要一个单独的TCP连接，这会导致多个问题。首先，TCP连接的建立和关闭都需要时间，这会增加网络延迟和资源消耗。其次，HTTP/1.1需要按照顺序处理请求，如果前面的请求比较慢，后面的请求就会被阻塞，这会导致队头阻塞问题。最后，每个请求都需要携带完整的HTTP头部信息，这会占用大量的网络带宽。

而在HTTP/2中，多路复用技术解决了这些问题。它允许多个请求和响应在同一个TCP连接上并行处理，每个请求都有一个唯一的ID，这使得多个请求可以同时进行，而不必等待前一个请求完成。这种方式减少了连接建立和关闭的开销，提高了网络性能，降低了延迟，并节省了网络带宽。

此外，HTTP/2还引入了头部压缩技术，通过压缩HTTP头部信息来进一步减少传输的数据量。这些改进使得HTTP/2在现代Web应用中具有更好的性能和用户体验。

ETag（Entity Tag）是HTTP协议中用于标识资源状态的一种机制，主要用于缓存管理和资源更新判断。当浏览器请求服务器资源时，服务器会返回该资源的ETag值。在后续的请求中，如果客户端想要验证该资源是否发生变化，它会将之前收到的ETag值通过If-None-Match请求头发送给服务器。服务器会检查当前资源的ETag值是否与客户端发送的值相匹配。如果匹配，说明资源自上次请求后未发生变化，服务器会返回304 Not Modified状态码，客户端可以继续使用缓存中的资源。如果不匹配，说明资源已经发生变化，服务器会返回新的资源内容和新的ETag值。

通过这种方式，ETag头部有效地减少了不必要的网络传输，提高了页面加载速度，并确保了客户端能够获取到最新的资源。

cache-control是HTTP协议中用于控制资源缓存行为的头部字段，而max-age则是cache-control头部字段中的一个指令，用于指定资源在客户端缓存中的最大有效时间，单位是秒。当客户端接收到服务器返回的包含cache-control: max-age=N的响应头部时，它会将资源缓存起来，并在接下来的N秒内直接使用缓存中的资源，而不是向服务器发送新的请求。

这种机制有助于减少不必要的网络请求，提高页面加载速度，并减轻服务器的负担。

二、代码输出篇

1.new URL，url中的hostname，pathname，href

    const urlInfo=new URL('https://reolink.com/product/argus/?id=123#comments');
    console.log(urlInfo.hostname)
    console.log(urlInfo.pathname)
    console.log(urlInfo.href);

输出为：

urlInfo.hostname
- 这个属性返回URL的主机名部分，即域名。
- 输出：reolink.com
urlInfo.pathname
- 这个属性返回URL的路径部分，即/后面的部分，但不包括查询字符串和片段标识符（hash）。
- 输出：/product/argus/
urlInfo.href
- 这个属性返回整个URL的字符串表示，包括协议、主机名、路径、查询字符串和片段标识符。
- 输出：https://reolink.com/product/argus/?id=123#comments

扩展说一下url的组成部分和属性

这个URL https://reolink.com/product/argus/?id=123#comments 是一个指向特定网页地址的字符串，它包含了多个部分，这些部分可以被解析和访问通过JavaScript中的 URL 对象。基于提供的URL创建的 URL 实例可能拥有的一些属性。

URL的组成部分

协议 (protocol): https:// - 这指明了用于访问资源的协议类型，这里是HTTPS（超文本传输安全协议）。
主机名 (hostname): reolink.com - 这是服务器的域名或IP地址。
路径 (pathname): /product/argus/ - 这指定了服务器上资源的具体位置。
搜索参数 (search): ?id=123 - 这部分包含了用于查询的键值对，这里的键是 id，值是 123。
哈希 (hash): #comments - 这部分通常用于指示网页内的某个位置或用于客户端处理（如显示特定的内容部分）。

`urlInfo` 对象的属性

当你使用 const urlInfo = new URL('https://reolink.com/product/argus/?id=123#comments'); 创建一个 URL 对象时，urlInfo 将拥有以下属性（以及其他一些可能不直接相关的属性）：

href: 'https://reolink.com/product/argus/?id=123#comments' - 完整的URL字符串。
protocol: 'https:' - 协议部分，注意不包括 //。
host: 'reolink.com' - 主机名部分，不包括端口号（如果有的话）。
hostname: 'reolink.com' - 同上，只是更明确地指出这是主机名。
port: '' - 端口号，如果URL中没有指定，则为空字符串。
pathname: '/product/argus/' - 路径部分。
search: '?id=123' - 查询字符串部分，包括前面的 ?。
searchParams: URLSearchParams 对象 - 一个包含了所有查询参数的对象，允许你以更便捷的方式访问和操作这些参数（例如，urlInfo.searchParams.get('id') 会返回 '123'）。
hash: '#comments' - 哈希部分，包括前面的 #。
origin: 'https://reolink.com' - URL的起源，即协议、主机名和端口（如果指定了）。

这些属性提供了对URL不同部分的访问，使得解析、修改和使用URL变得更加容易和直观。

2.一个递归的输出例子

    function calc(a){
        return a>=2?calc(a-1)+a:a;
    }
    console.log(calc(5))

输出结果为：15

函数定义：function calc(a) { ... } 定义了一个名为 calc 的函数，它有一个参数 a。
递归条件：函数体内使用了三元运算符 ? : 来决定函数的返回值。这个运算符根据条件 a >= 2 的真假来选择两个值中的一个。
- 如果 a >= 2 为真（即 a 大于或等于 2），则函数返回 calc(a-1) + a。这里发生了递归调用，函数 calc 被再次调用，但这次是用 a-1 作为参数。递归调用的结果加上当前的 a 值，构成了这个递归步骤的返回值。
- 如果 a >= 2 为假（即 a 小于 2），则函数直接返回 a。这是递归的基本情况，它停止了递归调用。
递归终止：当 a 减到 1 时，a >= 2 的条件为假，函数返回 1。因为没有更多的递归调用发生（因为已经达到了基本情况），所以递归终止。

现在，让我们计算 calc(5) 的结果：

calc(5)：因为 5 >= 2，所以返回 calc(4) + 5。
calc(4)：因为 4 >= 2，所以返回 calc(3) + 4。
calc(3)：因为 3 >= 2，所以返回 calc(2) + 3。
calc(2)：因为 2 >= 2，所以返回 calc(1) + 2。
calc(1)：因为 1 < 2，所以直接返回 1（这是递归的基本情况）。

现在，我们将这些值加起来，以逆序的方式（因为递归是从内向外计算的）：

calc(1) 返回 1
calc(2) 返回 1 + 2 = 3
calc(3) 返回 3 + 3 = 6
calc(4) 返回 6 + 4 = 10
calc(5) 返回 10 + 5 = 15

3.数组去重的不普通方法1

    console.log([1,2,2,4,4,5,5,6].reduce((p,q)=>p.includes(q)?p:[...p,q],[]))

输出结果为[1,2,4,5,6]

上面的代码使用了JavaScript数组的reduce方法来对一个数组进行遍历和归约（或聚合），目的是去除数组中的重复元素。这里，reduce方法接收一个回调函数和一个初始值（空数组[]）作为参数。

回调函数接收四个参数，但在这种情况下，只用到了前两个：

p（累加器）：上一次调用回调函数时返回的数组（或初始值）。
q（当前值）：数组中当前正在处理的元素。

回调函数逻辑

p.includes(q)：检查累加器数组p是否包含当前元素q。
如果p包含q（即p.includes(q)为true），则回调函数返回p（不变），这样q就不会被添加到结果数组中。
如果p不包含q（即p.includes(q)为false），则使用扩展运算符...将p的所有元素复制到一个新数组中，并将q添加到这个新数组的末尾。然后，这个新数组被返回作为下一次迭代的累加器值。

初始值

初始值是一个空数组[]，它作为第一次迭代时的累加器值。

代码执行流程

初始累加器值：[]
处理第一个元素1：[]不包含1，所以返回[1]。
处理第二个元素2：[1]不包含2，所以返回[1, 2]。
处理第三个元素2：[1, 2]包含2，所以返回[1, 2]（不变）。
处理第四个元素4：[1, 2]不包含4，所以返回[1, 2, 4]。
处理第五个元素4：[1, 2, 4]包含4，所以返回[1, 2, 4]（不变）。
处理第六个元素5：[1, 2, 4]不包含5，所以返回[1, 2, 4, 5]。
处理第七个元素5：[1, 2, 4, 5]包含5，所以返回[1, 2, 4, 5]（不变）。
处理第八个元素6：[1, 2, 4, 5]不包含6，所以返回[1, 2, 4, 5, 6]。

最终输出

最终，reduce方法返回的是去除重复元素后的数组[1, 2, 4, 5, 6]，这个值被console.log输出到控制台。

4.数组去重的不普通方法2

console.log(Object.values([1,2,2,4,4,5,5,6].reduce((p,q)=>(p[q]=q,p),{})))

输出结果也是[1,2,4,5,6]

使用了JavaScript数组的reduce方法来处理一个数组，并结合Object.values方法来获取最终结果的数组形式。这里，reduce方法被用来构建一个对象，该对象的键是数组中的元素（去重后），值也是这些元素本身。然后，Object.values方法被用来从这个对象中提取出所有的值，形成一个新的数组。

回调函数接收四个参数，但在这个例子中，只使用了前两个：

p（累加器）：上一次调用回调函数时返回的对象（或初始值，一个空对象{}）。
q（当前值）：数组中当前正在处理的元素。

回调函数逻辑

p[q] = q：在累加器对象p上设置一个属性，其键和值都是当前元素q。如果q已经是一个存在的键，则这个操作会覆盖之前的值（但在这个例子中，由于我们关心的是键的唯一性，所以值被设置为相同的q并不会影响结果）。
返回p：无论是否设置了新属性，都返回累加器对象p作为下一次迭代的累加器值。

初始值

初始值是一个空对象{}，它作为第一次迭代时的累加器值。

代码执行流程

初始累加器值：{}
处理第一个元素1：在对象上设置属性{1: 1}，返回这个对象。
处理第二个元素2：在对象上设置属性{1: 1, 2: 2}，返回这个对象。
处理第三个元素2：对象已经有一个2的键，所以只是更新值为2（实际上没有改变），返回对象{1: 1, 2: 2}。
处理第四个元素4：在对象上设置属性{1: 1, 2: 2, 4: 4}，返回这个对象。
处理第五个元素4：对象已经有一个4的键，所以只是更新值为4（实际上没有改变），返回对象{1: 1, 2: 2, 4: 4}。
处理第六个元素5：在对象上设置属性{1: 1, 2: 2, 4: 4, 5: 5}，返回这个对象。
处理第七个元素5：对象已经有一个5的键，所以只是更新值为5（实际上没有改变），返回对象{1: 1, 2: 2, 4: 4, 5: 5}。
处理第八个元素6：在对象上设置属性{1: 1, 2: 2, 4: 4, 5: 5, 6: 6}，返回这个对象。

5.对象引用，函数参数传递，对象属性修改

    let objA={name: 'A'}
    let objB={name: 'B'}
    function main(oa,ob){
        oa={};
        ob.name='C'
    }
    main(objA,objB);
    console.log(objA.name,objB.name);

输出结果为：A C

oa = {}; // 这里重新赋值了oa，让它引用了一个新的空对象。这个修改不会影响到objA。
ob.name = 'C'; // 这里修改了ob引用的对象的name属性。由于ob和objB引用的是同一个对象，所以这个修改会影响到objB。

在调用 main(objA, objB) 时，oa 和 objA 引用同一个对象 {name: 'A'}，ob 和 objB 引用同一个对象 {name: 'B'}。
在 main 函数内部，oa = {} 重新赋值了 oa，让它引用了一个新的空对象。这个修改不会影响到 objA，因为 objA 仍然引用着原来的对象 {name: 'A'}。
另一方面，ob.name = 'C' 修改了 ob 引用的对象的 name 属性。由于 ob 和 objB 引用的是同一个对象，因此 objB.name 也被修改为 'C'。
最后，console.log(objA.name, objB.name) 输出 "A C"

扩展说下

对象引用：
- 在JavaScript中，对象是通过引用来传递的。当你将一个对象赋值给另一个变量时，你实际上是在复制对该对象的引用，而不是对象本身。
- 例如，let objA = {name: 'A'} 创建了一个对象，并且 objA 是对这个对象的引用。
函数参数传递：
- 当你将对象作为参数传递给函数时，你实际上是在传递对象的引用。
- 在函数内部，你可以修改这个引用所指向的对象的内容（即对象的属性），但这种修改会影响到函数外部的对象，因为它们引用的是同一个对象。
- 然而，如果你尝试在函数内部重新赋值给这个参数（即让它引用一个新的对象），那么这个修改不会影响到函数外部的对象。
对象属性的修改：
- 你可以通过点（.）或方括号（[]）语法来访问和修改对象的属性。
- 修改对象的属性会影响到所有引用该对象的变量。

三、css、html，JavaScript篇

1.在自定义组件上实现类似原生表单元素的v-model功能，使用？

用value和input

接收一个 value 属性。
在值改变时触发一个 input 事件。

首先，创建一个自定义组件，比如 MyInput.vue：

<template>
  <input
    :value="value"
    @input="$emit('input', $event.target.value)"
    :placeholder="placeholder"
  />
</template>

<script>
export default {
  name: 'MyInput',
  props: {
    value: {
      type: String,
      default: ''
    },
    placeholder: {
      type: String,
      default: ''
    }
  }
}
</script>

在这个组件中：

:value="value"：绑定 value 属性到输入元素的值。
@input="$emit('input', $event.target.value)"：监听 input 事件，并在事件发生时通过 $emit 触发一个名为 input 的自定义事件，传递新的值。

在你的父组件中使用这个自定义组件，并使用 v-model 绑定数据：

<template>
  <div>
    <h1>自定义输入组件示例</h1>
    <MyInput v-model="message" placeholder="请输入一些文字" />
    <p>你输入的是: {{ message }}</p>
  </div>
</template>

<script>
import MyInput from './MyInput.vue';

export default {
  name: 'App',
  components: {
    MyInput
  },
  data() {
    return {
      message: ''
    };
  }
}
</script>

在这个父组件中：

v-model="message"：使用 v-model 将 message 变量绑定到 MyInput 组件。
<p>你输入的是: {{ message }}</p>：显示 message 变量的值，以验证双向数据绑定是否工作。

注意事项

命名：确保你触发的自定义事件名称为 input，因为 v-model 默认监听这个事件。
类型匹配：确保 value 属性和 input 事件传递的值类型一致。在上面的例子中，value 和 input 事件的值都是字符串类型。
默认值和可选属性：为 props 提供默认值，并在需要时添加其他可选属性（如 placeholder）。

2.项目在主轴上的对齐方式？

justify-content
在交叉轴是align-items

3.JavaScript可能出现内存泄漏的情况有哪些？

DOM 清空时还存在引用，定时器未清除，全局变量未清理，闭包使用不当，事件监听器未解绑，循环引用，缓存未清理，第三方库或框架存在内存泄漏

注意：箭头函数本身不会导致内存泄漏

可能存在内存泄漏的情况详细版：

全局变量未清理：
- 如果在全局作用域中创建了过多的变量且未及时释放，它们会一直占用内存，导致内存泄漏。全局变量会一直存在于内存中，直到页面关闭或手动释放。过多创建并保留全局变量，尤其是大型的数据结构或对象，容易引发内存泄漏问题。
闭包使用不当：
- 闭包可以让函数访问其定义时的作用域。但如果闭包中引用了一些较大的对象或数据结构，且这些对象或数据结构在闭包不再被需要时没有被及时清理，也可能导致内存泄漏。
DOM 元素未正确删除：
- 在使用 JavaScript 操作 DOM 元素时，必须确保在不需要它们时正确删除它们。如果保留了对不再需要的 DOM 元素的引用，那么这些元素及其相关的 JavaScript 对象将无法被垃圾回收器清理，从而导致内存泄漏。
事件监听器未解绑：
- 如果注册了事件监听器却没有在合适的时候移除它们，那么即使相关的 DOM 元素已经被删除，事件监听器仍然会保留对它们的引用，导致内存无法被回收。
定时器或回调函数未清除：
- 使用 setInterval 或 setTimeout 创建的定时器，如果在不再需要时没有及时清除，它们会持续占用内存。即使定时器的回调函数已经执行完毕，定时器本身仍然可能存在于内存中。
循环引用：
- 当两个或多个对象之间存在相互引用，并且这些对象没有其他外部引用可以打破这种循环时，它们将无法被垃圾回收机制正确处理，从而占用内存。
第三方库或框架存在内存泄漏：
- 如果使用了存在内存泄漏问题的第三方库或框架，就可能导致整个应用程序出现内存泄漏问题。因此，在选择和使用第三方库或框架时，需要谨慎评估其内存管理性能。
缓存未清理：
- 缓存可以提高性能，但如果使用不当，也会带来内存管理的问题。过度使用缓存且未及时清理过期或不再需要的缓存数据，也可能导致内存泄漏。

4.position中绝对定位是相对于最近的定位父级来定位

扩展：css中position的值有哪些？分别的定位原点？

static:元素默认值，按正常的文档流进行定位，从上到下，从左到右，没有特定的原点

relative：相对定位。元素相对于其正常位置进行定位，相对于原本位置进行偏移，定位原点即元素原本在文档流中的位置

absolute：绝对定位。元素相对于最近的已定位祖先（即设置了position属性为absolute,relative,fixed,sticky的元素）进行定位。定位原点是最近的已定位祖先元素的左上角，相对于初始包含块的左上角

fixed：固定定位。元素相对于浏览器窗口进行定位，即使页面滚动，也会始终位于同一位置。定位原点为浏览器窗口的左上角

sticky：粘性定位。根据正常文档流进行定位，然后相对于用户的滚动位置在视口内粘性定位，会黏在父元素身上直到某个阈值被跨越。定位原点是元素原本在文档流中的位置，滚动到某个阈值后，相对于视口进行定位。

加油加油^_^

原文地址：https://blog.csdn.net/nameofworld/article/details/143773129

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：怎么用家用电脑做服务器(web服务器、ftp服务器、小程序服务器，云电脑)
下一篇：今天来认识客诉系统

算数基本定理@质因数分解原理
把自然数写成素数的乘积，结论就是著名的算术基本定理。此定理建立了自然数与素数之间的一个重要的关系式。算数基本定理是整除理论性质和结论的精华,是整个初等数论的基础证明一些方程是否有整数解能够从公式的角度
阅读更多2024-11-15
用 Python 从零开始创建神经网络（六）：优化（Optimization）介绍
在随机初始化的模型中，或者即使是采用更复杂方法初始化的模型中，我们的目标是随着时间的推移培训或教育一个模型。为了训练一个模型，我们调整权重和偏差以提高模型的准确性和置信度。为此，我们需要计算模型的错误
阅读更多2024-11-15
海思3403对RTSP进行目标检测
用ss928 实现rtsp流的目标检测
阅读更多2024-11-15
亮数据——助力全球数据抓取的高效代理平台
特别是在需要跨境数据采集的场景中，亮数据的全球代理池能够让用户根据目标网站的地域需求，选择不同地区的IP地址，以此提升数据抓取的稳定性和成功率。亮数据不仅提供了丰富的IP资源，还内置了智能管理系统，可
阅读更多2024-11-15
【卡尔曼滤波】递归算法Recursive的应用 C语言、Python实现（Kalman Filter）
【卡尔曼滤波】递归算法Recursive的应用 C语言、Python实现（Kalman Filter）
阅读更多2024-11-15
记一次工作中订单幂等处理方案
当然可以考虑在数据库新增一张表，这张表上有第三方订单号的字段，并为此字段建立唯一索引，每次下单前预先往这张表插入数据，如果此第三方订单号已存在，那么插入数据必然报错。第一次是通过分布式锁检测，这是在
阅读更多2024-11-15
大数据湖项目建设方案（100页WORD）
随着信息技术的飞速发展，数据量呈现出爆炸性增长的趋势。企业、政府机构及科研单位在运营过程中积累了大量的数据资源，这些数据中蕴含着巨大的价值，但如何高效地存储、处理和分析这些数据，成为了一个亟待解决的问
阅读更多2024-11-15
深度学习笔记14-卷积神经网络2
卷积神经网络，是包含卷积运算且具有深度结构的前馈神经网络。在卷积神经网络中，包含卷积层、池化层和全连接层三种重要的结构。相比前馈神经网络，卷积层和池化层是新增的网络结构，在提取特征时，卷积神经网络使用
阅读更多2024-11-15
[Mysql基础] 表的操作
1.1 语法说明：field表示列名datatype表示列的类型字符集，如果没有指定字符集，则以所在数据库的字符集为准collate校验规则，如果没有指定校验规则，则以所在数据库的校验规则为准。
阅读更多2024-11-15
Mysql-DDL语句
Mysql DDL语句的使用方法和配置命令，可以更加快速熟悉的掌握Mysql基本操作命令
阅读更多2024-11-15