前端面试题08

65、常用的伪类有哪些

1. :hover 当用户将鼠标悬停在元素上时触发，通常用于添加交互效果。
2. :active 当用户点击元素并按下鼠标时触发，通常用于添加点击效果。
3. :visited 当用户访问过一个链接后，该链接的样式会发生变化。
4. :focus 当元素获得焦点时触发，常用于表单元素的样式调整。
5. :first-child 选择父元素下的第一个子元素。
6. :last-child 选择父元素下的最后一个子元素。
7. :nth-child(n) 选择父元素下的第n个子元素。
8. :nth-last-child(n) 选择父元素下的倒数第n个子元素。
9. :first-of-type 选择父元素下的第一个指定类型的子元素。
10. :last-of-type 选择父元素下的最后一个指定类型的子元素。
11. :nth-of-type(n) 选择父元素下的第n个指定类型的子元素。
12. :nth-last-of-type(n) 选择父元素下的倒数第n个指定类型的子元素。
13. :not(selector) 选择不符合指定选择器规则的元素。

66、常用的伪元素有哪些

1. ::before 在选中元素的前面插入内容，并用CSS进行样式设置。
2. ::after 在选中元素的后面插入内容，并用CSS进行样式设置。
3. ::first-letter 选中元素的第一个字母，并用CSS进行样式设置。
4. ::first-line 选中元素的第一行，并用CSS进行样式设置。
5. ::selection 选中用户选中的文本，并用CSS进行样式设置。

67、什么情况下固定定位会失效

1. 父元素设置了transform属性： 当父元素设置了transform属性，而子元素又使用了固定定位，那么子元素的固定定位会相对于父元素进行定位，而不再相对于视口。这可能导致固定定位失效。
2. 父元素设置了 overflow: auto/scroll： 当父元素设置了overflow属性为auto或scroll，并且子元素使用了固定定位，那么子元素的固定定位将会失效，因为父元素的滚动行为会影响子元素的位置。
3. 父元素设置了position: fixed 或 position: absolute： 当父元素本身也是固定定位或绝对定位的，那么子元素的固定定位会相对于父元素进行定位，而不再相对于视口，这也会导致固定定位失效。
4. 元素被设置为 z-index 的堆叠顺序低于其他元素： 如果元素的z-index值较低，而其他元素的z-index值较高，则其他元素可能会叠加在固定定位元素之上，导致固定定位失效。

68、margin和padding的区别

1. 区别一：盒模型层次不同
   • margin（外边距）：表示元素与其他元素之间的距离，会影响元素的外部空间。它会在元素周围创建透明的空白区域，既影响元素本身的位置，也影响周围元素的位置。
   • padding（内边距）：表示元素内容与边框之间的距离，会影响元素的内部空间。它会在元素内容与边框之间创建透明的空白区域，影响元素内部的布局。
2. 区别二：影响元素尺寸计算
   • margin不会将元素的宽度和高度进行调整，它只会在元素的外部增加空白区域。
   • padding会在元素的内容和边框之间创建空白区域，会增加元素内容占据的空间，影响元素的尺寸计算。
3. 区别三：是否透明
   • margin是透明的，即它不会对周围元素产生遮挡效果。
   • padding是透明的，即它不会影响元素内容的显示，不会遮挡内容。

69、Vue2和Vue3的响应式原理

Vue 2 的响应式原理主要是通过 Object.defineProperty 实现数据劫持，也就是给对象中的每一项都加上 get 和 set 方法。这样当数据发生改变时，就会通知相应的视图进行更新。但这种方式只能监听对象的属性变化，不能直接监听数组的变化，因此 Vue 2 在处理数组时需要额外使用变异方法如 push、pop 等。

Vue 3 则引入了一个新的响应式系统——Proxy，它是在 ES6 中新增的一个特性，可以直接监听对象和数组的变化。相比于 Object.defineProperty，Proxy 可以直接监听整个对象和数组的所有操作，包括新增属性、删除属性、修改属性等等。而且 Proxy 监听的是真正的引用类型，不会像 Vue 2 一样因为对象地址的改变而导致响应式的丢失。

总的来说，Vue 3 的响应式系统相比 Vue 2 更加全面和完善，可以更好地满足复杂的业务场景需求。同时，Proxy 的引入也让 Vue 3 的响应式系统更加直观和易于理解和维护。

70、闭包的使用场景

1. 计算累积值：闭包可以用于计算累计值，例如累加器或累乘器。这是因为闭包可以保留对外部变量的引用，即使外部函数已经退出，闭包仍然可以访问并修改这些变量。
2. 创建私有变量：在 JavaScript 中，没有真正意义上的私有变量。但是，我们可以利用闭包来模拟私有变量。这是通过在内部函数中定义和访问变量来实现的，外部代码无法直接访问这些变量。
3. 缓存结果：闭包也可以用于缓存函数的结果。这是通过在第一次调用函数时保存结果，然后在后续调用中返回缓存的结果来实现的。
4. 事件处理器：JavaScript 中的事件处理器也是一个闭包的例子。事件处理器函数可以访问它所在的上下文中定义的任何变量，即使这些变量是在事件处理器函数定义之前定义的。
5. 函数工厂：闭包也可以用于创建函数工厂，也就是返回新函数的函数。这些新函数可以在内部访问和修改外部函数的变量，这对于创建自定义的迭代器和其他类似的工具很有用。

71、Webpack的Loader和Plugin的区别

Webpack 是一种流行的 JavaScript 应用程序的静态模块打包工具。Loader 和 Plugin 是 Webpack 提供的主要功能之一。

Loader 是 Webpack 的一个功能，它可以将某种类型的文件转换成另一种格式的文件。通常情况下，Loader 是用于处理源文件的，例如 .css 或者 .less 文件，将其转换成 JavaScript 模块。Webapck 使用 Loader 来处理那些不能直接由浏览器识别的文件格式。

Plugin 是 Webpack 的另一个功能，它用于在构建过程中执行特定的操作。Plugin 可以在 Webpack 构建流程的不同阶段执行不同的任务，例如压缩代码、生成资产映射表或者添加全局变量等等。Plugin 是一种更强大的工具，可以执行比 Loader 更复杂的操作。

总的来说，Loader 主要负责转换源文件，而 Plugin 则主要负责在构建过程中执行特定的操作。在实际使用中，通常会结合使用 Loader 和 Plugin 来完成复杂的构建任务。

72、Vue的Diff算法

在Vue.js框架中，Diff算法是一个非常重要的部分，它主要用于比较虚拟DOM之间的差异，并以此为基础更新真实的DOM元素。Vue.js中的Diff算法是通过优化算法完成的，具体来说，它主要包括以下几个步骤：

1. 新建一个新的树形结构，用来表示新的虚拟DOM节点；
2. 对新老两个树形结构进行比较，找到不同之处；
3. 根据找到的不同之处，对真实的DOM元素进行相应的更新操作。

Vue.js中的Diff算法的优点是可以有效地减少不必要的DOM更新，提高应用程序的性能。而且，Diff算法的设计也非常灵活，可以根据实际情况选择最适合的算法策略，从而达到最优的性能表现。

73、如何实现图片懒加载

1. 在HTML中，将图片的src属性设为一个占位符或者空字符串，例如：<img src="" data-src="image-url">。这样可以避免页面加载时一次性请求所有图片。
2. 使用JavaScript来检测页面滚动事件或者其他触发条件，判断图片是否进入浏览器可视区域的范围。
3. 当图片进入浏览器可视区域时，将之前保存在data-src属性中的图片链接赋值给src属性，从而开始加载图片。例如，使用imgElement.setAttribute('src', imageLink)。
4. 可以用CSS添加一些过渡效果或者加载动画来提升用户体验。例如，使用transition属性设置图片的淡入效果。
5. 可以将这个懒加载的过程封装为一个函数，方便在需要的时候调用。

这样，当页面滚动到图片位置时，图片才会开始加载，避免了一次性加载过多图片而造成的性能问题。同时，可以提升页面加载速度，减少不必要的网络请求。