关于javascript:29天吐血整理前端学习路线送给那些正在自学或准备自学前端的人

前言

最近这段时间常常有敌人问我 前端技术当初如此繁冗，我到底应该如何学习。这个话题太大了，几句话答复不好；也因为这个问题的确困扰了很多前端开发人员，所以我也就着手零碎的输入这篇文章。

尽管这篇文章花了很长时间，必定也有其局限性；心愿各位不吝指出。

入题

咱们俨然能感触到前端岗位当初曾经倒退成了最重要的研发岗位之一，所以对咱们提出的要求也就越来越高。所以咱们须要学的也就不仅仅只是 CSS & HTML & JavaScript 了。但这三大件始终都是前端的基本，这一点从未扭转。而这三大件中 JavaScript 又是重中之重。

接下来我会联合我的一点教训，给出前端学习路线的一些具体倡议。

目录

• 三大件学习
• 库工具
• 前端框架（MVVM）的学习
• 浏览器 & 计算机根底
• 前端工程化
• 性能优化
• Nodejs
• 数据结构和算法
• 依葫芦画瓢

三大件学习

当初每年仍旧有很多高级入门的前端开发。所以对初入门的敌人也给出一点意见。

刚入门的敌人，我感觉不应该一开始就学习像 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 高级程序设计》写了 700 多页；不过当你 JS 根底扎实后，你会发现你在学习框架、亦或是学习框架源码的时候会轻松许多。

JavaScript（ES6+）你须要理解的一些知识点

• 类型转换
• this
• 作用域（作用域链）
• 原型链以及继承
• 闭包的了解
• 动静作用域和词法作用域
• JavaScript 执行机制
• promise & async
• ……

下面说的 CSS & HTML & JavaScript 的根底知识点并不需要你一入门就全副都了解透彻；有些尽管是根底，但却也有它的难度。就算是高级也不敢说本人全都把握了，有句话说的挺好 —— 书读百遍、其义自见。

咱们第一遍学习不可能尽懂，到起码能够给我留下一个印象。过一段时间再学习这块知识点的时候，你必定会有一个全新的了解。学习只一个须要始终在线的工作，反复的学习能够帮忙你放弃继续的竞争力。

我先申明一点，我并没有说其余技术不须要去学习，只不过初入门最好重点是先将根底夯实。

其实三大件的学习不须要破费多少工夫，有根底的大略 3 个月就能够大抵的看一遍。是否真的了解这是后话，不过曾经算是入门了。

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

HTML

• 《Head First HTML 与 CSS》

Head Fisrt 系列书你懂的，为入门而生，文笔有趣风趣为主，配图也很丰盛，简略易懂就对了。

• 《HTML5 权威指南》

豆瓣评分 8.5 的书，书是没问题，800多页的书全面性不用说，然而能不能读得完这是一个问题，就看信心和“手速”了。

• 网络教程

  • https://www.w3school.com.cn/h.asp
  • https://www.runoob.com/html/html-tutorial.html
  • https://developer.mozilla.org/
• • *

CSS

• 《CSS 权威指南》

放在当初来看是本“老书”了，然而很多根底的货色在那摆着也得学。CSS 货色就是细节多，这本就当是给 CSS 的知识点做了一个大梳理吧，所以这本书当工具书看是能够。

• 《CSS 揭秘》

这本书展现了 47 个 CSS 的技巧，是一本重视实际的教程，尽管算进阶书，然而内容没那么难，看完对很多实现思路有启发。

• 网络教程

  • https://www.runoob.com/css/css-tutorial.html
  • https://www.w3school.com.cn/css/index.asp
  • https://developer.mozilla.org/
• • *

JavaScript 语言

• 《你不晓得的 JavaScript》

这本书是翻译过去的，分好几卷，黄油油的封面你懂的~ 应该说这本书把 JavaScript 里很多简单且深度的概念进行了粗疏解说，比方作用域、闭包、原型、异步等等，网上书评啥的还是能够的。

• 《JavaScript DOM 编程艺术》

这本书并不厚，小白可用，初学时搞定并实际了这本书里的内容，应该入门没啥问题，这样前面就能够找一些经典甚至圣经类的书来增强和坚固了。

• 《JavaScript 高级程序设计》

赫赫有名的 JS 红宝书，是权威的 JavaScript 入门书籍，没错是入门书籍！不要被名字里的“高级”两个字吓跑~ 内容循序渐进，根底且全面，不能指望一遍就过，适宜精读也适宜回味。

• 《JavaScript 权威指南》

下面是“红宝书”，这本是“犀牛书”，据说这两本在一起更搭配哦。

这本书是淘宝前端团队翻译的，也算是 JavaScript 开发者的圣经之一，内容太多太全，如果能多通读几遍并有所心得，预计成神之路也就不远了~

• 网络教程

  • 菜鸟教程：https://www.runoob.com/js/js-tutorial.html
  • 古代 JavaScript 教程：https://zh.javascript.info/
  • MDN 文档：https://developer.mozilla.org/

库工具

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

• JQuery: 升高开发者操作 DOM 的复杂度
• UnderScore: 提供实用的函数
• Zepto: JQuery 的简化版
• Moment: 日期和工夫操作库

这些库给咱们提供了很大的便当，省去了咱们编写相干办法的工夫，同时也是咱们的程序更加持重 —— 咱们本人写的办法很可能在某些状况下就出 bug 了。

当然对于这些库咱们不仅仅只是去理解 API，咱们须要去学习它的源码。看看如果本人写相干办法的话是不是也想到了这种形式，这些库工具是也是一个很好地学习工具，咱们不应该疏忽。

• 比方让你本人实现节流函数，你会如何实现。
• 过滤对象应该如何实现
• ……

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

咱们在学习库工具的时候，必然是须要回头看 JavaScript 根底的；这也就进一步夯实了根底。

前端框架（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 相干材料

对于框架的一些学习材料我集体更偏向于举荐官网文档，有很多问题官网文档曾经说得很分明了。市面上有些书籍也就是对官网文档进行了一个扩写（不排除有精良之作）。

1. Vue 官网 & Vue Router 官网 & Vuex 官网
2. 分析 Vue.js 外部运行机制 掘金小册
3. vue 技术揭秘

浏览器 & 计算机根底

如果你心愿能能疾速进阶到高级工程师，那么对于浏览器 & 计算机根底的常识你就必要又有肯定的把握。因为这能让你更好的了解前端。

浏览器始终是 JavaScript 最重要的宿主环境，所以咱们必须去理解 JavaScript 在浏览器中是如何执行的。

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

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

1. 精确评估 Web 开发我的项目的可行性
2. 从更高维度扫视页面
3. 解决面试中遇到的绝大部分浏览器问题

计算机根底

对于计算机根底咱们须要做到大体理解，这样的话咱们对整体的流程会有一个大略的把握。在理论开发过程中不会过于被动。

须要理解的一些知识点

• 浏览器缓存机制
• 浏览器中 JavaScript 的执行机制
• 页面渲染原理
• 浏览器平安问题
• 浏览器为什么会跨域
• 如何零碎的优化页面
• HTTP 与 HTTPS 的区别
• TCP/IP 协定
• 三次握手和四次挥手
• CDN 的作用和原理
• 正向代理与反向代理的特点
• ……

这里仅仅列出了一部分知识点，如果想全面的学习能够看上面举荐的材料。

浏览器 & 网络根底举荐书籍 / 材料

1. 《浏览器工作原理与实际》专栏
2. 《图解 HTTP》
3. 《网络是怎么连贯的》

前端工程化

从事前端略微久一点的开发就肯定会有这个感触 —— 前端开发越来越工程化，越来越简单。

对于前端开发来说，当初前端要做的不只是切页面调接口这么简略，咱们须要理解的技术无疑更加宽泛。

前端工程化的一点浅见

因为我的项目的复杂度越来越高，前端须要做的工作就越来越沉重。当我的项目简单就会产生许多问题，比方：

• 如何进行高效的多人合作？
• 如何保障我的项目的可维护性？
• 如何进步我的项目的开发品质？
• 如何升高我的项目生产的危险？

前端工程化细分的话我感觉能够分成模块化、组件化、规范化三个方向。或者说所有能晋升前端开发效率，进步前端利用品质的伎俩和工具都是前端工程化的实际。

模块化

• JavaScript 模块化
• CSS 模块化
• 资源模块化

组件化

从 UI 拆分下来的每个蕴含模板 (HTML)+ 款式(CSS)+ 逻辑(JS) 性能齐备的结构单元，咱们称之为组件。

也就是将简单页面按性能拆分成多个独立的组件。

规范化

• 编码标准
• 接口标准
• git 应用标准
• CodeReview
• UI 元素标准

前端工程化一些知识点

• 了解 Babel、ESLint、webpack 等工具在我的项目中的作用
• Babel 的外围原理
• Webpack 的编译原理、构建流程、热更新原理
• nginx 的根本了解
• 了解 Git 的工作流程
• Mock 的意义及长处

性能优化

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

从输出 URL 到页面加载实现的具体过程

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

性能优化当初对于前端来说曾经是必不可少的技能了，当然当初有些所谓的性能优化的技巧当初都成为了一种须要听从的标准。

咱们须要关注两个方向的性能优化：

1. 运行时的优化
2. 开发时的优化

性能优化一些知识点

• 前端性能掂量指标、性能监控（performance,LightHouse）
• 常见的性能优化计划有哪些
• SSR 计划的性能优化
• Webpack 的性能优化计划
• React、Vue 等框架使用性能优化计划
• 网络层面的优化计划
• 页面渲染层面的优化计划
• 白屏的优化计划
• ……

举荐材料

• 《大型网站性能优化实战》
• 《前端性能优化原理与实际》掘金小册

Nodejs

咱们晓得因为 Nodejs 的呈现，前端开发呈现了一个新的低潮。JS 开始能够波及后端畛域，JS 的可能性更大了。

Nodejs 一些知识点

• Nodejs 在应用程序中的作用
• Express 和 Koa 的区别
• Nodejs 的底层运行原理、和浏览器的异同
• Nodejs 非阻塞机制的实现原理
• ……

数据结构和算法

这一点我也比拟单薄，就不开展了。对于这部分你能够刷 leetcode。

另外推一本书《学习 JavaScript 数据结构与算法》（第三版）

依葫芦画瓢

咱们在我的项目开发的过程中能够接触到很多优良的库工具或者是 UI 库。如 lodash、underscore、moment、element-ui、antd design 等。

咱们可能本人设计不进去这么优良的工具，然而咱们齐全能够依葫芦画瓢本人按着这些工具写一遍，你就会发现外面有很多不堪设想的技巧、优良的思维。

依葫芦画瓢对学习来说也是一个十分有用的技巧。

最初

说个题外话，我在一线互联网企业工作十余年里，领导过不少同行后辈。帮忙很多人失去了学习和成长。

我意识到有很多教训和常识值得分享给大家，也能够通过咱们的能力和教训解答大家在 IT 学习中的很多困惑，所以在工作忙碌的状况下还是保持各种整顿和分享。

我能够将最近整顿的前端面试题收费分享进去，其中蕴含 HTML、CSS、JavaScript、服务端与网络、Vue、浏览器等等，还在继续整顿更新中，心愿大家都能找到心仪的工作。

有须要的敌人 点击这里收费支付题目 + 解析 PDF。

点击这里收费支付题目 + 解析 PDF。