87 | 程序员练级攻略(2018):前端基础和底层原理

87 | 程序员练级攻略(2018):前端基础和底层原理

朗读人:柴巍    14′45′′ | 6.76M

对于前端的学习和提高,我的基本思路是这样的。首先,前端的三个最基本的东西 HTML5、CSS3 和 JavaScript(ES6)是必需要学好的。这其中有很多很多的技术,比如,CSS3 引申出来的 Canvas(位图)、SVG(矢量图) 和 WebGL(3D 图),以及 CSS 的各种图形变换可以让你做出非常丰富的渲染效果和动画效果。

ES6 简直就是把 JavaScript 带到了一个新的台阶,JavaScript 语言的强大,大大释放了前端开发人员的生产力,让前端得以开发更为复杂的代码和程序,于是像 React 和 Vue 这样的框架开始成为前端编程的不二之选。

我一直认为学习任何知识都要从基础出发,所以我会有很大的篇幅在讲各种技术的基础知识和基本原理,尤其是如下的这些知识,都是前端程序员需要一块一块啃掉的硬骨头。

  • JavaScript 的核心原理。这里我会给出好些网上很不错的讲 JavaScript 的原理的文章或图书,你一定要学好语言的特性和其中的各种坑。

  • 浏览器的工作原理。这也是一块硬骨头,我觉得这是前端程序员需要了解和明白的东西,不然,你将无法深入下去。

  • 网络协议 HTTP。也是要着重了解的,尤其是 HTTP/2,还有 HTTP 的几种请求方式:短连接、长连接、Stream 连接、WebSocket 连接。

  • 前端性能调优。有了以上的这些基础后,你就可以进入前端性能调优的主题了,我相信你可以很容易上手各种性能调优技术的。

  • 框架学习。我只给了 React 和 Vue 两个框架。就这两个框架来说,Virtual DOM 技术是其底层技术,组件化是其思想,管理组件的状态是其重点。而对于 React 来说,函数式编程又是其编程思想,所以,这些基础技术都是你需要好好研究和学习的。

  • UI 设计。设计也是前端需要做的一个事,比如像 Google 的 Material UI,或是比较流行的 Atomic Design 等应该是前端工程师需要学习的。

而对于工具类的东西,这里我基本没怎么涉及,因为本文主要还是从原理和基础入手。那些工具我觉得都很简单,就像学习 Java 我没有让你去学习 Maven 一样,因为只要你去动手了,这种知识你自然就会获得,我们还是把精力重点放在更重要的地方。

下面我们从前端基础和底层原理开始讲起。先来讲讲 HTML5 相关的内容。

HTML5

HTML5 主要有以下几本书推荐。

  • HTML5 权威指南 ,本书面向初学者和中等水平 Web 开发人员,是牢固掌握 HTML5、CSS3 和 JavaScript 的必读之作。书看起来比较厚,是因为里面的代码很多。

  • HTML5 Canvas 核心技术 ,如果你要做 HTML5 游戏的话,这本书必读。

对于 SVG、Canvas 和 WebGL 这三个对应于矢量图、位图和 3D 图的渲染来说,给前端开发带来了重武器,很多 HTML5 小游戏也因此蓬勃发展。所以,你可以学习一下。

学习这三个技术,我个人觉得最好的地方是 MDN。

最后是几个资源列表。

CSS

在《程序员练级攻略(2018)》系列文章最开始,我们就推荐过 CSS 的在线学习文档,这里再推荐一下 MDN Web Doc - CSS 。我个人觉得只要你仔细读一下文档,CSS 并不难学。绝大多数觉得难的,一方面是文档没读透,另一方面是浏览支持的标准不一致。所以,学好 CSS 最关键的还是要仔细地读文档。

之后,在写 CSS 的时候,你会发现,你的 CSS 中有很多看起来相似的东西。你的 DRY - Don’t Repeat Yourself 洁癖告诉你,这是不对的。所以,你需要学会使用 LESSSaSS 这两个 CSS 预处理工具,其可以帮你提高很多效率。

然后,你需要学习一下 CSS 的书写规范,前面的《程序员修养》一文中提到过一些,这里再补充几个。

如果你需要更有效率,那么你还需要使用一些 CSS Framework,其中最著名的就是 Twitter 公司的 Bootstrap,其有很多不错的 UI 组件,页面布局方案,可以让你非常方便也非常快速地开发页面。除此之外,还有,主打清新 UI 的 Semantic UI 、主要响应式界面的 Foundation 和基于 Flexbox 的 Bulma

当然,在使用 CSS 之前,你需要把你浏览器中的一些 HTML 标签给标准化掉。所以,推荐几个 Reset 或标准化的 CSS 库:NormalizeMiniRest.csssanitize.cssunstyle.css

关于更多的 CSS 框架,你可以参看Awesome CSS Frameworks 上的列表。

接下来,是几个公司的 CSS 相关实践,供你参考。

最后是一个可以写出可扩展的 CSS 的阅读列表 A Scalable CSS Reading List

JavaScript

下面是学习 JavaScript 的一些图书和文章。

浏览器原理

你需要了解一下浏览器是怎么工作的,所以,你必需要看《How browsers work》。这篇文章受众之大,后来被人重新整理并发布为《How Browsers Work: Behind the scenes of modern web browsers》,其中还包括中文版。这篇文章非常非常长,所以,你要有耐心看完。如果你想看个精简版的,可以看我在 Coolshell 上发的《浏览器的渲染原理简介》或是看一下这个幻灯片

然后,是对 Virtual DOM 的学习。Virtual DOM 是 React 的一个非常核心的技术细节,它也是前端渲染和性能的关键技术。所以,你有必要要好好学习一下这个技术的实现原理和算法。当然,前提条件是你需要学习过前面我所推荐过的浏览器的工作原理。下面是一些不错的文章可以帮你学习这一技术。

网络协议

小结

总结一下今天的内容。我一直认为学习任何知识都要从基础出发,所以今天我主要讲述了 HTML5、CSS3 和 JavaScript(ES6)这三大基础核心,给出了大量的图书、文章以及其他一些相关的学习资源。之后,我建议你学习浏览器的工作原理和网络协议相关的内容。我认为,掌握这些原理也是学好前端知识的前提和基础。值得花时间,好好学习消化。

下篇文章中,我们将讲讲如何做前端性能优化,并推荐一些好用的前端框架。敬请期待。

下面是《程序员练级攻略(2018)》系列文章的目录。

版权归极客邦科技所有,未经许可不得转载

精选留言

  • 小薛薛
    0.0 从零基础入门看到现在,这知识体量,好害怕。
    2018-07-31
    作者回复

    我用了20年,我能做到,你一定也能

    2018-07-31

  • 少年姜太公
    21世纪信息获取越来越便利了,网络上有各种书籍,博客,论文,有中文也有外文的。古代,资源匮乏,为了读一本书可能要跑很远借阅并手抄,而现代我们是生活在资源的海洋中,获取资源效率提高了。然而不幸的是在资源的海洋中,我们迷茫了,难以取舍。如何获取优良的资源并迅速掌握吸收转化为生产力已是竞争的核心。望陈老师加以开示。
    2018-07-31
    作者回复

    我没什么好的经验,我也是只有在看过所有的资料后才知道什么是好的。比较幸运的是,我的基础知识很扎实,所以学什么都很快。

    2018-08-02

  • 寻路之人
    耗哥,大概什么时候讲解一下,如何阅读来源项目源码的经验分享吗?期待中
    2018-07-31
  • 图·美克尔
    这系列真的看不动了…
    2018-07-31
    作者回复

    有时候,学习就像拉弓蓄力一样,学习基础知识感觉很枯燥很不实用,工作上用不到,然而学习这些知识是为了未来可以学得更快。基础打牢,学什么都快,别看我的专栏后面的那些文章很多,打好基础,那些就跟切菜一样。

    2018-08-02

  • 小柒
    终于等到前端了,react和vue学习资源好少啊
    2018-07-31
    作者回复

    还没到呢

    2018-07-31

  • Geek_1af8d3
    没想到看到这个领域,耗子叔还是能带来惊喜
    2018-08-02
  • Geek_1af8d3
    没想到看到这个领域,耗子叔还是能带来惊喜
    2018-08-02
  • 朵朵李
    以我自己的经验,CSS需要学习一些基础,例如布局,动画,选择器,适配等,剩下的主要是从优秀的框架例如bootstrap学习如何利用LESS,SASS等预处理器的变量,函数,mixin等,完成组件,页面到整站的模块化,体系化。当然跟JS类似,后处理器逐渐流行,所以POSTCSS也需要了解使用。JavaScript感觉主要是权威指南夯实基础,ES6 ES7等学习掌握,其他的书籍辅助,至少后处理器babel要会用,喜欢严格的就学习使用TS。其实后期前端大家主要围绕着工程化来了,webpack必须要会了,gulp可以了解一下,Nodo在工程化中起着决定性的力量,也是不学不行的。
    2018-08-01
  • _俊腾
    耗子叔,es6的学习推荐exploring es6,它有一个免费的在线版本http://exploringjs.com/es6/index.html
    2018-07-31
  • 方式方法
    20年的功力果然不一般啊!
    2018-07-31
  • 邱桂新
    您用了二十年,谁能像您一样花二十年学这些?(纯疑问)
    2018-10-04
  • 是小小白啊
    《你不知道的JavaScript》也很不错,对JavaScript的剖析也很深入,语言也比较风趣,很适合有一定基础的人读。
    2018-09-19
  • 秋天
    老师这是把收藏夹里的东西都倾倒出来啦????
    2018-08-22
  • 丑石
    去看了一下Alexander Zlatkov在medium上的文章,果然篇篇精品。大牛!
    2018-08-18
  • 屈超
    安卓学习路线可以参考这个:https://github.com/JsonChao/Awesome-Android-Notebook
    2018-08-14
  • 木 易
    大数据方面的会有吗?hadoop spark
    2018-08-13
  • 付剑津
    耗子叔,在学JavaScript,但有朋友说TypeScript更值得学,按照我的观念,先学好JavaScript肯定是没错的,但还是想来请教下耗子叔,嘿嘿
    2018-08-08
  • Grace微雪
    要学的东西太多了…🤪
    2018-08-04
  • sunshine
    我服了。加油吧。要学习的东西太多了。
    2018-08-01
  • Alvin
    耗子叔,阮一峰的书是人家自己写的,不是翻译的
    2018-07-31
  • xch
    皓叔会讲移动端相关的知识吗
    2018-07-31
    作者回复

    移动端,我不懂啊

    2018-08-01

  • 许松1995
    耗子哥,这个攻略里会提到PHP相关的文章吗?
    2018-07-31
    作者回复

    不会!

    2018-07-31

  • 齐帜
    耗子叔,请问《JavaScript权威指南》和《JavaScript高级程序设计》呢
    2018-07-31
  • KingPoker
    全栈
    2018-07-31
  • 陈敬秀
    耗子叔,如何去体味各种语言中的坑呢?
    2018-07-31
    作者回复

    参看《编程范式游记》

    2018-07-31

  • 沫沫(美丽人生)
    陈老师,早上好,我们团队现在正在做一个自动建站的项目,主要是广告的landing page和blog形式的,想请教一下,您有没有这方面的开源框架可以推荐,谢谢啦!
    2018-07-31