前端程序员该如何突破技术瓶颈

最近看到有人提问：本人三年前端开发经验，学历985本科，坐标长沙某证券交易公司。感觉技术已经到了瓶颈期，期间换了工作，依旧感觉难以突破技术瓶颈期。目前掌握的技术栈包括vue和react，但只停留在会用，掌握基础原理的层次，webpack基本可以玩转，nodejs掌握基础。最近在看vue源码，但是实在难以看下去。我该往哪个方向努力突破自我？还是要去大城市大公司吗？看完提问，我相信很多前端写了三年左右的开发兄弟们都有类似的困惑...说实话，这个问题让我想起了当年的自己，也是经常感到迷茫，觉得自己会的东西很多，但其实掌握的知识很多都停留在表面上，别人要是往深一问，就懵逼了。有一说一，当年我是怎么跨越技术瓶颈期的？如果你也有类似困惑，接下来的内容对你很重要，希望你看时有耐心，看完有信心！说实话，很多人的问题出在对知识的学习仅停留在浅尝即止的状态，就是学习新知识，能写个 demo，就觉得自己学得差不多了。这种学习方法是很有害的，首先知识存留度不高，其次是浪费时间，因为你很快就会忘掉。那怎么改正这种状态呢？时常问自己三个问题：1.这是什么？2.为什么要这样？可以不这样吗？3.有没有更好的方式？当然，不是所有问题都能适用灵魂三问，但它适用大多数情况。举个例子：看过性能优化相关文章的同学应该知道有这么一条规则，要减少页面上的 HTTP 请求。这是什么？先了解一下 HTTP 请求是啥，查资料发现原来是向服务器请求资源用的。为什么要减少 HTTP 请求？查资料发现：HTTP 请求需要经历 DNS 查找，TCP 握手，SSL 握手（如果有的话）等一系列过程，才能真正发出这个请求。并且现代浏览器对于 TCP 并发数也是有限制的，超过 TCP 并发数的 HTTP 请求只能等前面的请求完成了才能继续发送。我们可以打开 chrome 开发者工具看一下一个 HTTP 请求所花费的具体时间。 这是一个 HTTP 请求，请求的文件大小为 28.4KB。名词解释：Queueing: 在请求队列中的时间。Stalled: 从TCP 连接建立完成，到真正可以传输数据之间的时间差，此时间包括代理协商时间。Proxy negotiation: 与代理服务器连接进行协商所花费的时间。DNS Lookup: 执行DNS查找所花费的时间，页面上的每个不同的域都需要进行DNS查找。Initial Connection / Connecting: 建立连接所花费的时间，包括TCP握手/重试和协商SSL。SSL: 完成SSL握手所花费的时间。Request sent: 发出网络请求所花费的时间，通常为一毫秒的时间。Waiting(TFFB): TFFB 是发出页面请求到接收到应答数据第一个字节的时间总和，它包含了 DNS 解析时间、 TCP 连接时间、发送 HTTP 请求时间和获得响应消息第一个字节的时间。Content Download: 接收响应数据所花费的时间。从这个例子可以看出，真正下载数据的时间占比为 13.05 / 204.16 = 6.39%，文件越小，这个比例越小，文件越大，比例就越高。这就是为什么要建议将多个小文件合并为一个大文件，从而减少 HTTP 请求次数的原因。有没有更好的方式？使用 HTTP2，所有的请求都可以放在一个 TCP 连接上发送。HTTP2 还有好多东西要学，这里不深入讲解了。经过灵魂三问后，是不是这条优化规则的来龙去脉全都理清了，并且在你查资料动手的过程中，知识会理解得更加深刻。掌握了这种学习方法，并且时刻运用在学习中、工作中，突破瓶颈只是时间的问题。关于源码学习。看不懂 Vue 源码很正常，就像一个没学过加减法的人，上来就学习乘除法，这难度不是一般的大，对吧？而且 Vue 的源码由于工程性的考虑，作了很多边界判断和冗余处理。学习 Vue 源码最好从一个比较简单的版本开始学习。例如我当时学习 Vue，是从 1.0 版本开始学习的，这个版本没有虚拟 DOM，没有 Diff 算法，每个指令怎么操作 DOM 都能直观的看到，学习起来比较简单。既然要从简单的版本学习，那怎么找到简单的版本呢？用 Vue3 举例子，打开 Vue3 的 github，看一下右边： 点击 Releases，在里面能找到 Vue3 发布的每一个版本。我们可以从第一个版本开始学习： 点击 Source code 下载源码。等第一个版本看懂了，再看后面的完整版，会容易很多。最后，如果源码还是看不懂，没有关系。我们可以先看一下相关源码的学习文章，找一些质量高的，看一下里面的难点讲解，最后再重新学习源码。关于提到的「去不去大公司」的问题。趁年轻，去大公司见识一下世面。大公司的技术水准基本上都是处于行业领先水平的，有很多东西你在小公司一辈子都接触不到。在大公司呆几年，要是觉得不合适再去小公司也不迟。最后再提两个建议：1.学好计算机基础知识，包括但不限于：操作系统、数据结构、计算机网络...2.时常把自己放在团队负责人的角度来思考问题，降维打击。计算机基础很重要，决定了你的天花板，一定要努力学习（对于前端来说，计算机网络和操作系统是重中之重）。对于第二点，你可以经常问自己以下几个问题：1.如何提高团队的开发效率？例如减少沟通成本，这可以通过规范标准来达到，包括编码规范、git 规范等等。还要和产品、UI定好沟通流程、文档规范，也能减少沟通成本。减少要写的代码，怎么做？开发一些工具，例如代码生成器、可视化开发工具等等。要写单元测试，对于长期维护的项目来说，写单元测试是提高效率的一大利器。多问这种问题，让你从全局上而不是在局部上去思考问题，这对于提升你的技术素养和工程管理能力都有很大的帮助。2. 如何分配任务？除了考虑成员能力还要考虑潜力、性格等等。3. 如何提升团队成员能力？培训、分享等等。为什么要这么做呢？当你领导做一些事情让你不解的时候，让你困扰的时候，从他的角度想一想，或者就能解决你的疑惑。同时，理解领导对于你们的沟通也是很有好处的，相信没人喜欢天天和领导对着干吧。以上，就是今天要分享的所有内容。小编是个多年开发经验的程序员。如果你想要学好WEB前端，在学习过程中，身边没有一个能够指导你学习的人，可以到这个WEB前端裙，里面最新学习路线和教程，不管是计算机专业想要往WEB前端方向发展，还是零基础想转行，都可以跟着教程学，有什么不懂的可以在里面问，这就是WEB前端裙。前面三个输入296，中间三个输入212，后面三个输入562。

本文章由javascript技术分享原创和收集