🧑‍💻 写在开头

大家都说前端没有什么技术难度，前端技术的广度就是深度，那广度就是深度到底对不对？

一、对前端的认知

1.两条路

开头的那句话在我建立完广泛的知识面后我开始有了新的认知

首先大家都说就是对的吗？你需要有自己的认知。我目前的认知是

有没有技术难度得从你走的方向判断，如果你只是切图仔 ，UI给你什么你还原什么就OK了，学会一个框架并且熟练使用再加上一段时间的产品理解，你可以在空闲时间尝试各种技术并且没有心理负担，并不会影响的后续的工作，你可以很容易的把控你后续几年的工作
但是如果你的方向的前端图形，做的是图形编辑器或者是3D webgl之类的，你还敢说他简单吗？还敢说他没有技术难度吗？canvas如何渲染节点、如何处理事件？矩阵如何运算？如何自定义渲染引擎？填充、描边、模糊图形学算法你都知道吗？工作的早期，你必须了解canvas、svg、图形学基础、矩阵运算、坐标如何转换、图形库的使用【比如canvasKit&skia】、如何自定义渲染器、如何定义节点。你需要一个很长的时间来具备基本开发能力，并且你的需求是基本不可能吃老本的，就算你工作几年了。这意味着你走广这条路会很慢，相比仅仅做切图工作，你可能慢的不止10倍，即使你觉得你付出了10倍的努力和时间，

2.对这两条路的认知

如果你走的是第一条路，那么恭喜你，你最近的几年应该都没有什么心理负担。
如果很不幸，你跟我一样走的是后面的这条路，那我也要恭喜你，你同我一样最近几年生活很丰富，学到了不少东西，但是我不知道你有没有思考过，学了那么多东西，给你换条路，换个公司，还有用吗？

前端通用知识

这里我给出我的思考：

早期我的认知里面前端确实是因为它的广度而著称，但现在我不认为技术的广度就是深度。

对某些人来说，前端技术看似不难，可能是因为它入门门槛较低，刚开始只需掌握HTML、CSS、Js等基础，就可以建立起一个简单的网页。但是，随着Web技术的发展和前端生态的不断演进，前端开发的技术栈已经变得非常庞大和复杂，比如

编程语言和开发技术 : 精通Js，并且深入理解其运行机制（事件循环、异步编程等）；熟悉至少一种现代框架或库及其生态（如React、Vue、Angular）；了解CSS预处理器（如Sass、Less）和新的CSS特性，前端现在远未达到大一统的状态，你必须不断学习新的东西，比如你刚到一个公司，发现技术栈跟你之前的公司用的不一样。
模块化和组件化开发 : 理解模块化和组件化编程；掌握如Webpack、Rollup、Parcel等模块打包工具；熟悉ES Modules、CommonJS等模块标准。
前端工程化: 构建高效的开发流程，包括自动化构建、测试、部署、性能优化等。
响应式设计和跨设备兼容性: 理解和实现响应式设计，解决多设备、多浏览器的兼容性问题。
前端安全 : 防范XSS、CSRF、点击劫持等Web安全问题。
前端性能优化: 理解和优化页面加载、执行和渲染的性能。
前端测试: 单元测试、集成测试、E2E测试、性能测试等。
前端架构: 如客户端存储、状态管理、服务端渲染 (SSR)、静态站点生成 (SSG)、微前端等。
现代API使用 : 如GraphQL、WebSockets、Service Workers、Web APIs。
用户体验和交互设计: 实现良好的用户体验和有效的交互设计。
版本控制和协作工具 : 理解Git工作流程，如rebase、merge、branch strategies等。

第二条路的优缺点

对于新手极其不友好且性价比不高，心理负担会比较重，你永远无法靠吃老本工作，但是能力上会有很大的提升，并且会长期作用于你的日常工作和生活

2.认知结论

对于目前的我来说我认为前端技术既有广度也有深度。

广度体现在多样化的技术栈和瞬息万变的生态
深度体现在对单一技术或概念的深入挖掘和应用。

二、应对策略

对于任何一个前端开发来说，你走的路肯定是先广而后深的，但是在如此瞬息万变的情况和工作内容不是万金油的情况下，你该如何走好自己的路？

1.寻求共性

可以是技术上的，也可以是业务上的，也可以是团队上的。对于我来说，当我发现我的工作和技术存在上述的问题的时候，我开始找寻工作和前端技术中的共性，主要是如下几个方面

技术上 ：在我发现我花费了几倍的时间和精力学习到的技术仅仅匹配上我当前的工作任务，并且消耗了一个非常长期的过程，大概2年的时间，广泛的学习了前端技术和编辑器、图形学的知识，并未有一个方向深入学习和思考 。我开始探索技术的共性，开始将重心转移到，理解技术的原理，找寻工作中通用的技术，比如，理解react的原理，前端工程化、设计模式，让自己能够具备从0到1实现一个项目，因为平时的难度几乎是TOP1了不需要再去研究难的项目，为什么面试的时候总是要我们手写哪些promise，发布订阅等等。
业务和团队：技术很重要，但是产品的理解能力，遇到问题快速学习并解决以及团队协作能力同等重要，我刚进入公司的时候，总觉得公司的项目好难，为什么其他的人貌似没有觉得很难，这是为什么？到现在我理解了，仅仅是一个熟悉的过程，你够熟悉项目，他就越简单，尽管早期你觉得很困难，但到了某一个时间节点之后你总会豁然开朗，也就那么回事，能难到哪里去？所以说技术还存在一个熟悉的过程，但是产品的理解能力，遇到问题快速学习并解决以及团队协作能力这样的软实力，是需要不断学习和积累经验的，并且在工作中占比也很重。

2.计划&TODO

在一段时间的文档记录之后我觉得写文章可以提升我对技术的理解，所以我写了一系列的文章，主要是前端通识方向的，工程化、组件库、react原理等等，目前我仍然是打算继续这些

前端工程化

在之前我写了几篇项目搭建、组件库搭建、项目自动化的文章，虽然文章也是一个渐进的过程但是我发现，首先需要有一个宏观的认知，然后再去补全微端的细节才是最好的学习方式，后续我会加上一篇文章补上对于工程化的宏观认知，然后不断地补全细节，每个阶段我都会输出一篇文章，最后实现一个从0到1的完整项目过程，比如工程化包括：

项目搭建->项目规范->项目构建->项目组织->部署&服务->环境管理

react原理探究

这个跟我做的编辑器有很大的关联，对我有很大的帮助，这个系列是符合一个宏观到微观的过程的

编写常见组件

逻辑我已经很熟悉了，组件写的比较少，要知道自己的弱点，然后补全。

为什么面试要问这些手写题？

重要的是对知识的理解，而不是写出来就行了，后续我会不断输出常见手写题的原理和实现，包括promise，深浅拷贝、发布订阅等等

🍋 写在最后

你可以确定一个路径，对于目标有一个宏观认知，然后分阶段，不断地输出并记录，补全你的认知，到达某一个时间点之后，总会豁然开朗。

如果您有更好的建议，欢迎👏🏻评论

如果您看到这里了，并且觉得这篇文章对您有所帮助，希望您能够点赞👍和收藏⭐支持一下作者🙇🙇🙇，感谢🍺🍺！如果文中有任何不准确之处，也欢迎您指正，共同进步。感谢您的阅读，期待您的点赞👍和收藏⭐！

感兴趣的同学可以关注下我的公众号ObjectX前端实验室

🌟 少走弯路 | ObjectX前端实验室 🛠️「精选资源｜实战经验｜技术洞见」

【阅读】2年前端对于前端的认知&应对策略