2025最新高频前端面试题解析（含Vue/React/JS核心考点）

HTML、CSS相关

1. CSS3新增的特性有哪些？

CSS3在边框、背景、文本效果、渐变、转换、过渡、动画等新增了许多特性。

• 边框：
  – border-radius：圆角边框
  – border-shadow：边框阴影
  – border-image：边框图像
  –border-image-source：边框图像来源
  –border-image-repeat：是否平铺，repeat平铺、round铺满、streach拉伸
  – border-image-width：图片边框宽度
• 背景：
  – background-size：背景图片尺寸
• 文本效果：
  – word-break：定义如何换行，属性有normal、break-all、keep-all
  – word-wrap：是否自动换行
  – text-overflow：当文本溢出时应该如何处理
• 渐变
  –Linear-gradient()：线性渐变
  – Radial-gradient()：径向渐变
• 转换
  – 平移：translate()、translateX()、translateY()
  – 旋转：rotate()
  – 倾斜：skew()
  – 缩放：scale()
• 过渡
  – transition：属性名、过渡时间、过渡速度曲线、过渡开始前的等待时间
• 动画
  使用animation定义动画，使用keyframes设置0%、50%、100%

.box {
  animation: slide 3s ease-in 1s infinite alternate;
}

@keyframes slide {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(100px);
    background: blue;
  }
  100% {
    transform: translateX(200px);
    background: green;
  }
}

2. 高度塌陷以及清除浮动的方式有哪些？

当父元素没有设置高度而子元素的所有元素都设置了浮动就会出现高度塌陷的问题，使得父元素高度塌陷为0。为了解决高度塌陷的问题，就需要清除浮动，有以下清除浮动的方式：

• 给父元素设置高度
• 设置父元素的样式为overflow: hidden，将父元素转为块级格式化上下文，块级格式在计算高度时会将浮动元素的高度也记录进去。
• 在所有浮动子元素的后面再添加一个元素，设置这个元素的样式clear: both、height: 0、overflow: hidden。

3. 定位的属性值有何区别？

定位的属性值有Relative、Absolute、Fixed和Static

• Relative：相对定位，它不会脱离事件流，相对于自身定位
• Absolute：绝对定位，它会脱离事件流，相对于父元素定位
• Fixed：固定值，它会脱离事件流，相对于浏览器屏幕定位
  -Static：默认值，它出现在正常的事件流中

4. 子元素如何在父元素中居中？

JavaScript相关

1. 闭包是什么？

闭包是指在一个函数内部定义一个函数，函数内部的函数被函数以外的函数调用就会形成闭包。闭包可以创建私有变量，防止外部直接访问和修改，只暴露在特定的方法里。函数内部定义的变量，外部可以通过调用这个函数内部的函数去调用这个变量，外部没法直接使用这个变量。

2. JS中常见的内存泄漏

JS内存泄漏是指被分配的内存即不能使用也不能回收，直到浏览器进程结束，常见的内存泄漏有以下几个：

• 意外的全局变量
• 被遗忘的定时器或回调函数
• 脱离DOM的引用
• 闭包

3. 事件委托是什么？如何确定事件源？

事件委托是指利用事件冒泡机制，创建一个时间处理程序，父元素可以处理同类型的事件，对于事件源，谁触发谁就是事件源，父元素会将调用者也就是事件源记录下来，然后执行对应的代码。

4. 什么是事件冒泡

事件冒泡是事件流的一个阶段，事件流分为捕获阶段、目标阶段和冒泡阶段。事件冒泡是指从内向外逐层传播，从子元素到父元素再到祖先元素再到document再到window。可以使用evevt.stopropagation()阻止事件冒泡。

5. 本地存储和cookie的区别

本地存储和cookie都是用来存储数据的。其中对于cookie，浏览器每次向同一服务器发送请求时都会将cookie传入，服务器将数据返回到cookie本地，也就是说cookie是在浏览器和服务器之间来回穿梭，因此cookie可以用在身份验证或者跟踪用户行为等。然而cookie的大小是有限的，不超过4K，为了解决cookie有限的问题，引入了本地存储，它的大小是5M，他存储在本地，不会和服务器交互，本地存储分为sessionStorage和LocalStorage，它俩的区别是sessionStorage是浏览器关闭前有效，LocalStorage是永久有效。

Vue相关

1. 什么是计算属性？

计算属性是声明式数据属性，它用来计算data的数据并将计算结果返回，它不会修改data中的数据的值，当它所依赖的数据发生变化时，它才需要重新计算，当所依赖的数据未发生变化，不需要重新计算，只需在缓存中获取即可。

2. Vuex是什么？怎么使用？在什么场景下使用？

Vuex是一个状态管理工具，它创建了一个共享的数据存储供所有组件使用。它有以下属性，state是用来存储数据的，通过this.$store.state.xxx使用。Getters是计算属性，通过this.$store.getters.xxx使用。mutations定义了一些函数方法修改state的值，通过this.$store.commit.xxx触发。actions是异步操作，通过this.$store.dispatch.xxx触发。
Vuex解决了非父子组件通信的问题，可以减少Ajax的请求次数，数据直接在state中获取。
当多个组件需要访问或修改同一个数据时用Vuex。对于非父子组件的通信可以用到vuex。

3. Vue中路由跳转方式？

Vue的路由跳转方式有声明式路由和编程式路由，其中编程式路由是通过this.$router.push()实现跳转。声明式路由通过<router-link></router-link>跳转，<router-view></router-view>是路由出口。

4. Vue跨域的解决方式?

跨域问题是指前后端分离的情况下，浏览器和服务器在不同源的情况下不能相互通信，跨域问题有两种解决方式：

• 使用jsonp解决：使用jsonp解决跨域问题的原理是使用<script>标签，<script>标签可以规避同源策略。首先定义一个回调函数，在<script>标签中使用src传递url时通过callback将函数名拼接在url后面，然后服务器将结果返回到函数中，避免了跨域问题。
  使用proxy代理解决：在浏览器和服务器之间添加一个proxy代理，让浏览器误以为和同源的服务器进行的通信。

5. Vue生命周期请简述

Vue生命周期有beforeCreate、Created、beforemounte、mounted、beforeupdate、updated、beforedestroy、destroyed。