javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > 前端面试场景题

前端面试常见的10个场景题及答案

作者：双越AI_club

作为资深前端开发者,这篇文章主要介绍了前端面试常见的10个场景题及答案的相关资料,这些题目涵盖了核心知识点和常见技术场景,需要的朋友可以参考下学姐

如何设计实现一个准确的前端倒计时

这个问题的核心是：单纯用 setInterval 倒计时是不准时不可靠的。setInterval(fn, 1000) 并不保证每 1000ms 准时执行一次。

JS 是单线程的，当遇到大量计算、页面渲染、长任务等，setInterval 会被延迟执行。页面切到后台，定时器会被浏览器降频。本该 1 秒减一次，结果 1.2 秒甚至 2 秒才执行一次 → 倒计时变慢。

设计要点：

代码示例

const endTime = Date.now() + 60 * 1000; // 1分钟倒计时

const timer = setInterval(() => {
  const now = Date.now();
  const remain = endTime - now;

  if (remain <= 0) {
    clearInterval(timer);
    console.log("倒计时结束");
    return;
  }

  console.log(Math.floor(remain / 1000) + "秒");
}, 1000);

总之，一个准确的前端倒计时应该以时间戳差值为核心，而不是依赖 setInterval 的次数；定时器只负责刷新 UI，每次通过 目标时间 - 当前时间 重新计算剩余时间，才能保证在卡顿、切后台等场景下依然准确。

如何设计实现一个精准的支付秒杀倒计时

这个问题的核心是：前端倒计时必须和服务器时间一致，不能靠本地时间瞎算。

设计要点

代码示例

const diff = serverTime - Date.now();

setInterval(() => {
  const remain = startTime - (Date.now() + diff);
  updateUI(remain);
}, 1000);

一个 Web 管理系统，使用越来越慢，如何排查

这个问题的核心是：慢在哪里，要先定位瓶颈，再针对性优化。一般分网络、前端、后端三个方向进行定位。

先定位问题，用 Chrome DevTools：

前端常见的问题有

对应的解决方案有：

接口慢常见的问题有

对应的解决方案有

后端接口返回几万条数据 前端表格如何去展示处理

这个问题考察的是：大数据量渲染性能 + 用户体验 + 架构设计能力。

设计的关键点是

解决方案有

H5 瀑布流展示商品信息，低端安卓机和网络不稳定，如何优化？

针对低端安卓和弱网用户，可以从 图片压缩 + 懒加载 + 虚拟列表 + 降级策略 + 容错体验 入手，减少资源体积、降低渲染压力，保证页面能“快加载、不白屏、可用性优先”。

图片资源优化（关键）

网络加载优化

网页渲染优化

交互体验优化

容错和降级方案

设计一个“单选框组件”，选项里面可能是图片、文字等，该如何设计。

如果只包含图片、文本这两个，是比较好设计的，做 if-else 判断显示即可。但如果有其他自定义类型，就需要用到 <slot>

<template>
  <RadioGroup v-model="value">
    <!-- 文本选项 -->
    <RadioItem value="text">
      <span>文本选项</span>
    </RadioItem>

    <!-- 图片选项 -->
    <RadioItem value="image">
      <img src="https://via.placeholder.com/80" />
      <p>图片选项</p>
    </RadioItem>

    <!-- 自定义 slot（复杂内容） -->
    <RadioItem value="custom">
      <div>
        <h3>自定义内容</h3>
        <p>可以放任意组件</p>
        <button>按钮</button>
      </div>
    </RadioItem>
  </RadioGroup>
</template>

定义两个组件 RadioGroup 和 RadioItem ，RadioGroup 管理选中的数据

<template>
  <div class="radio-group">
    <slot />
  </div>
</template>

<script setup>
import { provide } from "vue";

const props = defineProps({
  modelValue: [String, Number]
});
const emit = defineEmits(["update:modelValue"]);

provide("radioValue", props);
provide("radioChange", (val) => {
  emit("update:modelValue", val);
});
</script>

RadioItem 负责各类数据的 UI 渲染，监听 change 事件来修改 value

<template>
  <div
    class="radio-item"
    :class="{ active: isChecked }"
    role="radio"
    :aria-checked="isChecked"
    @click="select"
  >
    <slot />
  </div>
</template>

<script setup>
import { inject, computed } from "vue";

const props = defineProps({
  value: [String, Number]
});

const radioValue = inject("radioValue");
const radioChange = inject("radioChange");

const isChecked = computed(() => radioValue.modelValue === props.value);

const select = () => {
  radioChange(props.value);
};
</script>

把单选框设计成 RadioGroup + RadioItem 的组合组件，用数据驱动选项，通过 slot 支持图片和文字等自定义内容，使用受控模式管理选中状态，并兼顾可访问性和性能。

如何排查网页白屏问题

白屏问题本质：页面没渲染出来或 JS 报错中断了渲染。排查要有顺序，从外到内、从简单到复杂。

先快速定位问题方向

如果是 JS 报错了，就需要

如果是 HTML、JS、CSS 文件加载失败，就检查 CDN 是否配置错误？这一般不会是程序问题。

如果核心接口返回 500 / 超时，那就在前端做容错方案，例如展示“获取数据失败，请刷新重试”

还可以加 ErrorBoundary 容错组件，来最大范围的概括各类组件渲染报错，给用户提示友好信息。

总之，先看控制台和网络请求，确认是 JS 报错、资源加载失败还是接口问题；再定位到具体代码。工程上通过错误监控、兜底 UI 和自动化监控来预防和快速发现白屏问题。

让你启动一个新项目，你将如何开始这个项目？

第一，要明确需求，先和产品、设计、后端对齐，搞清楚几个核心问题：

第二，技术选型，要按公司团队情况选择，不要盲目求新

第三，工程化搭建，环境搭好，后续才能高效协作

第四，架构设计

src/
├── api/        # 所有接口，按模块拆分
├── components/ # 通用组件（Button、Modal...）
├── views/      # 页面级组件
├── hooks/      # 复用逻辑（useUser、useTable...）
├── stores/     # 状态管理（Pinia / Zustand）
├── router/     # 路由配置 + 权限守卫
└── utils/      # 工具函数

如何实现前端线上监控 前端线上报错如何排查

三个主要步骤：采集、上报、分析

采集什么？

怎么上报？

数据存储和分析

前端问题如何排查

一百万个人同时抢一个商品，如何判断谁是第一个？

这个问题的关键不在于前端，而在于后端，前端只是发起请求和展示结果。所以这个问题一般会考察全栈岗位或者高级前端岗位，需要有一定后段能力的。

后端实现这个功能，需要满足两点：

常见的解决方案是 后端原子操作 ，这个方案最简单可靠，容易支持高并发

SETNX product_lock userId

第一个写入的 user 就是赢家，其他人直接返回失败。前端只负责发起请求和展示结果。

总结

到此这篇关于前端面试常见的10个场景题及答案的文章就介绍到这了,更多相关前端面试场景题内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:
阅读全文