京东前端笔试题复盘：JavaScript核心机制与浏览器原理全解析

2018年秋天我参加了京东Web前端工程师的秋招笔试那是我第一次体会到“基础不牢地动山摇”这句话的含义。整张卷子看起来题型常规范围也不算偏但越做越觉得哪里都差一口气尤其是JavaScript的细节题和手写代码题简直是把“知道”和“会用”之间的距离拉得明明白白。现在回头看京东这套前端笔试题其实很有代表性它既考察了传统前端的基础功底JS、CSS、浏览器又加入了框架和工程化的内容整体难度中等偏上区分度很高。如果你正在准备大厂前端岗位这套题背后的知识点和出题思路非常值得拿来当试金石。这篇文章我会把当年印象深刻的考点评测和复盘完整整理出来结合答案解析和备考建议尽量还原一份可以直接参考的复习路线。1. 京东前端笔试题整体复盘1.1 考察范围与题型分布京东2018秋招Web前端笔试的题型主要分四块选择题、简答题、手写代码题和算法题。选择题覆盖的面很广从HTML5语义化标签、CSS选择器优先级到JS原型链、事件循环、ES6新特性都有涉及数量大概在 20 到 25 道之间。简答题一般是 2 到 3 题重点考察你对某个技术点的完整理解比如跨域方案对比、页面渲染流程、前端性能优化等这种题没有标准答案但回答的深度一眼就能看出功底。手写代码题是我当时最头疼的部分要求现场实现防抖节流、深拷贝、数组去重、实现一个 Promise 等常见工具函数而且不能用搜索引擎完全靠平时的编码习惯。算法题则是经典的 LeetCode 风格主要围绕数组、字符串、链表的操作展开偶尔会有一道稍微偏一点的动态规划。整体来看笔试的时间大约是 120 分钟题量不小如果前面选择题犹豫太久后面手写题基本来不及。1.2 从笔试结果反推出题人的意图做完这套题我的感受是京东前端笔试题并不想为难你它想筛选的是基础扎实、能快速上手干活的人。什么意思呢就拿选择里常考的 CSS 选择器优先级来说题目不会直接问你优先级怎么算而是给一段嵌套很深的 DOM 结构让你判断最终某个元素的颜色是什么。这种题看起来很基础但如果你平时写样式只是靠浏览器调试而不是真正理解层叠规则基本会在两个选项中纠结很久。反推出题意图之后复习方向就清晰了很多不追求偏怪难而是把前端最核心的轮子拆开弄得明明白白。JS 的闭包、原型链、异步机制CSS 的布局与层叠上下文浏览器的渲染流程与缓存机制这些说白了就是前端日常开发的“基本功”。另外还有非常重要的一点手写代码题不是让你背题而是考察你的代码习惯比如变量命名、边界处理是否到位这些都是靠平时写代码养成的。2. 高频考点一JavaScript基础与核心机制2.1 原型链与闭包——绕不开的基本功JavaScript 的笔试部分原型链几乎每年都出现。京东这套题里有一道让我印象很深的选择题它给了一个构造函数和通过new创建的两个实例然后问某个对象属性的访问顺序。其实考的就是__proto__、prototype和constructor之间的关系。这类题做错往往不是因为不知道概念而是没把“对象查找属性的路径”串起来。我后来总结出一个比较直观的理解方式实例.__proto__指向构造函数原型构造函数原型的__proto__继续往上指直到Object.prototype最后到null为止。在笔试紧张的环境下建议先在草稿纸上画一条原型链再逐个属性去对这样不容易出错。闭包在京东笔试题里出现频率也很高常见考法是输出题让你写出代码运行结果。比如经典的for (var i 0; i 5; i) { setTimeout(function () { console.log(i); }, 1000); }输出结果是 5 个 5。很多人背过答案但笔试题会稍微变个形比如把var换成let或者在循环里加一个立即执行函数此时结果就变成了 0 到 4。这背后是闭包捕获变量和作用域绑定时机的问题。笔试考闭包深层逻辑是为了看你对“变量生命周期”有没有直觉理解毕竟实际开发中闭包造成的内存泄漏和事件绑定的老 bug 基本都是同一个根源。2.2 事件循环与异步——前端异步编程的根基异步编程题是2018年京东笔试中比较有区分度的一类题。我记得有一道代码输出题代码里混杂着setTimeout、Promise、async/await和process.nextTick问你最终的输出顺序。我当年为了这类题专门梳理了一套理解方法先分清宏任务和微任务再明确每轮事件循环谁先执行。具体来说同步代码先执行然后本轮微任务清空再从宏任务队列里取一个执行周而复始。Promise的回调属于微任务setTimeout属于宏任务async/await是 Promise 的语法糖process.nextTick则是 Node.js 环境里优先级最高的微任务。我建议你把这道题的运行结果推导一遍而不是只看结论因为笔试可能会通过换参数、嵌套回调来加大难度。我在实际准备这类题时习惯用“队列模拟法”把所有待执行任务按类型写入不同的队列表格然后像执行 CPU 调度一样一步步推进每一步都问自己“现在宏任务队列里是谁微任务队列里是谁”这样几乎不会出错。2.3 类型转换与 This 指向——性价比最高的得分点JS 类型转换在选择题里几乎属于送分题但前提是你真的理解它的转换规则。京东的题目常考[] ![]这类表达式答案竟然为true因为![]会先把空数组转成布尔值得到false然后进入相等比较时又把两边转成数字[]转成 0false转成 0所以相等。这类题不只是考记忆更是在引导你理解 JS 的隐式转换机制对象先调valueOf再调toString最后才转成布尔或数字。this指向是另一个屡试不爽的考点。2018年笔试中出现过一个组合题普通函数、箭头函数、对象方法加call/apply/bind混在一起问最终输出。这类题的判断逻辑可以一句话概括“普通函数看调用位置箭头函数看定义位置bind返回的新函数不可再改变指向”。我当时把这些规则整理成一张速查表笔试前五分钟过一遍效果很好。3. 高频考点二CSS布局与页面样式3.1 从手写三栏布局到Flex与GridCSS 部分最经典的考察方式是手写三栏布局要求左右固定宽度中间自适应并给出至少两种方案。京东笔试中直接用了这个原题我选择了经典的双飞翼布局和 Flex 布局两种方案同时说明各自的优缺点。我为什么推荐至少掌握两种以上方案因为真正的笔试环境里面试官可能会追问“你只用了 Flex如果浏览器环境需要兼容到 IE9 怎么办”如果你说“那就用 float margin”说明你还真的实践过而不只是会用现成的框架。双飞翼布局的核心思想是让中间一栏先渲染然后通过margin-left和margin-right为左右两侧腾出空间。Flex 布局则相对简单得多核心代码就几行.container { display: flex; } .left, .right { flex: 0 0 200px; } .middle { flex: 1; }但使用 Flex 时需要注意flex-basis、flex-grow、flex-shrink三者之间的关系很多人在笔试时会遗漏min-width: 0导致中间内容被撑破的情况。这些都是实际开发中会踩的坑笔试时写出来反而能加分。3.2 盒模型与层叠上下文——选择题重灾区京东的 CSS 选择题在盒模型上做文章常常给出一个元素设置了box-sizing: content-box和box-sizing: border-box两种状态让计算width和实际占用的尺寸。这类题其实不难但很容易算错核心在于牢记两种盒模型模式下width包含什么。content-box模式下width只包含内容区border-box模式下width是内容加内边距加边框的总和。把公式写出来content-box 实际宽度 设置的 width padding borderboder-box 实际宽度 设置的 width只要把这两句话刻在脑子里再补一个box-sizing全局设置的习惯基本就不会再错。至于 layer 上下文最常见的考点是z-index到底在被谁影响以及position加z-index后为什么“压不住”另一个元素。原因往往不是z-index值不够大而是父元素形成了独立的层叠上下文内部子元素的z-index只在父级内部比较。笔试里用一个父容器设置opacity或者transform再让里面的子元素打架能轻松干翻一批人。3.3 垂直居中——最基础也最容易被问细的知识点手写题里还有一个常见的操作让一个元素在父容器中水平垂直居中。京东的笔试题也是老套路但我后来复盘时发现这类题虽然简单却是检验前端功底的好题目。因为实现垂直居中的方案至少五种而每一种方案都有它的适用场景文本居中text-alignline-height块级居中margin: auto 固定宽高绝对定位方案top: 50%; left: 50%; transform: translate(-50%, -50%)Flex 居中justify-content: center; align-items: centerGrid 居中place-items: center笔试时至少写出 3 种并说明各自的应用场景比单纯写一个能过就强的方案要亮眼得多。我强调这类题还有一个原因现在的面试官都很反感背答案。他们会追问“flex 方案和绝对定位方案在性能上有什么区别”如果你能说出绝对定位方案会脱离文档流、影响布局flex 方案对容器和子元素的尺寸要求更宽松就说明你是真的理解而不是背题。4. 高频考点三浏览器原理与网络基础4.1 从输入URL到页面渲染——必背必会的全局视角2018京东笔试题的简答题里有一道非常典型的全局题从浏览器地址栏输入 URL 到页面展示中间发生了什么。这类题看起来是送分题但想拿满分其实不容易因为你光会背那七八个步骤不够还要把细节串起来。我当时的回答思路是分成网络请求和页面渲染两个阶段展开。网络请求阶段先解析 URL判断协议、域名、端口然后检查浏览器缓存命中则直接使用没命中就发起 DNS 解析找到对应的 IP之后经过 TCP 三次握手建立连接如果是 HTTPS 还要加上 TLS 握手协商密钥。请求发出后服务器返回 HTML 或者其他静态资源浏览器再根据响应的状态码决定后续逻辑。页面渲染阶段可以说是前端的基础核心浏览器解析 HTML 构建 DOM 树解析 CSS 构建 CSSOM 树两者结合形成渲染树然后经过布局和绘制最终呈现到屏幕上。这中间还有一个关键点是 JavaScript 的加载与执行会阻塞 DOM 解析因此需要理解defer和async的区别。我在笔试时特意强调了这两者的区别因为很多人在项目里只知道用但说不出为什么。4.2 跨域与安全——从“拦路虎”到“送分题”跨域问题在2018年京东笔试中占据了不小篇幅选择题、简答题都有涉及。考察点集中在什么是跨域、如何解决跨域、CORS 中简单请求与预检请求的区别以及 JSONP 的优缺点。我复习时发现最有效的办法是理解“为什么会有跨域”这个根因浏览器出于安全考虑采用同源策略限制了不同源之间的脚本交互但很多时候业务上又确实需要跨域请求所以就衍生出各种方案。JSONP 的原理是利用script标签不受同源策略限制的特点动态加载一个带回调函数名的脚本。缺点是只能支持 GET 请求无法处理 POST而且错误处理机制不完善。CORS 则是通过服务器在响应头里带上Access-Control-Allow-Origin等字段来告诉浏览器“允许这个源访问”适用于大多数场景。笔试如果考到安全性常会问 XSS 和 CSRF 的防御手段。XSS 的核心思路是对用户输入做转义过滤不信任任何外部数据CSRF 的防御方案则集中在 Token 验证、同源检测和自定义请求头。我当时把这两者写成表格对比从攻击原理、危害到防御手段一一对应这种结构化的表达是比较加分的。简单来说遇到这类题目不要只答一句话尽量把场景、原理、对策讲完整这也对应了开发中排查问题的实际能力。4.3 浏览器缓存——性能优化的第一课浏览器缓存是京东笔试中常被隐藏在选项里的考点。常见的考法是给你一组响应头问你资源会走强缓存还是协商缓存。Cache-Control的max-age决定强缓存时长ETag和Last-Modified用于协商缓存。很多候选人抓不住重点看到一个200 (from disk cache)就以为一定是强缓存但实际上也需要根据缓存字段判断。我建议把缓存的整个流程理清成一条线第一次请求后服务器返回资源和缓存策略后续请求时浏览器先判断强缓存是否过期没过期就直接使用本地缓存不发请求过期后走协商缓存带上If-None-Match或If-Modified-Since询问服务器资源是否变化如果服务器返回 304 就继续用本地资源否则返回新资源。笔试考缓存题重点是为了看你在做性能优化时有没有分寸感比如版本更新后如何让用户拿到最新资源这类思路写进答案里往往比单纯背字段更受认可。5. 高频考点四框架认知与前端工程化5.1 Vue 与 React 的核心原理对比2018年前端框架基本已经进入 Vue 和 React 二分天下的状态京东前端笔试题自然也离不开框架考察。选择题里会出现 Vue 的响应式原理、生命周期顺序、v-if与v-show的区别React 的虚拟 DOM 与diff算法、setState的同步异步问题等。我记得当时有一道题问到 Vue 中computed和watch的区别。很多人只知道 computed 能缓存watch 用于监听但笔试题会设置一个具体场景比如某个数据依赖多个变量如果用 watch 要怎么处理用 computed 怎么写。其实背后的本质是computed 适合由多个数据派生出新数据watch 适合在数据变化时执行异步或开销较大的操作两者虽然都能实现类似效果但语义和使用场景完全不同。React 方面常考的是setState在什么情况下同步、什么情况下异步。这个问题的根源是 React 在事件处理函数中会把setState合并并批量更新而在原生事件、setTimeout或 Promise 回调中更新行为看起来是同步的。我自己的理解是不要纠结于同步还是异步只需要记住在 React 控制的更新流程内 state 是批量合并的这就够了。5.2 构建工具与模块化——工程化的入场券前端工程化在2018年已经是大厂笔试的固定板块。京东笔试题里出现了 Webpack 相关的基础问题比如 loader 和 plugin 的区别、模块热更新的基本原理、常见的代码分割方式。这类题对没实际配过 Webpack 的候选人很不友好因为很多细节不是看书就能记住的需要真的在项目里做过配置。loader 和 plugin 的区别我用一句话总结loader 负责将文件转换为模块比如把 ES6 转成 ES5、把 SCSS 转成 CSSplugin 负责在打包流程的各个阶段做额外的事情比如压缩代码、提取公共代码、生成 HTML 文件。笔试时我还提到 Webpack 的构建流程大致是从入口文件开始递归解析依赖经过 loader 处理最终通过 plugin 优化并输出文件这个流程把两者串联起来分数会更漂亮。模块化方面主要考 CommonJS 和 ES Module 的区别。CommonJS 是运行时加载表现为require是在代码执行到那时才去读模块ES Module 是静态编译import会被提升到文件顶部所以可以进行静态分析和 tree shaking。知道这层区别的人不仅笔试能得分实际项目中排查循环引用问题也更得心应手。5.3 网络热词与技能点延伸——web前端开发的新方向2018年之后Web前端开发的热词开始向工程化和全栈化发展这在笔试中也有体现。当时京东的笔试题中已经出现了 TypeScript 的简单类型定义、渐进式 Web 应用和 Server Side Rendering 的概念题。虽然占比不大但释放了一个信号只会原型链和闭包的人已经不够了你需要具备一定的工程思维和跨端视角。我的建议是复习时不仅要看老四样HTML、CSS、JS、网络还要对 TypeScript、Node.js、小程序开发、前端监控这些方向有基本的认知。哪怕是每次只了解一个概念也比你面试时被问题问住要好。我当时就是因为平时有看社区技术文章的习惯所以对这些“新兴热词”不至于完全陌生笔试时在面对这类拓展题时心里至少不慌。6. 算法与手写代码题冲刺6.1 手写常见工具函数——边界处理是拿分关键京东2018年的手写代码题有一道是手写防抖函数这个题看似简单但只要漏了参数传递和this绑定就会丢掉一大半分数。一个相对完整的防抖函数是这样的function debounce(func, wait) { let timer null; return function (...args) { clearTimeout(timer); timer setTimeout(() { func.apply(this, args); }, wait); }; }很多候选人只写了setTimeout和clearTimeout却忘记用func.apply(this, args)保留原函数的上下文和参数。笔试阅卷时这种细节很致命因为说明你对 JS 中this的处理还不够敏感。再深一点面试官还可能追问防抖要不要支持立即执行版本、节流与防抖的区别是什么、函数返回 Promise 时怎么处理。这类题我会多写一个版本比如带immediate参数的升级版用来展示自己对边界情况的理解。老实说笔试时能多写哪怕一个注释比如说明timer为什么需要清理都能让你和背诵答案的人拉开差距。6.2 常见算法题型——数组和字符串是基本盘算法题在京东笔试中不会太难重点集中在数组去重、数组扁平化、字符串反转、括号匹配、链表反转等。我当时印象比较深的一道题是给定一个整数数组找出其中出现次数超过一半的元素要求时间复杂度 O(n)空间复杂度 O(1)。这道题的思路是摩尔投票法核心是让候选人通过“抵消”的思想来找候选数。算法题备考我个人不推荐题海战术而是按题型分类刷。数组、字符串、链表、二叉树四大类各挑 10 道典型题把每种题型的思路都吃透。比如数组类就关注双指针、滑动窗口、哈希表链表类关注虚头节点、快慢指针、递归翻转。笔试时留出至少 20 分钟给最后一道算法题因为这类题一般分值最高而且越慌越写不出来。6.3 手写深拷贝——考察代码细节的一道好题深拷贝几乎是所有大厂笔试的“常驻嘉宾”京东2018年也不例外。题目要求手写一个深拷贝函数能够处理对象、数组、循环引用。我当年写的版本首先判断基础类型如果是基础类型直接返回引用类型就新建一个容器然后用递归去拷贝每个属性遇到循环引用用WeakMap记录已拷贝的对象如果已经拷贝过就直接返回。function deepClone(obj, map new WeakMap()) { if (obj null || typeof obj ! object) return obj; if (map.has(obj)) return map.get(obj); const clone Array.isArray(obj) ? [] : {}; map.set(obj, clone); for (let key in obj) { if (obj.hasOwnProperty(key)) { clone[key] deepClone(obj[key], map); } } return clone; }笔试时我特意写了WeakMap而不是普通对象因为WeakMap的键是弱引用不会造成内存泄漏这种细节往往不太容易被注意到但写出来之后效果很好。另外还需要考虑Symbol作为 key 的情况、Date、RegExp等特殊对象的处理。虽然笔试要求不一定那么高但你多处理一种场景就是多一分扎实的印象分。7. 笔试备考策略与独家经验7.1 三个月的复习节奏怎么安排如果你也想拿下一线互联网大厂的前端岗位我建议把复习周期安排在两个月到三个月之间。第一个月主攻基础把 HTML、CSS、JavaScript 底层机制全面过一遍每学一个知识点都动手写一个 demo不要只停留在“看懂了”的层面。第二个月转向框架和工程化挑一个主攻框架深挖源码从响应式原理到虚拟 DOM diff再到组件通信方式建议对照官方文档看一遍源码注释。第三个月就是刷题和模拟面试阶段每天固定 1 到 2 道手写题周末做一套完整笔试真题。这里我特别想强调“输出式学习”的重要性。光看别人的源码解析、题解笔记大脑很容易产生“我懂了”的错觉。我备考期间强制自己每天写一篇简短的知识总结哪怕只是三五行也要用自己的语言把当天的核心概念描述清楚。这个习惯坚持下来我能明显感到记忆牢固很多笔试时遇到类似表述也更从容。7.2 笔试实战中的时间分配与应试技巧京东笔试 120 分钟听起来很充裕但实操起来时间非常紧。我的策略是先花 40 分钟快速完成选择题和简答题遇到拿不准的题目先标记不要纠结太久因为选择题的单题分值有限而手写题和算法题的性价比要高得多。中间 40 分钟集中处理手写代码题从自己最有把握的题目开始做这样可以快速建立信心也可以保证在时间耗尽前拿到稳定的分数。最后的 20 到 30 分钟专攻算法题。算法题的评分往往是看思路和关键步骤即使没能完全通过所有测试用例也把核心思路写清楚让阅卷人能看出你的思考过程。还有一个小技巧在所有代码题里加上简单的注释比如写清除某个变量为什么存在、某一步为什么是而不是这在技术评审眼里往往是很加分的。7.3 复盘比刷题更重要笔试结束后无论结果如何我都建议第一时间把题目回忆出来整理成自己的错题本。我整理错题本的原则很简单不只是写正确答案而是把错误思路和正确思路的对比写下来然后主动思考“出题人想考察哪个知识点”“如果把这个考法换个场景我还会不会”。这一步看着麻烦却是把一套真题价值榨干的唯一方法。我在整理研究京东这套笔试题时最大的收获其实不是解出了哪几道题而是认清了一个事实前端这个岗位基础扎实的人走到哪里都有底气。所有高级的框架和工具最终都是建立在基础之上的。笔试只是一个入口它帮你筛选出谁对基础的理解是真正到位的谁只是停留在表面。如果你正在准备类似的前端笔试希望这份复盘能帮你少走一些弯路。面试和笔试没有捷径但把每个基础知识点都吃透你的通过率一定会大幅提升。