明确你的前端学习路线与方法
winter
该思维导图由 AI 生成，仅供参考
你好，我是 winter。今天我们一起来聊聊前端的学习路线与方法。
在“开篇词”中，我和你简单回顾了前端行业的发展，到现在为止，前端工程师已经成为研发体系中的重要岗位之一。可是，与此相对的是，我发现极少或者几乎没有大学的计算机专业愿意开设前端课程，更没有系统性的教学方案出现。大部分前端工程师的知识，其实都是来自于实践和工作中零散的学习。
这样的现状就引发了一系列的问题。
首先是前端的基础知识，常常有一些工作多年的工程师，在看到一些我认为很基础的 JavaScript 语法的时候，还会惊呼“居然可以这样”。是的，基础知识的欠缺会让你束手束脚，更限制你解决问题的思路。
其次，技术上存在短板，就会导致前端开发者的上升通道不甚顺畅。特别是一些小公司的程序员，只能靠自己摸索，这样就很容易陷入重复性劳动的陷阱，最终耽误自己的职业发展。
除此之外，前端工程师也会面临技术发展问题带来的挑战。前端社区高度活跃，前端标准也在快速更新，这样蓬勃发展对技术来说无疑是好事，但是副作用也显而易见，它使得前端工程师的学习压力变得很大。
我们就拿 JavaScript 标准来说，ES6 中引入的新特性超过了过去十年的总和，新特性带来的实践就更多了，仅仅是一个 Proxy 特性的引入，就支持了 VueJS 从 2.0 到 3.0 的内核原理完全升级。
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线笔记
复制
AI
- 深入了解
- 翻译
- 解释
- 总结
本文探讨了前端工程师学习路径与方法，强调了建立知识架构的重要性。作者提出了两种学习方法：一是建立知识架构，通过构建逻辑性和完备性的知识架构，帮助前端工程师组织零散的知识、发现盲区、轻松记忆难点，并在面试中表现更出色；二是追本溯源，关注技术提出的背景，关注原始的论文或文章，帮助理解一些看上去不合理的东西。通过这两种方法，帮助前端工程师建立起前端技术的知识架构，理解前端技术背后的核心思想，以及摸索出适合自己的学习方法。文章旨在帮助读者对前端技术产生整体认知，以保持在未来新技术中的领先地位。
仅可试看部分内容，如需阅读全部内容，请付费购买文章所属专栏
《重学前端》，新⼈⾸单¥59
《重学前端》，新⼈⾸单¥59
立即购买
© 版权归极客邦科技所有，未经许可不得传播售卖。 页面已增加防盗追踪，如有侵权极客邦将依法追究其法律责任。
登录 后留言
全部留言(235)
- 最新
- 精选
CC在阅读这篇文章之前，我对于前端知识结构的划分是基于「语言」： 前端 = HTML + CSS + JavaScript 每种语言下，又混杂了基础知识以及相关的工具。 比如我之前认为的 JavaScript 包括： * JavaScript 基础 * Package Manager (NPM, Yarn) * Build tools (NPM Scripts, ESLint, Webpack...) * Frameworks (React, Vue.js, Angular) * Testing tools (Jest ...) 现在知道自己的认识有两个误区： 1. 这个知识架构没有完备性，这样划分，总有在这个结构之外的知识； 2. 学习的时候会疲于奔命，总想“完整”的学完所有的知识，却走了弯路。 感谢 winter 老师。作者回复: 我觉得你不妨思考下，如果我要讲Package Manager、Build tools，你猜我会放到哪个部分？
2019-01-17682
YUANWOW大家都觉得HTML容易，非常简单 就算不会，坐下来花一天时间看看MDN几乎都能写出来了 我们都知道写HTML要语义化，但是HTML5的语义我感觉非常复杂 有多少人能保证写出来的网页完完全全遵循了正确的语义？ 能达到屏幕阅读器理解的程度？ 我们想写语义正确的网页，但是也不想被语义复杂性所拖累（本来读的也不是文科，div一分钟能写出来的东西在语义上要纠结好久） 程老师，我的问题是，作为一名前端工程师，平常工作的时候写HTML究竟要语义化到哪种程度呢？作者回复: 这是个好问题，在语义化部分我有讲这个问题，很快你就能看到了。
2019-01-17359
Jerry粗鄙认为前端知识架构可以分为渲染层和网络层两方面，不论前端如何发展变化，比如react，vue，ng，还是flutter，小程序等等，本质上脱离不了这两方面，另外前端工程师在接触一个新语言或新框架，最难不是学习语言本身（官方文档可以解决），反而棘手的是如何去工程化（更好组织代码，打包工程）和去优化，这是做前端两年的感受作者回复: 渲染层和网络层这个分法听起来是有一定思考了，不过可以再想想，是不是还有别的层？ 另外就是，如何定义渲染层呢？
2019-01-1741
nbili如果让自己描述前端的知识结构，大致会按照下面这个roadmap来。 https://github.com/kamranahmedse/developer-roadmap/blob/master/readme.md winter老师第一种建立知识架构的方式，更像是做了进一步抽象。作者回复: 要自己整理才行哦。
2019-01-1726
reece1.1，代码打包，如何打包代码发送到服务器。 1.1.1，资源加载 1.1.2，webpack打包 1.1.3，摇树优化 1.2，网络传输，因为传统上是浏览器发起页面请求，然后服务器端发送html页面。 1.2.1，资源加载 1.2.2，首屏页面加载优化 1.3，浏览器端的页面渲染。 1.3.1，浏览器如何渲染一张html页面 1.3.2，渲染性能优化 1.4代码编写 1.4.1，html页面架构 1.4.1.1 ..... ... 1.4.2，css页面样式 1.4.2.1， ...... ..... 1.4.3，js交互 1.4.3.1，..... .....作者回复: 不错，比较认真了，但是你有没考虑过除了打包、传输还有什么？它们跟代码编写是一个维度的概念吗？
2019-01-1725
stanny接触前端一年左右的时间，正式做前端大概也就四五个月的时间，我对前端的知识结构理解大概如下划分： 1. ECMAScript 标准， DOM、BOM、ES6、Node.js 2. html/css 3. 各种前端框架以及构建工具 4. http作者回复: 有点零散，想想1 2 3 4之间的关系是什么
2019-01-174
蒋想请教下，怎么理解“运行时”这个词作者回复: 运行时就是你的代码在用户的设备上运行的时候。 它跟你编写代码的时候是相对的。
2019-08-15
不良人知识体系么？我思考了一下，有吗？好像是没有。会使用却不了解其背后的深意。就像是农夫打拳，孔武有力，外形不错，也能乱拳打死老师傅，却不会武功。只有蛮力作者回复: 乱拳打死老师傅会上新闻，老师傅打倒徒弟是日常。
2019-05-27
岛乾坤老师，学习你这个专栏需要具备哪些基础？是把js这些教程学完再来看吗？我想转行前端，但是文章有很多地方看不明白。作者回复: 我是建议有一定实际工作经验来学，这个课程是帮你整理知识的。
2019-02-24
高亮Vue, Angular, React在前端算是哪个体系架构里的哪?为何没有它们的介绍？作者回复: 框架是解决架构问题的一种手段，所以分下来的话框架在架构部分，但是这里我不会给大家讲框架怎么用，每一个框架自己在这部分都做得非常好了，我讲一遍没有任何价值，但我会讲技术选型、框架背后的一些设计思想。
2019-01-19
收起评论