2026年3月，前端地狱难度的真相 都说今年金三银四变成了“铜三铁四”，尤其是字节的前端岗，简历池子深不见底，一面算法二面框架三面项目，轮轮刷人，没有硬核准备根本撑不过三轮。
普通人想靠刷leetcode、背八股文混进去？几乎不可能了。面试官现在专挑场景设计、底层源码、工程化落地来考，随便一个“如何设计高性能虚拟列表”就能卡掉80%的候选人。
但也不是完全没有机会。我结合近期30+场大厂面经（字节、腾讯、阿里），把2026年高频必考题按JavaScript、框架源码、性能优化、TypeScript、工程化五大模块，整理出了这份 《大厂前端面试高频1000题（精华版）》 。不求你全会，但掌握这1000个考点，绝对能让你在3月这场硬仗里多拿几个offer。
怎么在前端页面中添加水印？
在前端页面中添加水印可以通过以下几种方法实现：
1. 使用 CSS 实现
使用 CSS 伪元素和 background 属性来添加水印。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Watermark Example</title>
<style>
.watermarked {
position: relative;
}
.watermarked::before {
content: "Watermark";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(-30deg);
font-size: 3rem;
color: rgba(0, 0, 0, 0.1);
pointer-events: none;
z-index: 1000;
}
</style>
</head>
<body>
<div class="watermarked">
<!-- Your content here -->
<p>Some content with a watermark.</p>
</div>
</body>
</html>
2. 使用 Canvas
通过在 canvas 上绘制水印来实现。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Canvas Watermark Example</title>
</head>
<body>
<canvas id="watermarkCanvas" width="600" height="400"></canvas>
<script>
const canvas = document.getElementById('watermarkCanvas');
const ctx = canvas.getContext('2d');
// Draw background
ctx.fillStyle = '#fff';
ctx.fillRect(0, 0, canvas.width, canvas.height);
// Draw watermark text
ctx.font = '48px Arial';
ctx.fillStyle = 'rgba(0, 0, 0, 0.2)';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.save();
ctx.translate(canvas.width / 2, canvas.height / 2);
ctx.rotate(-Math.PI / 6);
ctx.fillText('Watermark', 0, 0);
ctx.restore();
</script>
</body>
</html>
3. 使用 HTML 的 background 属性
将水印作为背景图像设置到页面的某个容器上。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Background Watermark Example</title>
<style>
.watermarked {
background-image: url('watermark.png');
background-repeat: no-repeat;
background-size: 200px 100px;
background-position: center;
}
</style>
</head>
<body>
<div class="watermarked">
<!-- Your content here -->
<p>Some content with a watermark.</p>
</div>
</body>
</html>
4. 使用 JavaScript 动态生成水印
通过 JavaScript 在 DOM 中添加水印元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic Watermark Example</title>
<style>
.watermark {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
z-index: 9999;
text-align: center;
font-size: 3rem;
color: rgba(0, 0, 0, 0.1);
transform: rotate(-30deg);
}
</style>
</head>
<body>
<div id="content">
<!-- Your content here -->
<p>Some content with a watermark.</p>
</div>
<script>
const watermark = document.createElement('div');
watermark.className = 'watermark';
watermark.textContent = 'Watermark';
document.body.appendChild(watermark);
</script>
</body>
</html>
如何封装一个请求，让其多次调用的时候，实际只发起一个请求的时候，返回同一份结果？
封装一个请求使其在多次调用时只发起一次请求，并返回相同结果，通常是通过请求去重（debouncing）来实现的。这种功能对于避免重复的网络请求、提高性能和减少不必要的负载非常有用。
同时，我们需要确保在请求完成之前，对相同请求的重复调用都会共享相同的请求 Promise。避免出现连续发出相同的请求，在第一个请求尚未完成时，那么可能会发出多个请求的情况。
可以通过以下步骤来实现这个功能：
1. 使用一个缓存机制
我们可以使用 JavaScript 对象或 Map 来缓存已经发起的请求，并在 subsequent 请求中返回缓存的结果。缓存的关键是确保相同的请求参数对应同一个缓存条目。
2. 创建请求缓存封装
以下是一个基于 axios 的请求去重的封装示例：
import axios from 'axios';
// 请求缓存
const requestCache = new Map();
async function fetchData(url, params) {
// 生成缓存 key
const cacheKey = `${url}?${new URLSearchParams(params).toString()}`;
// 检查缓存中是否已有数据
if (requestCache.has(cacheKey)) {
return requestCache.get(cacheKey);
}
// 创建请求 Promise
const requestPromise = axios.get(url, { params })
.then(response => {
// 请求成功，存储结果
requestCache.delete(cacheKey); // 请求完成后，移除缓存
return response.data;
})
.catch(error => {
// 请求失败，清除缓存
requestCache.delete(cacheKey);
throw error;
});
// 存储请求 Promise
requestCache.set(cacheKey, requestPromise);
// 返回 Promise
return requestPromise;
}
export default fetchData;
注意事项：
- 缓存请求 Promise：每个请求的 Promise 被缓存到 requestCache 中。后续的相同请求会返回这个缓存的 Promise。
- 请求完成后移除缓存：请求成功或失败后，删除缓存，以防止缓存中的 Promise 长时间存在，避免内存泄漏。
- 请求失败处理：如果请求失败，清理缓存并抛出错误，以便后续调用可以重新发起请求。
3. 使用请求缓存
使用封装好的 fetchData 函数来发起请求。多次调用相同的请求 URL 和参数只会发起一次网络请求，并返回相同的结果。
import fetchData from './fetchData';
// 使用示例
fetchData('https://api.example.com/data', { id: 1 })
.then(data => console.log(data))
.catch(error => console.error(error));
// 再次调用相同的请求
fetchData('https://api.example.com/data', { id: 1 })
.then(data => console.log(data)) // 共享相同的请求结果
.catch(error => console.error(error));
JavaScript
相比于npm和yarn，pnpm的优势是什么?
如果使用 Math.random()计算中奖概率会有什么问题吗?
举例说明你对尾递归的理解，以及有哪些应用场景
说说你对 Iterator, Generator 和Async/Await 的理解
怎么使用js实现拖拽功能？
前端跨页面通信，你知道哪些方法？
JavaScript脚本延迟加载的方式有哪些？
怎么理解ES6中Generator的？使用场景有哪些？
导致页面加载白屏时间长的原因有哪些，怎么进行优化？
微前端中的应用隔离是什么，一般是怎么实现的？
JavaScript对象的底层数据结构是什么？
浏览器和Node中的事件循环有什么区别？
版本号排序
哪些原因会导致js里this指向混乱？
怎么实现大型文件上传？
说说你的ES6-ES12的了解
Promise的 finally怎么实现的？
怎么使用js动态生成海报？
异步编程有哪些实现方式？
AST语法树是什么？
JS内存泄露的问题该如何排查？
React框架题
React Reconciler 为何要采用 fiber 架构？
useState是如何实现的?
fiber架构的工作原理？
React Fiber是什么?
简单介绍下React中的diff算法
如何让useEffect 支持 async/await?
React中怎么实现状态自动保存(KeepAlive)？
ReactFiber
是如何实现更新过程可控？
react中懒加载的实现原理是什么？
React有哪些性能优化的方法？
不同版本的React都做过哪些优化？
React18新特性
说说你对ReactHook
的闭包陷阱的理解，有哪些解决方案？
React中，怎么给children添加额外的属性？
Fiber为什么是React性能的一个飞跃?
react是否支持给标签设置自定义的属性，比如给video标签设置webkit-playsinline?
说说React render阶段的执行过程
React中，fiber是如何实现时间切片的？
Vue框架题
Vue模板是如何编译的
vue3相比较于vue2，在编译阶段有哪些改进?
说说Vue页面渲染流程
Vue项目中，你做过哪些性能优化？
如果使用Vue3.0实现一个Modal，你会怎么进行设计？
Vue3.0里为什么要用 Proxy API 替代defineProperty API？
Vue有了数据响应式，为何还要diff？
说说vue3中的响应式设计原理
说说 Vue 中 CSS scoped 的原理
vue3的响应式库是独立出来的，如果单独使用是什么样的效果？
手写vue的双向绑定
什么是虚拟DOM？如何实现一个虚拟DOM？说说你的思路
SSR是什么？Vue中怎么实现？
说下Vite的原理
TypeScript面试题
如何检查TypeScript中的null和undefined？
如何将unknown类型指定为一个更具体的类型？
Typescript中什么是类类型接口？
说说你对 typescript 的理解？与javascript的区别？
什么是TypeScript Declare关键字?
in运算符作用是什么？
纯TS项目工程中，如何使用alias path?
使用TS实现一个判断传入参数是否是数组类型的方法
TypeScript 中的 getter/setter是什么？你如何使用它们？
unknown是什么类型？
never是什么类型，详细讲一下
请实现下面的sleep 方法
TypeScript中的方法重写是什么？
tsconfig.json文件有什么用？
typescript 中的 is关键字有什么用？
TypeScript中的类是什么？你如何定义它们？
Typescript中never 和 void 的区别？
性能优化面试题
导致页面加载白屏时间长的原因有哪些，怎么进行优化？
Service Worker是如何缓存http 请求资源的?
怎么统计页面的性能指标？
如何优化DOM树解析过程？
DNS预解析是什么？怎么实现？
如何防止CSS阻塞渲染？
虚拟DOM一定更快吗？
如果某个页面有几百个函数需要执行，可以怎么优化页面的性能？
React.memo()和 useMemo() 的用法是什么，有哪些区别？
SPA首屏加载速度慢的怎么解决
在React中可以做哪些性能优化？
前端性能优化指标有哪些？怎么进行性能检测？
怎么进行站点内的图片性能优化？
什么是内存泄漏？什么原因会导致呢？
如何用webpack来优化前端性能
为何现在市面上做表格渲染可视化技术的，大多数都是canvas，而很少用svg 的?
script标签放在header里和放在body底部里有什么区别？
SPA（单页应用）首屏加载速度慢怎么解决？
浏览器为什么要请求并发数限制？
dom渲染能使用GPU加速吗？
css加载会造成阻塞吗？
以用户为中心的前端性能指标有哪些？
有些框架不用虚拟dom，但是他们的性能也不错是为什么？
script 标签中，async 和 defer 两个属性有什么用途和区别？
如何优化大规模dom操作的场景？
谈谈对 window.requestAnimationFrame的理解
页面加载的过程中，JS文件是不是一定会阻塞DOM和 CSSOM的构建?
CSR、SSR、SSG、NSR、ESR、ISR 都是什么？
衡量页面性能的指标有哪些？
讲一下png8、png16、png32的区别，并简单讲讲png的压缩原理
script预加载方式有哪些，这些加载方式有何区别？
说说常规的前端性能优化手段
canvas性能为何会比 html/css好?
如果使用CSS提高页面性能？
CSS优化、提高性能的方法有哪些？
将静态资源缓存在本地的方式有哪些？
工程化 面试题
webpack 中 module、chunk、bundle 的区别是什么？
说说你对前端工程化的理解
webpack loader 和 plugin 实现原理
为什么webpack可以通过文件打包，让浏览器可以支持CommonJs规范？
webpack tree-shaking在什么情况下会失效?
微前端中的路由加载流程是怎么样的？
说下Vite的原理
如何组织monorepo工程？
说说webpack的构建流程？
npm lock 文件了解多少?
npm中的“幽灵依赖”是什么？
说说你对Source Map 的了解
为什么现代前端应用需要打包工具进行打包编译？
ES6代码转成ES5代码的实现思路是什么？
webpack的module、bundle、chunk分别指的是什么？
什么是CICD?
浏览器是否支持CommonJs规范?
谈谈你对Webpack的认识
webpack treeShaking
机制的原理是什么?
package.json里面sideEffects 属性的作用是什么？
什么情况下会导致webpack treeShaking失效？
为什么SPA应用都会提供一个hash路由，好处是什么？
webpack分包的方式有哪些?
面试官：说说Loader和Plugin的区别？编写Loader，Plugin的思路?
项目场景题
怎么在前端页面中添加水印？
如何封装一个请求，让其多次调用的时候，实际只发起一个请求的时候，返回同一份结果？
web网页如何禁止别人移除水印
react中怎么实现下拉菜单场景，要求点击区域外能关闭下拉组件
如何搭建一套灰度系统？
React 如何实现vue 中 keep-alive的功能？
如何监控前端页面的崩溃？
如何在前端团队快速落地代码规范
前端如何实现即时通讯？
用户访问页面白屏了，原因是啥，如何排查？
如何给自己团队的大型前端项目设计单元测试？
如何做一个前端项目工程的自动化部署，有哪些规范和流程设计？
你参与过哪些前端基建方面的建设？
假如让你负责一个商城系统的开发，现在需要统计商品的点击量，你有什么样设计与...
前端怎么做错误监控？
怎么实现同一个链接，PC访问是web应用，而手机打开是一个H5应用？
token过期后，页面如何实现无感刷新？
如何解决页面请求接口大规模并发问题
前端单页应用History路由模式，需要如何配置nginx?
web应用中如何对静态资源加载失败的场景做降级处理？
什么是单点登录，以及如何进行实现？
SPA首屏加载速度慢的怎么解决
Redux 和Vuex的设计思想是什么?
怎么使用webpack，将JS文件中的 css提取到单独的样式文件中？
站点一键换肤的实现方式有哪些？
实现table header 吸顶，有哪些实现方式？
一些书籍推荐
简历如何写
结尾
马上就是金三过半即将银四了，有很多人在家内卷，个人这里还有一些刷题的网站可以参考下，祝大家面试顺利
