秋招前端帆软二面面经

秋招前端帆软二面面经核心问题及解答如下：

一、前端学习与基础能力

如何学习前端需系统掌握HTML/CSS/JavaScript基础，结合官方文档（如MDN）和经典书籍（如《JavaScript高级程序设计》）夯实理论；通过实践项目（如个人博客、TodoList）提升编码能力；关注社区动态（如GitHub、Stack Overflow）学习前沿技术；参与开源项目或技术分享会拓展视野。
JS和CSS新特性
JS：ES6+的Promise、async/await解决异步回调问题；Proxy实现对象代理；Module模块化规范；BigInt支持大整数运算。
CSS：Flexbox/Grid布局简化页面结构；CSS Variables实现动态样式；transform/transition/animation增强交互效果；@media查询适配多端设备。

二、前端性能与底层原理

高精度定时器实现浏览器原生setTimeout/setInterval受事件循环机制影响，精度有限。可通过以下方式优化：
使用requestAnimationFrame实现动画高精度（与屏幕刷新率同步）；
结合performance.now()计算时间差，动态调整延迟；
避免定时器内执行耗时任务，防止阻塞后续调用。
Web Worker传递数据是否被主线程阻塞Web Worker通过postMessage与主线程通信，数据传递是异步且非阻塞的。即使主线程繁忙，消息也会先存入队列，待主线程空闲时处理。但若主线程长期阻塞（如死循环），可能导致消息处理延迟。
浏览器并发上限及突破方法
并发限制：浏览器对同一域名下的并发请求数有限制（如Chrome为6-8个），超出部分会排队等待。
突破方法：
域名分片：将资源部署到多个子域名下；
HTTP/2多路复用：通过单个连接并行传输多个资源；
Service Worker缓存：减少重复请求。

三、CSS布局与定位

absolute与fixed的定位基准
absolute：相对于最近的已定位祖先元素（非static）定位；若无，则相对于<html>。
fixed：相对于浏览器视口定位，滚动页面时位置不变。
z-index作用范围z-index仅在定位元素（position非static）中生效，其作用范围受堆叠上下文影响。父元素形成堆叠上下文时，子元素的z-index仅在该上下文内比较，不会与其他上下文冲突。

四、网络与安全

TCP与UDP区别及场景
TCP：面向连接、可靠传输（确认重传、排序）、流量控制；适用于文件传输（FTP）、网页浏览（HTTP）。
UDP：无连接、不可靠、高效；适用于实时应用（视频直播、DNS查询）。
同源策略、跨域与跨站
同源策略：限制协议、域名、端口相同的脚本访问彼此资源，防止XSS攻击。
跨域：突破同源限制的技术（如CORS、JSONP、反向代理）。
跨站：指不同域名间的交互（如CSRF攻击利用跨站请求伪造身份）。

五、框架原理与应用

React/Vue Hooks解决的问题
逻辑复用：替代高阶组件/Mixin，避免组件树复杂化；
状态管理：函数组件内使用状态（如useState）；
副作用隔离：通过useEffect分离数据获取、订阅等操作。
React新特性
Concurrent Mode：并发渲染提升性能；
Suspense：懒加载组件；
Hooks API：如useReducer、useContext优化状态逻辑。
React useCallback改代码useCallback用于缓存函数实例，避免子组件不必要的重渲染。示例：
// 优化前：每次渲染生成新函数const handleClick = () => { console.log('Click'); };// 优化后：依赖不变时返回缓存函数const handleClick = useCallback(() => { console.log('Click'); }, []);

六、算法与数据结构

数组第k大元素（一次遍历）使用快速选择算法（Quickselect），基于快速排序的分区思想：
随机选择基准值，将数组分为两部分；
若基准值位置为k-1，则返回该值；3 否则递归处理左/右子数组。平均时间复杂度为O(n)。
全国身高排序算法选择身高数据量大且范围有限，适合计数排序（非比较排序，时间复杂度O(n+k)，k为数值范围）或桶排序（按身高区间分桶后排序）。
手撕：判断平衡二叉树平衡二叉树需满足：任意节点左右子树高度差≤1。递归实现：
function isBalanced(root) { if (!root) return true; const leftHeight = getHeight(root.left); const rightHeight = getHeight(root.right); return Math.abs(leftHeight - rightHeight) <= 1 && isBalanced(root.left) && isBalanced(root.right);}function getHeight(node) { if (!node) return 0; return 1 + Math.max(getHeight(node.left), getHeight(node.right));}

七、项目经验

需结合个人项目，重点阐述：

热门标签