康贱猫腾讯PCG暑期前端一面，整体考察节奏比较紧凑，一面通常不会问特别深的产品业务逻辑，更多是围绕计算机基础、前端核心知识、项目经历和手写代码这几个方向来回试探。说实话，PCG的面经网上反馈两极分化，有人说简单到像走过场，有人却挂在一些很基础的问题上。我看了不少近期面经，结合自己带人和被面的经验，把这份面经里值得细抠的知识点全部拆开揉碎讲一遍，希望能帮你少走点弯路。
1. 面经拆解：这场面试到底在考什么
先别急着背题，搞清楚面试官的出题逻辑比什么都重要。腾讯PCG（平台与内容事业群）覆盖的业务线很多，从腾讯视频到腾讯新闻、QQ浏览器、应用宝，甚至部分游戏相关前端团队都在这个事业群下面。前端一面通常是技术面第一轮，面试官大概率是你入职后的直属leader或组内资深工程师，这一轮的核心目的不是考倒你，而是验证三件事：基础扎不扎实、能不能干活、沟通交流顺不顺畅。
从近期面经汇总来看，PCG一面最常出现的考点集中在以下几个方面：
JavaScript语言特性与手写代码
原型链、闭包、异步编程（Promise、async/await）、this指向、事件循环，这几个几乎场场必考。手写题一般是防抖节流、深拷贝、Promise.all、数组去重、发布订阅等，难度中等偏基础，考的是你有没有真正理解原理，而不是背了多少API。
浏览器与网络
从输入URL到页面展示的完整过程、HTTP缓存机制、HTTPS握手过程、浏览器渲染管线、常见的性能优化手段。这些问题看似通用，但面试官往往会追加一个"为什么"，比如"为什么要把script标签放在body底部""为什么强缓存和协商缓存要配合使用"，这时候光背结论就露馅了。
框架能力
PCG内部React和Vue都在用，不同团队技术栈不一样。一面通常不会问特别偏门的源码细节，但会考察你对框架核心机制的理解，比如虚拟DOM、diff算法、响应式原理、组件通信方式、hooks常见坑等。如果你的简历上写了React，那React相关的追问会比较多；如果写了Vue，那Vue的响应式原理基本跑不掉。
项目经历深挖
这一块最容易被忽视，但其实是最重要的环节。面试官会挑一个你简历上写的项目，从技术选型、整体架构、难点攻克、性能优化、团队协作、后续迭代等角度连环追问，目的就是确认这个项目真的是你做的，并且你有足够的思考深度。
计算机基础
包括网络协议（TCP/UDP、HTTP/1.1/2/3）、数据结构与算法（数组、链表、栈、队列、树、哈希表）、操作系统基础（进程线程、内存管理）等。前端岗位对算法要求不如后端和算法岗高，但基础的数据结构和常见算法题需要会写。
理解了考点分布后，接下来我逐个板块展开讲，把每类问题背后的原理和答题套路都说清楚。
需要模型API调用？ 免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. JavaScript核心考点：不能只背结论，要能讲出原理
2.1 原型与原型链：考的不是概念，是"查属性"的完整过程
面试官问"讲一下原型链"时，很多人的回答是"每个对象都有__proto__，每个函数都有prototype，对象通过__proto__串起来的链条就是原型链"，这种答案只能拿及格分。
真正好的回答应该分三步：
第一步讲清楚三个核心概念：构造函数（函数对象）有prototype属性，指向一个对象，这个对象就是该构造函数创建的实例的原型；每个实例对象有__proto__属性，同样指向构造函数的prototype；而prototype对象自身也有__proto__，指向上一级的原型。
第二步讲属性查找机制：当我们访问obj.attr时，JS引擎先看obj自身有没有这个属性；没有就沿着obj.__proto__向上找；找到就看这个原型的constructor是谁、原型的原型是谁；直到Object.prototype.proto，也就是null为止。如果整个链条上都没有，返回undefined。
第三步用代码示例说明：
javascript复制function Person(name) {
this.name = name;
}
Person.prototype.sayHello = function() {
console.log(`Hello, I'm ${this.name}`);
};
const p = new Person('Alice');
p.sayHello(); // 实例方法，沿原型链找到
console.log(p instanceof Person); // true
console.log(p instanceof Object); // true
面试官听到这里通常还会追加一个考察点："instanceof的原理是什么"。这里要注意，instanceof判断的是构造函数的prototype是否出现在对象的原型链上，而不是判断对象是否由该构造函数"直接创建"。在手写instanceof的时候要写出完整的原型链遍历过程。
2.2 this指向问题：四大规则加箭头函数例外
this指向是前端面试的经典送命题，也是挂人重灾区。关键在于理解this的绑定发生在函数调用时，而不是函数定义时。
四个绑定规则：
默认绑定：独立函数调用，非严格模式下this指向全局对象（浏览器是window，Node是global），严格模式下是undefined。
隐式绑定：函数作为对象的方法被调用时，this指向该对象。但要注意隐式绑定丢失的问题——把方法取出来单独调用时，this就变成了默认绑定。
显式绑定：通过call、apply、bind指定this指向。三者区别在于传参方式不同，bind会返回一个新函数而不会立即执行。
new绑定：使用new调用构造函数时，this指向新创建的对象，优先级最高。
从高到低是：new绑定 > 显式绑定 > 隐式绑定 > 默认绑定。
箭头函数是最大的例外，它不绑定this，而是继承外层作用域的this，并且不能用call/apply/bind改变。
面试官常问的一道题：
javascript复制var name = 'global';
const obj = {
name: 'obj',
getName: function() {
return function() {
return this.name;
};
}
};
console.log(obj.getName()()); // 输出什么？
答案是"global"（浏览器非严格模式下），因为返回的匿名函数是独立调用，不满足隐式绑定规则。
2.3 事件循环（Event Loop）：宏任务和微任务的执行顺序要能推导
事件循环这块，很多面经上只写了"先宏任务后微任务"，这其实不够准确。完整的执行流程是：
- 执行当前宏任务（第一次执行的是整段script代码）；
- 执行结束后，检查微任务队列，依次清空所有微任务；
- 微任务队列清空后，可能会触发页面渲染（如果有渲染需求）；
- 从宏任务队列中取出下一个宏任务执行；
- 重复以上步骤。
宏任务包括setTimeout、setInterval、I/O、UI渲染、事件回调等，微任务包括Promise的then/catch/finally、MutationObserver、queueMicrotask、async函数中await之后的代码（底层是Promise.then的语法糖）。
一道经典面试题：
javascript复制console.log('1');
setTimeout(() => console.log('2'), 0);
Promise.resolve().then(() => console.log('3'));
console.log('4');
输出顺序是1、4、3、2。关键点在于Promise的then是微任务，在console.log('4')执行完后立即执行，而setTimeout是宏任务，要等当前宏任务的微任务队列清空后才执行。
面经中经常出现更复杂的变体，比如嵌套Promise、async/await与Promise混用、setTimeout嵌套等。遇到这种题不要慌，画一张宏任务队列和微任务队列的图，按时间顺序一步步推就能得到正确答案。
2.4 闭包：不只是"函数套函数"，重点是应用场景和内存问题
闭包的定义是"函数与其词法作用域的组合"，简单说就是内部函数引用了外部函数的变量，并且在外部函数执行完后仍然可以访问这些变量。
面试官问闭包时，不要只回答定义，要主动说出三大应用场景：
数据私有化：通过闭包实现真正的私有变量，外部无法直接访问，只能通过暴露的方法操作。
javascript复制function createCounter() {
let count = 0;
return {
increment() { count++; return count; },
decrement() { count--; return count; },
getCount() { return count; }
};
}
回调函数与事件处理：在事件回调、定时器、异步操作中，闭包可以保留当前作用域的上下文。
函数式编程：函数柯里化、偏函数应用、防抖节流，都依赖闭包保留参数和状态。
但光讲应用还不够，面试官往往会追加"闭包有什么缺点"。标准答案是：闭包会阻止垃圾回收，因为外部函数执行完后，它的作用域对象仍然被内部函数引用着，无法被GC回收。如果不及时释放，会造成内存泄漏。解决方案是在不需要使用闭包时，手动把引用置为null，让垃圾回收器可以回收。
2.5 手写题：防抖节流、深拷贝、Promise.all这些必须写得出来
手写题是PCG一面必考环节，我根据面经统计，出现频率最高的几道题需要特别熟练。
防抖（Debounce）：触发事件后，等待N秒执行，如果N秒内再次触发，则重新计时。适用于搜索框输入、窗口resize等场景。
javascript复制function debounce(fn, delay = 500) {
let timer = null;
return function(...args) {
if (timer) clearTimeout(timer);
timer = setTimeout(() => {
fn.apply(this, args);
timer = null;
}, delay);
};
}
节流（Throttle）：规定时间内只执行一次。适用于滚动事件、鼠标移动等高频操作。
javascript复制function throttle(fn, interval = 500) {
let lastTime = 0;
return function(...args) {
const now = Date.now();
if (now - lastTime >= interval) {
lastTime = now;
fn.apply(this, args);
}
};
}
注意：这里用Date.now()间隔判断是"时间戳版"，第一次触发立即执行；用setTimeout控制的是"定时器版"，第一次触发延迟执行。面试官可能会问两种写法有什么区别，你要能说出来。
深拷贝：要处理循环引用、日期、正则、函数等特殊类型，还要考虑Symbol、Map、Set。
javascript复制function deepClone(obj, map = new WeakMap()) {
if (obj === null || typeof obj !== 'object') return obj;
if (obj instanceof Date) return new Date(obj);
if (obj instanceof RegExp) return new RegExp(obj);
if (map.has(obj)) return map.get(obj);
const result = Array.isArray(obj) ? [] : {};
map.set(obj, result);
for (const key of Object.keys(obj)) {
result[key] = deepClone(obj[key], map);
}
return result;
}
这里WeightMap的使用是关键，如果不处理循环引用，深拷贝一个自引用对象时会栈溢出。
Promise.all：接收一个Promise数组，全部成功返回结果数组，有一个失败则立即reject。
javascript复制function myPromiseAll(promises) {
return new Promise((resolve, reject) => {
const results = [];
let count = 0;
if (promises.length === 0) {
resolve(results);
return;
}
promises.forEach((promise, index) => {
Promise.resolve(promise).then(value => {
results[index] = value;
count++;
if (count === promises.length) resolve(results);
}).catch(reject);
});
});
}
手写题要注意代码风格清晰、变量命名规范、边界条件处理完整，哪怕有一两个小瑕疵，只要思路正确、能讲清楚每个关键点的原因，面试官一般都会给过。
3. 浏览器与网络：从输入URL到页面展示的完整链路
3.1 输入URL到页面展示：这个流程题要能讲出八个阶段
这道题几乎是前端面试的必考题，但很多人回答得过于简短，面试官很难判断你是真懂还是背的。
完整的回答框架包括八个阶段：
阶段一：URL解析。浏览器解析输入的URL，判断是合法的HTTP/HTTPS地址还是搜索关键字。如果是关键字，走搜索引擎搜索；如果是合法地址，解析出协议、域名、端口、路径、查询参数等。
阶段二：DNS解析。浏览器缓存、操作系统缓存、本地hosts文件、路由器缓存、本地DNS服务器、根域名服务器，逐级查询，把域名解析为IP地址。这里要提到DNS缓存，因为这是性能优化的一个重要方向。
阶段三：建立TCP连接。三次握手：客户端发送SYN，服务器回复SYN+ACK，客户端发送ACK。三次握手的目的是确认双方的收发能力都正常。
阶段四：发送HTTP请求。浏览器构建HTTP请求报文，包括请求行、请求头、请求体，然后发送到服务器。如果使用的是HTTPS，在TCP连接之后还要进行TLS/SSL握手，完成密钥协商和证书验证。
阶段五：服务器处理请求并返回响应。服务器根据请求路径处理业务逻辑，返回HTTP响应报文，包括状态码、响应头、响应体。状态码要熟悉：200成功、301永久重定向、302临时重定向、304协商缓存命中、400请求错误、401未认证、403禁止访问、404找不到资源、500服务器内部错误、502网关错误、503服务不可用、504网关超时。
阶段六：浏览器解析响应并渲染页面。先判断Content-Type是HTML还是其他类型，然后解析HTML生成DOM树、解析CSS生成CSSOM树、合成渲染树、计算布局（Layout）、绘制（Paint）、合成（Composite）。遇到script标签时，HTML解析会被阻塞，执行完脚本后再继续解析。
阶段七：断开TCP连接。四次挥手：客户端发送FIN，服务器发送ACK，服务器发送FIN，客户端发送ACK。这里可以顺带补充HTTP/1.1的Keep-Alive机制，多个请求可以复用同一个TCP连接。
阶段八：后续加载。页面加载过程中发现外部JS、CSS、图片等资源，并行发起请求加载。
这道题要充分展示知识面的广度，最好的回答方式是"浏览器解析HTML遇到CSS和JS时的处理机制"单独展开讲，包括CSS是否会阻塞DOM解析、JS是否会阻塞DOM解析、defer和async的区别等。
3.2 HTTP缓存机制：强缓存和协商缓存各自的适用场景
HTTP缓存是浏览器性能优化里最重要的一环，面试官问的频率极高。
强缓存：浏览器发起请求前，先检查本地缓存是否还在有效期内。如果有效，直接使用缓存，不发送请求。相关字段是Expires和Cache-Control。Expires是HTTP/1.0的字段，用绝对时间表示过期时间，存在客户端和服务器时间不同步的问题。Cache-Control是HTTP/1.1的字段，用相对时间表示，优先级更高。常用配置有max-age=3600（有效期3600秒）、no-cache（不使用强缓存，但可以协商缓存）、no-store（完全不缓存）、public/private（是否允许代理服务器缓存）。
协商缓存：强缓存失效后，浏览器带着缓存标识请求服务器，由服务器判断资源是否修改。相关字段是Last-Modified/If-Modified-Since和ETag/If-None-Match。前者用文件最后修改时间判断，存在精度问题和内容未变但时间变了的情况；后者用资源内容生成的唯一标识判断，更准确。服务器返回304 Not Modified时，浏览器使用本地缓存；返回200时，更新缓存并返回最新资源。
面经中常问"为什么需要两套缓存机制"，答案是：强缓存可以减少请求次数、降低服务器压力；但服务器更新频繁的动态资源不适合强缓存，需要协商缓存来保证每次都能拿到最新版本。实际项目中常见的策略是：HTML文件使用协商缓存或no-cache，JS/CSS/图片等静态资源使用强缓存加文件名hash。
3.3 HTTPS与Web安全：三次握手之后的事
面经里腾讯PCG对HTTPS的考察也比较多，核心是"HTTPS为什么安全"。回答要点是：
HTTPS = HTTP + TLS/SSL。TLS握手的主要流程是：客户端发送支持的加密协议版本和随机数；服务器回复证书和随机数；客户端验证证书合法性（CA签发、域名匹配、有效期、吊销状态）；客户端用证书中的公钥加密一个预主密钥（pre-master secret）发给服务器；双方用相同的算法和随机数生成会话密钥；之后使用对称加密通信。
这里注意"混合加密"的概念：非对称加密只在握手阶段使用，用于安全地传输对称加密的密钥；后续通信都用对称加密，因为对称加密性能更好。
Web安全方面，XSS（跨站脚本攻击）和CSRF（跨站请求伪造）是必问的。XSS的防御方式是输出转义、输入过滤、使用CSP（Content Security Policy），CSRF的防御方式是SameSite Cookie、CSRF Token、验证Referer。这部分要把攻击原理和防御手段对应起来讲，不要只背名词。
4. 框架能力：React/Vue的核心机制和常见坑点
4.1 React：虚拟DOM、diff算法、hooks三大核心
PCG不少团队用React技术栈，React相关问题在一面中占比不低。核心考点有三个。
虚拟DOM为什么快：这是一个非常容易被误解的点。很多人回答说"虚拟DOM比直接操作真实DOM快"，这是不准确的。虚拟DOM的优势不是"快"，而是"可控"：通过JS对象描述UI状态，在状态变化时先对比新旧虚拟DOM的差异（diff），再批量更新真实DOM，减少不必要的DOM操作。在复杂的UI更新场景下，虚拟DOM可以减少对真实DOM的直接操作频率，从而提升性能；但在非常简单的场景下，直接操作DOM反而更快。面试时回答到这个层面，面试官会对你刮目相看。
diff算法原理：React的diff算法有三个策略：tree层级只做同级比较；不同类型的元素直接重建；通过key属性识别列表项。回答时要强调key的重要性，key的变化会导致元素被重新创建而非复用，这也是开发中经常遇到的"用index当key导致列表状态混乱"问题的根源。
hooks常见问题：useState的异步更新和函数式更新、useEffect的依赖数组导致闭包陷阱、useCallback和useMemo的使用场景、自定义hooks的封装思想。面试官大概率会追问"如果useEffect的依赖数组是一个对象或函数，会有什么问题"，答案是每次渲染都会创建新的引用，导致effect频繁执行，解决办法是使用useMemo/useCallback稳定引用。
4.2 Vue：响应式原理是灵魂
如果简历上写的是Vue，那Vue的响应式原理是躲不开的话题。
Vue 2的响应式基于Object.defineProperty，遍历对象的所有属性，将每个属性转化为getter/setter，在getter中收集依赖（Dep），在setter中触发通知（Watcher）。Vue 3改为基于Proxy，可以拦截整个对象的读写操作，不需要遍历递归，性能更好，也支持新增属性和数组下标操作。
但要注意，Object.defineProperty和Proxy不只是性能差异，还有能力边界的问题。Object.defineProperty无法检测对象新增属性和数组索引变化，Vue 2只能通过Vue.set/this.$set补充处理；Proxy能拦截所有操作，包括属性删除、in操作符等。
一道高频面试题是"Vue 3为什么用Proxy替代defineProperty"。标准回答角度有三个：性能（不需要递归遍历，惰性代理）、能力（能拦截更多操作，包括新增删除属性）、语法（更符合语言规范，未来兼容性好）。
组件通信方式也要能说全：props/$emit、$parent/$children、provide/inject、ref/$refs、事件总线、Vuex/Pinia状态管理。面试官喜欢问"什么场景下用什么通信方式"，要有自己的判断标准。
4.3 组件设计：一面不会问太深，但要有自己的想法
PCG一面偶尔会问"如果让你设计一个Modal组件，你会怎么考虑"。这种开放性问题没有标准答案，关键是展示工程化思维。建议从六个维度展开：props设计（受控还是非受控）、插槽/children设计（如何支持自定义内容）、事件回调（onOpen/onClose/onConfirm）、样式隔离（CSS Module还是CSS-in-JS）、动画实现、可访问性（a11y）。重点是谈取舍，比如"我把footer设计成可传入props自定义的，因为不同业务的按钮文案和样式差异太大"。
5. 项目经历深挖：这是最容易被忽视的隐形大分题
面经里很多同学反馈，PCG一面的大段时间花在项目上。但很多人的项目回答是流水账，讲了一堆功能点，面试官听完根本找不到追问的抓手，也没有感受到技术深度。项目环节能不能拿高分，基本决定了这场面试的成败。
项目描述的STAR法则
不要只讲"我做了什么功能"，要用STAR法则组织回答：背景（Situation）——这个项目为什么存在；任务（Task）——我负责什么；行动（Action）——我具体怎么做的，用了什么技术方案，为什么选这个方案；结果（Result）——带来了什么效果，最好有可量化的数据。
比如："这个后台系统月活用户约2万（S），我负责前端整体架构升级（T），把原来的jQuery多页面迁移到Vue3 + TypeScript + Vite，封装了统一的请求层和组件库（A），首屏加载时间从4.2秒降到1.8秒，代码量减少了40%（R）。"
项目深挖的高频追问方向
面试官会顺着你的回答追问以下方向：
- "你这个请求层怎么设计的？token过期怎么处理？并发请求怎么合并？"
- "首屏优化具体做了哪些事？图片懒加载怎么实现的？路由懒加载的粒度怎么选择？"
- "这个组件库你封装了哪些组件？怎么保证样式不冲突？主题色怎么切换？"
- "遇到最难调的bug是什么？排查思路是什么？"
- "这个项目如果让你重做，你会改哪些设计？"
- "你和后端怎么定义接口规范？出现字段变更怎么处理？"
每一个追问都是在验证你是否真的做过、是否有思考深度。如果简历上写了用了Redis、用了消息队列、用了微服务这些"大词"，但一问细节就答不上来，反而会让面试官对你整体打折扣。项目的真实性和深度，比你堆了多少技术名词重要得多。
项目准备的三个技巧
第一，挑一个最能体现你深度思考的项目作为主线，不要试图在有限时间内把每个项目都讲一遍；第二，提前把项目里涉及的每个技术点准备好"为什么用这个方案"的说辞，主动讲出方案选择的比较和取舍；第三，针对自己项目里可能被挑刺的薄弱点，提前想好怎么应对，比如"这里确实用了比较重的方案，因为当时的场景是……，如果数据量更大我会考虑……"。
6. 手写题与算法题：别在简单题上翻车
PCG一面算法题通常不会太难，但手写题的覆盖范围比较广。从面经来看，除前面提到的防抖节流、深拷贝、Promise.all之外，还需要掌握以下常见题目：
数组去重：至少能写出Set、filter+indexOf、reduce+includes三种解法，并说明各自的适用场景和性能差异。
函数柯里化：把多参数函数转化为单参数函数链的写法。
javascript复制function curry(fn) {
return function curried(...args) {
if (args.length >= fn.length) {
return fn.apply(this, args);
}
return (...moreArgs) => curried.apply(this, args.concat(moreArgs));
};
}
发布订阅模式：手写一个简单的EventEmitter，包含on、off、emit、once四个方法。
实现new：考察new操作符的执行过程。
javascript复制function myNew(Constructor, ...args) {
const obj = Object.create(Constructor.prototype);
const result = Constructor.apply(obj, args);
return (result && typeof result === 'object') ? result : obj;
}
这里的返回值处理是核心：如果构造函数显式返回对象，则以该对象为准。
二叉树遍历：前序、中序、后序，递归和迭代两种写法都要会。迭代写法要用栈模拟，常见题目是"层序遍历"输出二维数组。
LRU缓存：面试频率非常高，用Map实现，get和put的时间复杂度为O(1)。
javascript复制class LRUCache {
constructor(capacity) {
this.capacity = capacity;
this.map = new Map();
}
get(key) {
if (!this.map.has(key)) return -1;
const value = this.map.get(key);
this.map.delete(key);
this.map.set(key, value);
return value;
}
put(key, value) {
if (this.map.has(key)) this.map.delete(key);
this.map.set(key, value);
if (this.map.size > this.capacity) {
this.map.delete(this.map.keys().next().value);
}
}
}
算法题的核心不是背代码，而是理解数据结构特性。Map天然有序的特性是LRU的基础，前端的Set、Map、队列、栈的基本用法和操作复杂度要非常熟悉。
面试时手写题有几点需要注意：先和面试官确认题意，尤其是输入输出的边界条件；写完主动测试用例，特别是空数组、重复元素、极端参数等；讲出时间复杂度和空间复杂度，以及能否继续优化。这些细节加起来比代码本身更能体现工程素养。
7. 常见问题与避坑经验：我从面经里总结的反面教材
看了一堆PCG前端一面的面经，有几个反复出现的"翻车现场"特别值得讲讲。
7.1 遇到不会的问题，千万别说"没学过"
很多人在被问到不会的问题时，习惯性回答"这个没学过""我们项目里用不到"。这是面试中的大忌。正确的做法是展示你"思考问题的方式"：先承认了解不够深入，然后基于已有知识做分析推导，最后提出假设和验证的思路。
比如被问到"Web Worker和主线程如何共享内存"，如果你完全不知道SharedArrayBuffer，可以这样回答："我了解Web Worker通过postMessage传递数据，这是基于消息机制的拷贝通信；如果要共享内存，应该有类似SharedArrayBuffer的机制，我理解它可以让多个线程读写同一块内存，但需要注意并发访问的同步问题。这块我了解不深，如果让我实现，我会先去查MDN文档确认API规范……"
面试官要的不是一个"标准答案"，而是"遇到未知问题时的应对方式"，这个能力在真实工作中比背了多少知识点更重要。
7.2 项目讲得太浅，被一句话问穿
另一个高频翻车点是项目准备不充分。比如有同学简历上写了"使用Redis做缓存"，面试官问"缓存穿透怎么解决"，答不上来；写了"用WebSocket实现实时聊天"，问"断线重连怎么处理"，支支吾吾。
这种问题的本质是：简历上写了超出自己能力的"包装词"。写简历的原则是"可以适度美化，但不能超出能力边界，尤其是被追问后要能自圆其说"。每个写在简历上的技术点，至少要做到"能讲出原理、能说出方案选择的原因、能指出方案的优缺点、能描述踩过的坑"。
7.3 全程被动答题，没有展示自己的思考
有相当一部分同学面试全程"问一句答一句"，面试官不问就不知道说什么。这种方式非常吃亏。
技巧是在回答中主动"埋钩子"。比如讲项目时主动说"这里我们最初用了A方案，但后来发现B问题，改成了B方案，原因是……"，面试官大概率会接着追问"B方案有什么局限"，这时候你就可以展开讲自己做过更深入的调研。这种主动引导话题的技巧，可以有效扩大自己的展示空间。
7.4 反问环节问了个寂寞
面试最后面试官通常会问"你有什么想问我的"，很多人直接说"没有了"。这是浪费了最后一个加分机会。比较好的反问方向是：关于团队技术栈和业务方向的问题（"咱们团队移动端用React Native还是Flutter？""这块业务未来的规划是什么？"）；关于个人成长的问题（"如果入职后前三个月最需要掌握的是什么？"）；关于团队协作的问题（"前端团队和设计、后端团队的协作流程是怎样的？"）。避免问薪资、加班、考核这些不适合一面问的话题。
8. 准备清单与复习策略：一周冲刺计划
最后给正在准备PCG一面的人一个实操性比较强的复习清单，按优先级排序：
最优先：JavaScript核心概念与手写代码
原型链、闭包、this、事件循环、Promise/Ajax相关、防抖节流、深拷贝、数组操作方法、手写Promise相关API。这一块占面试内容的30%以上，优先级最高，每天花2小时刷题和复盘。
第二优先：项目深度梳理
用STAR法则写清楚2-3个项目的完整背景和细节，整理出每个项目的技术架构图、核心难点、优化数据、可被追问的技术选型理由。这部分的准备质量，直接决定面试官对你的技术判断。
第三优先：浏览器与网络基础
输入URL到页面展示、HTTP缓存、HTTPS、Web性能优化、前端安全（XSS/CSRF）、浏览器渲染流程。这部分可以刷高频题，理解原理后用自己的话复述。
第四优先：框架能力
React/Vue二选一深入准备，核心是原理机制和使用中的常见坑。如果时间充足，再对比认识两个框架的异同，比如"React的虚拟DOM和Vue的响应式分别解决什么问题"。
第五优先：算法与数据结构
leetcode热题100里的简单到中等题过一遍，重点掌握数组、字符串、链表、树、哈希表、动态规划基础。前端岗位不需要刷到困难题，但简单题轻松秒杀、中等题能讲出思路是必要的。
第六优先：计算机基础
TCP三次握手四次挥手、HTTP各版本差异（1.0/1.1/2/3）、DNS解析过程、进程与线程。不算大头，但常被追加提问。
面试前的最后一天，把简历从头到尾再读一遍，确保简历上每一个技术名词都能展开讲三分钟。这一步我见过太多人吃亏——简历上写了"熟练使用Webpack"，结果面试官问"Webpack的构建流程是什么"就卡住了。
我个人带过不少应届生，也做过几次模拟面试官。如果要给一个贯穿始终的建议，那就是：面试本质是"在有限时间内展示真实的自己"，不要伪装成你没做过的事，也不要把面试想成审判。PCG一面考察的就是基本功和工作潜力，你准备得越扎实、态度越真诚，通过的概率就越高。祝你能拿到心仪的暑期offer，进去了还有很多好玩的项目等着你。