前端面试8

news/2024/7/8 3:56:25 标签: 前端

在这里插入图片描述

基础知识

解释一下什么是跨域问题，以及如何解决？
- 跨域问题是由于浏览器的同源策略限制了从一个源加载的网页脚本访问另一个源的数据。解决方法包括使用JSONP、CORS（跨源资源共享）、设置代理服务器等。
描述一下事件冒泡和事件捕获的区别。
- 事件冒泡是指事件从最深的节点开始，然后逐级向上层节点传播的过程。而事件捕获则是事件先从最上层元素开始，然后逐级向下直到目标元素的过程。现代浏览器支持addEventListener的第三个参数来指定是使用捕获还是冒泡阶段处理事件。
请解释一下闭包是什么，它有什么作用？
- 闭包是指有权访问另一个函数作用域中的变量的函数，创建闭包最常见的方式就是在一个函数内部创建另一个函数。闭包的作用主要有两个：一是可以读取函数内部的变量，二是让这些变量的值始终保持在内存中，不会在函数执行完毕后被垃圾回收机制回收。

框架与库

Vue.js中 computed 和 watch 的区别是什么？
- computed 是基于它们的依赖进行缓存的，只有当依赖发生变化时才会重新计算。适合用于计算属性。
- watch 更适合于执行异步操作或开销较大的操作，它会在数据变化时执行回调函数，没有缓存功能。
React中 useState 钩子函数的工作原理是什么？
- useState 是React 16.8引入的Hooks之一，它允许在函数组件中添加状态。useState接收一个初始状态作为参数，返回一个数组，其中第一个元素是当前状态，第二个元素是一个可以更新状态的函数。每次调用这个更新函数都会导致组件重新渲染。

移动开发

React Native中如何实现页面跳转？

使用react-navigation库是最常见的做法。首先安装并配置该库，然后在需要跳转的地方使用navigation.navigate('ScreenName')方法。例如：

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

在某个组件内跳转：

this.props.navigation.navigate('Details');

性能优化

前端性能优化有哪些常见方法？
- 减少HTTP请求次数（合并文件、使用雪碧图等）。
- 利用浏览器缓存（设置合理的缓存策略）。
- 图片优化（压缩图片、使用适当的图片格式）。
- 代码层面的优化（避免不必要的DOM操作、使用CSS3硬件加速）。
- 异步加载和懒加载（如图片懒加载、代码分割）。
- 使用CDN加速静态资源加载。