前端面试必刷题：场景题+项目深度200道原题，刷完面试通过率90%（含答案以及刷题网站）

最新推荐文章于 2026-06-28 16:12:05 发布

原创最新推荐文章于 2026-06-28 16:12:05 发布 · 1.7k 阅读

30 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#前端 #面试 #职场和发展 #javascript #vue.js

今年前端面试重复率80%原题 I 菜鸡也能拿下offer！！！

现在前端面试谁还问八股啊？懂原理随便深挖几句就完事了，重点都在场景题和项目上，项目没有深度还没有亮点？拜托，都26年了，别犟了

上周帮学妹模拟面试，10个有8个都挂在场景和项目上

很多人说，经验不多哪来的项目经验，又从哪里找深度与亮点？你是真不知道现在的面试啊，这些说重要也重要，但面试重点在于表达你有能力与思维解决问题，说白了，公司需要的是有动手能力，并且思维逻辑也不差的前端，而不是1：1复刻面试题内容的人。

✨但别慌！我花3个月整理了这份救命题库：

✅ 包含最新高频面试题 ✅ 涵盖所有必考重点难点 ✅ 每道题都配详细解析 ✅ 特别标注大厂最爱考点

有想要的

可以github：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 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>

2.如何封装一个请求，让其多次调用的时候，实际只发起一个请求的时候，返回同一份结果？

封装一个请求使其在多次调用时只发起一次请求，并返回相同结果，通常是通过请求去重（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));

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 属性是否被设置为 none
            if (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。

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.package,json里面sideEffects厘性的作用是啥【必会】

81.script标签上有那些厘性，分别作用是啥？【必会】

82.为什么SPA应用都会提供一个hash路由，好处是什么？

83.[{React]如何进行路由变化监听【字节一面】

84.单点登录是是什么，具体流程是什么【腾讯一面】

85.web网页如何禁止别人移除水印【百度一面】

86.用户访问页面白屏了，原因是啥，如何排查？

87.[代码实现]s中如何实现大对象深度对比

88.如何理解数据驱动视图，有哪些核心要素？【腾讯二面】

89.vue-cli都做了哪些事儿，有哪些功能？

90.JS执行100万个任务，如何保证浏览器不卡顿？【百度一面】

项目细节难点

1. 测试和调试

H5⻚⾯需要在多种设备和环境下进⾏测试，确保其稳定性和兼容性。

解决⽅法：

•使⽤模拟器或真实设备进⾏测试。 •利⽤浏览器的开发者⼯具进⾏调试。

•采⽤⾃动化测试框架，如Selenium或Appium，进⾏持续集成和测试。

通过了解和解决这些常⻅的问题，开发者可以提⾼H5⻚⾯的质量和性能，为⽤⼾提供更好的体验。⽽持续学习和适应新技术才是避免和解决这些问题的关键

2. 跨域请求问题

在进⾏Ajax请求或API调⽤时，可能会遇到跨域问题，导致请求失败。解决⽅法：

•使⽤JSONP来绕过同源策略限制。

•在服务器端设置CORS（跨源资源共享）策略，允许特定的外部域访问资源。

3. 数据安全和隐私保护

在处理⽤⼾数据时，开发者必须确保数据的安全性和⽤⼾的隐私权。解决⽅法：

•采⽤HTTPS协议来加密数据传输。

•遵循数据最⼩化原则，只收集必要的⽤⼾信息。

•提供清晰的隐私政策，告知⽤⼾数据的使⽤⽅式和⽬的

4. 移动端触摸事件处理

在移动端，触摸事件的处理与桌⾯端的⿏标事件有所不同，需要特别注意。解决⽅法：

•使⽤触摸事件（touchstart,touchmove,touchend）代替⿏标事件。

•考虑使⽤框架或库，如jQuery

5. 性能优化

H5⻚⾯的性能直接影响⽤⼾体验。加载时间过⻓或运⾏缓慢的⻚⾯会导致⽤⼾流失。解决⽅法：

•对图⽚和视频进⾏压缩，减少资源⽂件的⼤⼩。 •利⽤浏览器缓存和CDN服务来加速资源的加载。

•优化CSS和JavaScript代码，避免重绘和重排，提⾼⻚⾯渲染效率。

6. 响应式布局的挑战

为了适应不同屏幕尺⼨和分辨率，开发者需要创建响应式布局。这可能导致CSS和JavaScript代码复杂，难以维护。

解决⽅法：

•使⽤媒体查询来适应不同的屏幕尺⼨。

•利⽤CSS框架，如Bootstrap或Foundation，它们提供了⼀套响应式⽹格系统，简化了布局的开发。

7. 浏览器兼容性问题

在开发H5⻚⾯时，开发者需要考虑到不同浏览器和设备的兼容性。⼀些特性在某些浏览器上可能不被⽀持，或者在不同浏览器上表现不⼀致。解决⽅法：

•使⽤特性检测库，如Modernizr，来检测浏览器是否⽀持特定的功能。

•采⽤渐进增强的策略，确保基础功能在所有浏览器上都能正常⼯作，⾼级功能则根据浏览器能⼒逐步增强

8. 获取⾸⻚链接⾥⾯的参数问题。

获取是可以获取到，只要不跳转出这个项⽬的⻚⾯，都是可以的，但是该项⽬链接了许多外链，所以，有时候返回的时候，⻚⾯就会显⽰空⽩，因为获取的参数出了问题。解决办法：将参数设置成了缓存，但是返回的速度快了，⾸⻚同样还是会出现拿不到参数的问题。

解决⽅法：将获取连接的templateId写在Home⻚⾯

9. 更新⽂件缓存的坑。

每次打包好⽂件给后端更新的时候，⽤⼾⼿机上总会留下，上次版本的信息，⽽且每次都得清下缓存，才会显⽰最新版本的数据。后来，我师傅提了个建议，让后端返回⼀个更新版本的接⼝，前端每次更新版本的时候，都会给后端传⼊时间戳，然后后端接收后判断和库⾥的时间戳是否相同，相同的返回不需要更新，不相同的话，返回要更新，然后前端这边的处理⽅法是：需要更新的话，清除掉缓存，刷新⻚⾯即可。

虽然说给.js.css⽂件后缀加上时间戳也是可以的，但是⻚⾯的⼊⼝index.html每次都是⼀样的，所以。。。就不会更新，，百度⼀些说在nginx服务器上，写上强制更新，但是由于公司服务器上的⽂件很多，万⼀操作失误那就⿇烦了

10. 解析后端返回的map格式数据的坑。

之前解析数据的时候，直接就可以拿去，然后直接渲染⻚⾯使⽤即可。但是这次遇到后端返回的是map格式的数据，这就得解析下了。例如：body['1']。根据返回的格式，⾃⼰解析成⾃⼰需要的数据格式。