前端面试题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属性为autoscroll,并且子元素使用了固定定位,那么子元素的固定定位将会失效,因为父元素的滚动行为会影响子元素的位置。
  3. 父元素设置了position: fixedposition: 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属性设为一个占位符或者空字符串,例如:。这样可以避免页面加载时一次性请求所有图片。
  2. 使用JavaScript来检测页面滚动事件或者其他触发条件,判断图片是否进入浏览器可视区域的范围。
  3. 当图片进入浏览器可视区域时,将之前保存在data-src属性中的图片链接赋值给src属性,从而开始加载图片。例如,使用imgElement.setAttribute('src', imageLink)
  4. 可以用CSS添加一些过渡效果或者加载动画来提升用户体验。例如,使用transition属性设置图片的淡入效果。
  5. 可以将这个懒加载的过程封装为一个函数,方便在需要的时候调用。

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

你可能感兴趣的:(前端面试题,前端)