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

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上的用户输入导致的状态变化

几个基本概念(属性):

1. state:单一状态树,储存的单一状态,是储存的基本数据.vuex 的状态储存是响应式的
2. getters:可以认为是 store的计算属性,对 state加工,是派生出来的数据,返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会重新计算
3. mutation:更改 vuex 的store中的状态的唯一方法是提交 mutation(mutation提交修改状态).每个mutation 都有一个字符串的事件类型(type)和一个回调函数(handler),这个回调函数就是我们实际进行状态更改的地方,并且它会接受 state 作为第一个参数,使用 store.commit, (mutation是同步的)
4. action: 像一个装饰器,action提交的是mutation,而不是直接更改状态,action可以包含任意异步操作,通过store.dispatch 方法触发,也可以使用 mapAction
5. 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是如何挂载注入到组件中的呢?

1. 在vue 项目中先安装 vuex
2. 利用vue 的插件机制,使用 vue.use(vuex)时,会调用 vuex 的install方法,安装 vuex
3. 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有

1. babel-loader – This package allows transpiling JavaScript files using Babel and webpack.
2. css-loader – css-loader 解释(interpret) @import 和 url() ，会 import/require() 后再解析(resolve)它们。引用资源的合适 loader 是 file-loader和 url-loade
3. 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() 过
4. file-loader – Instructs webpack to emit the required object as file and to return its public URL
5. json-loader – 注意：由于 webpack >= v2.0.0 默认支持导入 JSON 文件。如果你使用自定义文件扩展名，你可能仍然需要使用此 loader。See the v1.0.0 -> v2.0.0 Migration Guide for more information
6. less-loader – Compiles Less to CSS.
7. postcss-loader – Loader for webpack to process CSS with PostCSS
8. style-loader –  Adds CSS to the DOM by injecting a <style> tag
9. url-loader – Loads files as base64 encoded URL

Plugins | webpack 中文网

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

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

• • • requestRegExp 匹配(test)资源请求路径的正则表达式。
      • contextRegExp （可选）匹配(test)资源上下文（目录）的正则表达式。

4、babel 和 webpack 的区别

答案：

• Babel --> JS 新语法编译工具，不关心模块化
• webpack --> 打包构建工具，是多个 loader plugin的集合

5、webpack 如何实现懒加载

答案：

import()

结合Vue React 异步组件

结合vue-router React-router 异步加载路由

6、为何 Proxy 不能被 Polyfill

答案：

如class 可以用 function 模拟

如 Promise 可以用 callback 模拟

但 Proxy 的功能用 Object.defineProperty 无法模拟（没有任何一个语法可以模拟 Proxy）

7、如何产出一个lib

答案：

8、webpack 常见性能优化

答案：

• webpack 优化构建速度（可用于生产）

1. 优化 babel-loader
2. IgnorePlugin
3. noParse
4. happyPack
5. ParallelUgligyPlugin

• webpack 优化构建速度（不可用于生产）

1. 自动刷新
2. 热更新
3. DllPlugin

• webpack 优化产出代码

1. 小图片 base64 编码
2. bundle 加 hash
3. 懒加载
4. 提取公共代码
5. 使用 CDN 加速
6. IgnorePlugin
7. 使用 Production
8. Scope Hosting

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代码调试

• 开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】