高级Web前端开发工程师2025年面试题总结及参考答案【含刷题资源库】
前端面试考点内容一：场景题库
以下：https://github.com/encode-studio-fe/natural_traffic/wiki/scan_material5
1.怎么在前端页面中添加水印?
在前端页面中添加水印可以通过以下几种方法实现：
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 backgroundctx.fillStyle = '#fff';ctx.fillRect(0, 0, canvas.width, canvas.height);// Draw watermark textctx.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>2.如何封装一个请求，让其多次调用的时候，实际只发起一个请求的时候，返回同一份结果？
封装一个请求使其在多次调用时只发起一次请求，并返回相同结果，通常是通过请求去重（debouncing）来实现的。这种功能对于避免重复的网络请求、提高性能和减少不必要的负载非常有用。
同时，我们需要确保在请求完成之前，对相同请求的重复调用都会共享相同的请求 Promise。避免出现连续发出相同的请求，在第一个请求尚未完成时，那么可能会发出多个请求的情况。
可以通过以下步骤来实现这个功能：
1. 使用一个缓存机制
我们可以使用 JavaScript 对象或 Map 来缓存已经发起的请求，并在 subsequent 请求中返回缓存的结果。缓存的关键是确保相同的请求参数对应同一个缓存条目。
2. 创建请求缓存封装
以下是一个基于 axios 的请求去重的封装示例：
import axios from 'axios';// 请求缓存
const requestCache = new Map();async function fetchData(url, params) {// 生成缓存 keyconst cacheKey = `${url}?${new URLSearchParams(params).toString()}`;// 检查缓存中是否已有数据if (requestCache.has(cacheKey)) {return requestCache.get(cacheKey);}// 创建请求 Promiseconst requestPromise = axios.get(url, { params }).then(response => {// 请求成功，存储结果requestCache.delete(cacheKey); // 请求完成后，移除缓存return response.data;}).catch(error => {// 请求失败，清除缓存requestCache.delete(cacheKey);throw error;});// 存储请求 PromiserequestCache.set(cacheKey, requestPromise);// 返回 Promisereturn 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));3.web 网页如何禁止别人移除水印
防止DOM被删除
为了防止水印被删除，可以利用 MutationObserver API 监听 DOM 变化。MutationObserver 可以监控 DOM 树的变化并触发回调函数。回调函数可以用于检测水印是否被移除，并采取相应的措施进行恢复。
以下是一个示例代码，演示了如何使用 MutationObserver 监听 DOM 变化并检测水印的删除：
// 目标节点
const targetNode = document.body;// 创建 MutationObserver 实例
const observer = new MutationObserver(mutationsList => {mutationsList.forEach(mutation => {// 检查是否有子节点被删除if (mutation.removedNodes.length > 0) {// 检查被删除的节点是否为水印// 如果是，则重新插入水印元素// targetNode.appendChild(watermarkElement);}});
});// 配置 MutationObserver
const config = { childList: true, subtree: true };// 开始观察目标节点
observer.observe(targetNode, config);在上述代码中，我们创建了一个 MutationObserver 实例，并通过 observe 方法绑定到目标节点。在回调函数中，使用 mutation.removedNodes 检测子节点删除情况。如果发现水印被删除，可以在此处重新插入水印元素。
需要注意的是，MutationObserver 是现代浏览器的特性，可能不兼容老旧浏览器。因此，实际应用中应考虑浏览器兼容性。
此外，为了确保水印能迅速恢复，可以在检测到水印被删除时立即执行插入操作。
防止DOM被隐藏
除了防止DOM被删除，还要考虑DOM被隐藏的情况。
要检测到水印DOM被设置为 display: none 隐藏，可以通过 MutationObserver 观察元素的属性变化，而不是仅仅关注子节点的删除。监听 attributes 类型的变化，以检测到 display 样式属性的改变。
以下示例展示了如何监控 display 属性的变化：
// 目标节点（假设水印元素是一个特定的节点）
const watermarkElement = document.querySelector('.watermark');// 创建 MutationObserver 实例
const observer = new MutationObserver(mutationsList => {mutationsList.forEach(mutation => {if (mutation.type === 'attributes' && mutation.attributeName === 'style') {// 检查水印的 display 属性是否被设置为 noneif (getComputedStyle(watermarkElement).display === 'none') {// 如果水印被隐藏，重新显示水印watermarkElement.style.display = 'block';}}});
});// 配置 MutationObserver
const config = { attributes: true, subtree: true, attributeFilter: ['style'] };// 开始观察目标节点
observer.observe(document.body, config);说明
- 目标节点：在代码中，
watermarkElement代表水印元素。请确保选择器正确。 - MutationObserver 实例：观察属性变化 (
attributes) 和特定的属性style。 - 属性变化检测：在回调函数中，使用
getComputedStyle检查display属性的值。如果水印被设置为display: none，则将其恢复为display: block。
4.react 中怎么实现下拉菜单场景，要求点击区域外能关闭下拉组件
涉及以下几个步骤：
- 创建下拉菜单组件
- 监听点击事件
- 判断点击事件是否在下拉菜单外部
步骤说明
1. 创建下拉菜单组件
import React, { useState, useRef, useEffect } from 'react';const Dropdown = () => {const [isOpen, setIsOpen] = useState(false);const dropdownRef = useRef(null);const toggleDropdown = () => {setIsOpen(!isOpen);};// 监听点击事件useEffect(() => {const handleClickOutside = (event) => {if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {setIsOpen(false);}};document.addEventListener('mousedown', handleClickOutside);return () => {document.removeEventListener('mousedown', handleClickOutside);};}, []);return (<div ref={dropdownRef}><button onClick={toggleDropdown}>Toggle Dropdown</button>{isOpen && (<div className="dropdown-menu"><p>Menu Item 1</p><p>Menu Item 2</p><p>Menu Item 3</p></div>)}</div>);
};export default Dropdown;2. 监听点击事件
- 在
useEffect钩子中，添加一个全局的mousedown事件监听器，用于检测点击是否发生在下拉菜单外部。 handleClickOutside函数会检查点击事件的目标是否在下拉菜单外部，如果是则关闭下拉菜单。
3. 判断点击事件是否在下拉菜单外部
- 使用
useRef钩子获取下拉菜单组件的引用（dropdownRef）。 handleClickOutside函数中使用dropdownRef.current.contains(event.target)来判断点击的目标是否在下拉菜单的 DOM 结构内。
注意事项
- 确保
ref正确设置在包含下拉菜单的最外层容器上。 - 在组件卸载时移除事件监听器，以避免内存泄漏。
- 在大型应用中，可以考虑使用更复杂的事件处理库或工具来处理全局点击事件。
通过上述步骤，你可以实现点击区域外关闭下拉菜单的功能。
完整场景题目整理
1如何判断用户设备
2.将多次提交压缩成一次提交
3.介绍下navigator.sendBeacon方法
4.混动跟随导航（电梯导航）该如何实现
5退出浏览器之前，发送积压的埋点数据请求，该如何做？
6如何统计页面的long task（长任务）【热度：140】
7.PerfoemanceObserver如何测量页面性能
移动端如何实现下拉滚动加载（顶部加载）
9.判断页签是否为活跃状态
10.在网络带宽一定的情况下，切片上传感觉和整体上传消费的时间应该是差不多的这种说法正确吗？
11.大文件切片上传的时候，确定切片数量的时候，有那些考量因素
12.页面关闭时执行方法，该如何做
13.如何统计用户pv访问的发起请求数量
14.长文本溢出，展开/收起如何实现
15.如何实现鼠标拖拽
16.统计全站每一个静态资源加载耗时，该如何做
17.防止前端页面重复请求
18.ResizeObserver作用是什么
19.要实时统计用户浏览器窗口大小，该如何做
20.当项目报错，你想定位是哪个commit引l入的错误的时，该怎么做
21.如何移除一个指定的 commit
22.如何还原用户操作流程
23.可有办法将请求的调用源码地址包括代码行数也上报上去？
24.请求失败会弹出一个toast,如何保证批量请求失败，只弹出一个toast【热度：420）
25.如何减少项目里面if-else【热度:310】
26.babel-runtime作用是啥【热度：200】
27.如何实现预览PDF文件
28.如何在划词选择的文本上添加右键菜单（划词：标滑动选择一组字符，对组字符进行操作）【热度：100】
29.富文本里面，是如何做到划词的（鼠标滑动选择一组字符，对组字符进行操作？【热度：100】
30.如何做好前端监控方案【热度：672】
31.如何标准化处理线上用户反馈的问题【热度：631】
32.px 如何转为rem【热度：545】
33.浏览器有同源策略，但是为何cdn请求资源的时候不会有跨域限制【热度：579】
34.cookie可以实现不同域共享吗【热度：533】
35.axios是否可以取消请求【热度：532】
36.前端如何实现折叠面板效果？
37.dom里面，如何判定a元素是否是b元素的子元素【热度：400】
38.判断一个对象是否为空，包含了其原型链上是否有自定义数据或者方法。该如何判定？
39.is如何判空？「空」包含了:空数组、空对象、空字符串、0、undefined、null、空map、空set都属于为空的数据【[热度:640】
40.css实现翻牌效果【热度:116】
41.flex:1代表什么【热度:400】
42.一般是怎么做代码重构的
43.如何清理源码里面没有被应用的代码，主要是JS、TS.CSS代码【热度：329】
44.前端应用如何做国际化？【热度：199】
45.应用如何做应用灰度发布【热度:247】
46.「微前端]为何通常在微前端应用隔离，不选择iframe方案【热度：280】
47.[微前端]Qiankun是如何做Js隔离的【热度：228】
48.[微前端]微前端架构一般是如何做JavaScript隔离
49.[React]循环渲染中为什么推荐不用index 做key【热度:320】
50.[React]如何避免使用context的时候，引起整个挂载节点树的重新渲染【热度：420】
51.前端如何实现截图？
52.当QPS达到峰值时,该如何处理？
53.js超过Number最大值的数怎么处理？
54.使用同一个链接，如何实现PC打开是web应用、手机打开是-个H5应用？【腾讯二面】
55.如何保证用户的使用体验【字节一面】
56.如何解决页面请求接口大规模并发问题【必会】
57.设计一套全站请求耗时统计工具
58.大文件上传了解多少【百度一面】
59.H5如何解决移动端适配问题【美团一面】
60.站点一键换肤的实现方式有哪些？【美团一面】
61.如何实现网页加载进度条？【百度一面】
62.常见图片懒加载方式有哪些？【京东一面】
63.cookie构成部分有哪些【百度一面】
64.扫码登录实现方式【腾讯一面]
65.DNS协议了解多少【字节一面】
66.函数式编程了解多少？【京东一面】
67.前端水印了解多少？【腾讯—面】
68.什么是领域模型【必会】
69.一直在window上面挂东西是否有什么风险【百度一面】
70.深度SEO优化的方式有哪些，从技术层面来说
71.小程序为什么会有两个线程【腾讯一面】
72.web应用中如何对静态资源加载失败的场景做降级处理
73.html中前缀为data-开头的元素厘性是什么?
74.移动端如何实现上拉加载，下拉刷新？【字节一面】
75.如何判断dom元素是否在可视区域【字节一面】
76.前端如何用canvas来做电影院选票功能【美团一面】
77.如何通过设置失效时间清除本地存储的数据？【腾讯二面】
78.如果不使用脚手架，如果用webpack构建一个自己的react应用
79.用nodejs实现一个命令行工具，统计输入目录下面指定代码的行数
80.packagejson里面sideEffects厘性的作用是啥【必会】
81.script标签上有那些厘性，分别作用是啥？【必会】
82.为什么SPA应用都会提供一个hash路由，好处是什么？
83.[React]如何进行路由变化监听【字节一面】
84.单点登录是是什么，具体流程是什么【腾讯一面】
85.web网页如何禁止别人移除水印【百度一面】
86.用户访问页面白屏了，原因是啥，如何排查？
87.[代码实现]s中如何实现大对象深度对比
88.如何理解数据驱动视图，有哪些核心要素？【腾讯二面】
89.vue-cli都做了哪些事儿，有哪些功能？
90.JS执行100万个任务，如何保证浏览器不卡顿？【百度一面】
91.JS放在head里和放在body里有什么区别？
92.Eslint代码检查的过程是啥？【必会】
93.虚拟混动加载原理是什么，用JS代码简单实现一个虚拟滚动加加载
94.[React]react-router和原生路由区别
95.html的行内元素和块级元素的区别【京东一面】
96.介绍-下 requestldleCallback api
97.documentFragment api是什么，有哪些使用场景？【必会】
98.git pull和 git fetch 有啥区别?
99.前端如何做页面主题色切换【腾讯一面】
100.前端视角-如何保证系统稳定性【字节一面]
101.如何统计长任务时间、长任务执行次数【腾讯二面】
102.V8里面的J』T是什么？【京东一面]
103.用Js写一个cookies解析函数，输出结果为一个对象
104.vue中Scoped Styles是如何实现样式隔离的，原理是啥
105.样式阿商方式有哪些【字节一面】
106.在JS中，如何解决递归导致栈溢出问题？
107.站点如何防止爬虫？【百度一面】
108.ts项目中，如何使用nodemodules里面定义的全局类型包到自己项目src下面使用？【百度二面】
109.不同标签页或窗口间的【主动推送消息机制】的方式有哪些？（不借助服务端）
110.【React】在react项目开发过程中，是否可以不用reactrouter使用浏览器原生history路由来组织页面路由？
111.在表单校验场景中，如何实现页面视口滚动到报错的位置
112,如何一次性渲染十万条数据还能保证页面不卡顿【百度二面】
113.【webpack】打包时hash码是如何生成的【必会】
114.如何从0到1搭建前端基建【京东一面】
115.你在开发过程中，使用过哪些TS的特性或者能力？【美团一面】
116JS的加载会阻塞浏览器渲染吗？【百度一面】
117.浏览器对队头阻寒有什么优化？【百度一面）
118.Webpack项目中通过script 标签引入资源，在项目中如何处理？
119.应用上线后，怎么通知用户刷新当前页面？【腾讯一面】
120.Eslint代码检查的过程是啥？
121.HTTP是一个无状态的协议，那么Web应用要怎么保持用户的登录态呢？
122.如何检测网页空闲状态（一定时间内无操作）【百度二面】
123.为什么Vite速度比 Webpack 快?
124.列表分页，快速翻页下的竟态问题【百度二面】
125.JS执行100万个任务，如何保证浏览器不卡顿？
126.git仓库迁移应该怎么操作
127.如何禁止别人调试自己的前端页面代码？【字节二面】
128.web系统里面，如何对图片进行优化？【必会】
129.0Auth2.0是什么登录方式
130.单点登录是如何实现的？
131.常见的登录鉴权方式有哪些？
132.需要在跨域请求中携带另外一个域名下的Cookie该如何操作？
133.vite和webpack 在热更新上有啥区别？
134.封装一个请求超时，发起重试的代码
135.前端如何设置请求超时时间timeout【必会】
136.nodejs如何充分利用多核CPU?【字节二面】
137.后端一次性返回树形结构数据，数据量非常大前端该如何处理？
138.你认为组件封装的一些基本准则是什么？
139.页面加载速度提升(性能优化)）应该从哪些反向来思考？
140.前端日志埋点SDK设计思路
141.token进行身份验证了解多少？【腾讯一面】
142.在前端应用如何进行权限设计？【字节二面】
143.【低代码】代码平台一般泊染是如何设计的？
144.【低代码】代码平台一般底层协议是怎么设计的
145.【Webpack】有哪些优化项目的手段？
146.IndexedDB存储空间大小是如何约束的?
147.浏览器的存储有哪些【腾讯一面】
148.【Webpack】如何打包运行时chunk，且在项自工程中如何去加载这个运行时chunk？
149.为何现在市面上做表格泊染可视化技术的，大多数都是canvas，而很少用svg的？
150.在你的项目中，使用过哪些webpack plugin,说一下他们的作用
151.在你的项目中，使用过哪些webpackloader,说一下他们的作用
152.【React】如何避免不必要的染？【美团一面】
153.全局样式命名冲突和样式盖问题怎么解决？
154.【React】如何实现专场动画?
155.【React】从React层面上，能做的性能优化有哪些？
156.【VUE】中为何不要把v-if和v-for同时用在同一个元素上，原理是什么？
157.将静态资源缓存在本地的方式有哪些？
158.SPA首屏加载速度慢的怎么解：决
159.axios是如何区分是nodejs 环境还是浏览器环境的?
160.如何拦截web应用的请求
161.前端有哪些跨页面通信方式？
162.H5下拉刷新如何实现？
163.如何修改第三方npm包?
八股题库整合
1.JavaScript
- 相比于npm和yarn，pnpm的优势是什么？
- 如果使用 Math.random()计算中奖概率会有什么问题吗?
- 怎么使用js实现拖拽功能？
- 举例说明你对尾递归的理解，以及有哪些应用场景
- 说说你对 Iterator,Generator 和 Async/Await 的理解
- 说说你对模块化方案的理解，比如CommonJS、AMD、CMD、ESModule分别是什么?
- 前端跨页面通信，你知道哪些方法？
2.CSS
- CSS中的1像素问题是什么？有哪些解决方案？
- 说说你对CSS模块化的理解
- 在解决动画卡顿问题时，会引导硬件加速，那么硬件加速的原理是什么？
- 说说对CSS工程化的理解
- html和css中的图片加载与渲染规则是什么样的？
- 说说对CSS预编语言的理解，以及它们之间的区别
- Postcss是什么，有什么作用?
- 为何CSS不支持父选择器？
- 怎么理解回流跟重绘？什么场景下会触发？
3.React.js
- fiber架构的工作原理？
- React Reconciler为何要采用 fiber架构?
- useState是如何实现的?
- React Fiber是什么?
- 简单介绍下React中的diff算法
- 如何让useEffect 支持 async/await?
- React中怎么实现状态自动保存(KeepAlive）？
- ReactFiber是如何实现更新过程可控？
- react中懒加载的实现原理是什么？
- React有哪些性能优化的方法？
4.Vue.js
- Vue模板是如何编译的
- vue3相比较于vue2，在编译阶段有哪些改进?
- 说说Vue页面渲染流程
- Vue项目中，你做过哪些性能优化？
- 如果使用Vue3.0实现一个Modal，你会怎么进行设计?
- Vue3.0里为什么要用 Proxy API替代 defineProperty API？
- Vue有了数据响应式，为何还要diff？
- 说说vue3中的响应式设计原理
- 说说 Vue 中 CSS scoped 的原理
- vue3的响应式库是独立出来的，如果单独使用是什么样的效果？
- 手写vue的双向绑定
- 什么是虚拟DOM？如何实现一个虚拟DOM？说说你的思路
5.Typescript
- 如何检查TypeScript中的null和undefined？
- 什么是TypeScript Declare关键字?
- TypeScript中的getter/setter是什么？你如何使用它们?
- unknown是什么类型？
- never是什么类型，详细讲一下
- 如何在TypeScript中实现继承?
- 说一说TypeScript中的类及其特性。
- 请实现下面的 sleep方法
- TypeScript中的方法重写是什么？
- typescript中的 is关键字有什么用?
6.性能优化
- 怎么统计页面的性能指标？
- 导致页面加载白屏时间长的原因有哪些，怎么进行优化？
- ServiceWorker是如何缓存http请求资源的？
- 如何优化DOM树解析过程？
- DNS预解析是什么？怎么实现？
- 虚拟DOM一定更快吗？
- 如果某个页面有几百个函数需要执行，可以怎么优化页面的性能？
- React.memo()和useMemo()的用法是什么，有哪些区别?
- SPA首屏加载速度慢的怎么解决
- 在React中可以做哪些性能优化?
- 前端性能优化指标有哪些？怎么进行性能检测？
- 怎么进行站点内的图片性能优化？
- 什么是内存泄漏？什么原因会导致呢？
7.编程题
- 实现深拷贝
- 请手写“堆排序”
- 虚拟dom原理是什么，手写一个简单的虚拟dom实现
- 请在不使用setTimeout的前提下，实现setlnterval
- 实现JSONP
- 实现一个类，其实例可以链式调用，它有一个sleep方法，可以sleep一段时间后再后续调用
- 编写一个vue组件，组件内部使用插槽接收外部内容，v-model双向绑定，实现折叠展开的功能
- 版本号排序
- Promise的finally怎么实现的?
- 实现Promise
- 字符串解析问题
今天的内容就到此为止了，以上内容都有对应答案
篇幅不足所以展示部分
以上：https://github.com/encode-studio-fe/natural_traffic/wiki/scan_material5
感觉有帮助的话，麻烦帮我点个小心心支持下，帮助更多前端人，让他们面试顺利，尽量少走一些弯路！！