说实话在准备秋招的时候看到360的笔试通知心情还挺复杂的。一方面觉得这是个老牌互联网公司前端技术栈和业务场景都有积累笔试应该能筛掉不少“背题党”另一方面又在想这种大厂校招笔试尤其是客观题部分到底会考到什么深度。等我真正坐下来做完这套2019校招Web前端开发工程师的客观题最大的感受是它的题目并不过分偏门但特别考验基础功底的扎实程度和临场做题的细心程度。很多题看着眼熟真正选起来却容易踩坑。这篇内容我就结合自己刷题、复盘的过程把这套客观题涉及的考点、坑点、以及对应的知识点梳理一遍给正在准备前端校招、或者想系统巩固基础的朋友一份参考。1. 笔试整体结构与考察思路拆解1.1 考察范围与题型分布360这套前端客观题题型很典型就是单选加多选覆盖的核心科目却一点也不少。从我回忆和复盘的情况来看主要可以分成下面几个大块考察模块主要涉及考点大致占比HTML与CSS语义化标签、盒模型、选择器优先级、定位、flex/grid布局、BFC30%左右JavaScript核心原型链、作用域、闭包、this指向、事件循环、数据类型、ES6新特性35%左右网络与浏览器HTTP状态码、TCP连接、浏览器缓存、渲染机制、跨域15%左右前端安全与存储XSS、CSRF、同源策略、Cookie/localStorage/sessionStorage10%左右框架与工程化Vue/React生命周期、路由模式、webpack基础、git操作10%左右这个分布并不意外前端校招笔试的客观题本质上就是考察两件事第一你有没有建立起完整的知识体系第二你在“似乎会”和“真的会”之间到底差了多少。360的题在基础考点上抠得很细尤其喜欢在那些“好像是这样但又不完全是这样”的边界概念上做文章。1.2 360笔试的出题风格与筛选逻辑刷完这套题我明显感觉到出题人不是随便拿题库凑数的它的风格比较鲜明重原理轻API默写。它很少直接问你某个方法有几个参数而是给你一段代码让你判断输出结果或者变量值。这就在考你是不是真的理解运行机制。结合经典代码片段考察。比如事件循环的输出顺序、原型链上的属性查找、闭包中的变量共享这些都是前端面试里非常经典的场景搬到客观题里就成了“算结果”的题。不回避细节但也不钻牛角尖。像CSS选择器优先级、HTTP缓存字段这种“背了就会不背就懵”的知识点它是肯定会涉及的但不会考那些实际开发中根本用不到的冷门属性。所以我后来复盘时觉得这套题筛的不是“谁刷的题多”而是“谁的基础底子是真夯实的”。如果你平时写代码只停留在“能跑就行”的层面那遇到这种题确实会有些头疼但如果你系统梳理过前端知识体系你会发现它基本上都在大纲范围内。2. 高频考点精讲JavaScript核心难点2.1 原型链与作用域客观题的最爱JavaScript的原型链是校招笔试的常青树360的题也不例外。它通常会这样出定义了一个构造函数然后在原型上挂方法再new一个实例问你某个属性或者方法能不能访问到顺着原型链走一遍要几步。举一个接近原题的简化例子function Person(name) { this.name name; } Person.prototype.sayName function() { console.log(this.name); }; const p new Person(zhangsan); console.log(p.hasOwnProperty(name)); // true console.log(p.hasOwnProperty(sayName)); // false console.log(sayName in p); // true这道题其实就在考两个核心点hasOwnProperty只看实例自身属性in操作符会沿着原型链查找。很多人丢分是因为混淆了这两个判断方式。更深一层它还变相考了instanceof的机制——p instanceof Person实际上是在原型链上找Person.prototype。这个知识点背后的原理并不复杂。JavaScript的对象通过内部[[Prototype]]指针关联到另一个对象属性查找时会沿着这条链一路向上直到找到或者到达null。这也是为什么所有普通对象都能调用toString()、hasOwnProperty()这些方法因为它们最终在Object.prototype上。做这类题的实操建议是画图。别嫌麻烦把构造函数、原型对象、实例对象的关系画出来属性查找路径一目了然。我当时复习时把这条关系图画了不下十遍笔试时遇到原型链相关的题基本秒选。2.2 异步编程事件循环、Promise与setTimeout异步题是拉分项也是真正检验“有没有看过规范”的试金石。360这套题里差不多有一两道是让你写出setTimeout、Promise、async/await混合代码的输出顺序。这类题目的核心模型就是事件循环。看一个比较典型的例子console.log(script start); setTimeout(function() { console.log(timeout); }, 0); Promise.resolve() .then(function() { console.log(promise1); }) .then(function() { console.log(promise2); }); console.log(script end);输出顺序是script start→script end→promise1→promise2→timeout。理解这个顺序的关键在于区分宏任务macrotask和微任务microtask。setTimeout的回调属于宏任务Promise.then的回调属于微任务。在当前宏任务执行完后会先清空微任务队列然后再取下一个宏任务执行。所以哪怕setTimeout的延时是0它也得排在微任务后面。刷360这类笔试题时最好把下面两点固化成条件反射宏任务setTimeout、setInterval、setImmediate、I/O、UI渲染微任务Promise.then/catch/finally、MutationObserver、queueMicrotask另外遇到async/await时要记住await后面的代码相当于被放进了.then()里是微任务。不过这里有个容易错的地方如果await后面跟的是一个立即resolve的Promise实际调度顺序还得看Promise是否已经处于resolve状态。核心建议是笔试时不要凭感觉而是在脑海里或者草稿纸上严格模拟一遍入队出队的过程。2.3 this指向与闭包必考的送命题this指向的题基本每场前端笔试都有360也不例外。它一般用“对象方法调用”和“普通函数调用”来制造混淆。经典例子var name global; var obj { name: obj, getName: function() { return this.name; } }; var fn obj.getName; console.log(fn()); // 输出什么 console.log(obj.getName()); // 输出什么答案分别是global和obj。关键在于this是在函数调用时确定的而不是定义时。obj.getName()是作为obj的方法调用this指向obj把方法赋给fn后再以普通函数调用this就指向全局对象严格模式下是undefined。闭包的题目则喜欢结合var的函数作用域来出for (var i 0; i 5; i) { setTimeout(function() { console.log(i); }, 100); }输出是5个5。原因就是var声明的i是函数作用域循环结束后i已经变成5而每个setTimeout回调引用的都是同一个i。要输出0到4常见解法是let声明或立即执行函数传参。这类题虽然老套但每年都有一大批人载在上面因为它考的不只是闭包还有对作用域机制的理解。3. 高频考点精讲CSS与浏览器渲染3.1 CSS选择器优先级与盒模型CSS这块360的客观题特别喜欢考选择器优先级而且会出得很细。比如下面这种div classbox idcontainer stylecolor: red; p classtext文字颜色是什么/p /div#container p { color: blue; } .box .text { color: green; } p { color: black; }这里的p最终颜色是blue。计算一下优先级#container p是1个id加1个元素也就是 (1,0,1).box .text是两个class也就是 (0,2,0)。比较优先级时先比id个数1 0所以id选择器胜出。这个计算规则是校招高频考点我在复盘时总结了这套口诀内联样式最高级ID数量先对比再看类与属性最后元素伪类垫底。important 属于特殊情况笔试喜欢考但实际工作中一定要慎用。盒模型也是常客核心是考content-box和border-box的区别。当设置了width: 100px; padding: 20px; border: 5px;时content-box默认实际占位宽度是 100 202 52 150pxborder-box占位宽度就是100px内容区被压缩到 50px360的题一般会结合一个实际布局场景让你判断元素在页面上渲染出来的宽度是多少。这种题不难但计算时要细心尤其是box-sizing有没有重置题目中往往会埋这个坑。很多团队上线前会统一设置* { box-sizing: border-box; }但笔试默认往往不重置你要按初始值来算。3.2 BFC与常见布局方案BFC块级格式化上下文这种概念笔试里不会直接问“什么是BFC”而是给一段CSS让你判断是否会形成新的BFC或者问某个元素为什么能“包住”浮动子元素。360的题就有类似的一个父元素里有一个浮动子元素父元素高度塌陷了下面哪个方案能解决。常规答案有四个给父元素设置overflow: hidden;给父元素设置display: flow-root;给父元素也设置浮动使用伪元素清除浮动这背后就用到了BFC的特性BFC内部元素的布局不会影响外部且BFC会包含浮动元素。所以创建BFC后父元素的高度就能把浮动子元素包裹进去。顺便说一句flex和grid在360客观题里也会出现但一般不会考得太深更多是判断某个属性值是否合法比如justify-content能不能设置space-between或者flex: 1具体等于哪三个值的缩写。后者很容易考flex: 1实际上是flex: 1 1 0%而不是1 1 auto。这个细节写代码时可能无所谓但笔试就是考这种地方。3.3 浏览器渲染流程与重绘回流浏览器的渲染流程也是客观题一个重要来源。典型的问题包括CSS放在head中、JS放在body底部的原因是什么修改DOM的什么属性会导致重排reflow什么属性只会导致重绘repaint。我在复盘时把导致重排的常见操作整理成了一张速查表操作类型示例盒模型相关修改修改width/height、padding、border、margin定位相关修改修改top/left/position、display的值内容变化文本内容改变、图片尺寸变化浏览器窗口变化resize窗口、滚动页面读取某些属性offsetWidth、offsetHeight、getBoundingClientRect会强制同步布局这里经常设置一道“哪些操作会导致重排”的多选题。我的经验是只要听到了“尺寸变化”、“位置变化”、“显示隐藏”大概率就是重排“颜色、背景、阴影”这些一般只是重绘。不过也有例外所以最稳妥的办法还是理解原理重排是布局阶段重新计算几何信息重绘是绘制阶段重新画像素。360的题目里还喜欢考察DOMContentLoaded与load事件的触发时机。前者在HTML解析完成后触发不等待样式表、图片、子框架加载后者需要等所有资源都加载完毕。这跟“JS放底部”是一个逻辑链条理解了一个另一个自然就记住了。4. 网络、安全与浏览器原理4.1 HTTP协议与缓存机制前端虽然日常直接写业务代码但校招笔试一定会考网络基础因为这是衡量计算机基础是否扎实的重要标尺。360这套题里网络部分的考点主要集中在HTTP状态码和缓存机制上。状态码的考察比较常规2xx200 OK、204 No Content3xx301永久重定向、302临时重定向、304未修改命中协商缓存4xx400请求错误、401未认证、403禁止访问、404不存在5xx500服务器错误、502网关错误、503服务不可用、504网关超时笔试喜欢出“用户访问一个不存在的页面服务器返回哪个状态码”这种直观题通常选404但如果是后端没做路由兜底也有可能返回500或200这取决于服务端实现。所以做题时要注意题面给的限定条件不能凭感觉乱选。HTTP缓存这块360至少会考一道关于Cache-Control和Expires的题。这里有一个细节经常被忽略Cache-Control是HTTP/1.1标准Expires是HTTP/1.0标准两者同时存在时以Cache-Control为准。而协商缓存里的Last-Modified/If-Modified-Since和ETag/If-None-Match后者优先级更高因为ETag能更精确地判断资源是否变化。如果让你判断一个资源是命中强缓存还是协商缓存核心就是看请求有没有真正发到服务器强缓存不发请求协商缓存会发请求但服务器会返回304。这个逻辑在校招笔试里反复出现建议画一个“缓存判断流程图”记在脑子里。4.2 前端安全XSS、CSRF与同源策略安全类题目看起来偏但确实是前端笔试的保留项目。360作为安全起家的公司这类题出现概率不低。核心考点有三个XSS、CSRF、同源策略。XSS跨站脚本攻击的核心是“未经过滤的用户输入被当作代码执行”。笔试通常会给你一段代码问是否存在XSS漏洞或者用什么方法可以防御。常见的防御手段有对用户输入进行转义使用textContent而不是innerHTML设置CSP内容安全策略对Cookie设置HttpOnly后端的输出编码和过滤同样重要但前端笔试题一般关注前两条。CSRF跨站请求伪造考的是“如何防范”。核心是攻击者无法拿到用户的Cookie但可以诱导浏览器自动携带Cookie发出请求。防御思路校验Referer/Origin头使用CSRF Token并在服务端校验设置SameSite属性尤其是Lax或Strict关键操作使用POST而非GET并且附加自定义请求头同源策略的考察则集中在什么是“同源”。协议、域名、端口三者一致才算同源。跨域的解决方案JSONP、CORS、postMessage、代理转发也是多选题常客其中CORS的Access-Control-Allow-Origin是重点。4.3 浏览器存储方案对比浏览器存储的题目属于“送分型”但细节很多。360的题一般会给你一个应用场景让你选合适的存储方式。我在复盘时总结了这样一张表存储方式大小限制持久性是否发送到服务端Cookie约4KB可设置过期时间每次请求自动携带localStorage约5MB永久保存需手动清除不发送sessionStorage约5MB标签页关闭即清除不发送indexDB通常很大永久保存不发送容易丢分的地方有两个一是sessionStorage的作用范围是单个标签页而不是整个浏览器会话二是Cookie虽然能存但会随着HTTP请求头自动带上存储量太小且影响性能不适合存业务数据。这里还有一道特别容易错的题在同一个浏览器新开一个标签页时sessionStorage里的数据还能访问吗答案分情况如果是通过window.open或a target_blank打开的且源页面设置了relopener在某些浏览器中可以继承如果是手动新开标签页则访问不到。笔试如果没有特别说明默认是“不能共享”。5. 真题复现与解题思路串讲5.1 经典选择题组模拟下面这组题是我根据360笔试风格整理出的模拟题难度和考察方向都比较接近适合自测第1题单选var a []; a[0] 1; a[1] 2; a.length 0; console.log(a[0]);选项A. 1 B. 2 C. undefined D. 报错答案C。把length设为0会清空数组元素之后再访问a[0]就是undefined。这里考的是对数组的“稀疏”和length机制的理解。第2题单选.parent { font-size: 20px; } .child { font-size: 1.5em; }.child的实际字体大小是答案30px。em是相对父元素字体大小的但不一定总是相对直接父元素要看有没有其他中间层设置。如果多层嵌套em会层层累加这也是它容易出问题的原因。笔试里经常用这个点来考“什么是叠加计算”。第3题多选哪些方式可以发送跨域请求A. JSONPB. 设置CORS响应头的XMLHttpRequestC. WebSocketD. fetch请求到同源地址答案A、B、C。D是“同源”请求不是跨域。WebSocket本身不受同源策略限制也可以实现跨域通信但它不是传统HTTP请求可能有人漏选。第4题单选const obj { a: 1 }; Object.defineProperty(obj, b, { value: 2, enumerable: false }); for (const key in obj) { console.log(key); }输出结果是答案只有a。for...in只会遍历可枚举属性通过defineProperty定义且enumerable: false的属性不会出现在遍历中。这题还延伸考了Object.keys()和JSON.stringify()的区别它们都只能处理可枚举属性。第5题单选TCP建立连接需要进行几次握手答案3次。这是计算机网络的基础客观题偶尔会带上。原因很简单需要同时确认双方的收发能力都正常4次浪费2次不够。偶尔会有题延伸到“断开连接需要几次挥手”4次一并记住就好。5.2 多选题的排除技巧360客观题的多选部分我个人觉得比单选更考验水平因为它要你“明确知道哪个是错的”而不是“大概觉得哪个是对的”。在实际做题时我摸索出几个排除技巧排除绝对化表述。选项里出现“一定”“必须”“所有”“任何”这类绝对化词时通常都是错误的。比如“所有HTTPS请求都绝对安全”这种说法就算不是考试也值得打个问号。排除“跨层混用”的表述。比如把CSS的属性和JavaScript的API混在一起说或者把HTTP缓存和浏览器缓存的字段混为一谈这种选项往往是干扰项。出题人很喜欢在概念边界处设陷阱你一旦把两个相似概念粘在一起就容易中招。善用“小样例验证”。遇到不确定的代码选项自己模拟执行一遍。如果没法完全模拟就挑一个最简单的输入样例代入如果这个例子都不满足那大概率整个选项都是错的。多选题最重要的是“宁缺毋滥”。校招笔试的多选题很多是“少选不得分”或“漏选扣分”的规则如果题目里没写“少选得部分分”那就按最严格的方式处理不确定的坚决不选选自己有十足把握的。6. 考场实战与备考建议6.1 踩过的坑与实战经验我在复盘360这套笔试的时候发现丢分点其实集中在几个固定位置分享出来给大家提个醒时间分配不均。客观题量不小代码阅读题尤其耗时间。我那会儿策略是先做有把握的把不确定的题标出来等全部做完再集中思考。千万不要在一个this指向的代码题上死磕十分钟后面可能还有更简单的CSS题在等着你。忽略题目中的“坑词”。比如“下列哪些选项可能导致重绘但不会导致重排”“下列哪个不是HTTP缓存字段”这类题目里的否定词真的很重要。考试时我会把“不”“错误”“不是”这几个字圈出来防止自己下意识选成“正确的”。多选题犹豫不决。这是最容易丢分的地方。我的建议是第一遍凭直觉全选第二遍再逐个验证。因为第一遍的直觉往往来自平时的知识积累第二遍可能会被出题人的干扰项带偏。反复纠结时不妨回归基础知识从定义出发判断。对API细节不熟练。像Array.prototype.splice和slice的区别、debounce和throttle的异同、Object.assign是深拷贝还是浅拷贝浅拷贝这些都属于“知道就是送分不知道就是送命”的考点建议在笔试前集中过一遍。6.2 复习路径与资源推荐如果你正准备校招且时间比较紧张我建议按照下面的优先级来复习第一优先级必拿分HTML语义化、CSS选择器优先级、盒模型、浮动与定位、JavaScript事件循环、原型链、闭包、HTTP状态码、HTTP缓存。这些概念几乎逢考必有而且客观题能出的花样并不多花两三天系统梳理一遍性价比极高。第二优先级多拿分ES6新特性let/const、箭头函数、解构赋值、模块化、Promise、async/await、浏览器渲染原理、跨域方案、存储方案、常见安全问题。这部分建议结合项目实际场景来理解不要死记硬背。第三优先级冲刺分Vue或React的生命周期、路由模式、双向绑定原理、webpack基础配置。这部分在不同公司笔试题中占比差异较大360这类大厂会考一些框架题但通常不会很难把常用概念理清楚即可。资源方面我比较推荐的是MDN查概念和API细节永远首选但笔试前临时翻效率低适合平时积累、JavaScript高级程序设计红宝书基础章节建议精读、CSS权威指南选择器、盒模型、布局这几章讲得极清楚。另外各类前端面试题的GitHub仓库也可以作为刷题素材但建议以理解为主别纯粹背题目。最后再分享一个小技巧笔试前找一套往年题目严格按考试时间模拟一遍然后拿着错题去翻对应的知识点。这个过程的查漏补缺效果远比你从头到尾看一遍教程要高效得多。如果复习时间只有两周请把70%的时间花在基础核心考点上剩下30%再去拓展边缘知识这是我自己走了很多弯路后总结出来的经验。
