前端面试刷题包：260道JS手写代码题+主流CSS布局实现源码（含圣杯、双飞翼、Flex/Grid等）

本文还有配套的精品资源，点击获取

简介：专为前端求职者准备的实战型面试资料，包含260道JavaScript高频手写题，涵盖数组去重、防抖节流、Promise/A+手写、深拷贝、原型链、事件循环、new实现、instanceof模拟等核心考点；HTML/CSS部分提供多种经典布局方案的完整可运行源码，包括圣杯布局、双飞翼布局、Flex弹性布局、Grid网格布局、浮动+BFC、table布局、absolute定位布局、inline-block+calc、padding/margin技巧等；还收录CSS细节题解，如1px像素问题、CSS三角形、扇形绘制等；所有题目均以独立HTML或JS文件形式组织，结构清晰，无需配置，打开即用，适合日常练习、考前突击和知识点快速回顾。

1. 这不是题库，是前端面试的“肌肉记忆训练包”

我带过三届校招实习生，也做过六年技术面试官，每年春招秋招季都会收到上百份简历。但真正让我眼前一亮、当场决定发offer的候选人，从来不是简历上写了“精通React/Vue”的人，而是打开电脑，不假思索敲出一个带取消功能的节流函数、能手绘Promise状态流转图、或者用三种方式实现圣杯布局并说清每种方案的BFC触发逻辑的人。这背后不是死记硬背，而是对底层机制形成的“肌肉记忆”——就像骑自行车，不需要想“左脚蹬一下右脚再蹬”，身体自然知道怎么平衡。

这套资料，就是专为培养这种肌肉记忆而设计的。它不叫“前端面试题集”，我更愿意称它为前端核心能力训练包。260道JS手写题，不是为了让你背下某道题的标准答案，而是通过反复拆解、重写、调试，把JavaScript引擎如何执行代码、浏览器如何渲染页面、DOM如何响应事件这些看不见的链条，变成你手指和大脑的本能反应。比如防抖节流，光看原理图没用，必须亲手写三次：第一次用setTimeout+闭包，第二次用时间戳+闭包，第三次用requestIdleCallback模拟，每次都要在控制台里打断点，观察this指向、闭包变量生命周期、定时器清除时机——直到你看到“用户连续点击按钮”这个场景，脑子里自动弹出三套实现方案的优劣对比。

CSS布局部分更是如此。圣杯和双飞翼不是古董，它们是理解BFC、浮动清除、负边距本质的“活体标本”。你不能只记住“圣杯用float+负margin”，而要亲手删掉一行CSS，看着三栏塌陷，再加回来，观察父容器高度如何被撑开、中间栏为何能居中、侧边栏为何不换行。所有HTML文件都设计成“单文件可运行”：双击打开就能看到效果，F12进开发者工具改一行CSS，立刻看到布局变化。这不是静态文档，是你的私人沙盒实验室。

关键词里的“JS手写题”“CSS布局”“前端面试”“防抖节流”“Promise实现”，每一个都不是孤立考点。它们像一张网：防抖节流依赖事件循环和闭包；Promise实现绕不开微任务队列和状态机；圣杯布局的浮动清除规则，直接关联到原型链上hasOwnProperty方法的继承逻辑。这套资料的结构，就是按这张网的真实连接关系组织的——从最基础的DOM操作开始，一层层向上构建，最终让你面对任何新题型，都能拆解成已知模块的组合。

适合谁？如果你还在用“背八股文”的方式准备面试，刷完LeetCode却写不出一个简单的深拷贝，看到CSS布局题就去搜现成代码粘贴，那这套资料会把你拉回地面。它适合那些愿意花三天时间，只为搞懂为什么Object.assign({}, obj)不能拷贝函数、为什么grid-template-areas比float更适合语义化布局的人。不是速成班，是打地基工程。

2. JS手写题：从“能跑通”到“经得起拷问”的四层打磨

2.1 题目筛选逻辑：为什么是这260道？

市面上动辄上千道题，但真正高频、有区分度、能暴露思维漏洞的，其实就那么几十个核心模型。我的筛选标准很残酷：必须同时满足三个条件——第一，在过去三年我参与的37场校招/社招中，至少被5位不同面试官问过；第二，存在至少两种主流实现路径，且路径选择能反映候选人对底层的理解深度（比如深拷贝，用JSON序列化还是递归遍历，直接暴露对循环引用、Date/RegExp等特殊对象的认知）；第三，代码量控制在50行以内，但每一行都可能成为追问的起点（比如Promise.then方法返回新Promise，这一行就藏着状态传递、错误冒泡、链式调用三个考点）。

以“数组去重”为例，资料里收录了7种实现，但绝不是堆砌。它们是按认知阶梯排列的：
- Array.from(new Set(arr)) —— 考察ES6语法敏感度；
- filter + indexOf —— 暴露对数组方法时间复杂度的理解（O(n²)）；
- reduce + includes —— 引导思考不可变数据思想；
- 手写哈希表版 —— 进入算法内核：如何处理[1, '1']这类类型转换问题？NaN如何被正确去重？（答案：用Map，因为Map的key可以是任意类型，且NaN === NaN为false，但Map内部用SameValueZero算法，能正确识别NaN）；
- 支持自定义比较函数的版本 —— 直接对接业务场景：比如去重商品列表时，按id去重还是按name+price组合去重？

每一道题的源码文件里，都包含// 【追问点】注释。比如防抖函数里写着：“【追问点】如果用户在等待时间内连续触发10次，第11次触发时，前10次的定时器是否全部被清除？为什么？”——这逼着你去读clearTimeout的源码实现，理解它只是标记定时器失效，而非立即销毁。

2.2 实操要点：手写不是默写，是“现场编译”

很多同学卡在“明明看过答案，自己写就报错”。问题不在记忆力，而在缺少“现场编译”训练。所谓现场编译，就是把题目要求当作编译器指令，逐字解析：

以“手写Promise A+规范实现”为例，题目要求不是“写个Promise”，而是“符合Promises/A+规范”。这意味着你必须先读懂规范原文（资料包附带精简中文版），然后像编译器一样逐条校验：
- 2.1 状态只能是pending/fulfilled/rejected → 代码里必须用常量定义，禁止字符串硬编码；
- 2.2.2 then方法必须返回新Promise → 你的then函数结尾必须有return new MyPromise(...)，否则直接挂掉；
- 2.2.7.3 如果onFulfilled不是函数，必须透传value → 这里最容易漏：typeof onFulfilled === 'function' ? onFulfilled(value) : value，少一个问号就是bug。

资料里的promise-a-plus.js文件，特意用// [规范条款2.2.7.3]这样的注释锚定每一行代码对应的规范条款。实操时，我建议你关掉所有参考答案，打开空白编辑器，对着规范条款一条条写，写完一条，就在Chrome控制台里跑测试用例（资料包自带test-promise.js，含官方测试套件）。当你的实现通过所有测试时，那种“编译成功”的快感，远胜于背下一百行代码。

另一个关键细节是错误边界处理。比如手写instanceof，很多人只写left.__proto__ === right.prototype，但规范要求：left必须是对象，right必须是函数。资料里的实现是：

function myInstanceof(left, right) {
  if (typeof left !== 'object' || left === null) return false;
  if (typeof right !== 'function') throw new TypeError('Right side must be a function');
  let proto = Object.getPrototypeOf(left);
  while (proto !== null) {
    if (proto === right.prototype) return true;
    proto = Object.getPrototypeOf(proto);
  }
  return false;
}

注意throw new TypeError这行——面试官很可能追问：“为什么这里抛TypeError而不是返回false？”答案是：规范明确要求类型检查失败时抛错，这是API契约的一部分。这种细节，才是区分“背题者”和“理解者”的分水岭。

20.3 经验注入：那些没人告诉你的“踩坑现场”

提示：所有JS手写题的HTML文件，都内置了实时错误捕获和堆栈追踪。打开控制台，你会看到红色错误信息旁标注着“【高频错误】”。

• 深拷贝的循环引用陷阱：90%的同学第一次写递归深拷贝时，会在obj[key] = clone(obj[key])这行崩溃。原因？没有用WeakMap记录已拷贝的对象引用。资料里的deepClone.js用const seen = new WeakMap()缓存，if (seen.has(obj)) return seen.get(obj)。但真正的经验是：WeakMap的key必须是对象，所以你要在递归前先seen.set(obj, target)，再进入递归。顺序错了，照样死循环。

• 事件循环题目的“视觉欺骗”：比如这段代码：

console.log(1);
setTimeout(() => console.log(2), 0);
Promise.resolve().then(() => console.log(3));
console.log(4);

多数人答“1 4 3 2”，但资料包里的event-loop.html故意把setTimeout延迟设为1000，再加一行document.body.innerHTML = 'loading...'。为什么？因为真实面试中，面试官会突然问：“如果网络请求耗时2秒，这段代码的输出顺序会变吗？”——这逼你思考宏任务队列的排队机制，而非死记“微任务优先”。

• new操作符的手写误区：很多人写function myNew(fn, ...args)时，直接fn.apply(obj, args)。但规范要求：如果fn返回的是对象，则返回该对象；否则返回obj。资料里的实现是：

function myNew(fn, ...args) {
  const obj = Object.create(fn.prototype);
  const result = fn.apply(obj, args);
  return (result !== null && typeof result === 'object') ? result : obj;
}

关键在return判断。我见过太多候选人在这里栽跟头，因为他们没意识到：new Date()返回Date实例，但new Function()返回函数对象——这正是result类型判断的现实依据。

3. CSS布局实战：从“能显示”到“懂取舍”的七种武器

3.1 布局方案选型逻辑：没有银弹，只有权衡

资料包里有12种布局实现（圣杯、双飞翼、Flex、Grid、Float+BFC、Table、Absolute、Inline-block+calc、Padding/margin技巧、Float+margin-left、Float+BFC、Flex/Grid混合），但它们不是并列选项，而是按现代性、兼容性、语义性、维护性四个维度构成的决策树。比如“三栏布局”这个需求，我的选择路径是：

1. 首选Grid：display: grid; grid-template-columns: 200px 1fr 200px; —— 代码最短，语义最清晰，响应式最简单（grid-template-columns: minmax(200px, 25%) 1fr minmax(200px, 25%)）。但兼容性？IE11不支持，所以资料包里的grid.html顶部有醒目的兼容性提示：“仅适用于Chrome 57+/Firefox 52+/Safari 10.1+”。

2. 降级方案Flex：当需要支持IE11时，display: flex;是唯一选择。但要注意：Flex的order属性能改变视觉顺序，却无法改变DOM顺序——这对SEO和屏幕阅读器至关重要。资料包里的flex.html特意用<main>和<aside>标签，并在CSS里用order: 2让侧边栏视觉居右，但DOM结构保持语义化顺序。

3. 历史方案圣杯/双飞翼：它们存在的唯一价值，是让你理解BFC（块级格式化上下文）。资料包里的圣杯布局.html和双飞翼布局.html，我刻意做了对比实验：在圣杯布局中，给中间栏加overflow: hidden触发BFC，侧边栏就不会被挤下去；而在双飞翼中，给侧边栏加float: left后，中间栏用margin-left/right预留空间。两个方案的核心差异，就是BFC触发时机的不同——前者靠父容器，后者靠子元素。

注意：资料包里所有布局文件的CSS，都用/* [兼容性] IE11需加-ms-前缀 */这样的注释标明兼容性成本。比如flex.html里的-ms-flex-pack: center;，这就是真实的工程妥协。

3.2 细节题解：像素、三角、扇形背后的渲染真相

CSS细节题不是炫技，而是考察你是否理解浏览器渲染管线。资料包里的1px像素问题.css、css三角.html、css扇形.html，每一行代码都在回答一个底层问题：

• 1px像素问题：本质是设备像素比（dpr）与CSS像素的映射关系。iPhone 6/7/8的dpr=2，意味着1个CSS像素对应2×2个物理像素。当你用border: 1px solid #000，浏览器会尝试在2×2像素区域里画线，结果就是模糊的2px线。解决方案不是“用transform缩放”，而是用媒体查询匹配dpr：

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .hairline {
    border: none;
    position: relative;
  }
  .hairline::after {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 1px;
    background-color: #000;
    transform: scaleY(0.5);
  }
}

资料包里的1px像素问题.css文件，包含了dpr=2/3/4的完整适配方案，并附带window.devicePixelRatio的实时检测脚本——这才是生产环境的真实写法。

• CSS三角形：利用border的斜角特性。但关键在于理解：当元素宽高为0时，四个border交汇形成菱形，裁剪掉三边，剩下的一边就是三角。资料包里的css三角.html，我做了动态演示：用滑块实时调整border-top-width和border-left-width，观察三角形角度如何变化。你会发现，等腰直角三角形的底边长=2×border-width，而锐角三角形需要border-left-color: transparent配合border-top-color——这直接关联到Canvas绘制中的clipPath原理。

• CSS扇形：本质是圆形裁剪。border-radius: 50%生成圆，再用overflow: hidden配合旋转的矩形遮罩。但资料包里的css扇形.html更进一步：它用conic-gradient实现动态扇形进度条，并对比了SVG方案。结论很现实：conic-gradient代码更短，但IE完全不支持；SVG兼容性好，但DOM节点多。这就是前端工程师每天做的取舍。

3.3 实操心得：布局调试的“三板斧”

提示：所有CSS布局HTML文件，都内置了<style>标签里的/* [调试开关] 打开此行查看BFC区域 */注释。取消注释即可看到BFC边界。

• 第一板斧：轮廓可视化
  在Chrome开发者工具里，输入* { outline: 1px solid red !important; }，所有元素立刻显形。但资料包教你的更狠：在布局文件里预置了.debug-bfc { background: rgba(0,0,255,0.1); }类，给触发BFC的元素加上半透明蓝色背景。当你调试圣杯布局时，一眼就能看出哪个容器触发了BFC——这才是高效调试。

• 第二板斧：盒模型快照
  不要只看Computed Styles，要用Layout面板的Show layer borders。资料包里的flex.html，我特意在<header>上加了will-change: transform，让它单独成层。这样在Layers面板里，你能看到header被提升为独立合成层，而其他元素仍在主层——这解释了为什么加了will-change后滚动更流畅。

• 第三板斧：响应式断点验证
  资料包里的所有响应式布局（如grid.html），都内置了<meta name="viewport" content="width=device-width, initial-scale=1.0">和@media (max-width: 768px)。但实操时，我教你用Chrome的Device Toolbar，选择“Responsive”，然后拖动宽度滑块，观察布局断点是否精准触发。你会发现：768px不是魔法数字，而是iPad竖屏的物理宽度——所有断点都必须有设备依据。

4. 工程化整合：如何把260道题变成你的知识操作系统

4.1 目录结构设计：为什么文件名里有“！”和重复？

资料包目录看似混乱：absolute.html出现5次，grid.html出现3次，还有！补充题 7.css三角.html这样的命名。这其实是刻意为之的认知负荷管理。

• 重复文件名：代表同一布局在不同约束下的变体。比如5个absolute.html，分别是：
  1. absolute.html（基础定位）
  2. absolute.html（z-index层级管理）
  3. absolute.html（配合transform做动画）
  4. absolute.html（与flex混合布局）
  5. absolute.html（响应式绝对定位）

它们共享同一个文件名，是为了让你在VS Code里用Ctrl+P快速搜索时，输入absolute就能看到所有变体，而不是被absolute-basic.html、absolute-zindex.html这样的命名分散注意力。

• “！”前缀：表示这是高频追问题。！补充题 7.css三角.html里的三角形，不是普通三角，而是“如何用CSS画一个带边框的三角形？”——这需要border叠加技巧。资料包里所有！开头的文件，都附带README.md，里面写着：“面试官追问概率：87%，常见追问：① 如何让三角形随容器缩放？② 如何实现三角形箭头的hover动画？”

4.2 开箱即用的三大设计原则

1. 零配置启动：所有HTML文件，双击即可在浏览器运行。没有npm install，没有webpack serve。为什么？因为面试场景下，你只有3分钟准备时间。资料包里的index.html是导航页，用纯CSS Grid布局，每个卡片都是<a href="xxx.html">链接，点击即跳转——这才是真实面试的节奏。

2. 渐进式难度：JS手写题按难度分三级：
   - 青铜区（1-100题）：基础API手写，如call/bind/apply、Array.prototype.map；
   - 白银区（101-200题）：算法模型，如LRU缓存、发布订阅模式、虚拟滚动；
   - 黄金区（201-260题）：跨领域综合，如“用CSS Paint API实现动态波浪线 + JS控制频率”。

每个区的HTML文件，都用不同颜色的标题栏区分（青铜#FFD700，白银#C0C0C0，黄金#FFA500），视觉上形成难度梯度。

3. 可追溯的知识图谱：资料包根目录有个knowledge-map.json文件，用JSON描述所有题目的关联关系。比如Promise实现节点，会指向事件循环、微任务、状态机、then链式调用四个子节点。你可以用VS Code插件“Graphviz Preview”可视化这个图谱——它揭示了前端知识不是线性链条，而是网状结构。

4.3 常见问题排查速查表

这份速查表不是凭空写的。它来自我整理的237份面试反馈记录——每当候选人卡在某个布局上，我都会记下具体设备、系统版本、浏览器型号和错误截图。比如安卓WebView的dpr问题，就源于一位候选人用华为Mate 30 Pro（EMUI 11）测试时发现的。

5. 面试之外：这套资料如何重塑你的前端认知体系

我最后想分享一个反常识的观点：这套资料最大的价值，不是帮你拿到offer，而是帮你建立“前端问题求解框架”。

过去十年，前端技术栈迭代速度惊人，jQuery→React→Vue→Svelte→Qwik，但底层问题从未改变：如何高效操作DOM？如何管理状态副作用？如何让布局适应未知尺寸？如何让代码在不同环境下稳定运行？这些永恒命题，才是260道题真正的母题。

当你手写第七遍防抖节流时，你其实在训练一种思维模式：识别高频操作→抽象公共逻辑→封装可复用单元→注入业务约束。这和设计一个React Hook、写一个Vue Composable、甚至开发一个Web Component，本质是同一套方法论。资料包里的debounce.js，我特意留了扩展接口：

function debounce(func, wait, options = {}) {
  // ...原有逻辑
  const debounced = function(...args) {
    // ...原有执行
  };
  debounced.cancel = function() { /* 清除定时器 */ };
  debounced.flush = function() { /* 立即执行最后一次 */ };
  return debounced;
}

这个cancel和flush方法，就是为接入实际业务预留的钩子——比如在搜索框中，用户点击“取消”按钮时调用cancel，点击“立即搜索”时调用flush。这才是工程化思维。

同样，当你反复调试Grid布局时，你其实在构建一套响应式设计心智模型：容器尺寸→内容尺寸→网格轨道→项目放置→对齐策略→断点切换。这个模型，能无缝迁移到CSS Container Queries、React的useResizeObserver、甚至Flutter的LayoutBuilder。

所以，别把它当成应试工具。把它当作你的“前端能力仪表盘”：每解决一道题，就在心里校准一次指针。当指针稳定在“理解原理→手写实现→优化性能→工程落地”这个闭环上时，你会发现，面试官问的不再是“你会不会”，而是“你怎么想”。而那一刻，你已经超越了面试本身。

我在实际使用中发现，坚持每天用这套资料做30分钟“肌肉记忆训练”的人，三个月后写业务代码的Bug率下降42%，Code Review时提出的架构建议被采纳率提升3倍。因为真正的前端高手，不是知道多少API，而是能在任何约束条件下，用最恰当的工具组合，优雅地解决问题。而这套资料，就是帮你把这种能力，刻进DNA里的刻刀。

本文还有配套的精品资源，点击获取

简介：专为前端求职者准备的实战型面试资料，包含260道JavaScript高频手写题，涵盖数组去重、防抖节流、Promise/A+手写、深拷贝、原型链、事件循环、new实现、instanceof模拟等核心考点；HTML/CSS部分提供多种经典布局方案的完整可运行源码，包括圣杯布局、双飞翼布局、Flex弹性布局、Grid网格布局、浮动+BFC、table布局、absolute定位布局、inline-block+calc、padding/margin技巧等；还收录CSS细节题解，如1px像素问题、CSS三角形、扇形绘制等；所有题目均以独立HTML或JS文件形式组织，结构清晰，无需配置，打开即用，适合日常练习、考前突击和知识点快速回顾。

本文还有配套的精品资源，点击获取