一上午面了3个前端开发，连一道场景题都答不上来（场景题500道含答案）所谓“场景题”，是面试中用来模拟真实开发环境的问题

所谓“场景题”，是面试中用来模拟真实开发环境的问题。它不问你“闭包是什么”，而是让你“设计一个前端监控系统，记录页面性能和白屏时间”；不考你“Vue双向绑定原理”，而是让你“实现一个弹窗组件，考虑多种复用场景”。这类题目没有标准答案，更像一场即兴的技术设计，考察的是候选人解决问题的思路、经验深度和架构能力。

场景题之所以让不少候选人“翻车”，是因为它跳出了八股文的舒适区。死记硬背的API用法、框架原理，在具体情境中往往需要灵活重组。比如面对“如何优化首屏加载速度”，你需要权衡CDN、懒加载、服务端渲染、资源压缩等多种手段，还要结合业务特点给出合理方案。这背后是对知识体系的全方位检验：网络、浏览器渲染、工程化、甚至产品思维，缺一不可。

常见的场景题类型包括：

性能优化类：如“页面白屏如何排查与优化”；
组件设计类：如“设计一个可无限滚动的列表组件”；
工程化类：如“如何配置webpack实现多环境构建”；
错误处理类：如“前端项目如何统一捕获异常并上报”；
架构类：如“从零搭建一个中后台项目，你会怎么做技术选型”。

答不上来，往往不是因为候选人不够努力，而是学习方式过于“应试”。刷题能应付概念问答，却难以培养真正的技术直觉。要攻克场景题，需要回归项目本身：多做复杂业务，多思考“为什么这样写”，多复盘线上故障，多关注社区的最佳实践。面试前，不妨拿几个经典场景练练手，像产品经理一样分析需求，像架构师一样权衡方案。

对面试官而言，场景题也是一面镜子：它滤掉只会背诵的“面霸”，筛选出真正能干活、能思考的开发者。所以，下次面试若遇到场景题，不妨把它当作一次合作探讨，展现出你的分析过程，哪怕方案不完美，清晰的思路和解决问题的热情，也会让你脱颖而出。

怎么在前端页面中添加水印？

在前端页面中添加水印可以通过以下几种方法实现：

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));

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。

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. 用户分组策略

按用户分组：根据用户的特征（如地域、设备类型、用户等级等）或随机分配，决定哪些用户先接收到新版本。
流量分配：通过配置逐步增加新版本的流量比例。例如，先让 5% 的用户使用新版本，然后观察反馈，逐步增加到 10%、20% 等。

4. 灰度发布系统的功能

流量调度：能够动态调整不同版本的流量占比，通常由一个流量调度模块控制。
用户分组管理：可以管理用户分组，并将用户分配到对应的版本。
监控和日志收集：实时监控系统的性能指标（如请求响应时间、错误率、资源使用情况等），并收集用户行为日志。
自动回滚：当检测到新版本出现问题时，系统可以自动回滚到稳定的旧版本。
A/B 测试：结合 A/B 测试工具，进行功能对比测试，进一步细化灰度策略。

5. 工具与技术栈

负载均衡器：使用负载均衡器（如 Nginx、HAProxy）进行流量分配，决定哪些请求应该分配到新版本。
微服务架构：使用 Kubernetes、Docker 等技术支持微服务架构，方便独立部署和灰度发布。
CI/CD 工具：结合 Jenkins、GitLab CI/CD、GitHub Actions 等工具进行自动化构建、测试和部署。
监控系统：使用 Prometheus、Grafana、ELK 等工具进行系统监控和日志分析。
A/B 测试工具：如 Google Optimize、Optimizely，结合灰度发布进行用户体验的差异化测试。

6. 实施灰度发布

部署基础设施：搭建好灰度发布的基础设施，包括流量调度、监控、日志收集等模块。
制定灰度策略：根据业务需求，制定详细的灰度发布策略，包括用户分组、流量占比、回滚条件等。
逐步推进：从小规模用户开始，逐步扩大灰度范围，并观察各项指标以确保系统稳定。
持续监控与反馈：在整个灰度发布期间持续监控系统表现，收集用户反馈，及时作出调整或回滚。

7. 回滚策略

快速回滚机制：在发布过程中出现问题时，灰度系统应能快速回滚到上一稳定版本。
保持数据一致性：确保新版本的数据格式与旧版本兼容，回滚时不会导致数据丢失或不一致。

8. 总结与优化

记录发布过程：详细记录每次灰度发布的过程、问题和解决方案，为后续发布积累经验。
优化灰度系统：根据发布过程中的经验，不断优化灰度系统，提升系统的健壮性和可操作性。

React 如何实现 vue 中 keep-alive 的功能？

在 React 中实现类似于 Vue 中 keep-alive 的功能，可以使用组件状态和 React 的生命周期方法来控制组件的挂载和卸载。

以下是一种实现方式：

1. 使用状态管理组件

创建一个 KeepAlive 组件，用于存储和管理被“缓存”的组件。

import React, { useState } from 'react';

// KeepAlive 组件
const KeepAlive = ({ children, name }) => {
  const [cache, setCache] = useState({});

  // 保存组件
  const saveCache = () => {
    setCache((prev) => ({
      ...prev,
      [name]: children,
    }));
  };

  // 恢复组件
  const getCachedComponent = () => {
    return cache[name] || children;
  };

  // 组件挂载时保存
  React.useEffect(() => {
    saveCache();
  }, [children]);

  return <>{getCachedComponent()}</>;
};

// 示例用法
const App = () => {
  const [activeComponent, setActiveComponent] = useState('ComponentA');

  return (
    <div>
      <button onClick={() => setActiveComponent('ComponentA')}>Component A</button>
      <button onClick={() => setActiveComponent('ComponentB')}>Component B</button>

      <KeepAlive name={activeComponent}>
        {activeComponent === 'ComponentA' ? <ComponentA /> : <ComponentB />}
      </KeepAlive>
    </div>
  );
};

const ComponentA = () => <div>Component A</div>;
const ComponentB = () => <div>Component B</div>;

export default App;

2. 实现逻辑

状态管理：KeepAlive 组件使用一个状态 cache 来存储被缓存的组件。
保存和恢复：在组件挂载时保存当前子组件到缓存中；每次渲染时，检查缓存并返回之前的组件，避免重新渲染。
使用示例：通过按钮切换 activeComponent 的状态，展示不同的组件，同时保留它们的状态。

如何监控前端页面的崩溃？

监控前端页面的崩溃通常涉及捕获和报告 JavaScript 错误、性能问题以及页面状态。

以下是一些常见的方法和工具来实现这些监控：

1. 使用 `window.onerror`

定义：window.onerror 是一个全局事件处理程序，用于捕获 JavaScript 执行时的错误。
实现：
window.onerror = function(message, source, lineno, colno, error) {
// 处理错误信息，例如发送到服务器
console.error('Error captured:', { message, source, lineno, colno, error });
// 可以通过 HTTP 请求将错误信息发送到日志服务器
};

2. 使用 `window.addEventListener('unhandledrejection')`

定义：捕获未处理的 Promise 拒绝（rejections）。
实现：
window.addEventListener('unhandledrejection', function(event) {
// 处理 Promise 拒绝，例如发送到服务器
console.error('Unhandled rejection:', event.reason);
// 可以通过 HTTP 请求将错误信息发送到日志服务器
});

3. 使用 `try...catch`

定义：在可能出现错误的代码块中使用 try...catch 捕获异常。
实现：
try {
// 可能会抛出错误的代码
} catch (error) {
// 处理错误，例如发送到服务器
console.error('Caught error:', error);
// 可以通过 HTTP 请求将错误信息发送到日志服务器
}

4. 使用错误监控工具

Sentry：捕获前端错误并提供详细的堆栈跟踪和上下文信息。
New Relic：提供全面的前端性能监控和错误捕获。
Rollbar：实时捕获和报告 JavaScript 错误和异常。
LogRocket：记录用户会话并捕获前端错误。

5. 性能监控和日志

浏览器开发者工具：使用 DevTools 监控网络请求、性能和资源使用。
Web Vitals：跟踪核心 Web Vitals 指标（如 LCP、FID、CLS）来发现性能问题。
Custom Logging：自定义日志记录功能，将应用程序状态和错误发送到日志服务器。

6. 网络请求监控

自定义错误日志：在 JavaScript 错误处理程序中，通过 HTTP 请求将错误信息发送到远程服务器进行存储和分析。
日志服务器：维护一个后端日志服务器，用于存储和分析前端错误和崩溃数据。

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】

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.如何理解数据驱动视图，有哪些核心要素？【腾讯二面】

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

91.JS放在head里和放在body里有什么区别？

92.Eslint代码检查的过程是啥？【必会】

93.虚拟混动加载原理是什么，用JS代码简单实现一个虚拟滚动加加载

94.[React]react-router和原生路由区别

95.html的行内元素和块级元素的区别【京东一面】

96.介绍-下 requestIdleCallback api

97.documentFragment api是什么，有哪些使用场景？【必会】

git pull 和 git fetch 有啥区别?

99.前端如何做页面主题色切换【腾讯一面】

100.前端视角-如何保证系统稳定性【字节一面]

101.如何统计长任务时间、长任务执行次数【腾讯二面】

102.V8里面的JT是什么？【京东一面]

103.用Js写一个cookies解析函数，输出结果为一个对象

104.vue中Scoped Styles是如何实现样式隔离的，原理是啥

105.样式阿商方式有哪些【字节一面】

106.在JS中，如何解决递归导致栈溢出问题？

107.站点如何防止爬虫？【百度一面】

108.ts项目中，如何使用nodemodules里面定义的全局类型包到自己项目src下面使用？【百度二面】

109.不同标签页或窗口间的【主动推送消息机制】的方式有哪些？（不借助服务端）

110.[React】在react项目开发过程中，是否可以不用react router使用浏览器原生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.lIndexedDB存储空间大小是如何约束的？

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包?

以上：github.com/encode-stud…

一上午面了3个前端开发，连一道场景题都答不上来（场景题500道含答案）