想要阅读更多优质文章，请戳GitHub博客，一年百篇优质文章等你来！这是我在极客上给陈昊老师订阅的专栏《左耳听风》。整理出来是为了自己方便，分享给大家一起学习。当然，如果你有兴趣，你可以订阅。为了避免打广告的嫌疑，我这里就不多说了！以下第一人称陈浩先生。对于前端的学习和提升，我的基本思路是这样的。首先前端最基础的三个东西HTML5、CSS3和JavaScript（ES6）一定要学好。有很多很多的技术，比如从CSS3衍生出来的Canvas（位图）、SVG（矢量图）和WebGL（3D图形），还有CSS的各种图形变换，可以让你做出非常丰富的渲染效果和动画效果.ES6只是将JavaScript提升到了一个新的水平。JavaScript语言的强大极大的释放了前端开发者的生产力，让前端可以开发更复杂的代码和程序，于是像React、Vue这样的框架开始在前端编程中流行起来。最好的选择。我一直认为学习任何知识都应该从基础开始，所以我会有很大的篇幅讲各种技术的基础知识和基本原理，尤其是下面这些知识，前端程序员需要一块块吃坚硬的骨头。JavaScript的核心原则。这里我会给出一些网上关于JavaScript原理的非常好的文章或者书籍。您必须了解该语言的特性及其各种陷阱。浏览器如何工作。这也是一块硬骨头。我觉得这是前端程序员需要去了解和理解的，否则，你将无法深入。Web协议HTTP。理解也很重要，尤其是HTTP/2，还有几种HTTP请求方式：短连接、长连接、Stream连接、WebSocket连接。前端性能调优。有了以上基础，就可以进入前端性能调优的正题了。相信您可以轻松上手各种性能调优技巧。框架学习。我只给了React和Vue两个框架。就这两个框架而言，VirtualDOM技术是它的底层技术，组件化是它的思想，管理组件的状态是它的重点。对于React来说，函数式编程就是它的编程思想，所以你需要去研究和学习这些基础技术。用户界面设计。设计也是前端需要做的事情，比如Google的MaterialUI，或者比较流行的AtomicDesign等等，应该是前端工程师需要学习的。至于工具，我这里基本不多说，因为本文主要从原理和基础入手。我觉得那些工具很简单，就像学Java一样，我没有叫你去学Maven，因为你只要做了，自然而然就掌握了这方面的知识，我们还是把重点放在更重要的地方。让我们从前端基础知识和基本原则开始。让我们先谈谈HTML5。HTML5TheDefinitiveGuidetoHTML5，初学者和中级Web开发人员都必须阅读的，以牢牢掌握HTML5、CSS3和JavaScript。这本书看起来比较厚，因为里面有很多代码。HTML5Canvas核心技术，如果你想制作HTML5游戏，这本书一定要看。对于SVG、Canvas、WebGL这些分别对应矢量图形、位图、3D图形的渲染，给前端开发带来了重磅武器，许多HTML5小游戏也因此蓬勃发展。所以，你可以学一点。学习这三种技术，我个人认为最好的地方就是MDN。SVG:ScalableVectorGraphicsCanvasAPIWebGLAPI:2Dand3Dgraphicsfortheweb最后是几个资源的列表。很棒的HTML5。GitHub上很棒的HTML5，包含大量资源和技术文章。AwesomeSVGAwesomeCanvasAwesomeWebGLCSS《程序员练级攻略（2018）》系列文章开头推荐CSS在线学习文档，这里推荐MDNWebDoc-CSS。个人觉得CSS并不难学，只要认真阅读文档即可。绝大多数觉得难，一方面是文档没有看透，另一方面是浏览器支持的标准不一致。因此，学好CSS最重要的是认真阅读文档。后来写CSS的时候，你会发现你的CSS里面有很多东西看起来很相似。你的DRY-Don'tRepeatYourselfcleanfreak告诉你这是不对的。因此，你需要学会使用LESS和SaSS这两个CSS预处理工具，它们可以帮助你提高很多效率。然后，你需要学习CSS的书写规范，其中一些在之前的文章《程序员修养》中有提到，这里再补充几个。编写一致的、惯用的CSS的原则OpinionatedCSSstyleguideforscalableapplicationsGoogleHTML/CSSStyleGuide如果你需要更高效，那么你还需要使用一些CSSFramework，其中最著名的是Twitter的Bootstrap，它有很多不错的UI组件，一种页面布局方案，可以让您非常方便快捷地开发页面。此外，还有界面清新的SemanticUI、响应式界面的Foundation、基于Flexbox的Bulma。当然，在使用CSS之前，您需要在浏览器中规范化一些HTML标签。所以，推荐几个Reset或者标准化的CSS库：Normalize、MiniRest.css、sanitize.css和unstyle.css。更多的CSS框架可以参考AwesomeCSSFrameworks，接下来还有几家公司的CSS相关实践，供大家参考。CodePen的CSSGithub的CSSMedium的CSS实际上非常好BBCSport的CSS精炼我们在Trello构建CSS的方式最后一个编写可扩展CSS的阅读清单一个可扩展的CSS阅读清单JavaScript这里有一些学习JavaScript的书籍和文章。JavaScript:TheGoodParts，中文翻译是《JavaScript 语言精粹》。这是关于JavaScript语言本质的权威书籍，任何正在或计划开发JavaScript的人都应该阅读并反复阅读。只有学习、理解、实践大师的思想，才能站在巨人的肩膀上，才有机会超越大师。这本书是开始。JavaScript忍者的秘密，中文翻译为《JavaScript 忍者秘籍》，本书是jQuery库创始人编写的对JavaScript语言的深入剖析。适合有一定JavaScript基础知识的读者阅读，也适合从事编程并想深入探索JavaScript语言的读者阅读。本书有很多晦涩难懂的地方，需要仔细阅读，反复琢磨。EffectiveJavaScript，由Ecma的JavaScript标准化委员会知名专家编写，作者凭借多年在标准化委员会的工作和实践经验，深入剖析了JavaScript的内在工作机制、特点、陷阱和编程最佳实践，并高度浓缩化为实践指导。68条基本建议。接下来是ES6的学习，这里提供三个学习手册源。ES6inDepth，InfoQ上有一个相关的中文版——ES6insimpleterms。也可以看看AsimpleinteractiveES6Featurelist，或者看看阮一峰翻译的ES6教程。ECMAScript6工具，这是一堆ES6工具的列表，可以帮助您提高开发效率。ModernJSCheatsheet，这个cheatsheet在GitHub上有16Kstars，可见其影响力。然后，有一套漂亮的《You Don’t Know JS 系列》书。你不知道JS：“Up&Going”你不知道JS：“作用域和闭包”你不知道JS：“this和对象原型”你不知道JS：“ES6及以后”是一些与编程范式相关的文章。GlossaryofModernJavaScriptConcepts:Part1，首先推荐这篇文章，它收集了一些编程范式，例如纯函数、状态、可变性和不可变性、指令性和声明性语言、函数式编程、响应式编程、函数式反应式编程。GlossaryofModernJavaScriptConcepts:Part2，在第二部分主要讨论scopeandclosure、dataflow、changedetection、componentization...下面三篇文章是DmitrySoshnikov（DmitrySoshnikov关于JavaScript内部结构的三篇文章。JavaScript。）Core:2ndEditionJavaScript.TheCore(olderES3version)JSscope:static,dynamic,andruntime-augmentedHowJavaScriptWorks》是一组很好（可能还没完）的文章，强烈推荐。本系列文章由SessionStake的CEO，现在已经13篇了，感觉可能还没写完，这个CEO叫AlexanderZlatkov，太猛了。引擎概览，运行时，调用栈V8引擎内部+5个技巧如何写优化代码，了解V8引擎这里，还推荐UnderstandingV8'sBytecode这篇文章可以让你了解V8引擎的底层字节码内存管理+如何处理4种常见内存泄漏，内存管理和4种常见内存泄漏.事件循环和异步编程的兴起+5种使用异步/等待、事件循环和异步编程更好地编码的方法。使用SSE深入研究WebSockets和HTTP/2+如何选择正确的路径、WebSocket和HTTP/2。与WebAssembly的比较+为什么在某些情况下使用它比JavaScript更好，这是JavaScript的内在原则。WebWorkers的构建块+5个你应该使用它们的案例，WebWorkers技术。服务工作者，他们的生命周期和用例，服务工作者技术。Web推送通知的机制，Web上的推送通知技术。使用MutationObserver和MutationObserver技术跟踪DOM中的变化。Therenderingengineandtipstooptimizeitsperformance，渲染引擎和性能优化。InsidetheNetworkingLayer+HowtoOptimizeItsPerformanceandSecurity，网络性能和安全相关。UnderthehoodofCSSandJSanimations+howtooptimizetheirperformance，CSS和JavaScript动画性能优化。接下来是GoogleChrome工程经理AddyOsmani的几篇与JavaScript性能相关的文章，它们也非常好。TheCostOfJavaScriptJavaScriptStart-upPerformance其他与JavaScript相关的资源。JavScript有Unicode问题，这是一篇关于JavaScript如何处理Unicode的好文章。JavaScriptAlgorithms，各种用JavaScript实现的基础算法库。JavaScript30SecondCode，一堆你可以在30秒内理解的有用的JavaScript代码，在GitHub上有20,000颗星。什么f*ckJavaScript，一堆JavaScript有趣和棘手的示例。AirbnbJavaScriptStyleGuide，Airbnb的JavaScript代码规范，在GitHub上有超过70,000颗星。JavaScriptPatternsfor2017，YouTube上的JavaScript模式分享，值得一看。浏览器原理你需要了解浏览器是如何工作的，所以你必须阅读《How browsers work》。这篇文章的读者群太大了，所以重新整理发布为《How Browsers Work: Behind the scenes of modern web browsers》，包括中文版。这篇文章很长很长，大家要耐心看完。如果你想看精简版，你可以看我在Coolshell《浏览器的渲染原理简介》上的帖子，或者看看这个幻灯片。然后，就是VirtualDOM的学习了。虚拟DOM是React非常核心的一个技术细节，也是前端渲染和性能的关键技术。因此，您有必要了解一下该技术的实现原理和算法。当然，前提是你需要研究过我之前推荐的浏览器的工作原理。这里有一些很好的文章可以帮助您学习这项技术。HowtowriteyourownVirtualDOMWriteyourVirtualDOM2:Props&EventsHowVirtual-DOManddiffingworksinReactTheInnerWorkingsOfVirtualDOMDepthAnalysis:HowtoimplementaVirtualDOMalgorithmandtwoVirtual-DOMimplementations供大家参考：Matt-Esch/Virtual-DOMMaquettenetworkprotocolHighPerformanceBrowserNetworking，本书是谷歌高性能团队核心成员的权威著作，堪称实践经验与规范解读完美结合的产物。本书的目标是涵盖Web开发人员在其技术体系中应掌握的所有网络和性能优化知识。全书着重于性能优化，从TCP、UDP和TLS协议开始，并解释了如何针对这些协议和基础架构优化应用程序。然后深入探讨无线和移动网络的工作原理。最后，揭示了HTTP协议的底层细节，同时详细介绍了HTTP2.0、XHR、SSE、WebSocket、WebRTC和DataChannel等现代浏览器的新功能。另外，HTTP/2也是HTTP的一个新协议，于2015年获得批准，现在基本上所有的主流浏览器都默认启用了这个协议。因此，您有必要了解一下这个协议。相关学习资源如下。Gitbook-HTTP/2Detailedhttp2explained(Chineseversion)HTTP/2foraFasterWebHTTP/2两个RFC：RFC7540-HypertextTransferProtocolVersion2(HTTP/2)，HTTP/2的协议本身。RFC7541-HPACK:HeaderCompressionforHTTP/2RFC7541-HPACK:HeaderCompressionforHTTP/2新的HTML5支持WebSocket，所以这也是你必须学习的一个重要协议。HTML5WebSocket:AQuantumLeapinScalabilityfortheWeb，本文比较了HTTP、Polling、LongPolling和Streaming的几种连接方式，介绍了WebSocket的终极解决方案。要知道，了解一项技术的原因非常重要。StackOverflow:MyUnderstandingofHTTPPolling,LongPolling,HTTPStreamingandWebSockets，这是StackOverflow上各种HTTP链接方式的比较，也能给大家一些启示。Websockets简介，WebSockets的简单教程。AwesomeWebsockets，GitHub的Awesome资源列表。与WebSocket相关的一些想法可以拓宽您的思路：WebSockets简介：将套接字引入WebWebsockets101Real-TimeWebbyPaulBanksWebSockets是未来吗？Summary总结一下今天的内容。我一直认为学习任何知识都应该从基础开始，所以今天主要讲了HTML5、CSS3和JavaScript(ES6)这三个基础核心，并给出了很多书籍、文章等相关的学习资源。之后，我建议您了解浏览器的工作原理和网络协议。在我看来，掌握这些原则也是学好前端知识的前提和基础。非常值得花时间学习消化。代码部署后可能存在的bug，无法实时获知。事后为了解决这些bug，花费了大量的时间在日志调试上。顺便推荐一个好用的bug监控工具Fundebug。你的点赞是我继续分享好东西的动力，欢迎点赞！干货交流系列文章总结如下。我觉得点个Star就好了。欢迎加群，互相学习。https://github.com/qq44924588...我是小智，公众号《大招天下》的作者，前端技术爱好者。我会经常分享自己学习看到的干货，在进步的路上互相鼓励！关注公众号，后台回复福利，就能看到福利，你懂的。
