杂烩5

map.values()

他是一个类数组，需要通过Array.from(map.values())，可以将map中的所有值转为数组结构

const map = new Map()
map.set(1, 88)
map.set(2, 888)
console.log(map.values())

MapIterator {88, 888} 

for of和forEach有什么区别？

//for of
0， for...of 是语言层面的迭代语句，不局限于数组，
  可以迭代任何可迭代对象（如字符串、Map、Set等）
1, 对于数组，只能遍历value, 不能遍历index。而对于map，可以遍历键值对。
2，continue结束本轮循环。使用break, return则结束整个循环。
3，用法： for(let a of arr)
4，可以在循环体内部使用 await（在 async 函数中）。	
5，提供了一种简洁的方式来遍历可迭代对象的元素。
6， for (const item of iterable)。
7， for...of 本身没有返回值，但循环体内部的表达式可以有返回值。
  

// forEach
0，forEach 是数组的一个方法，所以它是数组对象的原型链上定义的。
1, 对于数组, map, 都可以遍历键值对。第一个参数是value, 第二个参数是index.
2，continue，break报错。 使用return结束本轮循环
3，用法。arr.forEach(() => {} , thisArg)。
回调函数：接受三个参数：当前元素、索引和数组本身。还可以接受一个 thisArg 参数，
用于指定回调函数中的 this 上下文。注意：此时的回调函数必须是普通函数。
如果是箭头函数，因为箭头函数的this指向不能改变，所以是个{}。
4，没有返回值
5，不支持在回调中使用 await（在 async 函数中）。

while

continue退出本次循环，break and return退出整个循环。

for

continue退出本次循环，break退出当前所在的一层for循环，return退出所有的for循环。

迭代器和生成器

// 可迭代对象直接使用
const aa = [1, 3, 4]
console.log(aa[Symbol.iterator]().next()); // {value: 1}
console.log(aa[Symbol.iterator]().next()); // {value: 1}

// 然而，你提供的代码片段存在一个误解。当你连续调用同一个迭代器对象的 next() 方法两次时，你将遍历数组的前两个元素，而不是再次获取第二个元素。


const bb = [1, 2, 3]
const iterators = bb[Symbol.iterator]()
console.log(iterators.next()); // {value: 1, done: false}
console.log(iterators.next()); // {value: 2, done: false}
console.log(iterators.next()); // {value: 3, done: false}
console.log(iterators.next()); // {value: undefined, done: true}


//不可迭代对象使用迭代器实现
const obj = {
    a: 1,
    b: 2,
    c: 90
}

const iterators = {
    index: 0,
    key: Object.values(obj),
    next: function () {
        if (this.index < this.key.length) {
            return {
                value: this.key[this.index++],
                done: false
            }
        } else {
            return {
                value: undefined,
                done: true,
            }
        }
    }
}

obj[Symbol.iterator] = function () {
    return iterators
}

for (const value of obj) {
    console.log(value); // 1, 2, 90
}

console.log(iterators.next()); // {value: 1, done: false}
console.log(iterators.next()); // {value: 2, done: false}
console.log(iterators.next()); // {value: 90, done: false}
console.log(iterators.next()); // {value: undefined, done: true}

// 特别注意： 46-48的代码和50-53的代码不能写在一块，会被影响。



// 不可迭代对象使用生成器实现
const obj = {
    a: 1,
    b: 2,
    c: 90
}


obj[Symbol.iterator] = function* () {
    yield this.a
    yield this.b
    yield this.c
}

for (const value of obj) {
    console.log(value); // 1, 2, 90
}

箭头函数的this为什么在定义时就已经确定

1. 简化函数创建： 箭头函数的语法更加简洁，它旨在简化函数的创建和使用。将this的值绑定到定义时的上下文，减少了需要手动使用call、apply或bind来设置this的场景，使得函数的使用更加直观和方便。
2. 避免 this 污染： 在某些情况下，特别是在事件处理器或者回调函数中，this的值可能会被意外地改变，导致难以追踪和维护。箭头函数的this绑定方式避免了这种情况，因为它不会创建自己的this上下文。
3. 函数作为数据： 箭头函数的不可变性（例如，不能用作构造函数）使得它们可以作为对象的方法，而不会影响到对象的this值。这使得函数可以作为数据传递，同时保持其this值的一致性。
4. 函数式编程风格： 箭头函数的设计符合函数式编程的原则，即函数应该是无状态的、纯函数。由于箭头函数没有自己的this上下文，它们更加符合纯函数的定义。

cookie被禁用后还有没有别的办法标识用户

1. URL重写： 可以通过将会话ID作为URL参数的一部分来传递，这样即使Cookie被禁用，服务器也可以通过URL中的参数来识别用户。这种方法通常被称为URL重写93。
2. 表单隐藏字段： 在表单中使用隐藏字段来存储会话ID或其他标识符，当表单被提交时，这些信息会被发送到服务器，从而允许服务器识别用户3。
3. HTML5 Web Storage： HTML5提供了Web Storage API，包括localStorage和sessionStorage，它们允许网站存储数据在用户的浏览器中，而不需要使用Cookie。这些存储空间可以用于保持用户的会话状态2。
4. Token： 可以使用Token来替代传统的会话Cookie。Token可以存储在localStorage或者通过URL参数传递，用于验证用户的身份并保持会话

css in js的优缺点，怎么和sass/less进行舍取

CSS in JS是一种将CSS代码编写在JavaScript中的方法，这种方法允许开发者使用JavaScript的变量、函数和逻辑来动态生成样式。CSS in JS在现代前端开发中变得越来越流行，特别是在React和其他JavaScript框架中。

CSS in JS的优点：

1. 动态样式：CSS in JS允许开发者使用JavaScript的动态能力来创建样式，这在创建动态界面时非常有用。
2. 组件级样式：CSS in JS可以很好地与组件化架构配合，使得样式与组件逻辑紧密相关联，便于维护和复用。
3. 主题和状态：通过JavaScript逻辑，可以轻松地处理主题切换和组件状态变化，实现样式的动态变化。
4. JavaScript生态：CSS in JS可以利用丰富的JavaScript生态系统，包括模块打包工具、代码拆分等。

与Sass/Less的比较：

1. 抽象能力：Sass/Less提供了强大的抽象能力，如混合（mixins）、变量和函数，这在CSS in JS中也可以实现，但可能需要更多的JavaScript代码。
2. 预编译：Sass/Less需要预编译为CSS，而CSS in JS则是在运行时生成，这可能影响性能。
3. 集成：CSS in JS与React等框架的集成更为紧密，而Sass/Less则需要额外的配置。
4. 全局样式污染：传统的CSS可能会导致全局样式污染，而CSS in JS和Sass/Less通过模块化可以减少这种情况。

高阶组件的使用场景/原理

高阶组件（Higher-Order Component，简称HOC）是React中一种高级技术，用于复用组件逻辑。HOC本质上是一个函数，它接收一个组件并返回一个新的组件，新组件具有额外的props、生命周期方法或任何其他逻辑。

高阶组件的使用场景：

1. 复用逻辑： 当你发现自己在多个组件之间复制同样的逻辑（如认证、主题化、响应式编程）时，可以使用HOC来封装这些逻辑。
2. 权限验证： 通过HOC创建一个权限验证组件，确保只有具有特定权限的用户才能访问某些组件。
3. 数据获取： 创建一个HOC来处理数据获取和缓存逻辑，使得多个组件可以轻松地访问和显示数据，而无需关心数据获取的细节。

如何设计前端实现模糊查询？

• 使用JavaScript：利用JavaScript的字符串操作方法（如indexOf、includes、search等）来实现模糊匹配。
• 使用第三方库：使用如Fuse.js、jQuery UI Autocomplete等第三方库来提供更强大的搜索功能。
• 构建索引：对于大量数据，可以在前端构建索引，加速搜索过程。

事件代理（Event Proxy）

事件代理是一种模式，它通过在文档的根节点（如document或document.body）上设置一个通用的事件监听器来处理所有事件。然后，事件处理函数会根据事件的目标元素来决定如何处理事件。这种方式可以极大地减少内存占用，特别是在需要监听大量不同类型事件的情况下。

rem and font-size

html {
  font-size: 16px; /* 设置基础rem单位为16px */
}

.some-text {
  font-size: 2rem; /* 这个元素的字体大小将是32px */
}



与line-height的关系
html {
  font-size: 16px;
  line-height: 1.5; /* 基础行高为24px（16px * 1.5） */
}

.some-text {
  font-size: 2rem; /* 32px */
  line-height: 1.5rem; /* 行高将是48px（32px * 1.5） */
}

some, every

some和every是JavaScript中的两个数组方法，它们用于检查数组中的元素是否满足指定的条件。这两个方法都接受一个回调函数作为参数，该回调函数会对数组的每个元素执行，并根据返回值来确定最终结果。

some方法

some方法用于检查数组中是否至少有一个元素通过了回调函数的测试。如果至少有一个元素满足条件，some返回true；如果所有元素都不满足条件，返回false。

every方法

与some方法不同，every方法用于检查数组中的所有元素是否都通过了回调函数的测试。如果所有元素都满足条件，every返回true；如果有任何一个元素不满足条件，返回false。

后端接口数据量很大，作为前端你怎么处理？ 我回答的：是1.考虑数据获取方式 一次性请求 分页请求 2.考虑如何处理数据 分批处理 后台分页处理。 面试官：我的问题那如果现在后端接口本身是个很大的数据 后端又不给你分页 一次性返给你 你怎么去处理？ 我回答的：可以用懒加载 并解释原理 面试官：知道虚拟列表吗？

面对后端接口返回大量数据的情况，前端可以采取多种策略来优化用户体验和提高页面性能。以下是一些处理方法：

1. 数据获取方式

一次性请求

• 懒加载（Lazy Loading） ：在用户滚动到页面底部或其他特定触发条件下，才开始加载数据。这样可以避免一开始就加载所有数据，减少页面加载时间。
• 虚拟列表（Virtual List）/虚拟滚动（Virtual Scrolling） ：只渲染当前在视口内的列表项，当用户滚动时动态加载和卸载列表项。适用于长列表，可以显著提高渲染性能。

2. 数据处理方式

分批处理

• 分批渲染（Incremental Rendering） ：将大量数据分成多个批次进行处理和渲染，避免长时间阻塞主线程。
• 虚拟DOM（Virtual DOM） ：使用虚拟DOM来优化DOM操作，减少实际的DOM操作次数。

3. 用户体验优化

交互反馈

• 加载状态提示：在数据加载过程中提供加载指示器或进度条，让用户知道数据正在加载。
• 错误处理：对于加载失败的情况，提供清晰的错误信息和重试机制。

1. 自定义中间层

• 自定义nodejs 中间层，获取并拆分这10w 条数据
• 前端对接nodejs 中间层，而不是服务端
• 成本比较高

虚拟列表（Virtual List）

虚拟列表是一种性能优化技术，特别适用于处理大型列表数据。它的核心思想是只渲染用户当前可以看到的列表项，而不是全部列表项。当用户滚动页面时，虚拟列表会根据滚动位置动态地加载和卸载列表项，确保只对视口内的元素进行渲染和更新。

虚拟列表的实现原理通常包括以下几个步骤：

1. 计算每个列表项的高度和位置。
2. 监听滚动事件。
3. 在滚动时计算当前视口内的列表项范围。
4. 创建和销毁列表项DOM元素，确保只有视口内的列表项被渲染。
5. 利用缓存和滚动优化来减少重渲染的次数。

通过虚拟列表技术，可以显著提高大型列表的渲染性能和用户体验。这种方法在很多现代前端库和框架中都有实现，如React的react-virtualized，Vue的vue-virtual-scroll-list等。

ts的编译指的就是将ts转为js的过程。js就可以直接运行在浏览器或者nodejs中。编译过程可以通过TypeScript编译器（tsc）来完成。 ts的静态类型检查是在编译前就能看到的。就是可以在VS code里面看到类型错误的报错.

nodejs可以做哪些事情

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境，它允许开发者在服务器端运行 JavaScript 代码。Node.js 应用广泛，可以用于构建各种类型的应用程序，以下是一些常见的用途：

1. Web 服务器和网站：Node.js 可以用于创建动态网站和 Web 应用，它支持各种 Web 框架如 Express.js、Koa.js、Sails.js 等。
2. RESTful API：Node.js 非常适合构建 RESTful API，为前端应用提供数据接口。
3. 实时应用：使用 WebSockets，Node.js 可以构建实时通信应用，如聊天室、在线游戏等。
4. 命令行工具：Node.js 可以创建命令行工具，用于自动化任务和系统管理。
5. 网络编程：Node.js 提供了强大的网络支持，可以用于构建各种网络应用，如代理服务器、下载器等。
6. 桌面应用：通过 Electron，Node.js 可以用于创建跨平台的桌面应用程序。

使用before和after, 有哪个属性必须写

在 CSS 中，::before 和 ::after 是两个伪元素，它们用于在选定元素的内容前面或后面插入内容。这些伪元素经常用于添加装饰性内容，如图标、箭头、边框等，而无需在 HTML 中添加额外的元素。

::before

::before 伪元素用于在元素的内容前面插入内容。它可以通过 content 属性来设置要插入的内容。

::after

::after 伪元素用于在元素的内容后面插入内容，同样通过 content 属性来设置。

需要注意的是，虽然 content 属性是 ::before 和 ::after 伪元素的核心，但并不是说每次使用这些伪元素都必须包含 content 属性。如果使用伪元素仅仅是为了样式目的，比如创建一个纯 CSS 的三角形，那么可以不使用 content 属性。

修改宽高会发生重拍吗？

会的，因为元素的大小变了

1. 重排（Reflow） ：当元素的尺寸、位置或内容发生变化时，浏览器需要重新计算页面布局。这通常发生在修改元素的宽度、高度、边距、填充或边框等属性时。重排是一个相对昂贵的操作，因为它可能影响页面上的多个元素。
2. 重绘（Repaint） ：当元素的外观发生变化，但不影响其在页面上的位置时，浏览器需要重新绘制元素。这通常发生在修改元素的背景色、文本颜色、边框颜色等属性时。重绘通常比重排要快，但仍然会影响性能。

absolute left 和 transform translateX的区别

position: absolute 与 left 属性结合使用时，它们定义了一个元素相对于其最近非 static 定位祖先元素的偏移量。这意味着当你设置 left 值时，元素会在其原本的位置基础上沿 X 轴（水平方向）移动指定的距离，这种移动会影响到文档流中的其他元素布局，可能导致周围元素的位置发生变化（即触发重排或回流）。

而 transform: translateX() 是 CSS3 中的一个属性，它允许你在二维或三维空间内变换元素，而不影响正常的文档流布局。当使用 translateX() 时，元素会在其原位置的基础上进行移动，但这种移动是合成器层面上的，而不是实际更改元素在布局流中的位置。因此，使用 translateX() 进行移动不会导致周围的元素重新排列，也不会触发页面的重排（reflow）或重绘（repaint）范围过大，对于性能优化而言更加高效，特别是用于动画场景时。

1. 性能考虑：

• • left：如果频繁地改变 left 值来实现动画或其他交互效果，可能会导致页面性能下降。
  • transform: translateX()：只会触发复合层的渲染更新，避免了不必要的重排（reflow）。更适合做动画和交互效果，因为它通常由GPU硬件加速处理，且由于不影响布局，因此在现代浏览器中性能更优。

2. 层叠上下文（Stacking Context） ：

• • 改变 position 属性可能会影响元素的层叠上下文，进而影响 z-index 属性的应用。
  • transform 不会影响层叠上下文，也不会影响 z-index 属性的应用。

3. 合成层（Compositing Layers） ：

• • transform 动画可以被浏览器优化，生成单独的合成层，这样可以提高渲染性能，因为浏览器可以独立于其他页面内容渲染这个层。
  • position 属性的更改通常不会创建新的合成层，因此在动画或频繁位置更新时可能不会得到同样的性能优化。

4. 硬件加速：

• • transform 属性由于其视觉而非布局的特性，更容易被浏览器实现硬件加速，尤其是在移动设备上，这可以提高动画和变换的性能。
  • position 属性的更改可能不会得到同样的硬件加速优化。

5. 内存使用：

• • 在极端情况下，过度使用 position: absolute; 可能增加内存使用，因为浏览器需要维护元素多个位置的状态。
  • transform 通常对内存的影响较小，因为它不涉及元素布局位置的改变。

relative会脱离文档流吗？ 为什么它原来的位置还占据着

position: relative 不会让元素脱离文档流。相对定位（relative positioning）的元素仍然保持在常规文档流（normal flow）中占据其原始空间。这意味着即使元素被偏移了（通过 top、right、bottom 或 left 属性），它在文档流中的原本空间仍然保留，其他后续元素不会占据这个位置，而是像该元素未被定位一样围绕它流动。

相对定位主要作用是在原位置基础上进行偏移定位，这并不会改变元素在布局中的基本关系，只是视觉上的位置发生了变化。这种特性使得相对定位的元素可以对其它同级或后代元素产生影响，因为它们感知到的仍然是元素在文档流中的原始布局位置。

call, apply, bind

call()

call() 方法可以在指定 this 值的条件下调用一个函数。它接受两个或更多个参数，第一个参数是 this 的值，之后的每个参数都是传递给函数的参数。

function sayHello() {
  console.log("Hello, " + this.name);
}

var user = { name: "John" };
sayHello.call(user); // 输出: Hello, John

• apply() 接受一个参数数组，而 call() 接受一系列的参数。

对一个函数先bind后call, 函数指向哪里？

总结来说，先对一个函数进行 bind() 操作后，再对其结果进行 call()，函数的实际指向（即 this 的指向）将是 bind() 时设定的那个对象，而不是 call() 时传入的对象。然而，call() 的其他参数仍然会被作为新函数调用时的参数传递进去

package.json里面的@types库是什么作用

在 package.json 文件中，"@types/*" 通常指的是 TypeScript 的类型声明包。TypeScript 是 JavaScript 的一个超集，它添加了类型系统和一些其他特性，以便开发者可以编写更类型安全的代码。

类型声明文件提供了 TypeScript 编译器所需的信息，以理解第三方 JavaScript 库的结构，但它们本身并不包含任何运行时代码。

@types 是 TypeScript 类型声明包（Type Declaration Packages），它们是由 DefinitelyTyped 社区维护的一个开源项目，为那些原本没有内置 TypeScript 类型定义的 JavaScript 库提供类型信息。在 TypeScript 中，类型注解可以帮助开发者在编译阶段捕获潜在的类型错误，提高代码质量并提供更好的开发体验。

在您提供的 package.json 文件中，可以看到多个 @types 开头的依赖项，比如 @types/jest、@types/node、@types/react 和 @types/react-dom 等。这些依赖项分别提供了 Jest 测试框架、Node.js、React 和 React-DOM 的类型声明文件。

当我们在 TypeScript 项目中安装这些类型声明包时，TypeScript 编译器就能识别和利用这些库的类型信息，从而在编写代码的过程中提供类型检查和智能提示功能。这对于大型项目和强类型约束的开发尤其有用，可以大大减少因类型错误导致的运行时问题。

.d.ts的作用

.d.ts 文件是 TypeScript 的声明文件，它包含了 TypeScript 编译器用来识别和理解 JavaScript 代码的类型信息。这些文件对 TypeScript 编译器来说是非常重要的，因为 TypeScript 需要这些类型信息来执行静态类型检查，提供自动完成和接口提示等功能。

以下是 .d.ts 文件的一些关键点：

1. 类型声明：.d.ts 文件主要用于声明变量、函数、接口、类等的类型，而不是实现它们的逻辑。这些声明告诉 TypeScript 编译器如何正确地识别和处理 JavaScript 代码。
2. 全局变量：可以为全局变量（如 window 或 document）添加类型声明，以便在全局作用域中使用这些变量时获得类型提示。
3. 模块和导出：可以声明模块以及模块的导出成员，包括函数、类和变量。这允许 TypeScript 编译器理解模块系统中的类型关系。
4. 第三方库：为第三方 JavaScript 库创建 .d.ts 文件，可以为这些库提供类型信息，使得 TypeScript 能够正确地处理这些库。
5. 类型守卫：可以声明类型守卫函数，这些函数帮助 TypeScript 编译器在运行时缩小变量的类型范围。

package.json里面的@types库的功能和.d.ts的作用一样吗

.d.ts 文件和 @types 库在 TypeScript 中都有提供类型定义的功能，但它们的角色有所不同：

1. .d.ts 文件（Type Declaration Files）： .d.ts 文件是用来在 TypeScript 中提供类型声明的特殊文件，它包含了接口、类型别名、变量、函数和其他类型的声明，但不包含实际的实现代码。这类文件允许开发者为JavaScript库或者其他没有类型注解的模块提供类型信息，使得TypeScript编译器能够理解和验证那些库在编译期间的类型安全。
2. @types 库： @types 是 npm 上的一个组织，它是一个专门存储第三方库类型定义的地方，属于 DefinitelyTyped 项目的一部分。当你在项目中安装如 @types/libraryName 的包时，实际上就是在引入对应库的 .d.ts 类型声明文件。这样，TypeScript 项目就可以利用这些类型声明来获得更好的类型检查和代码提示功能。

所以，.d.ts 文件和 @types 库的功能相辅相成，.d.ts 文件是具体的类型声明文件，而 @types 库则是管理和分发这些类型声明的集中式仓库。通过 @types 库，开发者可以方便地找到和安装各种第三方库的类型定义，让 TypeScript 项目具有更完善的类型支持。

react中的useState的写法如下 const [value, setValue] = useState(0) 为什么setValue是异步的？

1. 批量更新优化：React 会批量处理多个 setState（或在函数组件中是 setValue）调用，这样可以减少不必要的重新渲染。这意味着当你调用 setValue 时，React 并不会立即更新状态，而是将它放入一个队列中，然后选择合适的时间进行更新。
2. 性能考虑：异步更新可以提高性能，因为它允许 React 利用底层的浏览器机制，比如批量合成（batching）和虚拟 DOM 的更新。这样可以减少浏览器的重排（reflow）和重绘（repaint）次数。
3. 条件渲染和逻辑：异步更新允许你在更新状态后立即基于新的状态进行条件渲染或逻辑判断，而不必担心状态更新的顺序问题。

在React中，useState hook 返回的 setValue 函数并非严格意义上的“异步”函数，而是React为了优化性能而设计的一种“异步更新队列”机制的结果。当调用 setValue 更新 state 时，React 不会立即重新渲染组件，而是将更新放入一个队列中等待稍后处理。

React之所以采用这种方式，是因为在一个事件处理函数或者生命周期方法中可能有多次 state 更新，React 通过合并这些更新并在稍后一次性重新渲染组件的方式来避免不必要的多次渲染。这样做的好处是可以提高整体应用性能，减少无意义的渲染开销。

因此，当你在代码中紧随 setValue 调用后尝试读取 value 的最新值时，你可能不会看到预期中的更新，因为在React真正完成更新并触发重新渲染前，新的 state 值并没有反映到组件的内部状态中。

懒加载和预加载有什么区别

懒加载（Lazy Loading）

1. 按需加载：懒加载是一种按需加载资源的策略，意味着资源（如JavaScript文件、图片、Web字体等）只有在需要时才被加载。例如，当用户滚动到页面的某个部分时，才会加载该部分的脚本或图片。
2. 性能优化：懒加载主要用于减少初始页面加载时间，通过延迟非关键资源的加载，可以减少服务器的响应时间和页面的加载时间。
3. 实现方式：懒加载可以通过各种技术实现，如使用Intersection Observer API来检测元素何时进入视口，然后触发资源的加载。
4. 适用场景：适用于图片、脚本、样式表等资源的加载，特别是对于长页面或者加载非首屏内容时非常有效。

预加载（Preloading）

1. 提前加载：预加载是一种提前加载资源的策略，目的是在用户需要之前预先加载资源，以便在用户实际需要时资源已经可用。
2. 预计算性能：预加载可以减少用户等待时间，通过提前加载关键资源，可以预计算性能，使得用户在点击或与应用交互时能获得更快的响应。
3. 实现方式：预加载通常使用标签来实现，告知浏览器提前加载指定的资源。
4. 适用场景：适用于那些对性能影响较大且用户很可能会访问的资源，如首屏内容的图片、样式表、脚本等。

主要区别

• 加载时机：懒加载是延后加载，直到用户滚动到相关内容或者明确需要某个资源时才加载；预加载是提前加载，通常在页面加载初期就开始加载资源。
• 资源选择：懒加载通常用于非关键资源，如图片列表中的后续图片；预加载则针对那些对用户体验影响较大的资源，如页面的初始脚本和样式。
• 性能影响：懒加载有助于减少初始页面负载，但可能会在用户滚动或交互时引入额外的加载时间；预加载有助于平滑用户体验，但可能会增加初始页面的加载时间。

图片能预加载吗？怎么实现图片能预加载吗？怎么实现

HTML 标签

使用 标签的 rel="preload" 属性来告诉浏览器提前加载图片资源：

<link rel="preload" href="image.jpg" as="image">

这会告诉浏览器提前加载 image.jpg，而不管它在文档中出现的位置

当上线过程中出现了bug，该怎么去清除缓存

在上线过程中遇到bug，清除缓存是一种常见的快速解决问题的方法，因为旧的缓存可能会导致不可预期的行为。以下是几种清除缓存的方法：

1. 服务端清除缓存

如果问题出在服务端，可以通过以下方式清除缓存：

• 服务器配置：修改服务器的缓存配置，强制其不使用缓存或设置较短的过期时间。
• 清除CDN缓存：如果使用了CDN，通过CDN提供商的管理界面清除缓存。
• 重启服务器：有时候重启服务器可以清除临时文件和缓存。

2. 客户端清除缓存

如果需要从客户端清除缓存，可以：

• 手动清除：用户可以通过浏览器的开发者工具手动清除缓存。
• 使用Cache-Control头部：在HTTP响应中使用Cache-Control头部，如no-cache，no-store，或设置max-age=0，来控制浏览器缓存行为。
• 更改资源URL：通过添加版本号或时间戳到资源URL后，使得资源看起来是新的，从而强制浏览器重新下载。

详细讲一下怎么清除远端缓存

清除远端缓存通常指的是清除服务器端或网络中其他中间节点（如CDN节点）的缓存，这些缓存可能会存储静态资源、HTML页面、API响应等。以下是几种清除远端缓存的方法：

1. 服务器端缓存

如果服务器端使用了缓存机制（如Nginx、Apache等），可以通过以下方式清除缓存：

• 配置文件更改：修改服务器的配置文件，设置缓存过期时间或禁用缓存。
• 重启服务器：有时候重启服务器可以清除临时缓存。
• 手动清除命令：某些服务器软件提供了命令行工具来清除缓存，如Nginx的nginx -s purge命令。

2. CDN缓存

内容分发网络（CDN）通常缓存了网站的静态资源。清除CDN缓存通常需要通过CDN提供商的管理界面或API来完成：

• 管理界面：登录到CDN的管理界面，找到需要清除缓存的资源，执行清除操作。
• API：如果CDN提供商提供了API，可以通过编程方式调用API来清除缓存。

3.通过版本管理来实现清楚缓存

通过为资源文件名添加版本号或时间戳，可以有效地使缓存失效：

<script src="script.20230326.js"></script>

当文件名改变时，浏览器和远端缓存会认为这是一个全新的资源，从而绕过缓存，加载最新的资源。

代码仓库的版本一般是怎么管理的

1. 遵循分支策略

分支策略是一种组织和管理代码的方式，常见的分支策略包括：

• 主分支（Master/Main） ：代表生产就绪的代码。
• 开发分支（Develop） ：用于集成新功能的分支。
• 特性分支（Feature） ：用于开发新功能的个人分支。
• 发布分支（Release） ：准备发布版本的分支。
• 热修复分支（Hotfix） ：用于紧急修复的分支。

2. 版本号命名约定

版本号是标识软件发布的方法，常见的命名约定包括：

• 语义化版本控制（Semantic Versioning，SemVer） ：格式为主版本号.次版本号.补丁号（例如：1.0.0）。主版本号在重大更新时增加，次版本号在新增功能时增加，补丁号在修复bug时增加。

• 日期驱动的版本号：使用日期作为版本号（例如：2023.03.15）。

通过版本管理来实现清楚缓存，这种方式可行吗？

通过版本管理来实现清除缓存的方式是完全可行的，并且这是一种在Web开发中广泛使用的技术，特别是用于处理静态资源的缓存问题。以下是如何利用版本管理来清除缓存的一些方法：

1. 资源文件名中添加版本号

这是最常见的一种做法，通常在资源文件名后面添加一个版本号：

<script src="script.v2.js"></script>
  <link rel="stylesheet" href="style.v3.css">

每当你更新资源并希望清除其缓存时，只需增加版本号即可。用户的浏览器会认为这是一个全新的文件，从而加载最新版本的资源。

2. 使用时间戳或哈希值

另一种方法是在文件名中包含文件内容的哈希值或最后修改时间的戳：

<script src="script.abcdef123456.js"></script>

这里的abcdef123456可以是文件内容的MD5哈希值，或者是一个时间戳，如20230326145600。

insertBefore

insertBefore 是一个DOM方法，属于 Node 接口，用于在现有的子节点前插入一个新的子节点。如果新的子节点（newNode）之前已经在其他地方存在于文档中，它会被从原来的位置移除并重新插入到新的位置。如果它是一个文档片段（DocumentFragment），则这个片段内的所有节点都会被插入。

假设我们有以下HTML结构：

<ul id="list">
  <li>Item 1</li>
  <li>Item 2</li>
  </ul>

我们想要在第一个

const list = document.getElementById('list');
const newListItem = document.createElement('li');
newListItem.textContent = 'Item 0';

// 插入新元素
list.insertBefore(newListItem, list.firstChild);

复制
  <ul id="list">
    <li>Item 0</li>
    <li>Item 1</li>
    <li>Item 2</li>
    </ul>