前端面试笔试（二）

在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

javascript 复制代码

    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.一个递归的输出例子

javascript 复制代码

    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

javascript 复制代码

    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

javascript 复制代码

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.对象引用，函数参数传递，对象属性修改

javascript 复制代码

    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

javascript 复制代码

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：

html 复制代码

<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 绑定数据：

html 复制代码

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

加油加油^_^