2024年最全2024 最新前端面试题汇总_前端体测，2024年最新滴滴面试官视频

最新推荐文章于 2025-05-13 21:21:32 发布

原创最新推荐文章于 2025-05-13 21:21:32 发布 · 1.1k 阅读

16 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #面试 #学习

程序员专栏收录该内容

157 篇文章

订阅专栏

JavaScript

js的基本类型有哪些？引用类型有哪些？null和undefined的区别。
如何判断一个变量是Array类型？如何判断一个变量是Number类型？（都不止一种）
Object是引用类型嘛？引用类型和基本类型有什么区别？哪个是存在堆哪一个是存在栈上面的？
JS常见的dom操作api
解释一下事件冒泡和事件捕获
事件委托（手写例子），事件冒泡和捕获，如何阻止冒泡？如何组织默认事件？
对闭包的理解？什么时候构成闭包？闭包的实现方法？闭包的优缺点？
this有哪些使用场景？跟C,Java中的this有什么区别？如何改变this的值？
call，apply，bind
显示原型和隐式原型，手绘原型链，原型链是什么？为什么要有原型链
创建对象的多种方式
实现继承的多种方式和优缺点
new 一个对象具体做了什么
手写Ajax，XMLHttpRequest
变量提升
举例说明一个匿名函数的典型用例
指出JS的宿主对象和原生对象的区别，为什么扩展JS内置对象不是好的做法？有哪些内置对象和内置函数？
attribute和property的区别
document load和document DOMContentLoaded两个事件的区别
JS代码调试
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
加载大组件
路由异步加载

15、何时需要使用 keep-alive？

答案：

缓存组件，不需要重复渲染
如多个静态 tab 页的切换
优化性能

16、何时需要使用 beforeDestroy？

答案：

解除自定义事件 event.$off
清除定时器
解绑自定义的 DOM 事件，如 window scroll等

17、什么是作用域插槽？

答案：父组件通过 slot 获取子组件中的的值：子组件中通过自定义属性绑定数据，父组件通过 template的 v-slot 属性来接收数据

18、vuex 中 action 和 mutation有何区别？

答案：

action 中处理异步，mutation 不可以
mutation 做原子操作
action 可以整合多个 mutation

19、vue-router 常用的路由模式

答案：

hash 默认：有 #，也就是路由的hash，后面是路由
H5 history(需要服务端支持)：没有 #，需要服务端再次，无特殊需求可选择 hash模式

20、如何配置 vue-router 异步加载？

答案：异步加载性能会优化很多，配置：component: () => import(…)

21、请用 vnode 描述一个 DOM 结构

答案：

22、监听 data 变化的核心 API 是什么？

答案： Object.defineProperty,以及要想一下如何深度监听、监听数组，有何缺点

如何深度监听：

如何监听数组：

不可像以下这样做会污染全局的Array 原型：

缺点：

- 深度监听，需要递归到底，一次性计算量大
  - 无法监听新增/删除属性（所以需要 vue.set vue.delete 实现新增/删除属性）
  - 无法监听原生数组，需要特殊处理

在这里分享一个前端面试题库小程序 MST题宝库

23、vue 如何监听数组变化

答案：

Object.defineProperty 不能监听数组变化
重新定义原型，重写push pop 等方法，实现监听
Proxy 可以原生支持监听数组变化

24、请描述响应式原理

答案：

监听data变化，监听data属性getter，setter（包括数组）参考：MVVM 框架 - queenya_zhang - 博客园第3点
组件渲染和更新的流程：

25、diff 算法的时间复杂度

答案：

O(n)

在O(n^3)基础上做了一些调整

26、简述diff算法过程：

答案：

patch(elem, vnode) 和 patch(vnode, newVnode)
patchVnode 和 addVnode 和 removeVnode
updateChildren(key 的重要性)

27、Vue 常见性能优化方式

答案：

合理使用v-show 和 v-if
合理使用computed
v-for 时要加key，以及避免和 v-if 同时使用
自定义事件、DOM 事件及时销毁
合理使用异步组件
合理使用keep-alive
data层级不要太深（因为深度监听一次性监听到底）
使用 vue-loader 在开发环境做模板编译（预编译）
webpack层面的优化
前端通用的性能优化，如果图片懒加载
使用 SSR

28、vuex

vuex 是一个专门为 vue.js 应用程序开发的状态管理模式,它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.

构建中大型单页应用是这个状态管理应该包含以下几个部分:

state,驱动应用的数据源
view,以声明方式将state映射到视图
actions,响应在view上的用户输入导致的状态变化

几个基本概念(属性):

state:单一状态树,储存的单一状态,是储存的基本数据.vuex 的状态储存是响应式的
getters:可以认为是 store的计算属性,对 state加工,是派生出来的数据,返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会重新计算
mutation:更改 vuex 的store中的状态的唯一方法是提交 mutation(mutation提交修改状态).每个mutation 都有一个字符串的事件类型(type)和一个回调函数(handler),这个回调函数就是我们实际进行状态更改的地方,并且它会接受 state 作为第一个参数,使用 store.commit, (mutation是同步的)
action: 像一个装饰器,action提交的是mutation,而不是直接更改状态,action可以包含任意异步操作,通过store.dispatch 方法触发,也可以使用 mapAction
module: 是 store 分割的模块,每个模块拥有直接的 state,getter,mutation,action, 甚至是嵌套子模块 – 从上至下进行同样方式的分割模块内部的 action,局部状态通过 context.state暴露出来,根节点则为 context.rootState

用于Vue 组件(API):

dispatch
commit
mapState
mapGetters
mapMutations
mapActions

vuex设计思想,借鉴了 Flux,Redux,将数据存放到全局的store,再将 store挂载到每个 vue实例组件中,利用 vue.js 的细粒对数据响应机制来进行高效的状态更新

vuex的store是如何挂载注入到组件中的呢?

在vue 项目中先安装 vuex
利用vue 的插件机制,使用 vue.use(vuex)时,会调用 vuex 的install方法,安装 vuex
applyMixin 方法使用 vue 混入机制,vue的生命周期 beforeCreate 钩子函数混入 vuexInit 方法

vuex是利用 vue 的 mixin 混入机制,在beforeCreate 钩子函数混入 vuexInit 方法,vuexInit 方法实现了 store 注入 vue 组件实例,并注册了 vuex store 的引用属性 $store

vuex 的state 和 getter 是如何映射到各个组件实例中响应式更新状态的?

vuex 的state 状态是响应式,是借助 vue的data是响应式,将 state存入vue实例组件的data中;vuex 的getters则是借助 vue的计算属性 computed 实现数据实时监听

Webpack 面试题

1、前端代码为何要进行构建和打包

答案：

代码方面：

体积更小（Tree-Shaking、压缩、合并），加载更快
编译高级语言或语法（TS,ES6+,模块化，scss）
兼容性和错误检查（Polyfilll, postcss, eslint）

研发流程方面：

统一、高效的开发环境
统一的构建流程和产出标准
集成公司构建规范（体测、上线等）

2、module、chunk、bundle分别是什么意思，有何区别

答案：

module – 各个源码文件，webpack 中一切皆模块
chunk – 多模块合并成的，如 entry import() splitChunk
bundle – 最终的输出文件

3、loader 和 plugin 的区别

答案：

loader：模块转换器，如 less --> css, 如识别 js 结尾的，css 结尾的，图片格式结尾的，通过 loader 转换成相应的文件格式

plugin：扩展插件，如 HtmlWebpackPlugin

常见 loader 和 plugin：

loaders | webpack 中文网，

本人在项目中常用到的loader有

babel-loader – This package allows transpiling JavaScript files using Babel and webpack.
css-loader – css-loader 解释(interpret) @import 和 url() ，会 import/require() 后再解析(resolve)它们。引用资源的合适 loader 是 file-loader和 url-loade
expose-loader – The expose loader adds modules to the global object. This is useful for debugging, or supporting libraries that depend on libraries in globals.，模块必须在你的 bundle 中被 require() 过
file-loader – Instructs webpack to emit the required object as file and to return its public URL
json-loader – 注意：由于 webpack >= v2.0.0 默认支持导入 JSON 文件。如果你使用自定义文件扩展名，你可能仍然需要使用此 loader。See the v1.0.0 -> v2.0.0 Migration Guide for more information
less-loader – Compiles Less to CSS.
postcss-loader – Loader for webpack to process CSS with PostCSS
style-loader – Adds CSS to the DOM by injecting a <style> tag
url-loader – Loads files as base64 encoded URL

Plugins | webpack 中文网

本人在项目中常用的 plugin 有：

HtmlWebpackPlugin（html-webpack-plugin） – HtmlWebpackPlugin简化了HTML文件的创建，以便为你的webpack包提供服务。这对于在文件名中包含每次会随着编译而发生变化哈希的 webpack bundle 尤其有用。你可以让插件为你生成一个HTML文件，使用lodash模板提供你自己的模板，或使用你自己的loader
ExtractTextWebpackPlugin（extract-text-webpack-plugin）-- Extract text from a bundle, or bundles, into a separate file.
CopyWebpackPlugin（copy-webpack-plugin）-- Copies individual files or entire directories to the build directory
UglifyjsWebpackPlugin（uglifyjs-webpack-plugin）-- This plugin uses UglifyJS v3 (uglify-es)") to minify your JavaScript
DllPlugin – DLLPlugin 和 DLLReferencePlugin 用某种方法实现了拆分 bundles，同时还大大提升了构建的速度。
IgnorePlugin – 防止在 import 或 require 调用时，生成以下正则表达式匹配的模块：