前端这行，同样是写代码，为什么有人拿30K，有人拿8K？同样是做项目，为什么有人能搞定复杂业务，有人只会写页面？今天咱们不聊虚的，直接说点实在的。
说实话，写这篇文章的时候我也在反思，自己到底是哪个段位的？算了，不想了，越想越扎心，曹丹的很。但至少咱能总结总结，看看那些牛逼的前端到底牛逼在哪，咱这些菜鸟到底差在哪。
1. 解决问题的能力，不是解决问题的能力
这话听着有点绕，但意思很明白。
初级前端：遇到问题，先百度，再问人，最后可能还是不知道咋回事。bug调了3天，最后发现是少了个分号，然后还没皮脸的发个朋友圈说前端难学。我擦。。。
中级前端：能看懂报错信息，知道去哪查文档，会用调试工具。大部分问题能自己解决，但遇到复杂问题还是会卡住，还死磕找bug。有时候一个问题卡一下午，最后发现是某个依赖版本不对，气得想砸键盘，一想自己还是舔狗得给某人买包包。。但还得继续干。
高级前端：看到bug，脑子里先有个大概方向。知道是浏览器兼容问题还是框架问题，还是自己代码逻辑问题。能快速定位，甚至能预测可能出现的问题。看到报错信息，基本能猜到是哪个傻逼（可能是自己）写的代码出问题了。
资深前端：问题还没出现，预防措施已经做好了。能设计出不容易出问题的架构，能写出别人不容易写错的代码。甚至能预判那些菜鸟会怎么写错，提前把坑填好。这种人，就是那种你写了bug，他看了一眼说"我就知道你会这么写"的人，太他妈气人了。
说白了，初中级是解决问题，高级是避免问题。
2. 代码不只是能跑就行
初级：功能实现了，能跑，完事。变量名随便起，a、b、c，过两个月自己都看不懂。也别说啥我要让别人看不懂才能保住饭碗，擦，除非你让AI看不懂...最搞笑的是，有时候自己写的代码，过了一周再看，完全不知道这坨东西是干啥的，然后还得重新理解一遍。这种时候真想抽自己一巴掌。
中级：开始注意代码规范，知道要用const、let，知道要写注释，但有时候还是写成一坨shi。代码review的时候，看着自己写的那些函数，明明知道可以优化，但就是懒得改。想着"能跑就行，下次再优化"，然后就没有下次了。
高级：代码结构清晰，函数职责单一，命名有意义。别人接手你的代码，能快速理解你在干什么。知道什么时候该抽象，什么时候该复用。
资深：代码本身就是文档。看你的代码，能看出业务逻辑，能看出设计思路。甚至能看出你考虑过哪些边界情况。能设计出可复用的组件和工具函数，能抽象出通用的解决方案。
一个项目，如果半年后回来看，还能快速理解，说明写代码的人有水平。
3. 不只是写页面，是解决业务问题
初级：产品说要个按钮，我就加个按钮。要个列表，我就做个列表。做完就走，不管后面的事。产品说"这个按钮能不能换个颜色？"我说"好"。产品说"这个列表能不能加个排序？"我说"好"。产品说"这个按钮能不能再换个颜色？"我说"好...你妈的"。最烦这种改来改去的，但没办法，谁让咱是干活的。
中级：开始理解业务，知道这个功能是干什么用的。但有时候还是按设计稿来，不会主动思考。设计稿说这样，我就这样做，设计稿说那样，我就那样做。反正设计稿错了也不是我的锅，是设计师的锅。但有时候设计师的设计稿确实有问题，比如按钮颜色和背景色一样，用户根本看不见，这时候就有点尴尬了。
高级：能理解业务逻辑，知道这个功能为什么需要，会给产品建议。能考虑到各种边界情况，比如数据为空怎么显示，加载失败怎么处理。
资深：能从业务角度思考技术方案。这个功能未来可能怎么扩展，现在怎么设计才能减少后面的改动。能和技术栈、性能、维护成本做权衡。
说白了，高级前端不只是写代码的工具，而是能参与业务决策的技术人。
4. 性能不是玄学，是基本功
初级：页面能打开就行，卡不卡无所谓。图片随便传，10MB的图片直接放上去，用户体验不管，他们问咋回事就说网不好换网。。。！！！最扯淡的是，有时候产品用4G网打开页面，卡得要死，然后跑来问你"为什么这么卡？"你只能说"可能是网速问题"，然后心里想"废话，10MB的图片能不卡吗？"。但你又不敢说是因为自己没优化，怕被打。
中级：知道要用图片压缩，知道要懒加载，但有时候还是做不好，很多不是压缩过度虚的一批就是加载时机不对。有时候压缩完图片，设计师看了说"这图片怎么这么糊？"然后你只能把压缩率调低，结果文件又大了。有时候懒加载配置不对，用户往下滑的时候，图片还没加载出来，然后用户就跑了。这种时候，真的想找个地缝钻进去。
高级：知道什么时候该优化，什么时候不需要。知道优化哪些地方效果最明显。能分析性能瓶颈，知道是JS执行慢，还是网络慢，还是渲染慢。会用性能分析工具，知道怎么优化关键渲染路径。
资深：能从架构层面考虑性能。组件怎么设计，数据怎么组织，打包怎么优化，都能影响性能。能平衡性能和可维护性。能设计出高性能的组件架构，比如虚拟滚动、代码分割、预加载策略。
同样的功能，高级前端做出来，页面加载快，交互流畅，不卡顿。初级前端做出来，可能功能一样，但体验差很多。
5. 工程化不是装逼，是效率
初级：手动打包，手动部署，手动测试。每个项目都要重复这些步骤，至于怎么配置工程化的，网上一顿复制过来，其实很多配置自己毛都看不明白，管他的，能跑就行。最搞笑的是，有时候网上复制过来的配置，根本不知道每个配置项是干啥的，但就是能跑。然后有一天，项目突然报错了，你看着那一堆配置，完全不知道是哪个出了问题，只能一个个试，试到怀疑人生。
中级：会用一些工具，知道要配置webpack/vite，知道要写npm脚本，但有时候还是手动操作，也别说怎么优化打包了。我草！什么！打包时间5分钟？正常。打包出来的文件10MB？正常。反正用户又看不到，管他呢。有时候打包报错，看着那一堆错误信息，完全不知道是啥意思，只能把错误信息复制到百度，然后一个个试解决方案。
高级：能搭建完整的开发流程。从代码规范检查，到自动化测试，到CI/CD，都有。能写脚手架，能写工具脚本，能解决团队效率问题。
资深：能设计整个前端工程化体系。不光是技术，还要考虑团队协作，考虑未来扩展。能平衡复杂度和收益，懂得各项均衡配置，最起码是有个兜底配置和性能监控。
好的工程化，能让团队效率提升好几倍。差的工程化，或者没有工程化，团队天天在做重复劳动。
6. 技术选型不是追新，是权衡
初级：听说Vue3很新，就全用Vue3。react19牛逼就用他。听说某个库很火，就引入。不管合不合适。从不考虑代码结构和耦合度。为了用某个新库，把整个项目都重构了，结果发现这个库根本不适合这个项目，然后还得改回去。这时候只想说一句"我操，早知道不换了"。
中级：开始考虑技术选型，但主要还是看流行度，看文档是否齐全。GitHub上star多就用，文档写得详细就用，社区活跃就用。但有时候，选了一个流行的技术，结果发现它和你现在的技术栈完全不兼容，或者有各种坑，这时候就有点后悔了。但已经选了，只能硬着头皮用下去。甚至一个项目出现react和vue，，，，
高级：能根据项目需求选择合适的技术。考虑团队熟悉度，考虑项目规模，考虑维护成本。知道什么时候该用框架，什么时候该用原生。
资深：能从业务和技术两个维度做权衡。不光考虑现在，还考虑未来。能预测技术选型带来的影响，能给出多套方案对比。
选对技术，项目顺利。选错技术，后面全是坑。
7. 学习能力决定上限
初级：跟着教程学，教程写什么就学什么。不会主动思考为什么。教程说"这里要这样写"，我就这样写，从来不想为什么。结果换了个场景，就不会了。然后继续找教程，继续照着写。最搞笑的是，有时候教程写错了，我也跟着写错了，然后还以为是自己的问题，调了半天bug。
中级：能主动学习新技术，但有时候学得不够深入，停留在会用就行。知道这个API怎么用，但不知道它为什么这样设计。知道这个框架怎么用，但不知道它的底层原理。面试的时候，被问到原理，就懵逼了。然后回来赶紧查资料，恶补一下，但补完又忘了，下次面试还是懵逼。
高级：能快速学习新技术，能理解原理，能举一反三。学一个框架，能理解它的设计思想，能应用到其他场景。
资深：能判断哪些技术值得学，哪些是噱头。能学习底层原理，能理解技术发展趋势。甚至能参与技术社区，贡献代码。
前端技术更新快，学习能力差的人，很快就跟不上。
8. 沟通能力不是软技能，是硬实力！！！！
初级：只和代码打交道，不怎么和产品、设计、后端沟通。有问题就自己憋着，让AI替自己写了也白瞎，完全看不懂。产品说"这个功能能不能这样改？"我说"不行，技术实现不了"，其实是我不会实现，但我不敢说。或者有时候后端说"这个接口改不了"，我就信了，然后前端各种hack，最后代码写得乱七八糟。现在想起来，真想抽自己。
中级：能沟通，但有时候表达不清楚，或者理解有偏差。产品说"这个功能要这样"，我理解成了那样，然后做出来，产品说"不对，我要的是这样"。然后我就改，改完了，产品又说"还是不对"。来回几次，产品生气了，我也生气了，但还得继续改。这种时候，真的想骑在产品头上说驾！驾！
高级：能和技术、非技术人员有效沟通。能听懂产品需求，能和技术方案对齐，能推动项目进度。
资深：能影响技术决策，能说服团队采用某个方案。能跨部门协作，能解决技术难题。
很多项目出问题，不是技术问题，是沟通问题。代码写得好，但沟通不行，也成不了事。
9. 责任心不是加班，是交付质量
初级：需求做完了，测试一下，能跑就行。随便点点主干能通。有bug再说。如果遇到个二货后端那就前端直接背锅。后端接口有问题，返回的数据格式不对，我在前端各种try-catch，各种容错处理，最后代码写得跟屎一样。然后后端改好了，我的代码还得改回去。这时候真的想骂人，但骂了也没用，还是得干活。
中级：会多测试几遍，会检查常见问题，但有时候还是会漏。测试的时候，这个功能正常，那个功能正常，感觉没问题了。结果一上线，用户反馈说"这个功能有问题"。然后你赶紧去查，发现是某个边界情况没考虑到。这时候，产品、项目经理都在问你"为什么测试的时候没发现？"你只能尴尬地笑笑，说"下次注意"。但下次还是会有问题。
高级：会考虑各种场景，会主动测试边界情况。交付前会自己和后端及产品/设计过一遍，确保质量。
资深：不只是自己的代码，还会关注整个项目的质量。会review别人代码，会提出改进建议，会推动团队质量提升。
责任心强的人，交付的代码质量高，bug少，后续维护成本低。
10. 思维方式：从执行到思考
这是最重要的一点。
初级：别人说什么就做什么，很少思考为什么。产品说把这个弹框给我做了，我说好。你做了后产品又说给我改下这个弹窗里select交互，我说好，产品又说给我改下按钮样式，我说好，最后我说去泥马的....sb产品
中级：开始思考，但主要还是执行。最起码能反驳为啥这么做，开始考虑可行性和用户体验。产品说"这个功能要这样"，我会说"这样可能不太好，因为xxx"，然后产品说"那你说怎么办？"我说"我觉得可以这样"，然后产品说"好，就按你说的做"。这时候，感觉自己的建议被采纳了，还挺有成就感的。但有时候，产品说"不行，就要这样"，然后我只能憋着，继续做。
高级：能主动思考，结合产品需求，能提出方案，能解决复杂问题，避免反复改。
资深：能从战略层面思考，能设计技术方案，能影响业务决策，高效推动产品功能落地。
思维方式决定段位。只会执行的人，永远在底层。会思考的人，才能往上走。
11. 最好懂点后端技术
很多人觉得前端就管前端，后端就管后端，各管各的。但现实是，不懂后端的前端，经常被坑(傻白甜)，也经常坑别人（炸男）。
初级：接口调不通，第一反应就是后端有问题。接口返回的数据格式不对，直接找后端改。从来不看看是不是自己请求参数传错了，或者数据解析有问题。有时候后端给你个接口，你连怎么调用都不知道，问后端："这个接口怎么用？"后端说："看文档。"你一看文档，更懵了。文档写得跟天书一样，各种参数说明不清楚，各种示例代码都是错的。然后你只能去问后端，后端说"你仔细看文档"，你心里想"我看了，但看不懂啊"。这种时候，真的想哭，然后给后端买个奶茶让说明白，造孽啊！。
中级：能看懂接口文档，知道怎么传参，知道怎么解析返回数据。但有时候还是理解不了后端为啥这么设计接口。比如后端返回一个列表，你明明只需要显示前10条，但后端把整个列表都给你了，你也不知道怎么优化，也不知道怎么跟后端说需要分页，只能全部渲染，最后页面卡死背锅。用户说"这个页面怎么这么卡？"你只能说"可能是数据量太大了"，然后用户说"那能不能优化一下？"你说"好，我试试"，然后回来继续渲染全部数据，只是加了点loading，让用户感觉没那么卡。其实还是卡，但用户感觉好点了。这种自欺欺人的做法，想想也挺搞笑的。
高级：能理解后端的设计思路。知道为什么接口要这样设计，知道什么时候该让后端优化，什么时候前端自己处理就行。能看懂后端的代码逻辑，至少能看懂接口是怎么实现的。能提出合理的接口设计建议，比如"这个接口能不能加个分页？"或者"这个数据能不能拆成两个接口？"能自己写简单的后端接口，至少Node.js能写个简单的API。
资深：能参与接口设计，能和后端讨论技术方案。能独立处理前后端联调问题，知道是前端问题还是后端问题。能写全栈，至少能独立完成一个简单的全栈项目。能站在整体架构的角度思考问题，知道前后端怎么配合效率最高。
懂后端的前端，和后端对接时不会出低级错误，能快速定位问题，能提出建设性意见。不懂后端的前端，天天和后端扯皮，效率低，还容易背锅。最搞笑的是，有时候前后端一起开会，讨论技术方案，不懂后端的前端只能在那里点头，说"好，好，好"，然后回来发现自己根本实现不了，或者实现得很费劲。这时候，真的想找个地缝钻进去。
不是说前端一定要去写后端，但至少要知道后端是怎么工作的，知道接口是怎么设计的，知道数据是怎么流转的。这样你才能写出更好的前端代码，才能和后端配合得更好。不然，你就只能当个"接口调用工具人"，永远无法提升段位。
总结
拉开前端人段位界限的，不是会多少框架，不是写过多少代码，而是：
- 解决问题的能力：能快速定位问题，能预防问题
- 代码质量：代码清晰、可维护、有设计
- 业务理解：不只是写页面，是解决业务问题
- 性能意识：知道什么时候该优化，怎么优化
- 工程化能力：能提升团队效率
- 技术选型能力：能做出合适的选择
- 学习能力：能快速学习，能深入理解
- 沟通能力：能有效协作
- 责任心：交付高质量代码
- 思维方式：从执行到思考
- 后端技术理解：懂后端，能更好地配合，能独立解决问题
如果在这些方面都做得不错，段位自然就上去了。技术会过时，但解决问题的能力、思维方式、代码质量，这些永远不会过时。
最后说一句，不要指望一下子全部做到，这些都需要时间积累。但如果你现在就开始有意识地在这些方面提升，而不是只会写页面、调接口，那你的段位迟早会上去。记住，前端不只是前端，而是一个能解决问题的技术人。
当然，说了这么多，你可能还是不知道具体该怎么做。没关系，先从最简单的开始：写代码的时候，多想想为什么这样写；遇到问题的时候，多想想怎么避免；和产品沟通的时候，多想想怎么更好地配合。慢慢来，不要急，反正这个行业，急也没用，该学的还得学，该踩的坑还得踩。但至少，你现在知道差距在哪了，剩下的就是慢慢补上。
好了，就这样吧。写这篇文章的时候，我也在反思自己，发现还有很多地方做得不够好。但至少，咱知道方向在哪了。共勉吧，我擦！
