当前位置：首页>跳槽>2026前端高频面试题,跳槽必会

2026前端高频面试题,跳槽必会

2026-03-18 13:25:31

2026前端高频面试题,跳槽必会

前言本文整理了2026年最新的前端面试题，涵盖HTML5、CSS3、JavaScript、Vue、React、Webpack等技术栈，包括基础知识、面试题、算法题、性能优化等内容，帮助开发者备考前端面试。

经典面试题

div上下居中对齐的几种方式？

/ 1. Flex布局 /.parent {  display: flex;  justify-content: center;  align-items: center;  height: 100vh;}/ 2. Grid布局 /.parent {  display: grid;  place-items: center;  height: 100vh;}/ 3. 定位 + Transform /.parent {  position: relative;  height: 100vh;}.child {  position: absolute;  top: 50%;  left: 50%;  transform: translate(-50%, -50%);}/ 4. line-height (单行文本) /.parent {  line-height: 100vh;  text-align: center;}

伪类与伪元素的区别？

•

伪类：用于选择DOM树外的信息或元素状态，如 :hover, :visited, :focus。

•

伪元素：创建不在DOM树中的虚拟元素，如 ::before, ::after，用于插入内容。

CSS选择器的优先级排序？从高到低：!important > 行内样式 > ID选择器 > 类/属性/伪类选择器 > 元素/伪元素选择器 > 通配符/继承。

深拷贝与浅拷贝的区别？

•

浅拷贝：只复制对象的第一层属性。修改新对象的引用类型属性会影响原对象。方法：Object.assign()、扩展运算符...。

•

深拷贝：完全复制对象及其嵌套属性，新旧对象互不影响。方法：递归、JSON.parse(JSON.stringify(obj))（注意函数、undefined等丢失）、_.cloneDeep(lodash)。

HTTPS的工作流程及证书验证？

客户端发起HTTPS请求。

服务器返回包含公钥的证书。

客户端验证证书（颁发机构、有效期等）。

验证通过后，客户端生成对称加密密钥，用服务器公钥加密后发送。

服务器用私钥解密，获得对称密钥。

双方使用对称密钥加密通信。

如何处理图片/资源防盗链？

•

Nginx配置：通过valid_referers指令判断Referer头。

•

CDN服务：使用又拍云、七牛云等的防盗链配置。

•

Session校验：通过服务端生成带时效的访问令牌。

•

添加水印。

JavaScript核心

基础与进阶

解释闭包？为什么要用？缺点？

•

定义：函数可以访问并记住其词法作用域，即使该函数在其作用域外执行。

•

用途：创建私有变量、实现函数工厂、模块化、缓存数据。

•

缺点： improper使用可能导致内存泄漏（变量常驻内存）。

解释作用域链？每个函数都有自己的作用域。当访问一个变量时，JS引擎会从当前作用域开始查找，如果没有，则逐级向上（父作用域、全局作用域）查找，直到找到或到达全局作用域。这条查找路径就是作用域链。

call、apply、bind的区别？

•

func.call(thisArg, arg1, arg2, ...)：立即调用，参数逐个传递。

•

func.apply(thisArg, [argsArray])：立即调用，参数以数组形式传递。

•

func.bind(thisArg, arg1, arg2, ...)：返回一个新函数（绑定函数），不立即调用，可预设参数。

let、const、var的区别？

特性	`var`	`let`	`const`
作用域	函数作用域	块级作用域	块级作用域
变量提升	是（初始化为`undefined`）	是（暂存性死区）	是（暂存性死区）
重复声明	允许	不允许	不允许
初始值	可不初始化	可不初始化	必须初始化
值可变性	可变	可变	不可变（对于基本类型）

Promise的理解？为什么支持链式调用？

•

理解：Promise是异步编程的一种解决方案，表示一个异步操作的最终完成（或失败）及其结果值。有三种状态：pending、fulfilled、rejected。

•

链式调用：then、catch、finally方法返回的是一个新的Promise，因此可以继续调用这些方法，形成链式。

JS事件循环机制（Event Loop）？JS是单线程的。所有同步任务在主线程执行栈执行。异步任务（如setTimeout、Promise）会被放入任务队列。

•

宏任务：script整体代码、setTimeout、setInterval、I/O、UI渲染。

•

微任务：Promise.then/catch/finally、MutationObserver、queueMicrotask。执行顺序：执行一个宏任务 -> 执行所有微任务 -> 渲染 -> 取下一个宏任务。

如何判断变量类型？

•

typeof：区分基本类型（除null返回"object"）和function。对null、Array、Object均返回"object"。

•

instanceof：检测构造函数的prototype属性是否出现在对象的原型链上。用于检测引用类型。

•

Object.prototype.toString.call(value)：最准确，返回[object Type]。

防抖（Debounce）与节流（Throttle）？应用场景？

•

防抖：事件触发后，在n秒内函数只执行一次，若在n秒内又触发了事件，则重新计时。场景：搜索联想、窗口resize。

•

节流：事件触发后，在n秒内函数只执行一次，稀释执行频率。场景：滚动加载、按钮高频点击。

ES6+新特性

•

变量声明：let, const。

•

箭头函数：() => {}，无自己的this，继承自外层。

•

模板字符串：`string ${expression}`。

•

解构赋值：const { a, b } = obj;。

•

模块化：import / export。

•

Promise & async/await。

•

扩展运算符：...。

•

新的数据结构：Set, Map。

•

新的数组方法：find(), findIndex(), includes(), flat()。

操作数组与对象

•

数组转对象：

const arr = [['key1', 'value1'], ['key2', 'value2']];const obj = Object.fromEntries(arr); // ES2019// 或const obj = arr.reduce((acc, [key, val]) => ({ ...acc, [key]: val }), {});

•

对象转数组：

const obj = { a: 1, b: 2 };const arr = Object.entries(obj); // [['a', 1], ['b', 2]]const arrKeys = Object.keys(obj); // ['a', 'b']const arrValues = Object.values(obj); // [1, 2]

Vue.js

核心概念

对MVVM的理解？

•

Model：数据模型，对应data。

•

View：UI视图，对应模板。

•

ViewModel：Vue实例，作为桥梁。它通过数据绑定将Model的变化实时反映到View，通过DOM监听将View的交互更新到Model。

Vue2与Vue3生命周期？

•

Vue2：beforeCreate -> created -> beforeMount -> mounted -> beforeUpdate -> updated -> beforeDestroy -> destroyed。

•

Vue3 (Composition API)：setup() -> onBeforeMount -> onMounted -> onBeforeUpdate -> onUpdated -> onBeforeUnmount -> onUnmounted。

Vue2与Vue3响应式原理？

•

Vue2：使用Object.defineProperty()递归劫持对象属性的getter和setter。无法监听数组索引和length变化，需用Vue.set。

•

Vue3：使用Proxy代理整个对象。功能更强大，能监听动态添加的属性、数组索引/长度变化、Map/Set等。

Vue组件间通信方式？

子调父方法：$parent（不推荐）。

•

兄弟/跨级：

•

Event Bus：$on, $emit。

•

Vuex：状态管理。

•

provide / inject：祖先向后代注入数据。

•

路由参数：$route.params, $route.query。

v-if和v-for哪个优先级更高？如何优化？

•

Vue2：v-for优先级高于v-if。不推荐两者用在同一元素上。

•

Vue3：v-if优先级高于v-for。

•

优化：在外层包装<template>标签进行条件判断，或在计算属性中预先过滤列表。vue

$nextTick的作用与原理？

•

作用：在下次DOM更新循环结束之后执行延迟回调。用于修改数据后立即操作更新后的DOM。

•

原理：Vue的DOM更新是异步的。修改数据后，视图不会立刻更新，而是将更新操作推入一个队列。$nextTick将回调函数加入队列尾部，确保在DOM更新完成后执行。

key的作用与原理？

•

作用：给虚拟DOM节点提供唯一标识，用于高效地更新虚拟DOM。

•

原理：在diff算法中，通过key可以精确判断新旧节点是否为同一个，从而避免不必要的DOM操作，就地复用元素，提升性能。

Vue Router & Vuex

hash模式 vs history模式？

特性	`hash` 模式	`history` 模式
URL显示	`http://site.com/#/path`	`http://site.com/path`
原理	监听`window.onhashchange`	利用`History API` (`pushState`, `replaceState`)
服务器配置	不需要特殊配置	需要配置，将所有路由重定向到`index.html`
SEO	相对较差	较好

路由守卫（钩子函数）？

•

全局守卫：router.beforeEach, router.afterEach。

•

路由独享守卫：在路由配置中定义beforeEnter。

•

组件内守卫：beforeRouteEnter, beforeRouteUpdate, beforeRouteLeave。

Vuex是什么？核心概念？Vuex是Vue的状态管理库，采用集中式存储管理应用的所有组件的状态。

•

State：单一状态树，存储数据。

•

Getter：从state派生出一些状态（计算属性）。

•

Mutation：同步修改state的唯一途径。通过commit调用。

•

Action：提交mutation，可包含异步操作。通过dispatch调用。

•

Module：将store分割成模块。

性能与优化

如何优化网站性能？

•

资源：雪碧图、Base64编码小图标、压缩代码/图片、CDN托管、懒加载、预加载。

•

缓存：合理利用浏览器缓存（强缓存、协商缓存）。

•

渲染：CSS放头部，JS放底部、减少DOM操作、避免重排重绘、使用transform/opacity做动画。

•

网络：减少HTTP请求、使用HTTP/2。

keep-alive的作用与使用？

•

作用：Vue内置组件，用于缓存不活动的组件实例，避免重复渲染。

•

使用：包裹动态组件或<router-view>。

•

生命周期：被缓存的组件会触发activated和deactivated钩子。vue

React.js

核心概念

React特点？

虚拟DOM是什么？虚拟DOM是真实DOM在内存中的JavaScript对象表示。React通过diff算法比较新旧虚拟DOM的差异，然后将最小化的变更应用到真实DOM上，减少直接操作DOM带来的性能损耗。

类组件 vs 函数组件？

方面	类组件	函数组件（含Hooks）
语法	ES6 Class	JavaScript函数
状态	`this.state` , `setState()`	`useState` Hook
生命周期	有	`useEffect` 等Hooks模拟
`this`	有	无
性能	稍差（需实例化）	更好

state和props的区别？

•

props：父组件传递给子组件的数据，不可变。

•

state：组件内部管理的状态，可变，通过setState更新。

React Hooks 常用Hook？

•

useState：管理状态。

•

useEffect：处理副作用（数据获取、订阅、手动DOM操作）。

•

useContext：消费Context。

•

useReducer：复杂状态逻辑。

•

useCallback/useMemo：性能优化，缓存函数/值。

•

useRef：访问DOM或存储可变值。

性能与进阶

React中key的重要性？key帮助React识别列表中哪些元素被改变、添加或删除。稳定的key（如ID）有助于diff算法高效更新，避免不必要的重新渲染。

什么是受控组件和非受控组件？

•

受控组件：表单数据由React组件管理（value + onChange）。

•

非受控组件：表单数据由DOM自身管理（通过ref获取）。

如何优化React性能？

•

使用React.memo缓存函数组件。

•

使用useCallback和useMemo避免不必要的重新计算和渲染。

•

列表项使用稳定的key。

•

组件按需加载（React.lazy + Suspense）。

•

避免在render方法中绑定函数或创建新对象/数组。

工程化与工具

Webpack

核心概念？

Loader：处理非JS文件（如CSS、图片），将其转换为模块。

•

Plugin：执行范围更广的任务，如打包优化、资源管理、环境变量注入。

•

Mode：模式（development, production）。

与Grunt/Gulp的区别？Grunt/Gulp是任务执行器，基于文件流，处理文件（编译、压缩、合并）。Webpack是模块打包器，以模块和依赖关系为入口，构建依赖图，打包成静态资源。

如何提高构建速度？

•

使用thread-loader、happy-pack进行多进程/多实例构建。

•

利用缓存：cache-loader、HardSourceWebpackPlugin。

•

缩小查找范围（配置resolve.modules, resolve.extensions）。

•

使用DllPlugin预编译不常变的库。

什么是模块热更新（HMR）？Hot Module Replacement，在应用程序运行过程中，替换、添加或删除模块，而无需重新加载整个页面。保留了应用状态，提升开发体验。

Vite

Vite为什么比Webpack快？

•

开发环境：基于原生ESM，无需打包，按需编译和加载。

•

预构建：使用Esbuild（Go编写）预构建依赖，速度极快。

•

HMR：基于ESM的HMR，更新速度与模块大小无关。

Vite的缺点？

网络与浏览器

Cookie、sessionStorage、localStorage的区别？

特性	Cookie	localStorage	sessionStorage
生命周期	可设置过期时间	永久，需手动清除	会话级别，标签页关闭即清除
存储大小	~4KB	~5-10MB	~5MB
与服务器通信	每次请求自动携带	仅本地	仅本地
作用域	同源且路径匹配	同源	同源，且同一标签页

JSONP原理？利用<script>标签没有跨域限制的特性，动态创建script标签，src指向目标API并附带一个回调函数名（如callback=handleData）。服务器返回一段调用该回调函数的JavaScript代码，前端定义该函数来处理数据。仅支持GET请求。

跨域解决方案？

•

CORS：服务端设置Access-Control-Allow-Origin等响应头。

•

JSONP：如上所述。

•

Nginx反向代理：将请求代理到同源的服务。

•

WebSocket：协议本身支持跨域。

•

开发环境代理：如Vue/React项目配置proxy。

浏览器与服务器交互原理？

浏览器接收响应，解析HTML，构建DOM树。

解析CSS，构建CSSOM树，与DOM树结合形成渲染树。

布局（Layout）与绘制（Paint），显示页面。

关闭TCP连接（四次挥手）。

算法与编程题

找出字符串中出现次数最多的字符？

function findMostChar(str) {  const map = {};  let maxCount = 0;  let maxChar = '';  for (let char of str) {    map[char] = (map[char] || 0) + 1;    if (map[char] > maxCount) {      maxCount = map[char];      maxChar = char;    }  }  return { char: maxChar, count: maxCount };}console.log(findMostChar('afjghdfraaaa')); // {char: 'a', count: 5}

数组去重与扁平化？

// 去重const uniqueArr = [...new Set([1, 2, 2, 3, 3, 3])]; // [1, 2, 3]// 扁平化const flatArr = [1, [2, [3]]].flat(Infinity); // [1, 2, 3]

其他专题

Git常用命令

git init                    # 初始化仓库git clone <url>            # 克隆远程仓库git add .                  # 添加所有文件到暂存区git commit -m "message"    # 提交git push origin master     # 推送到远程master分支git pull origin master     # 拉取远程更新git branch                 # 查看分支git checkout -b dev        # 创建并切换到dev分支git merge dev              # 合并dev分支到当前分支git reset --hard <commit_id> # 版本回退