入门前端一周年总结-我是如何快速入门前端的知识分享

概述

1.2号，是我入门前端的一周年，这一年里，自己也在不断摸索学习的方法。这里记录和分享下自己在平时生活中接触的学习资源。

先介绍下自己的经验，18年毕业，目前在南京工作，虽然大学学的是软件工程，直到大四才决定走这条路(因为之前打算出去做销售类似的工作)，发现自己的兴趣点，并且逐渐深入前端。本人大概是从7月份开始高强度的学习。

目前学习主要以书本（纸质书）、博客文章、少部分付费视频、练习网站为主。在这里分享一下自己的学习方式和资源。

个人习惯

笔者在看书或者学习的过程中，喜欢记笔记。目前笔记大概记了有十来本了。每本 B5 纸大概60页这样。所以导致看书的速度会慢的多。但是效果会比较好。

为什么钟爱记笔记，原因有3:

1. 自认为比较笨，认为好记性不如烂笔头。
2. 方便自己知识的查找。只要目录结构记得清晰点。
3. 方便自己进行知识整理的适合，对知识进行梳理，也方便了自己整理技术博客对适合进行知识查找。

当然，记笔记的习惯也有不好的地方。如：技术更新会导致笔记知识的技术落后或者造成误区。在我看来，利大于弊。

书籍推荐

JavaScript部分

JavaScript高级程序设计，这本书自己看了两遍，确实比较厚。但是对于基础非常重视，其实，在第二遍仔细看的过程中，发现很多细节性的东西自己之前没注意。所以，这本好书值得读不止一遍，前端的圣经。

JavaScript语言精粹，很薄的一本书，但是知识点很分明，作者很清晰的指出了 JavaScript 这门语言中精华部分和糟粕部分，此外，还讲解了一些编码的技巧，很受用。

编写可维护的 JavaScript，这本书也不厚，但是教给我很多编码的技巧，如何编写可读性很高，易维护的 JavaScript 代码。此外，这本书是基于 ES5 编写的。所以，很多技巧可以用 ES6 的语法进行替代。在这个过程中，自己又总结了下 ES6 代码和 ES5 的语法的区别，所以，我们要善于总结。

ES6 标准入门，很完整很细致的读完了一遍，工作中又经常翻这本书。真的是阮一峰老师的给力之作啊。强力推荐这本书。当然，也有电子稿。可以很深入的掌握 ES6 的语法，甚至将语法触及到 ES6+。

你不知道的 JavaScript ，上中下三卷。这三本书帮助我更加深入的了解了 JavaScript 这门语言。这本书基本是从语言的底层来剖析 JavaSCript，所以读的很慢。有机会会再次温习这三本书。强烈推荐

JavaScript 忍者秘籍，这本书的作者的目的是让这本书的读者成为真正的火影忍者，在我看来，这本书最大的特点是作者最大限度的结合了当下最流行的几个库(作者当时的时代，不是现在的MVVM)，教我们如何写出更好的代码，甚至是一个优秀的库。此外，作者对跨浏览器的策略描述的比较多(无奈跨浏览器实在提不上兴趣)，书中也大量运用 JQ 的思维。（因为作者就是JQ的作者）

JavaScript 函数式编程指南。这本书笔者暂时读了一半，读的有点懵，后来又补充了很多函数式编程的相关知识，等相关思维感觉成熟了，再重拾这本书。此外，笔者已经在编码中运用了函数式的思想来编码，还是很好的，这个是思维转换的过程，这个过程还是很痛苦的，慢慢的领略到函数式编程给我们带来的好处之后机会觉得很棒了。

高性能 JavaScript 这本书最近正准备看。

CSS书籍

CSS权威指南，很透彻的剖析了CSS2的各个属性，但是，我再读第二遍的时候，对其中对属性做一一尝试，发现很多知识点其实已经被标准修改了。所以，大家也要注意，不能盲目信任权威，要自我实践。此外，我特别喜欢作者列出对属性支持和应用的表格，很清晰。遗憾的是，没有CSS3部分的描述

CSS揭秘，这本书我只读了一半，读的过程中就不断感叹自己好菜，太打击自信了。作者是 CSS 组织的规范成员之一，那些技巧足够让我们眼前一亮。这本书，读一遍显然是不够的，我觉得重要的是要理解其中的思想。而不是把 CSS 当成一种工具来使用。唯一的缺点就是这本书有点小贵。全彩印 200 多页，定价是 90 多。(也是读者买过逼格最高的一本书哈)

CSS世界，是国内知名博主张鑫旭的鼎力之作，可是我还没有读。之后会抽时间来拜读，现在的我时间永远不够用，有点学不动了的感觉。

网络，计算机，算法相关知识

图解 HTTP，这本书算是我对 HTTP 很好的入门了，全书只有200页左右，花了周末两整天的时间读完了，很清晰易懂。大量的插图我也比较喜欢的。

图解 TCP，还没开始读，但是因为图解 HTTP 的缘故，我也会好好的读这本书的。

HTTP 权威指南，这本书太厚了，足足有 600 多页，现在笔者读了 300 多页了，读的比较慢，且记得笔记比较多。这让我第一次如此深入读了解 HTTP，虽然书很厚，但是读起来不会很晦涩，语言和朴实易懂。只能说，译者太厉害了。

计算机科学导论，这本书作者是这样解释的，是给未了解过计算机的人们普及计算机相关知识。但是我觉得就是在扯淡。全书读起来很晦涩，理解其中的内容，需要大量的计算机知识，要不然根本读不下来。我读的过程中，一边读，一边做习题。觉得对计算机的一些知识做了很好的储备，比如说：计算机的存储原理，整数以补码的形式存，浮点数以余码的形式存，为什么不用原码的形式存，这样做的好处有哪些？所以，这本书很值得一读。在读到一半的时候，读到了HTTP相关的知识，所以，直接转到了 HTTP 权威指南了。后面的算法，操作系统章节，自己都准备好了对应的书籍。

深入理解计算机系统，很厚的一本书，没有读。之后会抽时间读，现在时间安排的比较满。

TCP/IP 协议 （卷一），这本书也特别厚，但是总觉得自己对TCP/IP 协议的理解不够深刻，有时间会拜读这本书。

数据结构与算法 JavaSCript 描述，这本书只能作为我深入算法和数据结构的开胃菜，全书也就不到 200 页。还没开始读。

算法导论，最厚的一本书，目测有 1000 页左右。让我很恐惧，同事跟我说，这本书比较生涩，但是自己还是买下来了。深入了解了 HTTP 和 TCP 之后，会把重心放在 数据结构和算法 上。

浏览器内核的相关知识。

最近刚入手了一本书，叫 WebKit 技术内幕，是一本二手书，也是绝版书籍。我买过的最贵的一本书，要 200 多。翻了部分，自己非常喜欢。一个前端，怎么能不对自己整天打交道的工具 浏览器 进行一次近距离的了解呢。之前有大概了解过浏览器的渲染原理，但是目前的一些教程不满足自己的期望，深入的了解了这本书，自己对其中的原理和一些实践有一些自己的见解，后期会以博客的形式，以3到4篇到篇幅来详细介绍一下，从输入URL到页面到渲染完成，到底发生了什么。

学习资源

现在接触的很多都是 英文的网站，无奈自己英语太差，最多能以龟速读英文文章，视频基本听不懂，所以，准备苦练英语，没这玩意不行啊。 这里还是把我收藏的一些技术型网站或者博客推荐出来。

学习网站

这些资源都是本人平日中学习进行逐渐收集到的，对本人的学习起到了很大的帮助作用。 这些只是自己在学习的过程中用到的，并且今后还会一直用到。

前端基础知识

1. 首推 Frontend Master，光看到里面的讲师阵容，就吊起了我的兴趣，不过该视频是收费的，而且收费还不便宜，但是，优质的课程就值这个价不是吗？买不起怎么办？看下面

2. 推荐 egghead，该网站很多视频都是免费的，而且讲师阵容也很强大，很多知名库作者也都会在该网站做分享。如：Redux 的作者 Dan Abramov，所以，有一定的英语基础的可以收下。

3. 慕课网中一些免费的课程，和付费的课程质量也是相当高的，笔者当初就在慕课网上花 699 元购得 Vue.js 源码全方位深入解析，使自己对 Vue.js 的理解更加深入了。

4. Vue 技术内幕，该网站是开源的，也是 Vue 作者推荐的源码分析的首选，作者分析的很有层次，自己对着源码看这个教程，可以很有条理的解读源码，并且作者教会了我很多阅读源码的技巧。

5. 汤姆大叔的深入理解JavaScript系列，个人最开始接触到的技术博客，对于 JavaScript 有着比较深入的分析。

6. 2018年你应该知道的 15个 JavaScript 实用程序库，推荐了很多实用的 JavaScript 库，比如：笔者喜欢的 Ramda，还有很有实用意义的 30 seconds of code，我在后者的 30 seconds of code 中学到了很多编写函数的技巧。也通过该系列更加去深入了一些 JavaScript 中的高级函数的用法 如 reduce，filter等。虽然有中文翻译，但是建议跟着 github 上学习，因为中文翻译不会随着源代码更新。此外，还有其他等系列，如 CSS，React 都是相当不错的。

7. codewar，这是站外的练习网站，语言和 task 都比较全面。可能需要翻墙。大家自行选择。

8. leetcode，这是站内的专注于算法的练习网站。大家可以斟酌选择。

9. img标签中，不为人知的事情，该文章是关于 img 标签的一些隐藏的知识点，通过阅读这篇文章，可以更加清晰的了解 img 标签中一些知识。

网络相关知识

1. 车小胖技术博客，这是关于网络方面的技术博客，对网络对一些现象做了比较通透的解释，本人比较喜欢。

2. 车小胖，这个是文章系列，介绍网络相关的知识。想深入了解可以去看一下。

3. 图解基于 HTTPS 的 DNS，这是关于 dns 查询到过程，配上插图和文字到描述，可以对 dns 到查询过程有一个大概到了解。

4. howdns.works，完全用插图的形式来解释了 dns 的工作方式，非常形象。

函数式编程

1. functional light JavaScript，大神对轻量级的函数式编程做了透彻的讲解，英文原文，像我这样英语不怎么样的，读起来也不是很费力气。我在读的过程中对 异步数据流的控制，还有管道流数据，curry化，反curry化，偏函数的应用，point-free，与之前相比有了更加深刻的见解了。

2. 关于函数式编程的教程，这本电子教程，是一本很好的函数式编程教程

3. 关于范畴论的系列文章，这是系列文章，文章的一些内容有点晦涩难懂，但是可以对函数式底层的抽象，有了更好的理解。

4. 趣学Haskell，为了更好的学习函数式编程，我决定接触 Haskell ，这篇教程由浅入深，在学习过程中，再对比下 Ramda 的官方教程，才有点体会 Ramda 这样设计的原因。这条路不知道是不是有点偏了，但是，自己会利用其他时间来学习的。只是为了更好的理解。

5. 可视化学习 Rx.js，以动画的形式来展现 Rx.js，再也不需要那么抽象的学习 Rx.js，此外，还有 redux 等，也有相应等展示。

浏览器相关的知识

1. WebKit技术内幕作者的博客，很深入的讲解了浏览器内核对相关知识。

2. Chorme浏览器的全面教程，系统的描述了Chrome浏览器的信息，可以更加全面的了解Chrome浏览器，最给力的是所有的工具的使用介绍。

react相关

react相关的资源：前端时间从 vue 技术栈转到 react 的过程还是很平稳的，因为对当前流行框架的背后思想已经有了自己的一些见解。所以，过渡很平稳，本着 不光要学会怎么使用，还有透过本质理解背后的思想。这样才能最大化的发挥框架的力量。

1. react官网，我觉得最好的学习方法就是接触一手资源，官网应该精读，而不是作为一个参考的网站。就比如说 react hooks。我就是在最新的官网了解的，英文读起来不费劲。

2. react 小书，阮一峰老师的每周总结上看到的，这是我认为最开始学react，redux最好的教程，它不会教你怎么运用这些知识，它通过背后的思想告诉你，redux 为什么要有这个 API，没有这个功能会怎么样，以及自己怎么实现这样的功能，通过精读该教程，自己实现了一个简单版本的 redux 和 react-redux，当然啦，背后的思想最重要。后面自己又去看了下 redux 和 react-redux 库的官方实现，找出区别在哪，优化点有哪些，这些对于理解其背后的本质十分重要。

3. react-router，我直接学习的 V4 版本，该教程是英文的，但是代码居多，自己可以慢慢琢磨。

4. 大神吕思远、张立理、唐一等 6 位作者的知乎，虽然现在知乎逛的比较少，但是，还是有很多高质量的文章的，自己在学习 react 的过程中，难免会遇到很多困惑，如：PureComponent 的优化效率到底有多高，组件的状态 和 渲染是否应该都要分开，如何更高效的避免无意义的渲染，是否应该对组件进行更加细粒度的拆分。这些都应该在实践中去寻找答案，然后解惑。

5. React In Depth，大神justjavac的专栏，深刻的去理解 react 中的一些思想，还是那句话，思想大于代码，好的思想值得我们去借鉴，我们使用一个框架，必须要先去了解其思想。

6. 进击的react，大神 Morgan 的专栏，文章的内容很经典。

7. 国内React Fiber的布道者，我是看了他很多的文章，才有了学习的思路，很好的指路人。

其他

1. 阮一峰老师的博客，我就不列出来了，我们都应该经常去看一下。

2. 还有掘金上的文章也有好多，大家可以关注下我赞过的文章，我觉得质量都是很好的。

总结

这里我想说的是，实践要与理论并存，不能一味的看书，我的宗旨就是学以致用，我们应该善于思考和总结。学到的知识要思考如何更加有效的应用在实际项目中，笔者一般都是先看书，然后练习，成熟的方式会在实际项目中应用。如果大家有更好的方式，欢迎交流和学习。

以上是笔者目前自己遵循的学习方法，当然，学习的方式有很多种，笔者会不定期的更新，可能更新不会同步到掘金，我会在自己的GitHub pages上进行更新，欢迎大家关注并一起交流。如果有好的书籍或者学习方式的话，请推荐给我。感激不尽。

关于之后的计划，笔者将会把更多的重心放在 react，http，算法之上，同时，开始深入学习一些前端生态中的工具，如 node，webpack。