做前端这些年被问得最多的一个问题大概就是“前端基础到底要学到什么程度才算合格”。尤其近几年前端面试题越来越卷八股文越背越长很多人以为基础就是背概念结果真上手一个项目连接口传参都理不清页面白屏也不知道从哪里查。其实所谓前端基础知识说穿了就是三件事页面怎么渲染数据怎么流动问题怎么排查。把这三件事搞明白了后面的框架、工程化、组件库都是锦上添花。这篇文章不会给你列一份“三天精通前端”的速成计划而是把我带新人、做面试官、写业务代码过程中沉淀下来的前端基础知识体系按实际开发会用到的顺序重新梳理一遍。适合刚入行的人、准备前端面试的人、以及想转岗做 web 前端开发的同学。如果你已经写了两年业务代码却总觉得基础不牢也可以按这个框架自查一遍。1. 前端基础要学什么一张知识地图先画清楚先别急着背面试题。很多人前端学得散就是因为脑子里没有一张完整的图。前端开发者每天面对的东西其实可以分成三条线UI 如何呈现、数据如何流转、运行环境如何工作。对应到具体知识点就是 HTML/CSS/JavaScript 三大件、浏览器与网络基础、以及前后端数据配合。1.1 HTML/CSS/JavaScript三大件各自管什么三大件是前端的地基但很多人对“地基”的理解过于停留在语法层面。我见过不少简历写着“熟悉 HTML/CSS/JS”实际却说不清楚块级元素和行内元素的区别也调不明白一个卡片垂直居中。HTML 负责语义与结构。抛开标签背诵你要真正理解的是语义化标签为什么重要、文档流是什么、块级元素和行内元素在布局上的行为差异。做项目时你会发现结构写得好不好直接影响后续 CSS 和 JS 的实现成本。比如一个按钮到底是button还是div在可访问性和事件处理上差别很大。CSS 的核心不是“写样式”而是理解布局模型。盒模型必须烂熟于心padding、border、margin 怎么叠加box-sizing 的两种取值在什么场景下用这些是绕不过去的。Flex 和 Grid 是现在布局的主力别再死记属性多摆几个实际场景动手排一下。还要理解选择器优先级不然以后改别人代码类名写了一堆却不生效你会疯掉。JavaScript 则是前端的灵魂。基础语法之外作用域、闭包、原型链、this 指向、事件循环、异步流程控制这六项是高频考点也是日常写代码的根本。很多新手问“为什么同样的代码别人写的能跑我写的就报错”大多都是这些概念出了问题。JS 不熟框架学起来就是空中楼阁。1.2 浏览器与网络排查前端问题的底牌前端不是只写代码还要面对浏览器和网络。很多基础不牢的人遇到问题只能瞎试根本原因就是对“页面从输入 URL 到显示出来”这个过程没有完整认知。这个过程大致是域名解析拿到 IP建立 TCP 连接发出 HTTP 请求服务器返回 HTML浏览器解析 HTML 生成 DOM 树解析 CSS 生成样式树合成渲染树再经过布局和绘制把像素画到屏幕上。任何一步出问题表现都不一样。DNS 解析失败是“找不到服务器”请求超时是“转圈转半天”渲染阻塞是“页面白了很久才出来”。网络基础里最少要掌握几件事HTTP 常见状态码的含义200、301、304、401、403、404、500GET 和 POST 的区别请求头与响应头里和缓存强相关的 Cache-Control、ETag、Last-Modified。缓存这块特别实用很多人说“我改了代码页面没变”八成是缓存没理解透。强缓存命中时浏览器根本不会发请求直接就用了本地副本这时候你改后端也好改前端也好都看不到变化。1.3 数据交互与接口传参前端和后端怎么配合现在的前端开发几乎都是前后端分离前端调后端接口拿数据渲染页面。所以“前端传参”不是某个框架里的概念而是日常最基础的动作。接口传参主要有三种形式GET 请求把参数拼在 URL 的 query 里适合查询类场景POST 请求把参数放在 body 里适合提交数据RESTful 风格下还会把参数放在路径里比如/user/123这种。你要知道不同后端框架对参数的解析方式有差异最常见的问题就是前端明明把数据放进去了后端却说没收到。原因多半是 Content-Type 没对上后端要application/json你却默认发了application/x-www-form-urlencoded两边就互相看不懂。还有一个绕不开的话题是跨域。浏览器出于安全策略会限制不同源之间的请求。生产环境靠后端在响应头里加 CORS 配置开发环境则通常用构建工具的 proxy 代理把/api开头的请求转发到真实后端地址既绕过跨域也避免在代码里写死服务器地址。这里顺便说一句总有人问“Python 能做前端网站吗”严格讲后端语言通过模板也能渲染出页面但真正的前端交互逻辑还是离不开三件套Django 或 Flask 的模板只是把你准备好的数据填进页面里仅此而已。2. 开发环境与工具链前端开发skills里的隐形门槛基础知识不只是语言本身。我面过一些候选人理论背得很溜一说到日常开发工具就露馅。前端发展到今天光靠一个记事本已经没法做工程化项目了开发环境这套东西必须熟练。2.1 编辑器、浏览器调试与效率习惯编辑器我建议用 VS Code倒不是因为它比别的强多少而是插件生态足够成熟团队协作时大家配置相近减少沟通成本。但别一上来就装一堆插件真正高频有用的就几个ESLint 管代码规范Prettier 管格式Vue 项目装 VolarReact 项目装 ES7 React snippets再加一个 Path Intellisense 就够日常使用了。插件装太多反而拖慢启动速度。比编辑器更重要的是调试能力。Chrome DevTools 是前端的基本盘至少要把四个面板用熟Elements 里查看和临时修改样式Console 里看报错和打印日志Network 里看请求状态和响应内容Sources 里打断点调试 JS。很多新人抱怨“代码报错看不懂”其实报错信息已经把文件和行号都指出来了点进去就能看到上下文只是没人告诉他们要养成了先看报错再动手的习惯。调试有个小技巧遇到样式问题先不要急着改代码在 Elements 面板里临时勾掉属性、改数值确认哪个属性是罪魁祸首再把结论反馈到源码里。遇到接口问题先在 Network 里看请求有没有发出去、响应是什么再决定是查前端还是找后端不要一上来就两个人互相甩锅。2.2 Git与团队协作不会版本控制等于没入门版本控制是团队开发的底线技能。说实话我不会招聘一个不会用 Git 的前端因为只要你进入团队每天的工作流就和 Git 绑在一起。基础命令其实很少git clone拉代码git status看状态git add暂存git commit -m提交git push推送git pull拉取更新git branch管理分支。再掌握一个git stash临时保存一个git log查看历史日常开发就够用了。真正复杂的是分支策略和冲突解决比如项目约定main分支永远可上线开发都在feature/*分支上做提测时合并到test。这套流程不需要背在项目里跟两周就熟了。冲突是每个新手都会怕的东西。其实冲突并不可怕它只是两个人都改了同一个文件的同一段内容Git 不知道怎么自动合并。处理冲突时仔细看 HEAD到之间是你当前的代码到之间是别人分支的代码手动确定保留哪边、删掉哪边然后重新 add 并 commit 即可。千万注意不要在冲突没解决的情况下强制提交。2.3 构建工具与脚手架Vite、Webpack到底在干嘛很多前端新手一开始接触的不是原生 HTML 文件而是npm create vitelatest创建出来的项目。打开看到一堆配置文件、node_modules、依赖包人直接就懵了。理解构建工具是前端基础升级为“工程化基础”的关键一步。先说 Node 和 npm/pnpm 的关系。Node 让 JavaScript 可以在浏览器之外运行npm/pnpm 则是包管理器负责下载和安装别人写好的依赖。安装依赖时你会发现 node_modules 特别大速度慢所以现在更推荐 pnpm它采用硬链接的方式共享文件安装速度和磁盘占用都友好很多。构建工具做的事通俗讲就是“翻译和打包”。把 Vue/React 组件里用的模板语法、JSX、ES6 新语法、SCSS 等翻译成浏览器能直接运行的东西然后把所有源码压缩合并成少量几个静态文件。开发阶段 Vite 不用打包直接启动一个开发服务器按需编译单个文件所以启动和热更新非常快生产构建时再用 Rollup 做最终打包。Webpack 则更老牌配置更灵活但心智负担更重现在新项目几乎都是 Vite 起步。开发代理的配置也应该掌握。在vite.config.ts里写一个server.proxy把/api转发到http://localhost:8080前端代码里就能直接请求/api/list不需要写完整域名改天后端换地址只改配置文件一处就行。这项配置看起来不起眼却是前后端联调的基础设施。3. 框架基础与组件化思维从静态页面到复杂应用写完静态页面、学会调接口之后就该进入框架了。现在国内前端最主流的方向还是 Vue 和 React 二选一但对于基础学习来说更重要的不是某个框架的语法而是框架背后的组件化思想。3.1 数据驱动与虚拟DOMVue/React的共同心智Vue 和 React 是两个不同的框架但核心心智模型极其相似数据驱动视图。传统 jQuery 时代你要手动操作 DOM比如点击按钮后$(#list).append(...)数据变了还要自己同步界面。而框架时代你只需要维护一份数据界面会根据数据自动变化。这个转变对新手来说是个坎因为很多人的思维还停留在“先有 DOM 再改 DOM”的模式。写 Vue 时你操作的是ref或reactive定义的响应式数据写 React 时你维护的是 state组件里的模板或 JSX 只是这些数据的“投影”。举个例子做一个列表筛选功能jQuery 思路是遍历 DOM 元素决定隐藏还是显示框架思路则是维护一份filteredList数组筛选条件变化时重新计算这个数组界面自己就跟着变了。框架还引入了一个重要概念虚拟 DOM。浏览器操作真实 DOM 很慢频繁改动会带来性能损耗。虚拟 DOM 相当于在 JS 层面维护一份轻量描述数据变化后框架先对比新旧虚拟 DOM 的差异再把这个差异批量更新到真实页面上。现在 Vue 和 React 都有更精细的编译优化但理解虚拟 DOM 能帮你解释为什么框架代码通常比手动操作 DOM 更高效、更不易出错。3.2 组件通信与传参的常见姿势组件化是框架的核心组织方式。页面被拆成一个个组件组件之间必然要传数据这就是前端传参的第二个场景接口传参是前端的后端打交道组件通信则是组件之间交换数据。最常见的是父组件给子组件传值通过 props。比如一个UserCard :useruserInfo /父组件把自己持有的 userInfo 对象传给子组件子组件内部用它渲染。子组件需要通知父组件时通过自定义事件上抛Vue 里是$emitReact 里是回调函数。这两个方向搞清楚60% 的通信场景就解决了。剩下的场景要按复杂度选方案。兄弟组件之间共享数据最简单的办法是把数据提升到公共父组件里通过 props 下发、事件上抛来流转。如果应用很大、数据要跨多个层级共享那就引入状态管理库Vue 生态是 PiniaReact 生态是 Redux、Zustand 或 MobX。还有一种直接用ref或命令式调用的方案适合子组件暴露方法给父组件调用的场景比如表单校验时父组件调用子组件的validate()方法。我的建议是能用 props 和事件解决的就别急着上状态管理库。状态管理是有成本的数据流越集中越好定位问题但全局 state 一旦放多了改得爽查 bug 就苦了。3.3 组件库选型Element Plus、Ant Design怎么选前端组件库是“基础之上的加速器”。实际开发里没人会从零手写所有下拉框、日期选择器、表格组件直接用一套成熟的组件库能省大量时间。但组件库也分场景。后台管理系统类项目Vue 技术栈几乎无脑选 Element PlusReact 技术栈选 Ant Design两者都是国内生态最成熟、文档最全、社区案例最多的选择。移动端 H5 项目常用 Vant跨端项目则用 Taro 的对应组件库。选组件库的标准我的经验是看三点一是项目技术栈是否匹配二是库是否还在持续维护、issue 响应是否及时三是团队里有多少人熟悉它。最后一个往往被忽略组件库再强团队不会用就是灾难。但我要强调组件库不能替代 CSS 基础。很多人用惯了组件库连一个简单的弹窗都写不出来这是很危险的。组件库只是帮你把常见封装好遇到定制化需求你还是得自己写样式、调整布局、钻到源码里改样式变量。基础和组件库的关系就像数学公式和计算器计算器能帮你算得快但公式的理解还是自己的。4. 前端面试基础题与八股拆解这些题为什么反复考前端面试题中基础部分翻来覆去就那么几块背答案的人不少理解的人却不多。我当面试官时通常会从某个知识点开始追问两三轮能答到第三轮的人基本就是真理解了。4.1 闭包、作用域与原型链JS进阶的必经之路闭包是前端面试八股里的钉子户因为它背后牵扯到作用域、变量生命周期和内存管理。通俗理解闭包就是“函数记住了自己定义时所处的作用域并且这个函数还能在外面被继续调用”。最典型的使用场景是写一个计数器函数让变量不会被外部直接修改只能通过内部函数改变。作用域牵扯到var、let、const的区别三者的差异不只是“能不能重新赋值”。var存在变量提升而且在函数作用域内不区分块级let和const是块级作用域且存在暂时性死区也就是声明之前访问会报错。这个细节在循环里尤其明显经典问题就是for循环里用var打印计数器出来全是最后一个值换成let就正常了。原型链则是 JS 面向对象设计的基石。每个对象都有一个隐藏的[[Prototype]]访问一个属性时如果对象自身没有就沿着原型链向上找。理解原型链之后你就明白为什么数组能调用map、filter为什么所有对象都能调用toString因为它们的方法都被挂在原型链上。原型链和 this 指向经常一起考区别在于 this 指向的是调用时的上下文箭头函数则没有自己的 this它会捕获定义时的 this这两套规则必须分清楚。4.2 事件循环与异步宏任务微任务怎么答JavaScript 是单线程语言但表达式“单线程”却容易误导人。不是说它一次只能做一件事而是没有多线程同时跑代码但它可以异步地调度任务。事件循环是这套调度机制的核心。调用栈执行当前同步代码遇到异步任务时浏览器 API 或者 Node 环境把回调放进任务队列等调用栈清空后再取出来执行。任务又分宏任务和微任务微任务优先级更高包括 Promise 的回调、queueMicrotask、MutationObserver宏任务包括setTimeout、setInterval、IO 操作等。每次事件循环会先清空微任务队列再取一个宏任务执行。经典面试题是问执行顺序console.log(1) setTimeout(() console.log(2), 0) Promise.resolve().then(() console.log(3)) console.log(4)结果永远是 1、4、3、2。同步代码先跑完微任务 Promise 先于宏任务 setTimeout。想清楚这个顺序你对事件循环的理解就及格了。再往深走async/await本质上也是基于 Promise 的语法糖await 之后的代码相当于微任务里的逻辑所以它能写出“看起来是同步”的异步代码。4.3 网络、缓存与性能优化面试里的送分题前端面试必有一个环节是考察综合知识常见题目就是“从输入 URL 到页面显示中间发生了什么”。这道题考的是你把前面所有知识串起来的能力DNS 解析、TCP 连接、HTTP 请求、服务器返回 HTML、浏览器解析构建 DOM 和 CSSOM、JS 解析执行、渲染合成。能把这串完整讲清楚的人基础一定不差。性能优化是另一个高频主题。我听过的回答大多是“图片懒加载、代码分割、上 CDN”不能说错但太笼统。真正的优化思路是先测量再优化用 Chrome DevTools 的 Performance 面板记录页面加载过程看哪个阶段耗时最多再对症下药。常见的优化手段包括静态资源用 CDN 加速图片压缩和懒加载JS/CSS 代码按路由分割开启 gzip 压缩合理设置 HTTP 缓存。有几项优化逻辑是相通的比如减少请求体积和数量本质都是缩短用户等待时间。4.4 安全基础XSS、CSRF与token管理安全知识是老生常谈却最容易被人忽略。前端安全里两个基础概念避不开XSS 和 CSRF。XSS 是攻击者把恶意脚本注入到页面里执行常见原因是你把用户输入直接当 HTML 插进了页面。Vue 和 React 默认做了转义规避了一部分风险但如果你用v-html或dangerouslySetInnerHTML手动插入富文本就得额外校验内容。CSRF 则是利用浏览器自动携带 Cookie 的特性诱导用户发起非预期请求现在主流解决方案是后端校验 token 或自定义请求头。说到 token就是另一个大话题了。前端鉴权流程一般是登录后拿到 token之后每次请求带上这个 token后端据此识别身份。token 通常存在两个地方localStorage 或内存中。存 localStorage 的优点是可以持久化刷新页面不丢缺点是如果页面被注入了恶意脚本token 会被直接读取。存内存往往指放在状态管理库或全局变量的对象里安全性更高但刷新页面就没了需要额外考虑刷新后恢复登录态的问题。两种方案的取舍我在后面实际案例部分再展开。5. 日常开发常见问题与排查技巧实录理论说再多不如几个真实问题有说服力。下面这些坑都是我或身边同事真真切切踩过的没有一样是面试题里背得到的但开发时几乎都会遇到。5.1 页面白屏/无显示先看控制台再看网络“页面白屏”是前端最常见的求助帖主题。每次看到没有上下文的提问我都想说排查思路是固化的先控制台再网络再路由再资源路径。第一步按 F12 打开 Console 看有没有报错。很多白屏就是代码里一个粗心的Cannot read properties of undefined具体到某一行定位改掉就行。第二步切到 Network 面板看接口和静态资源。接口如果大片 401、403通常是登录态失效如果接口返回 200 但页面是空的可能是数据处理逻辑不对拿到数组后取错字段。资源路径问题在部署后特别常见项目部署到子目录时忘了改base或publicPath所有 JS/CSS 全部 404自然白屏。还有一种现象容易被误解服务进程在跑端口也通了页面就是转圈没显示。比如在服务器上用 XShell 启动了一个前端开发服务器明明显示运行成功远程访问却无显示。这种问题多半在端口未开放、代理配置没生效、或者访问的地址不对这几个方向按顺序排查比反复重启服务有效得多。5.2 前端如何获取内存中的tokenlocalStorage与store“前端如何获取内存中的 token”经常被搜索这个问题本身就把很多人带偏了因为 token 未必存在内存里。如果你用的是 Vuex 或 Piniatoken 通常作为一个 state 存放在内存中获取方式就是通过 store 的 getter 或 state 属性。比如useUserStore().token拿到的就是当前内存里的 token。但有个坑内存是易失的页面一刷新store 重新初始化token 就没了。所以正经项目里的做法是双写第一次登录成功后把 token 同时写进 localStorage 和 store请求拦截器从 store 读因为内存读取快同时刷新时从 localStorage 恢复登录态。具体恢复逻辑在入口文件或 store 初始化时读一下 localStorage存在就 set 进 store。请求拦截器带 token 也是一个基础套路。用 axios 的话在request.interceptors里axios.interceptors.request.use(config { const token useUserStore().token || localStorage.getItem(token) if (token) { config.headers.Authorization Bearer ${token} } return config })这么做的好处是抽签式统一定义不用在每个接口都手动传 token。很多新手踩的坑是token 变量名前后端对不上或者存储 key 不一致导致明明登录了请求还是 401。排查这类问题直接看 Network 里请求头有没有带 Authorization一目了然。5.3 大文件上传与Web Worker基础之外的加分项大文件上传不是一个基础功能但它能检验你对前端异步和性能优化理解有多深。核心思路是分片把一个几百 MB 的大文件切成若干几 MB 的分片逐片上传最后后端再合并。这里牵扯到一个痛点计算文件指纹比如 MD5在大文件上很耗时如果放在主线程里算页面会卡死。解决办法是用 Web Worker 开一个后台线程专门做文件切片和指纹计算主线程只负责显示进度和发起上传请求。Web Worker 的基本用法是在主线程new Worker(file.js)通过postMessage和onmessage通信。后台线程里不能操作 DOM但它适合做 CPU 密集型的计算任务。真正做这个功能的时候你会发现难点不在 Worker 而在工程复杂性分片失败怎么重试、并发多少个分片合适、切片序号怎么传递、服务端怎么校验完整性。这些都需要设计协议。我的建议是如果项目里有这个需求找市面上成熟的方案作为参照直接写很容易漏掉边界情况。5.4 前端和UI的区别职级边界与全栈转型前端和 UI 的区别在日常协作里经常被人搞混。UI 设计师负责的是视觉呈现包括页面长什么样、间距配色是否舒适、切图标注前端工程师负责的是把这些静态设计稿变成能运行、能交互、能处理数据的真实页面。一个 UI 设计师可以不懂 JavaScript但前端不能只懂样式。这几年经常有人讨论“前端岗位是不是要消失了”尤其 AI 辅助编程工具出现后这种焦虑更明显。我的看法是会消失的是“只会照着设计稿切图”的低门槛岗位不会消失的是能理解业务、能排查线上问题、能把用户体验落到代码里的人。前端基础扎实的人恰恰是适应变化最快的人因为你懂底层原理无论是换框架还是让 AI 辅助写代码你都知道该让它生成什么、生成完之后怎么验证。至于前端转全栈这个路径是可行的而且现在门槛在降低。后端的基础无非是语言、数据库、接口设计、部署。前端已有的编程思维、HTTP 知识、数据交互经验都能迁移过去。我个人建议转全栈不要急着学一大堆框架先从 Node.js 搭一个简单的 RESTful 接口开始理解后端是怎么接收请求、读写数据库、返回 JSON 的再逐步扩展到鉴权、部署、性能优化。等你能独立把一个带登录、带数据库、带前端页面的应用跑通全流程全栈的基础就算立住了。最后说点实在的。我见过太多人学前端上来就刷面试题、背八股、追最新热词结果基础不牢越学越焦虑。如果让我给新人一条学习路线还是那句话先吃透 HTML/CSS/JavaScript 三大件理解浏览器和网络原理亲手写完两三个带接口的练手项目再进框架。框架一年一变基础十年不变。把前端基础知识当作一个需要长期更新的工具箱而不是考前突击的题库这条路才能走得稳、走得远。