如何突破前端开发技术瓶颈

日本作家村上春树写过一本富有哲理的书——《当我谈跑步时我谈些什么》。

在书中，他谈到，跑步跟写作一样，都需要坚毅隐忍，追逐超越；都需要心无杂念，持之以恒。全书落笔之处，没有浮华旖旎，而是将迷惘、失败和挣扎娓娓道来。

这本书名义上是在谈跑步，实际却是作者在个人创作低潮时期对突破进行的不断思考。仔细想来，这样的思考对于一位工程师也至关重要。

前端领域，入门相对简单，可是想要“更上一层楼”却难上加难，市场上的高级/资深前端工程师凤毛麟角。这当然未必是坏事，一旦突破瓶颈，在技能上脱颖而出，便能拥有更广阔的空间。那么，如何从夯实基础到突破瓶颈呢？

接下来我们就来讨论一下，当前端工程师需要进阶时，应该学些什么。

说到进阶，我想先谈一谈我们每个人内心的焦虑和迷茫，正视这种情绪是学习的第一步。对于每一个追求进步的人来说，瓶颈期总会在各个阶段“如约而至”。早在战国时期，庄子在《庖丁解牛》中就说：“吾生也有涯，而知也无涯。以有涯随无涯，殆已！已而为知者，殆而已矣！”

而如今，在这个信息爆炸的时代，信息量呈几何级数增长，知识似乎唾手可得。那么该学什么，到底该怎么学，学完之后又该做什么？大部分人都会在知识面前焦虑、迷茫。

同样，具有一定工作经验的工程师也面临着很多疑虑。

• 该如何避免相似的工作做了5年，却没能具备5年的工作经验？
• 该如何从繁杂而千篇一律的业务需求中提炼技术点并提高？
• 该如何为团队带来更大的价值，体现经验和能力？

这些疑虑对前端工程师来说貌似来得更加猛烈：前端技术发展备受瞩目，前端工程师变得越发重要的背后是相关技术的不断进步和更新迭代。因此，我们比以往任何时候都更需要主动学习。但据我观察，目前网络上的学习资料往往存在以下两个问题。

• 过于碎片化，这类知识在某种程度上只能成为缓解焦虑的“精神鸦片”。
• 追求短平快，大牛经验、快速搞定“面经题目”等内容渐渐演变成跳槽加薪的“兴奋剂”。

技术进阶是一个系统、曲折的过程。每个学习者所接触的知识内容和其背后的原理构成了他的思维方式。短期速成的内容或大量碎片化的知识很难帮助我们进行深度思考。坦白来说，我也是这些“学习资料”的搜集者，如果没有系统且有针对性的学习和反复刻意的练习，那么结果就是，以为收藏的是知识，其实收藏的是“知道”；以为掌握了知识，其实只是囤积了一堆“知道”。

我想把自己在海外和BAT工作多年积累的经验分享给大家，也想把长时间以来收藏的“干货”梳理一遍，系统整理输出，和大家一起提高。因此，《前端开发核心知识进阶：从夯实基础到突破瓶颈》这本书就诞生了。

爱因斯坦说过：“只是学习他人的智慧并不足够，你需要自己想明白才行。花时间记录、通盘考虑和深入思考你学到的东西。”

海伦·凯勒说过：“知识使人进步，而智慧使人得道。”

希望本书不仅详述了“知识”，更能体现编程“智慧”，让所有读者朋友一起思考，一起进步。那么这本书究竟有什么特色呢？我想一边聊聊前端开发的发展，一边说说本书的聚焦点。

前端大航海时代：旧工具被淘汰，新力量崛起

记得我刚接触前端编程时，jQuery风靡一时，其清新优雅的DOM操作、稳如磐石的兼容性处理、灵活高效的封装和链式调用，让人如沐春风。

彼时，我幼稚地以为“这就是巅峰”，事实却是“这只是开始”——随着三大框架的崛起，技术更迭就像“暴风雨前的宁静”，jQuery突然就被其他“先进的生产力”甩在身后了。于是我们看见，各大平台的技术“改朝换代”，各自引领开发潮流。

这还只是一个类库在前端浪潮中的兴衰。再想想ES（ECMAScript）语言规范的演进速度，HTML5的扩张幅度，跨端开发框架从Ionic到React Native再到Flutter，CSS从基本布局模型到弹性盒模型再到原生Grid 方案，构建打包工具从Grunt到Gulp再到webpack和Rollup……

本书在重视“亘古不变”的语言的基础上，力求为大家介绍更先进的开发技术。比如，服务器端渲染、HTTP 3.0，使用 Lerna、yarn workspaces 构建 monorepo 项目，框架的原理、演进，框架间的对比和虚拟DOM，等等。

与生俱来的混乱：披荆斩棘，勇往直前

前端三大方向 JavaScript、CSS、 HTML 的背后是无尽的碎片化场景。前端是最贴近用户的“战线”，它的基因决定了它需要处理各式各样的情况。同时，无论是跨平台还是语言特性，都让开发者感到迷茫。

• 我们应该使用哪些HTML标签以达到最佳的语义化？

• 我们应该如何面对不同终端的诡异问题，并保证体验一致性？

• 我们应该如何编写JavaScript代码才能实现bug free？

• this用得乱七八糟，它到底指向谁？

在本书中，我们除了剖析理论，更会注重经验介绍和最佳实践。

• 分析多种场景和业界解决方案的产出。

• 实战观摩 webpack 打包结果，对比 Rollup 解决方案，同时分析 tree shaking 的实施细节。

• 探索究竟如何组织架构代码，提升开发效率。

• 不去讲解 CSRF、XSS 等基础概念，而从鉴权角度出发，让读者对安全有一个立体认知。

广阔的未来：打铁还需自身硬

目前，我们正在经历所谓的“资本寒冬”，不管是大厂、二线公司还是创业团队，“优化人员结构”的新闻层出不穷。但是据我观察，“高级前端工程师”的招聘需求却“逆流而上”，具备高水平和丰富经验的开发者无论何时都备受追捧。因此，磨炼技能、积累项目经验将是所有前端工程师的核心诉求。

作为作者，我也在思考如何让本书更有价值，真正帮助大家突破瓶颈，让读者感到“物有所值”，进而实现技能进阶。

在本书中，我将穿插大量经典面试例题，其中既包括我作为 BAT 面试官考查的“私房题”，又涵盖我作为面试者遇见的“经典题”，还有我和业界前辈讨论过的“开放题”。在平时的开发和学习中，我也研读了大量精品文章，会一并将感悟分享给大家。

从开发菜鸟到资深工程师，除了主观能动性，我个人认为成长过程中的一大瓶颈在于“不是每个人都能有机会接触到好项目，进而从中提高”。这里的“好项目”是指类似“项目重构”“类库迁移”“复杂应用设计”“疑难 bug 定位”“新技术落地实施”等对开发者基础和设计能力有较高要求的项目。

为此，在本书中，我会插入大量有关代码设计模式、函数式、源码分析、组件设计和封装、开源库解读、项目代码组织等内容，也会手把手地带领大家查阅Issue、Changelog，从社区中汲取精华，构建更为真实的开发场景，直击实践中的高频痛点。最后，希望能和每一位读者保持长线联系，一起讨论问题，共同进步。

本书共分为8部分，涵盖33个主题（33篇），其中每一部分的内容简介如下。

第一部分 JavaScript 基础强化（01~04）

“且夫水之积也不厚，则其负大舟也无力”——基础的重要性无须多言，这对于前端开发也不例外。本部分将介绍JavaScript语言中的关键基础内容。因为JavaScript语言的灵活特性，这些基础内容既是重点，也是难点。这些内容包括：JavaScript中的 this 指向问题、闭包问题、关键 API、高频考点等。事实上，这些内容将不仅决定你的面试表现，还能直接影响你日后的进阶和发展。

第二部分 JavaScript 语言进阶（05~08）

牢固的基础知识，是进阶路上的基石。本部分将从JavaScript异步特性理论与操作、Promise的理解和实现、面向对象和原型知识、ES的发展进化等内容入手，带领大家强化难点。同时我们会通过大量实例，加深读者对知识点的理解，帮助读者融会贯通。

第三部分 不可忽视的HTML和CSS（09~11）

翻过 JavaScript 的大山，也许你会觉得学习HTML和CSS能相对轻松一些，但关于HTML和CSS 的知识仍然“不可忽视”。即使它们不是面试和工作中的“拦路虎”，也是至关重要的内容。本部分，我们不会系统且全面地介绍HTML和CSS 的相关知识点，而是会启发式地从一些细节入手，“管中窥豹”，介绍应该如何学习这些内容，并介绍响应式布局和Bootstrap的实现。

第四部分 前端框架（12~18）

本部分将介绍前端框架方面的知识，以 React 为主分析框架对前端而言到底意味着什么，以及我们应该如何学习 React。事实上，对 React 的学习不能只停留在“会用”的层面，学习其组件设计和数据状态管理对于培养编程思维也非常有益，有利于学习者从更高的层面看待问题。同时，我们也会对比 Vue 框架，探讨前端框架的“前世今生”。

第五部分 前端工程化（19~22）

资深程序员永远逃不开的重点工作之一就是“基础构建”和“项目架构构建”。本部分将从模块化谈起，结合 webpack、Lerna 等工具，为大家还原一个真实的“基建”场景，深入项目组织设计，并落实代码规范工具设计。

第六部分 性能优化（23~25）

性能优化是理论和实践相结合的重要话题。本部分将介绍大量重要的性能优化知识点，如性能监控、错误收集与上报等，同时将结合项目实例和React来探讨性能优化问题。阅读本部分之前，大家需要了解缓存策略、浏览器渲染的特点、JavaScript 异步单线程对性能的影响、网络传输知识等内容，同时也要具备一些实践经验，如用 Chrome devtool 分析火焰图、编写并运行出准确的benchmark等。

第七部分 编程思维和算法（26~30）

前端开发离不开编程基础，良好的编程思维、基本的算法知识，可以说是每一位工程师所必须具备的。本部分将用 JavaScript 来描述多种设计模式，手把手教大家用JavaScript处理各种数据结构，并强化对一些常考前端算法的理解和掌握。

第八部分 网络知识（31~33）

本部分将重点强化网络知识，包括缓存、超文本传输协议（HTTP）、前端安全等。作为一名前端开发者，不了解互联网传输的奥秘、不清楚网络细节是很难进阶的。网络知识关联着性能优化、前后端协作等核心环节，对于每一位工程师而言都十分重要。

授人以鱼不如授人以渔，除去书中的知识点，我更希望能够与大家分享我的学习方法：如何投身到社区中与广大开发者一起讨论；如何阅读前人的经典著作，站在巨人的肩膀上使自己看得更远；如何解读开源库并从中汲取养分；如何在面试和述职中正确地表达观点……

在这个时间节点，我们仍然面临着疫情的严峻挑战。但与此同时，一切就像阿尔贝·加缪在《鼠疫》中所说的那样：“春天的脚步正从所有偏远的区域向疫区走来。成千上万朵玫瑰依旧枯萎在市场和街道两旁花商的篮子里，但空气中充溢着它们的香气。”书中另外一句话也让我印象深刻：“对未来真正的慷慨，是把一切献给现在。”抗击疫情如此，每个人的学习进阶道路同样如此。愿与大家共勉！

本文节选自博文视点新书《前端开发核心知识进阶：从夯实基础到突破瓶颈》。前端领域从2013年左右开始崛起，在从Backbone到三大框架的此消彼长中，想要梳理出具有体系性的学习要点更难。作者是这个特殊时期的亲历者、实践者和深思者，他在本书中简明扼要地讲解了前端应知应会的技巧，使各阶层读者都可从中受益。左下阅读原文，让我们与时俱进地开启前端攻城狮难以回避的三十三个核心话题！