左耳听风_088_87_程序员练级攻略前端基础和底层原理
你好，我是陈浩网名左耳朵耗子。
今天这节课开始呢，我们就正式进入前端的学习。
对于前端的学习和提高呢，我的基本思路是这样的。
首先前端的三个最基本的东西也就是TML五，CSS三和javascript是必须要学好的这其中呢有很多很多的技术，比如说CSS三衍申出来的canvas SAG和FGL,还有CSS的各种图形变换，可以让你做出非常丰富的渲染效果和动画效果。
而ES六呢简直就是把javascript带到一个新的台阶。
Javascript语言的强大大大释放了前端开发人员的生产力，让前端呢可以开发更为复杂的代码和程序。
于是像react和view这样的框架，开始成为前端边程的不二之选。
我一直认为呢学习任何知识啊都要从基础出发。
所以这节课呢我会着重介绍基础知识和基本原理。
尤其是接下来讲的这些知识啊，都是前端程序员需要花力气砍下来的硬骨头。
那第一呢就是javascript的核心原理。
这里呢我会给出好些网上很不错的讲javascript原理的文章或者图书啊，你一定要学好语言的特性，并且呢详细了解其中的各种坑。
第二是浏览器的工作原理。
那这个呢也是一块硬骨头，我觉得这是前端程序啊需要了解和明白的关键知识点，不然呢你就无法深入下去。
第三是网络协议HTTP.那这个呢也是需要着重了解的啊，尤其是HTTP two,还有HTTP的几种请求方式，包括短连接、长连接stream连接，还有web socket的连接。
第三呢就是前端性能的调优。
有了前面的这些基础之后呢，你就可以进入前端性能调优的主题了。
我相信啊你可以很容易上手，各种性能调优技术的。
第四呢是框架学习。
我这里呢只给了react和view两个框架。
就这两个框架来说呢，virtudom技术是底层技术，组件化呢是思想，而管理组件的状态呢是重点。
而对于react来说呢，函数式编程又是它的编程思想。
所以呢这些基础技术都是需要你好好研究和学习的。
第五呢是UI设计，设计呢也是前端需要做的一个事儿。
比如说像google materiiu、 II或者是比较流行的atomic design等等，都应该是前端工程师需要学习的。
而对于工具类的东西呢，这里我基本没怎么设计啊，因为这节课呢主要还是从原理和基础入手。
那些工具呢我觉得都很简单，就像学习java,我没有让你去学习mava一样。
因为啊只要你去动手了，那这种知识呢你自然就可以获得。
所以我们呢还是把精力重点放在更重要的地方。
那接下来呢我们从前端基础和底层原理开始讲起，我们先来讲一讲HTMM五相关的内容。
H千点五方面呢，我主要推荐这几本书，第一本叫做HTML权威指南。
这本书面向初学者和中等水平的web开发人员，是牢固掌握HTM mail五CSS三和javascript的必读之作。
这本书呢看起来比较厚啊，是因为里面的代码呢很多。
第二本呢是HTLL canvas核心技术。
那如果你要做HTL五游戏的话，这本书必读对于SVG、 temas和web GL这三个对于矢量图位图和三d图的渲染来说呢，它给前端开发带来了重武器，很多h taml五小游戏呢也因此蓬勃发展。
所以呢你可以学习一下学习这三个技术呢，我个人觉得最好的地方呢是MDN.最后呢我在文稿中啊给了你几个资源列表啊，方便你查看。
然后呢，我们再来说一说css相关的内容。
在程序员练习攻略系列文章。
最开始呢我们就推荐过CSS的在线学习文档。
那这里呢我再推荐一下MDN web doc CSS.我个人觉得啊，只要你仔细读一下文档，CSS上并不难学，绝大多数觉得难的呢，一方面是文档没有读透，另一方面呢是浏览器知识的标准不一致。
所以说学好CSS最关键的呢还是要仔细的。
读文档之后再写CSS的时候呢，你会发现你的CSS中呢有很多看起来相似的东西。
你的DRY洁癖告诉你，这是不对的。
所以呢你需要学习las和sars这两个CSS预处理工具。
那他们呢可以帮你提高很多的效率，然后呢你需要学习一下CSS的书写规范。
前面的程序员修养一文中呢提到过一些。
那这里呢我在文章内啊再补充几个。
如果你需要更有效率呢，那么你还需要使用一些CSF framework.这其中最著名的就是twitter公司的boost drag,它有很多不错的UI组件和页面布局方案，可以让你非常方便，也非常快速的开发页面。
除此之外呢，还有主打清新UI的symmatic UI,主打响应式页面的foundation,还有基于flex box的bomer.当然呢在使用CSS之前啊，你需要把浏览器中的一些HTL标签给标准化掉。
所以这里呢我推荐几个reset或者标准化的CSS库啊，分别是normalize mini、 reset、 CSS、 sunny times CSS和unstyle CSS.那关于更多的CSS框架呢，你可以参看awesome CSS framework上面的列表。
接下来呢文内有几个公司的CSS相关实践供你参考。
最后呢是一个可以写出来可扩展的CSS的阅读列表，a scalable CSS reading list.说完了h tell al和CSS.那接着呢我们来谈一谈如何学习javascricript,我先来推荐一些学习javascript图书和文章。
第一个是javascript. The good part中文翻译版呢叫做javascript语言精粹。
这个呢是一本介绍javascript的语言本质的权威图书，而值得任何正在从事或者准备从事javascrippt开发的人阅读。
并且呢需要反复的阅读学习，理解实践大师的思想，我们才有可能站在巨人的肩上啊，才有机会超越大师。
那这本书呢就是开始。
第二个呢是secret of jjavascript演讲中文翻译版叫做javascript的忍者秘籍。
这本书呢是j query库创始人编写的一本深入剖析javascript语言的书，它适合具备一定javascript基础知识的读者阅读，也适合从事程序设计工作，并想要深入探索javascript语言的读者阅读。
这本书呢有很多晦涩难懂的地方，需要仔细阅读，反复琢磨。
那第三个呢是effective javascript,那这个呢是ECMA的javascript.标准化委员会的著名专家撰写作者凭借多年标准化委员会的工作和实践经验，深刻辨析了javascript内部的运作机制、特性、陷阱和编程的最佳实践，将它们高度浓缩为非常具有实践指导意义的六十八条精华。
建议接下来是ES六的学习。
那这里呢我推荐三个学习手册源，第一个是ES six in depth info, q上有相关的中文版叫做ES六。
深入浅出，你还可以看一看a simple interactive ES six speeerlist,或者看一下软硬风翻译的ES六的教程。
第二个ECMS cricritictic tools,这是一堆的ES六工具的列表，它可以帮助你提高开发效率。
第三个modern JS kitsheet这个cheat sheet在gigihub上面有一万六千颗星，可见它的影响力有多大。
然后文稿中呢还有一组很不错的you donno这样系列的书。
那接下来呢是一些和编程范式相关的文章。
第一篇a lottery of modern javascript concepts part one.首先呢我推荐这篇文章，这其中呢收集了一些编程范式式方面的内容。
比如说函函数态可变变性，不可变性、函数型语言和生命式语言、函数式编程、响应式编程，还有函数式响应编程。
第二篇glossy of modern javascripe concepts her too.那第二部分呢主要讨论的作用率和皮包数据流链更检测，还有组件化等等。
文中还有三篇文章呢是德米特里索什尼科夫个人网站上三篇讲javascript内在的文章。
另外呢how javascript works是一组非常不错的文章，强烈推荐这一系列的文章呢是session stake的CEO写的。
现在呢有十三篇，我感觉可能还没有写完，这个叫亚历山大茨拉特科夫的CEO太猛了。
这十三篇文章呢你有兴趣可以打开文中的链接看一看。
那这里呢我就不再一个一个的介绍了。
接下来是google chrome工程经理阿迪奥斯马尼的两篇javascript性能相关的文章也是非常好的。
第一篇the cost of javascript,第二篇，javascript data performance.然后呢，还有一些其他的与java slip相关的资源。
第一篇，javascript has uniquode problem,这是一篇很有价值的javascript处理unicode的文章。
第二篇，javascript algorithms用javascript实现的各种基础算法库。
第三篇，javascript三十秒代码一堆的，你可以在三十秒内看到呢，各种有用的javascript代码，在github上面有两万颗星了。
第四篇word, fuck javascript是一堆的javascript搞笑和比较tricy的样例。
第五篇LBNB javascript style guide MBNB的javascriript代码规范lehalf上面啊有七万多颗星。
最后第六篇javascript partners for twenty seventeen,是youtube上面的一个javascriript模式分享，值得一看。
那除了前面讲的这三个最基本的东西啊，你还需要了解一下浏览器是怎么工作的。
所以呢你必须要看how brothers work这篇文章受众之大呀，后来呢被人重新整理，并发布为how brothers work behind the scenes of modern back brothers.那其中呢还包括中文版，这篇文章呢非常非常的长。
所以呢你要有耐心来看完。
那如果你想看一个精简版的，可以看我在酷shl上发表的浏览器的渲染原理简介啊，或者看一个幻灯片。
然后呢是对virtue dom的学习。
Virtudom呢是react一个非常核心的技术细节，那它呢也是前端渲染和性能的关键技术。
所以呢你有必要好好学习一下这个技术的实现原理和算法。
那当然呢前提条件是你需要学习过前面我所推荐过的浏览器的工作原理。
那文中呢我推荐了一些很不错的文章，可以帮你学习这一技术。
最后呢我建议你啊学习一下网络协议方面的内容。
首先呢我推荐一本书叫做high performance brother networking.这本书呢是google高性能团队核心成员的权威之作，堪称实战经验与规范解读完美结合的产物。
这本书目标呢是涵盖部开发者技术体系当中应该掌握的所有网络和性能优化的知识。
全书以性能优化为主线，从TCPUDP和TLS协议讲起，解释了如何针对这几种协议和基础设施来优化应用，然后呢深入探讨了无线和移动网络的工作机制。
最后呢揭示了HTTP协议的底层细节。
同时呢详细介绍了HTTP二点零XHRSSE web socket、 web RTC和data channel等等现代浏览器新增的能力。
另外HTTP二也是HTTP的一个新的协议，它是在二零一五年批准通过的那现在基本上所有的主流浏览器都默认启用了这个协议。
所以呢你有必要学习一下这个协议，文中呢我放了相关的学习资源链接，而且新的HTM五呢支持web socket.所以这也是你要学的一个重要协议。
我在文中啊同样给你列了很多相关的学习资料。
好了，我总结一下今天的内容，我一直认为呢学习任何知识都要从基础出发。
所以今天呢我主要讲述了HTNL五CSS三和javascript这三大基础核心给出了大量的图书文章和其他一些相关的学习资源。
之后呢，我建议你学习浏览器的工作原理和网络协议相关的内容。
我认为呢掌握这些原理啊，也是学好前端知识的前提和基础，值得花时间好好的学习消化。
在下节课呢我们会讲一讲如何做前端的性能优化，并推荐一些好用的前端框架，敬请期待。