博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
程序员练级攻略(2018):前端基础和底层原理
阅读量:6436 次
发布时间:2019-06-23

本文共 4632 字,大约阅读时间需要 15 分钟。

图片描述

这个是我订阅 陈皓老师在极客上的专栏《左耳听风》,我整理出来是为了自己方便学习,同时也分享给你们一起学习,当然如果有兴趣,可以去订阅,为了避免广告嫌疑,我这就不多说了!以下第一人称是指陈皓老师。

对于前端的学习和提高,我的基本思路是这样的。首先,前端的三个最基本的东西 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

  • ,本书面向初学者和中等水平 Web 开发人员,是牢固掌握 HTML5、CSS3 和 JavaScript 的必读之作。书看起来比较厚,是因为里面的代码很多。
  • ,如果你要做 HTML5 游戏的话,这本书必读。

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

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

最后是几个资源列表。

  • 。GitHub 上的 Awesome HTML5,其中有大量的资源和技术文章。

CSS

在《程序员练级攻略(2018)》系列文章最开始,我们就推荐过 CSS 的在线学习文档,这里再推荐一下

。我个人觉得只要你仔细读一下文档,CSS 并不难学。绝大多数觉得难的,一方面是文档没读透,另一方面是浏览器支持的标准不一致。所以,学好 CSS 最关键的还是要仔细地读文档。

之后,在写 CSS 的时候,你会发现,你的 CSS 中有很多看起来相似的东西。你的 DRY - Don’t Repeat Yourself 洁癖告诉你,这是不对的。所以,你需要学会使用 和

这两个 CSS 预处理工具,其可以帮你提高很多效率。

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

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

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

关于更多的 CSS 框架,你可以参看

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

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

JavaScript

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

  • ,中文翻译版为《JavaScript 语言精粹》。这是一本介绍 JavaScript 语言本质的权威图书,值得任何正在或准备从事 JavaScript 开发的人阅读,并且需要反复阅读。学习、理解、实践大师的思想,我们才可能站在巨人的肩上,才有机会超越大师,这本书就是开始。
  • ,中文翻译版为《JavaScript 忍者秘籍》,本书是 jQuery 库创始人编写的一本深入剖析 JavaScript 语言的书。适合具备一定 JavaScript 基础知识的读者阅读,也适合从事程序设计工作并想要深入探索 JavaScript 语言的读者阅读。这本书有很多晦涩难懂的地方,需要仔细阅读,反复琢磨。
  • ,Ecma 的 JavaScript 标准化委员会著名专家撰写,作者凭借多年标准化委员会工作和实践经验,深刻辨析 JavaScript 的内部运作机制、特性、陷阱和编程最佳实践,将它们高度浓缩为极具实践指导意义的 68 条精华建议。
  • 接下来是 ES6 的学习,这里给三个学习手册源。

    • ,InfoQ 上有相关的中文版 - 。还可以看看 ,或是看一下 。
    • ,这是一堆 ES6 工具的列表,可以帮助你提高开发效率。
    • ,这个 Cheatsheet 在 GitHub 上有 1 万 6 千颗星,你就可见其影响力了。
  • 然后,还有一组很不错的《》 的书。

  • 接下来是一些和编程范式相关的文章。

    • ,首先推荐这篇文章,其中收集了一些编程范式方面的内容,比如纯函数、状态、可变性和不可变性、指令型语言和声明式语言、函数式编程、响应式编程、函数式响应编程。
    • ,在第二部分中主要讨论了作用域和闭包,数据流,变更检测,组件化……
  • 下面三篇文章是德米特里·索什尼科夫(Dmitry Soshnikov)个人网站上三篇讲 JavaScript 内在的文章。

  • How JavaScript Works” 是一组非常不错的文章(可能还没有写完),强烈推荐。这一系列的文章是 SessionStake 的 CEO 写的,现在有 13 篇,我感觉可能还没有写完。这个叫 的 CEO 太猛了。

    • ,了解 V8 引擎。这里,也推荐 这篇文章可以让你了解 V8 引擎的底层字节码。
    • ,内存管理和 4 种常见的内存泄露问题。
    • ,Event Loop 和异步编程。
    • ,WebSocket 和 HTTP/2。
    • ,JavaScript 内在原理。
    • ,Web Workers 技术。
    • ,Service Worker 技术。
    • ,Web 端 Push 通知技术。
    • ,Mutation Observer 技术。
    • ,渲染引擎和性能优化。
    • ,网络性能和安全相关。
    • ,CSS 和 JavaScript 动画性能优化。
  • 接下来是 Google Chrome 的几篇 JavaScript 性能相关的文章,也是非常好的。

  • 其它与 JavaScript 相关的资源。

    • ,这是一篇很有价值的 JavaScript 处理 Unicode 的文章。
    • ,用 JavaScript 实现的各种基础算法库。
    • ,一堆你可以在 30 秒内看懂各种有用的 JavaScript 的代码,在 GitHub 上有 2 万颗星了。
    • ,一堆 JavaScript 搞笑和比较 tricky 的样例。
    • ,Airbnb 的 JavaScript 的代码规范,GitHub 上有 7 万多颗星。
    • ,YouTube 上的一个 JavaScript 模式分享,值得一看。

浏览器原理

你需要了解一下浏览器是怎么工作的,所以,你必需要看《》。这篇文章受众之大,后来被人重新整理并发布为《 browsers》,其中还包括中文版。这篇文章非常非常长,所以,你要有耐心看完。如果你想看个精简版的,可以看我在 Coolshell 上发的《》或是看一下。

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

  • 以及两个 Vitual-DOM 实现供你参考:

网络协议

  • ,本书是谷歌公司高性能团队核心成员的权威之作,堪称实战经验与规范解读完美结合的产物。本书目标是涵盖 Web 开发者技术体系中应该掌握的所有网络及性能优化知识。

    全书以性能优化为主线,从 TCP、UDP 和 TLS 协议讲起,解释了如何针对这几种协议和基础设施来优化应用。然后深入探讨了无线和移动网络的工作机制。最后,揭示了 HTTP 协议的底层细节,同时详细介绍了 HTTP 2.0、 XHR、SSE、WebSocket、WebRTC 和 DataChannel 等现代浏览器新增的能力。

  • 另外,也是 HTTP 的一个新的协议,于 2015 年被批准通过,现在基本上所有的主流浏览器都默认启用这个协议。所以,你有必要学习一下这个协议。下面相关的学习资源。

    • ()
    • HTTP/2 的两个 RFC:

      • ,HTTP/2 的协议本身。
      • RFC 7541 - HPACK: Header Compression for HTTP/2
  • 新的 HTML5 支持 ,所以,这也是你要学的一个重要协议。

    • ,这篇文章比较了 HTTP 的几种链接方式,Polling、Long Polling 和 Streaming,并引入了终级解决方案 WebSocket。你知道的,了解一个技术的缘由是非常重要的。
    • ,这是 StackOverflow 上的一个 HTTP 各种链接方式的比较,也可以让你有所认识。
    • ,一个 WebSocket 的简单教程。
    • ,GitHub 的 Awesome 资源列表。
    • 一些和 WebSocket 相关的想法,可以开阔你的思路:

小结

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

你们的点赞是我持续分享好东西的动力,欢迎点赞!

一个笨笨的码农,我的世界只能终身学习!

更多内容请关注公众号!

转载地址:http://iahga.baihongyu.com/

你可能感兴趣的文章
超级寒潮考验智慧城市万亿投资
查看>>
Radware发布2015-2016年全球应用及网络安全报告
查看>>
从“负电价”说起:谈谈德国新能源消纳的借鉴意义
查看>>
惠普大佬:未来30年四大趋势将推动科技产业发展
查看>>
大数据视域下网络涉军舆情管控研究
查看>>
光伏发电项目将全面摸底复核
查看>>
国内传感器市场也许正处在最好的时候
查看>>
单多晶之争:光伏技术要靠市场检验
查看>>
窄带物联网有望结束技术应用“碎片化”
查看>>
SaaS服务创投:场景多元化 平台建设稳中有序
查看>>
江苏:5G先行,智慧江苏再进一步
查看>>
烟台农业走进物联网大数据时代
查看>>
AT&T开源项目反客为主
查看>>
Web应用安全--攻防对抗发展趋势
查看>>
企业如何走出自己的CRM非常之道?
查看>>
整合看点: DellEMC的HCI市场如何来看?
查看>>
联合国隐私监督机构:大规模信息监控并非行之有效
查看>>
韩国研制出世界最薄光伏电池:厚度仅为人类头发直径百分之一
查看>>
中国移动2016年Web应用防火墙集采:绿盟、深信服中标
查看>>
惠普再“卖身”,软件业务卖给了这家鼻祖级公司
查看>>