刚面试的小白来面试啦😮‍💨，整理面题【2】

ys指风不买醉
120 阅读8分钟

面试题：

# 刚面试的小白来面试啦😮‍💨，整理面题【2】

# 2025前端高频面试题--CSS篇问点

面试官：想把你问趴下 => 面题整理[3] 😮‍💨初心未变🚀

还是很接近最近学的知识点，还是帮整理了。收藏等于学习了~~

面题

  1. 什么是盒模型？有什么属性？

    • 盒模型是指在CSS中定义元素如何占据空间和相互作用的方式。它包括内容、内边距（padding）、边框（border）和外边距（margin）。这些属性共同决定了一个元素的总宽度和高度。

  2. 解释一下CSS中的选择器优先级

    • CSS选择器的优先级遵循以下顺序：内联样式 > ID选择器 > 类选择器/伪类选择器 > 标签选择器/伪元素选择器。特异性高的选择器具有更高的优先级。

  3. 什么是事件冒泡和事件捕获？如何阻止事件冒泡？

    • 事件冒泡是指事件从最具体的元素（触发事件的元素）开始向上传递到文档根节点的过程。事件捕获则是相反的过程，即事件从文档根节点向下传递到最具体的元素。
    • 可以通过调用event.stopPropagation()方法来阻止事件冒泡。

  4. 解释一下浮动和清除浮动的方法。

    • 浮动是一种让元素脱离正常文档流的行为，通常用于创建布局。清除浮动可以通过使用clear属性设置为left、right或both来实现，或者通过添加包含块（如overflow: auto）来自动清除浮动。

  5. 什么是AJAX？如何使用AJAX发送请求

    • AJAX（Asynchronous JavaScript and XML）是一种在网页上异步加载数据的技术，允许在不重新加载整个页面的情况下与服务器交换数据。可以通过XMLHttpRequest对象或现代的Fetch API来实现。

  6. 描述一下浏览器渲染页面的过程

    • 浏览器首先解析HTML构建DOM树，接着解析CSS构建CSSOM树，然后合并两者生成渲染树。最后，浏览器根据渲染树绘制页面。

  7. 什么是跨域请求？如何解决跨域问题？

    • 跨域请求是指从一个源加载资源到另一个不同的源。浏览器出于安全考虑，默认不允许跨域请求。解决方法包括使用CORS（跨源资源共享）、JSONP（仅限GET请求）、代理服务器等。

  8. 什么是闭包？

    • 闭包是指一个函数能够记住并访问它的词法作用域，即使这个函数在其词法作用域之外被调用。闭包允许函数访问自由变量。

  9. 异步操作是什么？

    • 异步操作是指那些不会立即返回结果的操作，它们会在后台运行，完成后通知调用者。异步编程模型有助于提高应用性能，避免UI线程被阻塞。

  10. 你对React/Vue/Angular的理解是什么？请比较它们的特点。

    • React是一个用于构建用户界面的JavaScript库，强调组件化和虚拟DOM。Vue是一个渐进式框架，易于学习，灵活性高。Angular是一个全面的框架，提供了从路由到表单处理的全套解决方案。React适合大型团队和项目，Vue适合快速开发，Angular适合需要完整解决方案的企业级应用。

  11. 在React中，什么是组件的生命周期？你如何管理状态？

    • React组件的生命周期分为三个主要阶段：挂载、更新和卸载。每个阶段都有对应的生命周期方法，如componentDidMount、componentDidUpdate和componentWillUnmount。状态管理可以使用组件的状态（state）或外部状态管理库如Redux。

  12. Vue中的计算属性和侦听器有什么区别？

    • 计算属性：适用于需要根据其他数据动态计算新值的场景，具有缓存机制，提高性能。
    • 侦听器：适用于需要在数据变化时执行复杂逻辑的场景，不会缓存结果，每次数据变化都会执行回调函数。

事件冒泡和事件捕获处理

  • 1.事件冒泡：事件发生在一个元素上，不仅会在该元素处理事件程序，还会向父元素传递，直到最外层根元素。这种传播机制允许父元素的时间处理捕获并且处理子元素发生方时间，
  • 2.事件捕获：过程和事件冒泡相反，从最外层元素到目标元素。在捕获阶段，这对事件进行预处理或是阻止事件达到特定目标很有用。

阻止事件冒泡

  • 1.使用调用事件对象stopProagation方法进行阻止事件向父节点传递。

    element.addEventListener('click', function(event) { 
event.stopPropagation(); 
console.log('事件已被阻止'); 
});

  • 2.事件委托：利用事件冒泡，在事件监听器添加到父元素上，而不是直接绑定到子元素。这是优化时间处理程序性能方法。

    parentElement.addEventListener('click', e => {
if(e.target.className === 'child'){
  log('点了子元素');
 }
)};

计算属性和侦听器的概念与区别

计算属性（Computed Properties）

  • 定义： 计算属性是基于其依赖的数据动态计算得到的值。计算属性的结果会被缓存，只有当其依赖的数据发生变化时，才会重新计算。这使得计算属性非常适合用于处理复杂的数据转换和计算，而不需要在每次访问时都重新计算。

  • 特点：

  1. 缓存机制：计算属性会根据其依赖的数据进行缓存。只有当依赖的数据发生变化时，计算属性才会重新计算。这意味着，如果你在模板中多次使用同一个计算属性，Vue会只计算一次并缓存结果，直到依赖项发生变化。
  2. 响应式：计算属性是响应式的，当依赖的数据发生变化时，计算属性会自动更新。
  3. 易维护：通过将复杂的逻辑封装在计算属性中，可以避免在模板中使用复杂的表达式，从而简化模板的维护。
  4. 使用场景：
  • 数据处理：对原始数据进行加工处理，比如格式化、拼接等。
  • 动态计算：根据多个响应式数据计算出一个新值。
  • 避免重复计算：计算属性会缓存结果，只有依赖的值发生变化时才会重新计算，这样可以提高性能。 示例：
<template>
  <div>
    <p>全名: {{ fullName }}</p>
  </div>
</template>

<script>
import { ref, computed } from 'vue';

export default {
  setup() {
    const firstName = ref('John');
    const lastName = ref('Doe');

    const fullName = computed(() => {
      return `${firstName.value} ${lastName.value}`;
    });

    return {
      firstName,
      lastName,
      fullName
    };
  }
}
</script>

在这个例子中，fullName是一个计算属性，它基于firstName和lastName的值动态计算得到。只有当firstName或lastName发生变化时，fullName才会重新计算。

侦听器（Watchers）

  • 定义： 侦听器用于观察并响应数据的变化，可以执行更复杂的逻辑。与计算属性不同，侦听器不会缓存结果，而是每次数据变化时都会执行回调函数。侦听器通常用于执行异步操作或开销较大的操作。

  • 特点：

  1. 无缓存：每次调用侦听器时，函数都会被执行，即使其依赖的数据没有改变。这意味着，如果你在模板中多次调用同一个侦听器，Vue会每次都重新执行这个函数。
  2. 适用于操作：侦听器主要用于执行操作，如提交表单、执行异步请求等，而不是用于计算和返回值。
  3. 灵活性：侦听器提供了更多的灵活性，可以监听多个数据源，并在数据变化时执行复杂的逻辑。
  4. 使用场景：
  • 异步操作：当数据变化时，需要执行异步操作，如发送网络请求。
  • 开销较大的操作：当数据变化时，需要执行开销较大的操作，如更新DOM。
  • 多数据源监听：可以监听多个数据源，并在任何一个数据源变化时执行回调函数。 示例：
<template>
  <div>
    <input v-model="message" placeholder="编辑信息">
    <p>反转信息: {{ reversedMessage }}</p>
  </div>
</template>

<script>
import { ref, watch, computed } from 'vue';

export default {
  setup() {
    const message = ref('');

    const reversedMessage = computed(() => {
      return message.value.split('').reverse().join('');
    });

    watch(message, (newVal, oldVal) => {
      console.log(`新的值: ${newVal}, 旧的值: ${oldVal}`);
      // 这里可以执行异步操作或其他复杂的逻辑
    });

    return {
      message,
      reversedMessage
    };
  }
}
</script>

在这个例子中，message是一个响应式数据，reversedMessage是一个计算属性，用于反转message的值。watch侦听器用于监听message的变化，并在每次变化时执行回调函数，输出新的值和旧的值。

总结

  • 计算属性：适用于需要根据其他数据动态计算新值的场景，具有缓存机制，提高性能。
  • 侦听器：适用于需要在数据变化时执行复杂逻辑的场景，不会缓存结果，每次数据变化都会执行回调函数。

有点发现几个面题存在相似哦！！~~

avatar
文章
阅读
粉丝