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

概述

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

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

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

个人习惯

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

为什么钟爱记笔记，原因有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到页面到渲染完成，到底发生了什么。

学习资源

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

学习网站

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

前端基础知识

首推 Frontend Master，光看到里面的讲师阵容，就吊起了我的兴趣，不过该视频是收费的，而且收费还不便宜，但是，优质的课程就值这个价不是吗？买不起怎么办？看下面
推荐 egghead，该网站很多视频都是免费的，而且讲师阵容也很强大，很多知名库作者也都会在该网站做分享。如：Redux 的作者 Dan Abramov，所以，有一定的英语基础的可以收下。
慕课网中一些免费的课程，和付费的课程质量也是相当高的，笔者当初就在慕课网上花 699 元购得 Vue.js 源码全方位深入解析，使自己对 Vue.js 的理解更加深入了。
Vue 技术内幕，该网站是开源的，也是 Vue 作者推荐的源码分析的首选，作者分析的很有层次，自己对着源码看这个教程，可以很有条理的解读源码，并且作者教会了我很多阅读源码的技巧。
汤姆大叔的深入理解JavaScript系列，个人最开始接触到的技术博客，对于 JavaScript 有着比较深入的分析。
2018年你应该知道的 15个 JavaScript 实用程序库，推荐了很多实用的 JavaScript 库，比如：笔者喜欢的 Ramda，还有很有实用意义的 30 seconds of code，我在后者的 30 seconds of code 中学到了很多编写函数的技巧。也通过该系列更加去深入了一些 JavaScript 中的高级函数的用法如 reduce，filter等。虽然有中文翻译，但是建议跟着 github 上学习，因为中文翻译不会随着源代码更新。此外，还有其他等系列，如 CSS，React 都是相当不错的。
codewar，这是站外的练习网站，语言和 task 都比较全面。可能需要翻墙。大家自行选择。
leetcode，这是站内的专注于算法的练习网站。大家可以斟酌选择。
img标签中，不为人知的事情，该文章是关于 img 标签的一些隐藏的知识点，通过阅读这篇文章，可以更加清晰的了解 img 标签中一些知识。

网络相关知识

车小胖技术博客，这是关于网络方面的技术博客，对网络对一些现象做了比较通透的解释，本人比较喜欢。
车小胖，这个是文章系列，介绍网络相关的知识。想深入了解可以去看一下。
图解基于 HTTPS 的 DNS，这是关于 dns 查询到过程，配上插图和文字到描述，可以对 dns 到查询过程有一个大概到了解。
howdns.works，完全用插图的形式来解释了 dns 的工作方式，非常形象。

函数式编程

functional light JavaScript，大神对轻量级的函数式编程做了透彻的讲解，英文原文，像我这样英语不怎么样的，读起来也不是很费力气。我在读的过程中对异步数据流的控制，还有管道流数据，curry化，反curry化，偏函数的应用，point-free，与之前相比有了更加深刻的见解了。
关于函数式编程的教程，这本电子教程，是一本很好的函数式编程教程
关于范畴论的系列文章，这是系列文章，文章的一些内容有点晦涩难懂，但是可以对函数式底层的抽象，有了更好的理解。
趣学Haskell，为了更好的学习函数式编程，我决定接触 Haskell ，这篇教程由浅入深，在学习过程中，再对比下 Ramda 的官方教程，才有点体会 Ramda 这样设计的原因。这条路不知道是不是有点偏了，但是，自己会利用其他时间来学习的。只是为了更好的理解。
可视化学习 Rx.js，以动画的形式来展现 Rx.js，再也不需要那么抽象的学习 Rx.js，此外，还有 redux 等，也有相应等展示。

浏览器相关的知识

WebKit技术内幕作者的博客，很深入的讲解了浏览器内核对相关知识。
Chorme浏览器的全面教程，系统的描述了Chrome浏览器的信息，可以更加全面的了解Chrome浏览器，最给力的是所有的工具的使用介绍。

react相关

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

react官网，我觉得最好的学习方法就是接触一手资源，官网应该精读，而不是作为一个参考的网站。就比如说 react hooks。我就是在最新的官网了解的，英文读起来不费劲。
react 小书，阮一峰老师的每周总结上看到的，这是我认为最开始学react，redux最好的教程，它不会教你怎么运用这些知识，它通过背后的思想告诉你，redux 为什么要有这个 API，没有这个功能会怎么样，以及自己怎么实现这样的功能，通过精读该教程，自己实现了一个简单版本的 redux 和 react-redux，当然啦，背后的思想最重要。后面自己又去看了下 redux 和 react-redux 库的官方实现，找出区别在哪，优化点有哪些，这些对于理解其背后的本质十分重要。
react-router，我直接学习的 V4 版本，该教程是英文的，但是代码居多，自己可以慢慢琢磨。
大神吕思远、张立理、唐一等 6 位作者的知乎，虽然现在知乎逛的比较少，但是，还是有很多高质量的文章的，自己在学习 react 的过程中，难免会遇到很多困惑，如：PureComponent 的优化效率到底有多高，组件的状态和渲染是否应该都要分开，如何更高效的避免无意义的渲染，是否应该对组件进行更加细粒度的拆分。这些都应该在实践中去寻找答案，然后解惑。
React In Depth，大神justjavac的专栏，深刻的去理解 react 中的一些思想，还是那句话，思想大于代码，好的思想值得我们去借鉴，我们使用一个框架，必须要先去了解其思想。
进击的react，大神 Morgan 的专栏，文章的内容很经典。
国内React Fiber的布道者，我是看了他很多的文章，才有了学习的思路，很好的指路人。

其他

阮一峰老师的博客，我就不列出来了，我们都应该经常去看一下。
还有掘金上的文章也有好多，大家可以关注下我赞过的文章，我觉得质量都是很好的。

总结

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

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

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