计算机专业学生如何系统的学习前端开发

迄今为止，前端工程师已经成为研发体系中的重要岗位之一。可是，与此相对的是，极少或者几乎没有大学的计算机专业愿意开设前端课程，更没有系统性的教学方案出现。大部分前端工程师的知识，其实都是来自于实践和工作中零散的学习。

基础知识的欠缺会让你束手束脚，更限制你解决问题的思路。缺少系统教育加上技术快速革新，所以我们需要学的也就不仅仅只是 CSS&HTML&JavaScript 了。

在这样的大环境下，前端工程师正确的规划自己的学习路径通过自学保证自己的技术能力呢？

干货来了，篇幅较长，建议先藏后看！

目录

三大件学习

库工具

前端框架（ MVVM ）的学习

浏览器 & 计算机基础

前端工程化

性能优化

Nodejs学习

01 三大件学习

现在每年依旧有很多初级入门的前端开发。所以对初入门的朋友也给出一点意见。

刚入门的朋友，我觉得不应该一开始就学习像Vue、TypeScript、Webpack等知识。应该把重点放在CSS&HTML&JavaScript基础知识的学习上。

CSS & HTML

对于刚入门的朋友我依旧建议先将CSS(3)&HTML(5)的知识点认真学习一遍。学习的途中最好是学习完一部分就自己在敲一遍代码，加深自己的记忆。

当然如果你愿意，建议你可以先仿一个网站的静态页面（掘金、知乎等都可以），有一些属性就可以了解他实际的实现场景。

当然刚开始敲代码的时候还是不要过分依赖自动补全功能，一开始就使用自动补全对你记忆一些属性时没有帮助的；踏实点学习，日后会有回报的。

关于 CSS(3) 你需要了解的一些知识点

盒模型（标准 & IE ）

flex、float、Normal Flow 等的理解

CSS 常用选择器

行内、内部、外部样式的区别

CSS 层叠规则

BFC 与 IFC 的了解

CSS3 的 transform、transition、animation 等属性的运用了解

响应式布局的理解

……

CSS 说容易也容易，说复杂也复杂；因为 CSS 总是能给你意外的惊喜。

HTML(5) 你需要了解的一些知识点

说到 HTML 我想有很多人是div一把梭。因为div用的爽，不用担心默认样式。

有人说 HTML 语义化的优点很多，比如清晰的页面结构、有利于 SEO、便于团队开发和维护；这些我都承认，不过我还是喜欢div一把梭。

HTML 语义化( 不是很理解为什么面试总会问 )

canvas

本地存储（ localStorage、sessionStorage、cookie 的理解 ）

video 和 audio 的使用

应用缓存( cache manifest )

……

JavaScript

三大件一直都是前端的根本，这一点从未改变，而这三大件中 JavaScript 又是重中之重。

JavaScript一直都是我们前端的基石，一定程度上JavaScript的理解深度决定了你的发展。所以一定要用心学习。

现在很多人一看到闭包、原型链、作用域链、继承之类的文章都是直接跳过，你现在可以自问一下你的确理解这些基础的知识点吗？

JavaScript的基础知识点确实很多，所以《JavaScript 高级程序设计》 写了 700 多页；不过当你 JS 基础扎实后，你会发现你在学习框架、亦或是学习框架源码的时候会轻松许多。

JavaScript（ES6+） 你需要了解的一些知识点

类型转换

this

作用域（作用域链）

原型链以及继承

闭包的理解

动态作用域和词法作用域

JavaScript 执行机制

promise & async

……

上面说的CSS&HTML&JavaScript的基础知识点并不需要你一入门就全部都理解透彻；有些虽然是基础，但却也有它的难度。就算是高级也不敢说自己全都掌握了，有句话说的挺好 —— 书读百遍、其义自见。

我们第一遍学习不可能尽懂，到最少可以给我留下一个印象。过一段时间再学习这块知识点的时候，你肯定会有一个全新的理解。学习只一个需要一直在线的任务，重复的学习可以帮助你保持持续的竞争力。

我先声明一点，我并没有说其他技术不需要去学习，只不过初入门最好重点是先将基础夯实。

其实三大件的学习不需要花费多少时间，有基础的大概 3 个月就可以大致的看一遍。是否真的理解这是后话，不过已经算是入门了。

CSS & HTML & JavaScript 推荐书籍/网站

_ W3C 的 CSS&HTML 网络教程

《CSS 权威指南》

《CSS 揭秘》

《JavaScript 高级程序设计》

《你不知道的 JavaScript》上卷

_ ECMAScript 6 入门

HTML 不知道推荐什么书。我个人觉得看教程和动手实践就基本没什问题。

接下来我们就可以学习一些工具类的库了。

02库工具

对于库工具而言我们常用的有 JQuery、underScore、zepto、Moment 等

JQuery: 降低开发者操作 DOM 的复杂度

UnderScore: 提供实用的函数

Zepto: JQuery 的简化版

Moment: 日期和时间操作库

这些库给我们提供了很大的便利，省去了我们编写相关方法的时间，同时也是我们的程序更加稳健 —— 我们自己写的方法很可能在某些情况下就出 bug 了。

当然对于这些库我们不仅仅只是去了解 API，我们需要去学习它的源码。看看如果自己写相关方法的话是不是也想到了这种方式，这些库工具是也是一个很好的学习工具，我们不应该忽略。

比如让你自己实现节流函数，你会如何实现。

过滤对象应该如何实现

……

这种问题的答案不就在 Underscore 源码里面吗？

我们在学习库工具的时候，必定是需要回头看 JavaScript 基础的；这也就进一步夯实了基础。

03前端框架（MVVM）学习

当下最火的框架想必一定是 React 和 Vue，如果 JQuery 的存在是是我们更加方便的操作 DOM,那么现在 MVVM 框架则是让我们从手动更新 DOM 的繁杂操作中解放出来。

至于 React 和 Vue 该学习哪一个，更多的还是看当下公司使用的是哪一个（也不是必然）。对于 Vue(React) 该如何使用其实不用多久就能上手，我们更应该关心的是他们背后的设计思想和实现原理。

一些典型问题

响应式的基本原理是什么

发布订阅模式的理解

Virtual DOM 的理解

前端路由的实现原理

nextTick / setState 的实现原理

diff 算法

单页面应用（SPA）的原理和优缺点

……

我们对于框架的 API 使用没必要花太多时间，应该多研究他们背后的设计思想和实现原理。

Vue 和 React 我该选择哪一个？

对于这个问题相比很多人都有困扰（有些人两个都学，也就没有这个困扰），这个问题已经有很多人回答了。但我还是觉得不是非要选择哪一个才是政治正确，选择你需要的。

感兴趣的可以看看这篇文章：

React or Vue: Which Javascript UI Library Should You Be Using?

以下是提炼的文中观点：

Vue的优势是：

模板和渲染函数的弹性选择

简单的语法和项目配置

更快的渲染速度和更小的体积

React的优势是：

更适合大型应用和更好的可测试性

同时适用于 Web 端和原生 App

更大的生态系统，更多的支持和好用的工具

Vue 相关资料

对于框架的一些学习资料我个人更倾向于推荐官方文档，有很多问题官方文档已经说得很清楚了。市面上有些书籍也就是对官方文档进行了一个扩写（不排除有精良之作）。

Vue 官网 & Vue Router 官网 & Vuex 官网

剖析 Vue.js 内部运行机制 掘金小册

vue 技术揭秘

04浏览器 & 计算机基础

如果你希望能能快速进阶到高级工程师，那么对于浏览器 & 计算机基础的知识你就必要又有一定的掌握。因为这能让你更好的理解前端。

浏览器一直是 JavaScript 最重要的宿主环境，所以我们必须去了解 JavaScript 在浏览器中是如何执行的。

我们前端开发接触最多的应该就是浏览器了，记得工作第一年最头痛的就是处理 IE 的兼容问题。工作中出现的很多问题都和浏览器有关，所以我觉得了解浏览器工作原理是非常有必要的。

为何要学习浏览器工作原理？

准确评估 Web 开发项目的可行性

从更高维度审视页面

解决面试中遇到的绝大部分浏览器问题

计算机基础

对于计算机基础我们需要做到大体了解，这样的话我们对整体的流程会有一个大概的把握。在实际开发过程中不会过于被动。

需要了解的一些知识点

浏览器缓存机制

浏览器中 JavaScript 的执行机制

页面渲染原理

浏览器安全问题

浏览器为什么会跨域

如何系统的优化页面

HTTP 与 HTTPS 的区别

TCP/IP 协议

三次握手和四次挥手

CDN 的作用和原理

正向代理与反向代理的特点

……

这里仅仅列出了一部分知识点，如果想全面的学习可以看下面推荐的资料。

浏览器 & 网络基础推荐书籍/资料

《浏览器工作原理与实践 》专栏

《图解 HTTP》

《网络是怎样连接的》

05前端工程化

从事前端稍微久一点的开发就一定会有这个感受 —— 前端开发越来越工程化，越来越复杂。

对于前端开发来说，现在前端要做的不只是切页面调接口这么简单，我们需要了解的技术无疑更加广泛。

前端工程化的一点浅见

由于项目的复杂度越来越高，前端需要做的工作就越来越繁重。当项目复杂就会产生许多问题，比如：

如何进行高效的多人协作？

如何保证项目的可维护性？

如何提高项目的开发质量？

如何降低项目生产的风险？

前端工程化细分的话我觉得可以分成模块化、组件化、规范化三个方向。或者说一切能提升前端开发效率，提高前端应用质量的手段和工具都是前端工程化的实践。

模块化

JavaScript 模块化

CSS 模块化

资源模块化

组件化

从 UI 拆分下来的每个包含模板(HTML)+样式(CSS)+逻辑(JS)功能完备的结构单元，我们称之为组件。

也就是将复杂页面按功能拆分成多个独立的组件。

规范化

编码规范

接口规范

git 使用规范

CodeReview

UI 元素规范

前端工程化一些知识点

理解 Babel、ESLint、webpack 等工具在项目中的作用

Babel 的核心原理

Webpack 的编译原理、构建流程、热更新原理

nginx 的基本理解

理解 Git 的工作流程

Mock 的意义及优点

06性能优化

提起性能优化，大家最先想到的是什么？我最先想到的是一道面试题：

从输入 URL 到页面加载完成的具体过程

因为从直观层面来看，我们前端需要优化的步骤基本都在这个加载工程当中。

性能优化现在对于前端来说已经是必不可少的技能了，当然现在有些所谓的性能优化的技巧现在都成为了一种需要遵从的规范。

我们需要关注两个方向的性能优化：

运行时的优化

开发时的优化

性能优化一些知识点

前端性能衡量指标、性能监控（performance,LightHouse）

常见的性能优化方案有哪些

SSR 方案的性能优化

Webpack 的性能优化方案

React、Vue 等框架使用性能优化方案

网络层面的优化方案

页面渲染层面的优化方案

白屏的优化方案

……

推荐资料

《大型网站性能优化实战》

《前端性能优化原理与实践》掘金小册

07Nodejs学习

我们知道由于 Nodejs 的出现，前端开发出现了一个新的高潮。JS 开始可以涉及后端领域，JS 的可能性更大了。

Nodejs 一些知识点

Nodejs 在应用程序中的作用

Express 和 Koa 的区别

Nodejs 的底层运行原理、和浏览器的异同

Nodejs 非阻塞机制的实现原理

……

最后网上看到寒冬winter（人称计算机之子）总结的两个学习方法，觉得很受用，也分享给大家。

第一个方法：建立知识架构

第一个方法是建立自己的知识架构，并且在这个架构上，不断地进行优化。 

我们先来讲讲什么叫做知识架构？我们可以把它理解为知识的“目录”或者索引，它能够帮助我们把零散的知识组织起来，也能够帮助我们发现一些知识上的盲区。

当然，知识的架构是有优劣之分的，最重要的就是逻辑性和完备性。

我们来思考一个问题，如果我们要给 JavaScript 知识做一个顶层目录，该怎么做呢？

如果我们把一些特别流行的术语和问题，拼凑起来，可能会变成这样：

类型转换；

this 指针；

闭包；

作用域链；

原型链；

……

这其实不是我们想要的结果，因为这些知识点之间，没有任何逻辑关系。它们既不是并列关系，又不是递进关系，合在一起，也就没有任何意义。这样的知识架构，无法帮助我们去发现问题和理解问题。

如果让我来做，我会这样划分：

文法；

语义；

运行时。

为什么这样分呢，因为对于任何计算机语言来说，必定是“用规定的文法，去表达特定语义，最终操作运行时的”一个过程。

这样，JavaScript 的任何知识都不会出现在这个范围之外，这是知识架构的完备性。我们再往下细分一个层级，就变成了这个样子：

文法

        词法

        语法

语义

运行时

        类型

        执行过程

我来解释一下这个划分。

文法可以分成词法和语法，这来自编译原理的划分，同样是完备的。语义则跟语法具有一一对应关系，这里暂时不区分。

对于运行时部分，这个划分保持了完备性，我们都知道：程序 = 算法 + 数据结构，那么，对运行时来说，类型就是数据结构，执行过程就是算法。

当我们再往下细分的时候，就会看到熟悉的概念了，词法中有各种直接量、关键字、运算符，语法和语义则是表达式、语句、函数、对象、模块，类型则包含了对象、数字、字符串等。

这样逐层向下细分，知识框架就初见端倪了。在顶层和大结构上，我们通过逻辑来保持完备性。如果继续往下，就需要一些技巧了，我们可以寻找一些线索。

比如在 JavaScript 标准中，有完整的文法定义，它是具有完备性的，所以我们可以根据它来完成，我们还可以根据语法去建立语义的知识架构。实际上，因为 JavaScript 有一份统一的标准，所以相对来说不太困难。

如果是浏览器中的 API，那就困难了，它们分布在 w3c 的各种标准当中，非常难找。但是我们要想找到一些具有完备性的线索，也不是没有办法。我喜欢的一个办法，就是用实际的代码去找：for in 遍历 window 的属性，再去找它的内容。

我想，学习的过程，实际上就是知识架构不断进化的过程，通过知识架构的自然延伸，我们可以更轻松地记忆一些原本难以记住的点，还可以发现被忽视的知识盲点。

第二个方法，我把它称作追本溯源

有一些知识，背后有一个很大的体系，例如，我们对比一下 CSS 里面的两个属性：

opacity；

display。

虽然都是“属性”，但是它们背后的知识量完全不同，opacity 是个非常单纯的数值，表达的意思也很清楚，而 display 的每一个取值背后都是一个不同的布局体系。我们要讲清楚 display，就必须关注正常流（Normal Flow）、关注弹性布局系统以及 grid 这些内容。

还有一些知识，涉及的概念本身经历了各种变迁，变得非常复杂和有争议性，比如 MVC，从 1979 年至今，概念变化非常大，MVC 的定义几乎已经成了一段公案，我曾经截取了 MVC 原始论文、MVP 原始论文、微软 MSDN、Apple 开发者文档，这些内容里面，MVC 画的图、箭头和解释都完全不同。

这种时候，就是我们做一些考古工作的时候了。追本溯源，其实就是关注技术提出的背景，关注原始的论文或者文章，关注作者说的话。

操作起来也非常简单：翻翻资料（一般 wiki 上就有）找找历史上的文章和人物，再顺藤摸瓜翻出来历史资料就可以了，如果翻出来的是历史人物（幸亏互联网的历史不算悠久），你也可以试着发封邮件问问。

这个过程，可以帮助我们理解一些看上去不合理的东西，有时候还可以收获一些趣闻，比如 JavaScript 之父 Brendan Eich 曾经在 Wikipedia 的讨论页上解释 JavaScript 最初想设计一个带有 prototype 的 scheme，结果受到管理层命令把它弄成像 Java 的样子（如果你再挖的深一点，甚至能找到他对某位“尖头老板”的吐槽）。

根据这么一句话，我们再去看看 scheme，看看 Java，再看看一些别的基于原型的语言，我们就可以理解为什么 JavaScript 是现在这个样子了：函数是一等公民，却提供了 new this instanceof 等特性，甚至抄来了 Java 的 getYear 这样的 Bug。

我目前是在职前端开发，如果你现在也想学习前端开发技术，在入门学习前端的过程当中有遇见任何关于学习方法，学习路线，学习效率等方面的问题，你都可以申请加入我的前端学习交流裙：前面：851 中间：231 最后：348。里面聚集了一些正在自学前端的初学者裙文件里面也有我做前端技术这段时间整理的一些前端学习手册，前端面试题，前端开发工具，PDF文档书籍教程，需要的话都可以自行来获取下载。

你要试着建立自己的知识架构，除此之外，还要学会追本溯源，找到知识的源头。成年人的学习不应该是知识，而是思维模型。

原著是一个有趣的人,若有侵权,请通知删除