前言大家好我是木斯佳。相信很多人都感受到了在AI浪潮的席卷之下前端领域的门槛在变高纯粹的“增删改查”岗位正在肉眼可见地减少。曾经热闹非凡的面经分享如今也沉寂了许多。但我们都知道市场的潮水退去留下的才是真正在踏实准备、努力沉淀的人。学习的需求从未消失只是变得更加务实和深入。这个专栏的初衷很简单拒绝过时的、流水线式的PDF引流贴专注于收集和整理当下最新、最真实的前端面试资料。我会在每一份面经和八股文的基础上尝试从面试官的角度去拆解问题背后的逻辑而不仅仅是提供一份静态的背诵答案。无论你是校招还是社招目标是中大厂还是新兴团队只要是真实发生、有价值的面试经历我都会在这个专栏里为你沉淀下来。温馨提示市面上的面经鱼龙混杂甄别真伪、把握时效是我们对抗内卷最有效的武器。面经原文内容面试公司百度面试时间近期用户上传于03-11面试岗位前端实习一面❓面试问题一工程化项目打包工具是什么区别Loader 的功能是什么二浏览器原理介绍浏览器的事件循环机制哪些是宏任务、哪些是微任务async/await 的原理是什么浏览器可以识别哪些文件老浏览器不支持新 API要怎么解决三JS原型链是什么原型链的终点是什么虚拟列表的实现原理是什么四其他有没有自己的服务器一般用来做什么、怎么操作本地网页其他网段设备无法访问服务器部署却可以访问原因是什么常用 Linux 命令吗列举几个五手撕用 React 实现一个列表数据渲染面试感想当时以为凉了没想到第二天约了二面感谢面试官手下留情。来源牛客网 今天的算法题刷了吗 百度前端实习一面·深度解析面试整体画像维度特征公司定位百度 - 搜索/AI巨头面试风格基础全面型难度评级⭐⭐⭐三星覆盖面广经典八股考察重心工程化、浏览器原理、JS核心、Linux基础、React实战木木有话说:这场面试对有实习经验的同学相对难度不大校招或者实习面我发现一些传统大厂问Linux常用命令还是比较多的有精力的同学可以针对性的补一下Linux常用命令像浏览器可以识别哪些文件、最近整理面经还是第一次有问这块的。大家可以去记住一个技巧就是通过MIME类型去判断这个题还是有点意思的逐题深度解析一、工程化问题项目打包工具是什么区别// 主流打包工具对比// 1. Webpack最成熟// 特点配置灵活、插件丰富、支持复杂场景// 优点生态完善、代码分割、热更新// 缺点配置复杂、构建慢// 2. Vite新一代// 特点基于ES Module开发时按需编译// 优点启动极快、热更新快、配置简单// 缺点生态相对较新// 3. Rollup库打包// 特点Tree Shaking优秀输出干净// 优点适合打包库、体积小// 缺点生态不如Webpack// 4. Parcel零配置// 特点开箱即用无需配置// 优点上手快、自动处理依赖// 缺点灵活性低// 选型建议// - 大型应用Webpack// - 新项目/Vue3Vite// - 组件库Rollup// - 快速原型Parcel问题Loader 的功能是什么// Loader的作用转换文件// Webpack只能理解JS和JSONLoader将其它文件转换为有效模块// 1. 常见Loader// 处理样式{test:/\.css$/,use:[style-loader,css-loader]}// 处理图片{test:/\.(png|jpg)$/,type:asset/resource}// 处理JS转译ES6{test:/\.js$/,exclude:/node_modules/,use:{loader:babel-loader,options:{presets:[babel/preset-env]}}}// 处理Vue单文件{test:/\.vue$/,loader:vue-loader}// 2. Loader特性// - 链式传递从右到左执行// - 可配置通过options传参// - 同步/异步// 3. 常用Loader总结// css-loader解析CSS中的import// style-loader将CSS注入DOM// sass-loader编译Sass/SCSS// babel-loaderJS转译// ts-loaderTypeScript编译// file-loader处理文件路径二、浏览器原理问题介绍浏览器的事件循环机制// 事件循环是浏览器处理JS异步的机制// 1. 执行流程console.log(1)// 同步setTimeout((){console.log(2)// 宏任务},0)Promise.resolve().then((){console.log(3)// 微任务})console.log(4)// 同步// 输出1,4,3,2// 2. 详细步骤// - 执行同步代码执行栈// - 遇到异步任务交给Web API// - 同步代码执行完执行栈清空// - 检查微任务队列执行所有微任务// - 从宏任务队列取一个任务执行// - 重复以上步骤问题哪些是宏任务、哪些是微任务// 宏任务MacroTask// - setTimeout// - setInterval// - setImmediate (Node)// - I/O操作// - UI渲染// - requestAnimationFrame// 微任务MicroTask// - Promise.then/catch/finally// - MutationObserver// - queueMicrotask// - process.nextTick (Node)// - async/awaitawait后面的代码// 优先级微任务 宏任务// 每次执行一个宏任务前都会先清空微任务队列问题async/await 的原理是什么// async/await 是Promise的语法糖// 原始PromisefunctionfetchData(){returnfetch(/api/data).then(resres.json()).then(dataconsole.log(data))}// 用async/await改写asyncfunctionfetchData(){constresawaitfetch(/api/data)constdataawaitres.json()console.log(data)}// 原理生成器 Promisefunction*fetchDataGenerator(){constresyieldfetch(/api/data)constdatayieldres.json()console.log(data)}// 自动执行器简化版functionasyncToGenerator(generatorFn){returnfunction(){constgengeneratorFn.apply(this,arguments)returnnewPromise((resolve,reject){functionstep(key,arg){try{const{value,done}gen[key](arg)if(done){resolve(value)}else{Promise.resolve(value).then(valstep(next,val),errstep(throw,err))}}catch(err){reject(err)}}step(next)})}}问题浏览器可以识别哪些文件// 1. HTML文件 (.html .htm)// 浏览器解析渲染页面// 2. CSS文件 (.css)// 控制页面样式// 3. JavaScript文件 (.js)// 执行脚本逻辑// 4. 图片文件// .jpg .png .gif .webp .svg等// 5. 字体文件// .woff .woff2 .ttf .eot// 6. 视频/音频// .mp4 .webm .mp3// 7. JSON文件 (.json)// 配置文件、API数据// 8. 文本文件 (.txt)// 直接显示文本内容// 9. XML文件 (.xml)// 数据交换格式// 10. PDF文件 (.pdf)// 需插件或内置PDF查看器// 识别机制通过MIME类型// Content-Type: text/html// Content-Type: application/javascript问题老浏览器不支持新 API要怎么解决// 1. Polyfill打补丁// 引入core-js自动polyfillimportcore-js/stable// 手动polyfillif(!window.Promise){window.Promisefunction(executor){// 实现Promise}}// 2. Babel转译// 将ES6代码转成ES5{test:/\.js$/,use:{loader:babel-loader,options:{presets:[[babel/preset-env,{targets: 0.25%, not dead}]]}}}// 3. 特性检测if(serviceWorkerinnavigator){// 支持Service Worker}else{// 使用降级方案}// 4. 引入CDN polyfillscript srchttps://polyfill.io/v3/polyfill.min.js/script// 5. 动态加载if(!window.IntersectionObserver){import(intersection-observer).then((){// 使用IntersectionObserver})}三、JS核心问题原型链是什么原型链的终点是什么// 1. 原型链概念// 每个对象都有__proto__属性指向构造函数的prototype// 访问属性时沿着__proto__向上查找functionPerson(name){this.namename}Person.prototype.sayfunction(){console.log(this.name)}constpnewPerson(Tom)// p.__proto__ → Person.prototype// Person.prototype.__proto__ → Object.prototype// Object.prototype.__proto__ → null终点// 2. 原型链终点// 所有对象的原型链最终都指向 Object.prototype// Object.prototype.__proto__ null// 3. 验证console.log(p.__proto__Person.prototype)// trueconsole.log(Person.prototype.__proto__Object.prototype)// trueconsole.log(Object.prototype.__proto__)// null// 4. 作用// - 实现继承// - 共享方法节省内存// 5. instanceof原理// 检查右边构造函数的prototype是否在左边的原型链上pinstanceofPerson// truepinstanceofObject// true问题虚拟列表的实现原理是什么// 虚拟列表只渲染可视区域内的元素滚动时动态替换// 1. 核心数据结构classVirtualList{constructor(container,items,itemHeight){this.containercontainerthis.itemsitemsthis.itemHeightitemHeight// 定高this.startIndex0this.endIndex0this.init()}init(){// 计算可见数量constvisibleCountMath.ceil(this.container.clientHeight/this.itemHeight)this.endIndexvisibleCountthis.render()this.bindEvents()}// 滚动处理onScroll(){constscrollTopthis.container.scrollTopthis.startIndexMath.floor(scrollTop/this.itemHeight)this.endIndexthis.startIndexMath.ceil(this.container.clientHeight/this.itemHeight)this.render()}// 渲染可见项render(){constfragmentdocument.createDocumentFragment()for(letithis.startIndex;ithis.endIndex;i){constitemthis.items[i]constdivdocument.createElement(div)div.style.heightthis.itemHeightpxdiv.textContentitem fragment.appendChild(div)}this.container.innerHTMLthis.container.appendChild(fragment)// 设置占位高度保持滚动条this.container.style.paddingTopthis.startIndex*this.itemHeightpxthis.container.style.paddingBottom(this.items.length-this.endIndex)*this.itemHeightpx}}// 2. React实现functionVirtualList({items,itemHeight,containerHeight}){const[scrollTop,setScrollTop]useState(0)conststartIndexMath.floor(scrollTop/itemHeight)constendIndexMath.min(Math.floor((scrollTopcontainerHeight)/itemHeight),items.length-1)constvisibleItemsitems.slice(startIndex,endIndex1)consttotalHeightitems.length*itemHeightconstoffsetYstartIndex*itemHeightreturn(div style{{height:containerHeight,overflow:auto}}onScroll{(e)setScrollTop(e.target.scrollTop)}div style{{height:totalHeight,position:relative}}div style{{transform:translateY(${offsetY}px)}}{visibleItems.map((item,index)(div key{startIndexindex}style{{height:itemHeight}}{item}/div))}/div/div/div)}四、其他Linux/网络问题有没有自己的服务器一般用来做什么、怎么操作# 常见用途# - 部署个人项目# - 学习Linux操作# - 搭建开发环境# - 文件存储/备份# 常用操作# 连接服务器sshuserip-address# 文件操作ls-la# 列出文件cd/var/www# 切换目录cpfile1 file2# 复制文件mvold new# 移动/重命名rm-rffolder# 删除文件夹# 权限管理chmod755file# 修改权限chownuser:groupfile# 修改所有者# 进程管理psaux# 查看进程kill-9pid# 强制结束进程# 系统监控top# 查看资源df-h# 磁盘空间free-m# 内存使用问题本地网页其他网段设备无法访问服务器部署却可以访问原因是什么# 1. 网络环境差异# - 本地局域网可能有防火墙/路由器限制# - 服务器公网IP防火墙开放了端口# 2. 可能原因# - 本地防火墙拦截sudoufw status# 查看防火墙sudoufw allow3000# 开放端口# - 路由器未配置端口转发# 需要在路由器设置外部端口 → 本地IP:端口# - 本地服务只监听localhost# 检查服务监听地址netstat-tlnp|grep3000# 如果显示 127.0.0.1:3000需改为 0.0.0.0:3000# - 网络隔离# 公司/学校网络可能有隔离策略# 3. 排查步骤# - ping测试网络连通性# - telnet测试端口是否开放# - 检查防火墙规则# - 查看服务监听地址问题常用 Linux 命令吗列举几个# 文件操作ls# 列出文件cd# 切换目录pwd# 当前路径cp# 复制mv# 移动rm# 删除mkdir# 创建文件夹touch# 创建文件cat# 查看文件内容less# 分页查看head/tail# 查看头尾# 权限管理chmod# 修改权限chown# 修改所有者# 进程管理ps# 查看进程kill# 结束进程top# 资源监控# 网络ping# 测试连通性curl# HTTP请求wget# 下载文件netstat# 网络状态ss# 网络统计# 压缩解压tar-czf# 打包压缩tar-xzf# 解压zip/unzip# zip操作# 搜索grep# 文本搜索find# 文件查找# 系统信息df# 磁盘空间free# 内存信息uname# 系统信息五、手撕React列表渲染问题用 React 实现一个列表数据渲染import React, { useState, useEffect } from react // 1. 基础列表渲染 function UserList() { const [users, setUsers] useState([]) const [loading, setLoading] useState(false) // 模拟获取数据 useEffect(() { fetchUsers() }, []) const fetchUsers async () { setLoading(true) try { // 模拟API请求 const response await new Promise(resolve { setTimeout(() { resolve([ { id: 1, name: 张三, age: 25 }, { id: 2, name: 李四, age: 30 }, { id: 3, name: 王五, age: 28 } ]) }, 1000) }) setUsers(response) } catch (error) { console.error(获取数据失败, error) } finally { setLoading(false) } } if (loading) return div加载中.../div return ( div classNameuser-list h2用户列表/h2 ul {users.map(user ( li key{user.id} {user.name} - {user.age}岁 /li ))} /ul /div ) } // 2. 带删除功能的列表 function TodoList() { const [todos, setTodos] useState([ { id: 1, text: 学习React, completed: false }, { id: 2, text: 复习面试题, completed: true }, { id: 3, text: 写项目, completed: false } ]) const toggleTodo (id) { setTodos(todos.map(todo todo.id id ? { ...todo, completed: !todo.completed } : todo )) } const deleteTodo (id) { setTodos(todos.filter(todo todo.id ! id)) } return ( div classNametodo-list h2待办事项/h2 ul {todos.map(todo ( li key{todo.id} style{{ textDecoration: todo.completed ? line-through : none }} input typecheckbox checked{todo.completed} onChange{() toggleTodo(todo.id)} / span{todo.text}/span button onClick{() deleteTodo(todo.id)}删除/button /li ))} /ul /div ) } // 3. 带分页的列表 function PaginatedList() { const [page, setPage] useState(1) const [items, setItems] useState([]) const pageSize 10 useEffect(() { fetchItems(page) }, [page]) const fetchItems async (page) { const res await fetch(/api/items?page${page}size${pageSize}) const data await res.json() setItems(data) } return ( div ul {items.map(item ( li key{item.id}{item.name}/li ))} /ul div classNamepagination button disabled{page 1} onClick{() setPage(p p - 1)} 上一页 /button span第 {page} 页/span button onClick{() setPage(p p 1)} 下一页 /button /div /div ) } // 4. 注意事项 // - 必须使用key且最好是唯一id // - 列表更新时key不变则复用key变则重新创建 // - 避免用index作为key会导致状态错乱知识点速查表知识点核心要点打包工具Webpack(成熟)、Vite(极快)、Rollup(库)Loader文件转换、链式执行、常用loader事件循环同步→微任务→宏任务宏/微任务宏(setTimeout)、微(Promise)async/awaitPromise语法糖、生成器自动执行浏览器文件HTML/CSS/JS/图片/字体等兼容方案polyfill、babel、特性检测原型链__proto__指向、终点Object.prototype虚拟列表只渲染可见区域、动态替换Linux命令文件操作、权限、进程、网络React列表key唯一、状态管理、分页 最后一句百度的这场实习面试覆盖了工程化、浏览器、JS、Linux、React全面考察了一个前端实习生的基础素养。有些问题没答好但依然过了说明基础扎实比完美更重要。能约二面就是对你潜力的认可。大家感兴趣也可以单独去了解MIME类型相关的知识今天我整理的时候也是去补习了一下。