前端面试实战补丁24.3.7-CSDN博客

本文链接：https://blog.csdn.net/xhc6666/article/details/136544123

1.CSS的position属性

在CSS中，position属性用于指定元素的定位方式。position属性有以下几个可能的值：

static：

默认值。元素按照文档流进行定位，不会被特别地定位，也不会受到top、right、bottom、left或z-index属性的影响。

relative：

相对定位。元素相对于其正常位置进行定位，可以通过设置top、right、bottom、left属性来调整元素的位置，相对于其自身的初始位置进行偏移。相对定位不会影响其他元素的布局。

absolute：

绝对定位。元素相对于其最近的非静态定位祖先元素进行定位，如果没有非静态定位的祖先元素，则相对于最初的包含块进行定位。可以通过设置top、right、bottom、left属性来调整元素的位置。绝对定位会脱离文档流，不会影响其他元素的布局。

fixed：

固定定位。元素相对于浏览器窗口进行定位，始终保持在视口的固定位置，即使页面滚动也不会改变其位置。可以通过设置top、right、bottom、left属性来调整元素的位置。

sticky：

粘性定位。元素在跨越特定阈值前为相对定位，之后为固定定位。可以通过设置top、right、bottom、left属性来调整元素的位置。粘性定位是相对于视口或包含它的滚动容器来定位的。

这些position属性的不同取值使得我们可以实现各种复杂的布局效果和交互效果。

2.vue阻止事件冒泡

使用事件修饰符 .stop：在 Vue 模板中，你可以使用 .stop 修饰符来阻止事件继续传播。这个修饰符告诉 Vue 在触发事件后立即调用 event.stopPropagation() 方法。例如：
<button @click.stop="handleClick">阻止事件冒泡</button>
使用事件对象：你也可以在事件处理函数中手动调用事件对象的 stopPropagation() 方法来阻止事件传播。例如：
<button @click="handleClick">阻止事件冒泡</button>

methods: {
  handleClick(event) {
    event.stopPropagation();
    // 处理点击事件的逻辑
  }
}

3.一般什么样的属性定义成原型属性，什么样的定义成实例属性

在JavaScript中，通常将那些对于类的每个实例都是独特的且会随着实例化而变化的属性定义为实例属性，而那些对于类的所有实例都是共享的且在整个类中保持不变的属性定义为原型属性。

具体来说：

原型属性：

原型属性是定义在类的原型上的属性，它们被所有该类型的实例共享。
原型属性通常用于存储方法和静态属性，因为它们对于所有实例来说是相同的，且不会随着实例化而变化。
例如，类的原型上的方法（如构造函数中定义的方法）和静态属性（通过在类本身上直接定义的属性）通常是原型属性。

实例属性：

实例属性是定义在每个对象实例上的属性，每个对象实例都有自己的一组实例属性。
实例属性通常在对象创建时通过构造函数或其他方法动态添加到对象上。
实例属性对于每个对象实例来说是唯一的，可以通过实例本身进行修改和访问。

例如，在JavaScript中，构造函数内部定义的属性通常是实例属性，而在构造函数的原型上定义的方法通常是原型属性。这样做可以节省内存，因为所有实例共享相同的方法和属性，而不是每个实例都有自己的副本。

4.ES6转成ES5

Babel：

Babel 是一个流行的 JavaScript 编译器，它可以将 ES6+ 代码转换为 ES5 代码。
使用 Babel 需要安装相应的包和插件，比如 @babel/core、@babel/preset-env 等。
通过命令行或配置文件指定需要转换的源代码文件和输出目录，然后使用 Babel 命令进行转换。
这是最常见、最灵活的方法之一。

Webpack：

Webpack 是一个流行的前端构建工具，它也可以用来转换 ES6 代码。
在 Webpack 的配置中，可以使用 babel-loader 加载器来处理 ES6+ 代码，同时配置 Babel 相关的选项。
这种方法适用于项目已经使用了 Webpack 进行构建的情况。

在线转换工具：

有许多在线工具可以帮助你将 ES6 代码转换为 ES5，例如 Babel REPL（https://babeljs.io/repl）。
在这些工具中，你只需将你的 ES6 代码粘贴到输入框中，然后它会自动生成对应的 ES5 代码。
这种方法适用于简单的转换需求，但对于大型项目来说可能不够灵活和方便。

IDE 插件：

许多现代的集成开发环境（IDE）都提供了支持 ES6 转 ES5 的插件，比如 VSCode 中的 Babel 插件。
这些插件可以在你编辑代码时自动将 ES6 代码转换为 ES5，并提供实时反馈。

Vite 提供了对 ES6 语法的原生支持，因此你可以在项目中直接编写 ES6 代码而无需进行额外的转换。Vite 使用原生 ES 模块（ESM）作为默认的模块系统，利用现代浏览器的原生支持来提供快速的开发体验和构建速度。

要在 Vite 项目中使用 ES6 语法，你只需编写你的 JavaScript 文件，并在你的 HTML 文件中引入它们。Vite 会自动处理你的 ES6 代码，并在构建时将其转换为兼容性更好的 ES5 代码，以确保在旧版浏览器中的兼容性。

5.强缓存，协商缓存

强缓存和协商缓存是在Web开发中用于优化网页加载速度的两种常见技术。

强缓存：

强缓存是通过在客户端（例如浏览器）和服务器之间的HTTP协议头中设置特定的标志来实现的。
当浏览器首次请求一个资源时，服务器会返回资源的响应，并在HTTP响应头中设置缓存标识，例如Cache-Control或Expires。这些标识告诉浏览器该资源可以在一段时间内直接从本地缓存中获取，而不需要向服务器发起请求。
当浏览器再次请求该资源时，它会首先检查本地缓存，并根据缓存标识来决定是否需要向服务器发起请求。如果缓存尚未过期，则浏览器直接从本地缓存中获取资源，而不必再次向服务器请求。

协商缓存：

协商缓存是在缓存过期后，浏览器向服务器发起请求，服务器根据资源的最新情况来确定是否需要返回资源的新版本。
当资源的缓存过期后，浏览器向服务器发送请求，并在HTTP请求头中包含一些条件，例如If-Modified-Since或If-None-Match。这些条件告诉服务器上次请求的资源的最后修改时间或ETag（实体标签），以便服务器根据这些条件判断资源是否已经更新。
如果资源没有更新，则服务器会返回一个状态码为304（Not Modified），告诉浏览器可以继续使用本地缓存。否则，服务器会返回新的资源，包括更新的HTTP响应头和资源内容。

通过这两种缓存机制，可以有效地减少服务器的负载和提高网页加载速度，从而提升用户体验。

6.前端设置cookie时有哪些参数

在前端设置Cookie时，可以使用一些参数来指定Cookie的各种属性。以下是常用的参数：

name：

Cookie的名称。

value：

Cookie的值。

expires：

Cookie的过期时间，可以是一个GMT格式的日期字符串或一个Date对象。
如果不设置该参数，默认为会话Cookie，即在浏览器关闭时自动删除。

max-age：

Cookie的最大存活时间，以秒为单位。与expires参数类似，但是是相对于当前时间的时间间隔。

domain：

Cookie的有效域名，限制了哪些网站可以访问该Cookie。
默认为当前域名。

path：

Cookie的有效路径，限制了哪些路径下的网页可以访问该Cookie。
默认为当前路径。

secure：

布尔值，表示该Cookie是否仅能通过HTTPS协议传输。

httpOnly：

布尔值，表示该Cookie是否仅能通过HTTP或HTTPS协议传输，而不允许被JavaScript访问。

sameSite：

设置Cookie的SameSite属性，用于防止跨站请求伪造（CSRF）攻击。

这些参数可以根据需要在前端代码中设置，以控制Cookie的行为和限制。