说实话如果不是整理旧硬盘里的资料我可能都忘了自己还存过一份2015年百度的前端研发笔试卷。那会儿我刚工作三年看到这套卷子第一反应是“幸好我早生了几年”——题目又多又细覆盖了布局、闭包、原型链、跨域、性能优化连浏览器渲染机制都考放在当时绝对算硬核。今天再翻出来看反而有了不一样的感受同一套题拿十年前的标准和现在的标准去审视完全能看出前端这个行业是怎么从“页面仔”走到“工程化”的。这份试卷现在依然值得翻一翻尤其是正在准备前端面试的朋友。它最大的价值不在于题目本身而在于它把前端基础能力的考察维度串得很完整——HTML、CSS、JavaScript、浏览器原理、网络、工程化几乎每个方向都碰到了。而且我对比了一下最新的2026年前端面试题趋势发现很多核心考点根本没变只是换了一副“新框架”的外衣。这篇文章我会把这份试卷逐块拆开给出当年的解题思路再补上现在应该怎么答、怎么准备顺便聊聊哪些题考了十年还在考。1. 试卷整体拆解2015年的百度想要什么样的前端1.1 试卷结构与考察维度这套卷子我大概回忆了一下整体分四个板块HTML/CSS基础、JavaScript核心、浏览器与网络、综合应用与优化。每个板块都不是孤立的而是互相咬合比如布局题会引申到盒模型和BFCJavaScript题会串到事件循环和DOM渲染性能优化题又绕不开跨域和缓存。我梳理了一个相对完整的维度对照表方便你看清每个考点背后的真实意图考察维度典型题目方向当年的考察目标现在的对应考点HTML/CSS两栏/三栏布局、盒模型、垂直居中判断候选人能不能处理真实页面还原Flex/Grid布局、响应式、CSS变量JavaScript闭包、原型链、this指向、事件循环考察语言底层理解和逻辑能力手写Promise、深拷贝、发布订阅DOM与浏览器事件冒泡捕获、事件委托、缓存确认候选人是否理解浏览器工作原理合成事件、渲染性能、缓存策略网络与异步JSONP、跨域方案、Ajax封装考察异步编程和网络功底CORS、Fetch、Axios拦截器性能与工程化请求合并、懒加载、模块化评估工程意识和团队协作潜力构建优化、代码分割、微前端你会发现一个很有意思的现象这份试卷没有任何一道题是“背一背就能过”的。哪怕是看起来最简单的CSS垂直居中它也会追问“你知道几种方案每种方案的适用场景和坑是什么”这种问法到今天依然是面试官最爱考的不是答案而是你脑子里有没有一张完整的知识网络。1.2 出题思路背后的团队诉求为什么百度当年会出这样一套卷子答案藏在2015年的技术背景里。那一年jQuery还是绝对主流AngularJS 1.x正在普及Backbone还有不少遗老遗少国内大厂普遍还在用自研的构建工具百度内部是FIS。与此同时移动端流量开始爆发IE8还没完全退出历史舞台团队要同时维护PC端和H5端兼容性、性能、工程效率三个问题天天压在身上。所以这套卷子本质上是“倒逼”候选人具备三件事第一能从纷繁的浏览器差异里提炼共性不被某个具体API绊住第二能理解JavaScript在浏览器环境里的真实运行机制而不是只会调用API第三有性能敏感度和代码抽象能力能写出经得起流量考验的代码。说白了当年百度前端团队想要的人不是“会用jQuery写效果”的人而是“知道浏览器怎么渲染、脚本怎么执行、资源怎么加载最省”的人。这个逻辑放到今天依然成立。现在面试考React/Vue原理、考Vite构建优化、考微前端本质都是同一个诉求你需要理解底层机制而不是只会拼组件。理解了这一点你就会明白为什么我说这份2015年的老试卷对2026年准备面试的人依然有参考价值——题目会过时但考察的底层能力不会过时。2. 核心题目逐题解析与实战解法2.1 HTML/CSS布局题从浮动到弹性布局的演变布局题几乎是当年所有大厂笔试的标配百度这份卷子里有一道很经典的两栏布局题左侧固定宽度200px右侧自适应撑满剩余空间。放在今天就是一个display:flex的事儿但2015年标准答案还在用float加margin-left.left { float: left; width: 200px; } .right { margin-left: 200px; }这个方案看起来简单但至少有两个坑面试官一定会追问。第一float元素会脱离文档流如果右侧内容比左侧矮父容器高度会塌陷需要清除浮动第二如果右侧内部还有元素需要包含浮动子元素可能也要触发BFC否则会出现各种诡异的边距重叠。所以当年很多标准答案会额外补一句给父容器加overflow: hidden来触发BFC。同样的题放到2026年我建议你至少准备四种方案flex布局、grid布局、float方案、position定位方案。然后要能说清楚每种方案的优缺点和适用场景。比如flex语法简单、不需要考虑高度塌陷但兼容性在特别老的移动端WebView上可能有问题grid更适合二维布局但复杂度也更高float方案已经属于历史遗留只在兼容旧代码时才会用到。面试官问这类题真正想听的其实是你有没有“方案选型”的意识而不是单纯背代码。另外垂直居中也是一道常青题。2015年主流方案是absolute定位加负margin.parent { position: relative; } .child { position: absolute; top: 50%; left: 50%; width: 200px; height: 100px; margin: -50px 0 0 -100px; }这个方案要求必须知道元素的宽高否则负margin算不准。后来的方案是transform: translate(-50%, -50%)再后来的flex和grid就完全不需要关心元素尺寸了。这道题我会建议你横向对比至少五个方案负margin、transform、table-cell、flex、grid每个方案的兼容性、是否需要固定宽高、是否影响文档流都能讲清楚才算过关。2.2 JavaScript核心闭包、原型链、this指向JavaScript部分是整套卷子的重头戏。有一道题我记得特别清晰写一个函数实现每隔一秒打印数组中的每一项。这道题考察的就是闭包和var/let的区别。2015年ES6刚出来不久let还没全面普及所以常规答案是拿闭包包一层for (var i 0; i arr.length; i) { (function (index) { setTimeout(function () { console.log(arr[index]); }, 1000 * index); })(i); }放到现在直接用let就完事了for (let i 0; i arr.length; i) { setTimeout(() { console.log(arr[i]); }, 1000 * i); }但面试官不会只满足于你写对。他一定会追问为什么闭包能解决这个问题var和let在for循环里的作用域有什么本质区别这里你就要能说清楚var声明的变量是函数级作用域整个循环共享同一个i闭包把每次循环的i通过参数拷贝了一份存进了独立的作用域里。而let是块级作用域每次迭代都会创建一个新的绑定所以天然就规避了这个问题。这类题目考察的其实是“作用域链”和“变量生命周期”的理解如果你只是背答案换个问法就露馅了。原型链相关的题目也一样。2015年考的是手写继承function Animal(name) { this.name name; } Animal.prototype.say function () { console.log(this.name); }; function Dog(name) { Animal.call(this, name); } Dog.prototype Object.create(Animal.prototype); Dog.prototype.constructor Dog;这套组合继承写法现在是标配但当年很多人会写错常见问题包括忘记调用Animal.call导致父类属性没初始化、直接Dog.prototype Animal.prototype导致子类原型污染、constructor指向错误。放到2026年我建议你把这个知识点升级一下用class语法重写一遍然后说明class的extends底层做了什么。class本质还是原型链的语法糖理解了底层才能应对“class和构造函数定义方法的区别是什么”这种进阶追问。2.3 DOM操作与浏览器机制事件委托、缓存、渲染DOM操作题也很有代表性。有一个高频题是有一个ul列表里面有一万个li点击每个li要弹出对应的索引。如果给每个li单独绑定事件性能会很差标准答案是事件委托document.querySelector(ul).addEventListener(click, function (e) { const target e.target; if (target.tagName LI) { console.log(Array.prototype.indexOf.call(this.children, target)); } });这道题有两点值得展开。第一为什么事件委托性能更好因为事件冒泡机制让父元素可以统一处理子元素的事件只需要绑定一次监听器内存占用从一万个变成两个第二事件委托还能处理动态添加的子元素——如果新插入一个li不需要重新绑定事件因为事件本来就挂在父元素上。2026年的面试里这道题会换一个问法React的事件合成机制是怎么实现的其实底层思想一脉相承React把所有事件委托到了根容器上再通过事件对象里的target和path去匹配组件核心思路和原生事件委托完全相同。浏览器缓存也是必考项。2015年的题目一般是“强缓存和协商缓存的区别”。强缓存就是直接从本地缓存读取不发请求对应Cache-Control和Expires协商缓存要发请求询问服务器资源有没有变对应Last-Modified/If-Modified-Since和ETag/If-None-Match。当年有个高频考点是“启发式缓存”——如果响应头里没有Cache-Control也没有Expires浏览器会默认按一个时间缓存这个时间通常是Last-Modified到当前时间差值的10%。这个点很多人不知道知道的人基本都能过。现在这道题会升级成懒加载与预加载的区别、图片资源如何做渐进加载、什么时候用preload什么时候用prefetch。建议你学习的时候把“浏览器加载资源全过程”这条线串起来DNS解析、TCP连接、TLS握手、发送HTTP请求、解析响应、判断缓存、渲染DOM、加载子资源。把这个链路理解透你会发现缓存只是其中一个环节很多性能优化题的答案都藏在这条链路里。2.4 跨域与异步经典方案与技术演进跨域问题是2015年笔试的重头戏因为当时前后端还没完全分离很多接口直接通过Ajax调用跨域是每天都要面对的真实痛点。JSONP是最经典的方案百度这份卷子里应当有手写JSONP的题function jsonp(url, params, callback) { return new Promise((resolve, reject) { const script document.createElement(script); const callbackName jsonp_cb_ Date.now() _ Math.floor(Math.random() * 1000); window[callbackName] function (data) { delete window[callbackName]; document.body.removeChild(script); resolve(data); }; params.callback callbackName; const queryStr Object.keys(params).map((key) key encodeURIComponent(params[key])).join(); script.src url ? queryStr; script.onerror function () { delete window[callbackName]; document.body.removeChild(script); reject(new Error(JSONP request failed)); }; document.body.appendChild(script); }); }这道题考察的知识点很密集动态创建script标签、全局回调函数、Promise封装、URL参数拼接、错误处理、资源清理。每一行代码都能延伸出问题。现在CORS成了主流方案JSONP用得少了但面试依然会问原因在于它考察的是“在没有现代跨域协议的情况下如何绕过浏览器同源策略”这一底层认知。你理解Script标签不受同源策略限制就能理解为什么JSONP只能支持GET请求——因为script的src本质就是一次GET。CORS相关的题放到2026年会更深入预检请求什么时候触发Access-Control-Allow-Origin怎么配置携带Cookie时credentials要设置成什么简单请求和复杂请求的边界在哪这些内容建议你基于实际项目做一个接口联调时专门排查一遍光看文档记不牢。我见过很多候选人张嘴就是“CORS就是加个响应头”但一问到生产环境为什么有时候会多一次请求就哑火了。原因就是他对预检请求没有实际感知没抓过包也没看过Network面板。2.5 移动端适配与工程化萌芽2015年移动端H5刚爆发试卷里也出现了viewport和rem适配的题目。核心逻辑我记得很清楚通过动态设置根元素的字体大小让页面在不同设备宽度下等比缩放(function (doc, win) { var docEl doc.documentElement; var resizeEvt orientationchange in window ? orientationchange : resize; var recalc function () { var clientWidth docEl.clientWidth; if (!clientWidth) return; docEl.style.fontSize 20 * (clientWidth / 375) px; }; if (!doc.addEventListener) return; win.addEventListener(resizeEvt, recalc, false); doc.addEventListener(DOMContentLoaded, recalc, false); })(document, window);这段代码现在看起来有点上古但它的工程思想很值得学使用设备和屏幕宽度求一个比例然后把单位换算统一交给根元素处理。现在你写移动端页面基本不用手写这段了webpack的postcss-pxtorem插件直接把px转rem或者直接手写flexible方案。但一旦遇到公司内部的低代码平台或者特殊客户端的WebView你还是得知道这套东西怎么运作。工程化的本质就是把重复劳动抽象成工具但抽象的前提是你得先理解手写的过程。模块化也是2015年的考察热点那时候AMD、CMD、CommonJS三足鼎立百度内部对模块化的要求很高所以卷子里应当有“require.js和sea.js的区别”这类题。现在ESM已经是标准CommonJS在Node端依然活跃面试时的问法变成了“ESM和CommonJS的区别”考察的点包括静态导入和动态导入、编译时和运行时、tree-shaking的原理等等。这都是老问题的现代化变身底层逻辑没变——JavaScript模块化要解决的就是作用域隔离、依赖管理和加载顺序。这三件事理解透了任何模块化方案在你眼里都只是API长得不一样而已。3. 从试卷看前端十年技术栈变迁与面试风向标3.1 2015年的技术生态到底什么样2015年前端生态和现在完全是两个物种。当时没有Vite构建工具以Grunt和Gulp为主Webpack才刚刚兴起没有TypeScript的统治地位大多数项目还是纯JavaScript写业务逻辑框架层面jQuery仍然是DOM操作的王者AngularJS 1.x是“重框架”的典型代表React刚发布一年Vue才发布两年都还在生态早期。至于状态管理、SSR、微前端这些概念当时要么不存在要么只停留在实验室阶段。所以当时的前端面试更像“手艺活考核”——你写的代码能不能在IE8上跑你的布局会不会在某个奇怪的Android机型上错乱你的脚本合并在网络慢的时候会不会卡住用户操作。这些“手艺人”特质在今天被工程化工具替代了一部分但底层功底依然不可替代。我现在面试候选人时如果看到一个人能流畅解释“为什么TCP要三次握手而不是两次”基本上JavaScript基础也不会差到哪里去——因为网络层和语言层的原理思维是相通的。3.2 十年后的前端框架、构建、跨端、AI辅助2026年的前端技术栈早已翻天覆地。React和Vue都进化到了完全体TypeScript成为标配Vite成为新一代构建工具的事实标准微前端、Server Components、SSR/SSG、WebAssembly这些概念成了高阶岗位的常客。更重要的是AI辅助开发越来越普及像基于大模型的组件生成、接口文档自动转Mock数据、AI写测试用例这些工具已经开始进入日常工作流。但注意工具越先进对底层认知的要求反而越高。你用AI生成一个React组件很简单但如果组件渲染性能出了问题你要能看懂Diff算法的瓶颈在哪里你用Vite启动项目很快但线上打包体积变大了你要能理解为什么ESM在开发环境有优势、生产环境又要考虑Tree-shaking和代码分割。这些问题的答案都离不开JavaScript语言本身和浏览器底层机制——也就是2015年这套卷子考的那些东西。3.3 面试逻辑的变与不变哪些题永远不会过时我把这份2015年试卷和现在的高频面试题做了一次对比发现真正的核心考点几乎没有变底层能力2015年的考法2026年的考法作用域与闭包for循环打印、变量提升手写防抖节流、computed/useMemo原理原型链与继承手写组合继承class的static和私有字段、extends底层事件机制事件委托、冒泡捕获React合成事件、Web Worker通信异步流程setTimeout、回调地狱Promise、async/await、微任务/宏任务顺序跨域通信JSONP、postMessageCORS预检、BroadcastChannel资源加载脚本合并、CND缓存懒加载、preload/prefetch、资源优先级布局适配浮动布局、媒体查询Grid、Container Queries、移动端适配结论是面试官真正在意的不是你会用哪个框架而是你对计算机基础、浏览器原理、JavaScript语言本质的掌握程度。框架迭代太快今天学Vue3明天可能就出Vue4但闭包、事件循环、HTTP缓存这些底层知识是十年二十年都不会变的。你把这些“不动产”研究透了换什么框架都只是学个语法的事。4. 备考实战如何吃透这份试卷并进阶4.1 分阶段复习路径如果你现在正打算系统地过一遍前端基础拿这份试卷当起点很合适。我会建议按三阶段走。第一阶段是“补盲区”。先把试卷里涉及的知识点列一张清单逐个自查。布局、盒模型、闭包、原型链、this、事件循环、Ajax、跨域、缓存、性能优化这些里如果有哪个概念你只能说出一个词、举不出实际代码例子那就是盲区。盲区补起来不要为了学而学要配合代码实践比如闭包这个概念你至少要把“计数器”“防抖节流”“单例模式”三个场景各写一遍。第二阶段是“手写轮子”。这一步很多人会忽略觉得笔试是选择题背一背就好其实大厂笔试和面试越来越喜欢让人现场写代码。我建议至少要能手写这些防抖节流、深拷贝、Promise/A规范的基础版本、JSONP、函数柯里化、Compose、Instanceof的原理、new的原理、数组去重排序等。每道题都要能解释每一行的作用而不是默写模板。第三阶段是“项目串联”。学到的知识点必须能讲出一个项目里的真实案例才能算掌握。比如你在项目里做过上传大文件那你就可以把断点续传、切片上传、Web Worker处理文件Hash、进度条渲染这些串联成一个完整的前端知识点。这套从“笔试知识点”到“项目实践”的迁移能力才是面试官最看重的。我面试过一个候选人他背了所有八股文但一问到项目就说“这个功能是同事实现的”这种一票否决因为你不能背别人的经验。4.2 代码层面的复现与笔记方法我自己的习惯是建一个“前端底层原理”的代码仓库把每道经典题都单独写成一个文件并附上readme解释原理和变体。比如事件委托这道题我会同时写三个版本原生事件委托、jQuery时代的on方法、React合成事件。写完之后再写一份对比笔记三者的性能差异、动态节点处理的异同、分别适合什么场景。这样下次面试哪怕换了新问法你也是“有备而来”而不是现场搜刮记忆。笔记还有一个很实用的技巧把每道题的“一句话总结”写在文件最顶部。比如闭包一句话总结是“函数携带其定义时的作用域”原型链是“对象通过__proto__串起来的查找链条”事件循环是“先微任务再宏任务微任务包含Promise.then和MutationObserver”。这句话是留给你自己面试前快速过一遍用的能顺利说出来就说明真的理解了如果只能说出半句那就是还没学透。4.3 把老题升级为新题的方法准备完老题之后最后一步是把它们翻译成新题。这里给你一个很实用的方法把每一道2015年的题目改成“用现代框架怎么实现”。比如“事件委托”改成“React为什么要把事件绑定在root上与原生事件委托的区别是什么”“手写JSONP”改成“axios的jsonp适配器和CORS的取舍”“闭包打印”改成“React Hooks闭包陷阱为什么useEffect里拿到的state是旧值”“requestAnimationFrame”改成“React的useLayoutEffect和useEffect的区别”。这样做一遍你会发现旧题瞬间有了新生命。我印象很深的一次面试候选人被问到“setTimeout和requestAnimationFrame的区别”他紧张到没说清rAF和浏览器的关系。如果他能从“事件循环”和“渲染帧”的角度去回答这题就是送分题。所以建议你把老试卷当成“面试题母题库”每个母题都衍生出三到五个现代变体这样面试时不管怎么被追问都能兜住。5. 常见问题与避坑经验5.1 刷题时容易踩的坑先说说我见过最多的坑只看不写以为看懂了就是会了。JavaScript的很多坑只有手写才暴露得出来比如手写Promise时then的链式调用、手写深拷贝时循环引用的处理、手写防抖时需要维护timer变量。你读十遍别人的代码都不如自己写一遍踩一遍坑来得深刻。第二个坑是背标准答案不思考变体。经典的“水平垂直居中”有至少五种实现你如果只背了一种面试官换个条件说“这个元素高度不固定”你就废了。所以刷题时一定要逼自己多想一步这个答案的边界条件是什么换一个场景还成立吗这比多刷十道题都有效。第三个坑是忽略工程背景。前端题目从来不是孤立的知识点很多答案要结合“浏览器渲染机制”“HTTP协议”“构建工具”来答。比如问你“script标签为什么放在body底部”如果你只回答“防止阻塞渲染”这只是开始面试官追问“defer和async的区别”你还是要会说。所以刷题时不要见一个知识点就背一个要把相关的知识串成串形成体系。5.2 面试答题的实操技巧最后分享几个我在面试别人时特别看重的答题习惯。第一先给结论再展开。面试官一天面很多人你不先把“是什么”说清楚他很难有耐心听你讲“为什么”。比如问“什么是事件委托”你先说“利用事件冒泡让父元素统一处理子元素事件的机制”然后马上补一句“核心优势是减少内存占用和能处理动态节点”再展开代码和细节。这个结构比从背景讲到定义要好得多。第二主动暴露边界条件。答一道题时如果能主动说出“这个方案在多极端场景下会失效我会用另一个方案兜底”会让人觉得你真的有工程经验。比如答JSONP时补充一句“它只支持GET如果接口需要POST我更倾向用CORS”答flex布局时补一句“如果项目需要兼容IE10以下我会考虑其他方案”。这种补充不是炫技而是证明你做过真实项目。第三遇到不会的题目不要装懂。面试官基本都能看出来你在装。坦诚说“这个知识点我接触得少但根据已有知识我推断是……”然后说出思考路径反而能留下好印象。我前面说的那份老试卷里有些题确实已经过时了如果被问到你直接说“这个方案现在很少用了我了解的是新版做法的思路”这本身就是一种专业性。5.3 这套老题在2026年的应用场景关于这份2015年试卷我还有一个比较个人的判断它适合作为“前端入场基本功”的检验清单但不适合作为唯一备考材料。你可以花一周时间把卷子里涉及的知识点全部过一遍配合我前面说的现代变体练习然后就要把重心转向真实项目。真实项目里你能接触到权限控制、性能监控、埋点统计、异常上报、组件抽象、跨端适配这些才是笔试题目到工作能力之间的桥梁。如果你正在为2026年的前端岗位面试做准备我建议你以这份“老试卷”为骨架把每一类题目都扩展出现代版答案再用一两个完整的项目经验把它们串成一个有机整体。面试到最后你和面试官聊的都是项目里的真实决策——为什么选这个方案、遇到过什么坑、怎么排查的。这时候你就会发现十年前那份老试卷里的基础知识点全都变成了你讨论项目的底气和语言。这个思路在我带新人时很管用。我让他们先做一遍老试卷自查基础再带着项目中的真实问题来问我进步速度比单纯刷题快得多。你也不妨试试毕竟底子打好了前端的路才能走远。