这是我在极客上订阅了陈浩老师的专栏《左耳听风》，当然，如果您有兴趣，可以订阅。为了避免打广告的嫌疑，我就不多说了！以下第一人称陈浩先生。想阅读更多优质文章，请戳GitHub博客，一年百篇优质文章等你来！前端性能优化先从推荐几本前端性能优化的书籍开始。WebPerformanceinAction，这本书目前在中国没有销售。可以看看电子版，我觉得是一本很好的书，包括CSS，图片，字体，JavaScript性能调优等等。DesigningforPerformance，这本在线电子书很好。里面讲了很多网页优化技巧和相关工具，可以让你了解网页整体性能优化。HighPerformanceJavaScript，这本书在国内可以买到，它可以让你了解如何提高各个方面的性能，包括代码加载、运行、DOM交互、页面生命周期等。雅虎前端工程师NicholasC.Zakas和其他五位JavaScript专家介绍页面代码加载最佳实践和编程技巧，帮助您编写更高效、更快速的代码。您还将了解构建文件并将其部署到生产环境的最佳实践，以及有助于解决生产问题的工具。HighPerformanceWebSites:EssentialKnowledgeforFront-EndEngineers，这本书在国内也有卖，翻译版是《高性能网站建设指南：前端工程师技能精髓》。作者给出了14条具体的优化原则，每条原则都有示例和在线支持。本书内容丰富，主要包括减少HTTP请求、边缘计算技术、ExpiresHeader技术、gzip组件、CSS和JavaScript最佳实践、首页内联、Domain最小化、JavaScript优化、避免重定向的技巧、删除重复的技巧JavaScript、关闭ETags的技巧、Ajax缓存技巧和最小化技巧等。除了以上书籍，Google的WebFundamentals中的Performance章节也有很多非常好的知识和经验。以下是一些最佳实践文档。BrowserDiet，权威的前端性能指南（中文版）。这是由一组在大型网站上工作的专家构建的前端性能工作指南。PageSpeedInsightsRules，谷歌给出的性能指南和最佳实践。BestPracticesforSpeedingYourWebSite，雅虎提供的包含7个类别的35个最佳实践的文档。接下来重点推荐WPOStats，一个性能优化的案例研究网站。WPO是WebPerformanceOptimization的缩写。本站有很多不错的性能优化案例分享，一定会对你有很大的帮助。然后是一些文章和案例。ASimplePerformanceComparisonofHTTPS,SPDYandHTTP/2，这是一篇对比浏览器的HTTPS、SPDY和HTTP/2性能的文章，除了对比，还可以让你了解一些技术细节。7TipsforFasterHTTP/2Performance，对于HTTP/2，Nginx给出的提高其性能的7个技巧。ReducingSlack'smemoryfootprint，Slack团队减少内存占用的实践。Pinterest:Drivingusergrowthwithperformanceimprovements，Pinterest关于性能调优的分享，包括前后端的一些性能调优实践。其实也是一种比较常见的玩法。这篇文章主要是想让前端同学了解如何做整体性能调优。10JavaScriptPerformanceBoostingTips，提高JavaScript性能的10个技巧，非常有用。入门PictureElement，本文介绍了Responsive布局带来的一些负面问题。主要是图片适配问题，引出了一篇文章《原生响应式图片》，值得一读。ImprovePageLoadTimesWithDNSPrefetching，本文教你一个如何减少DNS解析时间的小技巧——DNS预取。JankBustingforBetterRenderingPerformance，这是GoogleI/O上??的一个分享，关于前端动画渲染的性能提升。JavaScriptMemoryProfiling，这是一篇Google官方文章，教你如何使用Chrome的开发工具来分析JavaScript内存问题。接下来是一些性能工具。网上性能测试分析工具太多，这里只推荐权威的。PageSpeed，谷歌有一套PageSpeed工具来帮助你分析和优化你网站的性能。谷歌出品，质量相当有保证。YSlow，来自雅虎的网络分析工具。GTmetrix是一款网页分析工具，结合了PageSpeed和YSlow，并加入了一些Pageload或其他分析。也是一个很好的分析工具。AwesomeWPO，你可以在这个AwesomeonGitHub中找到更多的性能优化工具和资源。另外，中国的互联网有各种各样的问题（你懂的），所以，你不能使用谷歌共享的JavaScript链接来加快速度，你必须使用中国自己的。您可以到这里查看中国的共享库资源，忘记谷歌并在中国使用这些托管的JavaScript库。前端框架接下来，我们需要学习Web前端的几大框架。目前，前端社区主要有三大框架：Angular.js、React.js和Vue.js。我觉得React和Vue比较厉害，所以这里只写React和Vue相关的攻略。网上有很多文章对比两者。这里推荐几个我觉得还不错的，供大家参考。Angularvs.Reactvs.Vue：2017年比较React或Vue：您应该使用哪个JavaScriptUI库？ReactJSvsAngular5vsVue.js-2018年该选择什么？其实，比较这些框架的优缺点和优劣，并不是去比较输赢，而是让你了解不同框架的优劣势。我觉得这些框架都是可以学习的。至于在我们的生活和工作中使用哪种框架，最好是有一些出发点，比如你是要找一份好工作，快速搭建一个网站，改造一个大型的前端系统，还是纯粹为了学习...不同的目的导致不同的决定。我不希望以上比较把你置于“二比一”或“三比一”的境地。我只是想通过这些文章让大家知道这些框架的设计思路和实现原理。这些东西会让你受益终生。React.js框架让我们先了解一下React.js框架。React入门学习起来并不复杂，看React官方教程及其文档即可（React的中文教程）。然后，下面的文章将带您了解React.js的基础知识。所有基本的React.js概念，本文讨论了React.js的所有基本原理。学习ReactFundamentalsandAdvancedPatterns，这篇文章有几个，每个视频不超过5分钟，是一个很好的学习React的地方。在React中思考，本文将引导您完成使用React构建可搜索产品数据表的思考过程。学习一门技术，最重要的是学习思路和方法。以下是我认为学习React的一些最重要的事情。Status是非常麻烦的，也是富客户端坑最多的地方。以下是您可以阅读的几篇文章。CommonReact.jsmistakes:Unneededstate，React.js编程中的一个常见错误——不必要的状态。StateisanAnti-Pattern，思考如何做出一个好的组件，很有帮助。为什么LocalComponentStateisaTrap，关于“单一状态树”的一些思考。ThinkingStatefully，几个很好的例子可以让你更好地理解声明式有状态技术。传统上，一般使用Redux来解决React的状态问题。在这里推荐2018年学习React+Redux的Tips。Redux是一个状态粘合组件。一般来说，我们会使用Redux与它的上层Components同步一些数据状态。这个教程非常好。最后，“React中的状态架构模式”系列非常值得一读。第1部分：回顾第2部分：头重脚轻的架构、通量和性能第3部分：接合点、杂志和总体策略第4部分：纯度、通量对偶性和数据流函数式编程。从jQuery过来的同学肯定很不习惯React，而从Java等后端出来的程序员会很习惯。所以我觉得React是后端人员开发的，或者是做函数式编程的人开发的。为此，您需要学习一些有关JavaScript函数式编程的知识。这是一本免费的电子书《Professor Frisby’s Mostly Adequate Guide to Functional Programming》，翻译为《JS 函数式编程指南中文版》。下面是一些非常好的文章。前两篇与函数式编程相关的文章非常值得一读。最后三篇是一些比较实用的函数式编程和React相结合的文章。精通JavaScript面试：什么是函数式编程？函数式编程（组合软件）的兴衰和兴起函数式UI和组件作为高阶函数函数式JavaScript：逆向工程ReactDesign中有关函数组件的一些想法相关。下一步是学习一些React设计模式。ReactPatterns是学习React模式的好地方。此外，下面还有一些不错的文章，对你也很有帮助。ReactHigherOrderComponentsindepthPresentationalandContainerComponentsReact中的受控和非受控表单输入不必复杂功能作为子组件WritingScalableReactAppswiththeComponentFolderPatternReusableWebApplicationStrategiesFeaturesofanIdealReactArchitectureExperienceandsomegoodpracticesandexperience.每个React.js初学者都应该知道的9件事构建大型React应用程序的最佳实践清洁代码与脏代码：React最佳实践如何成为更高效的React开发人员8关键React组件决策资源列表最后是React资源列表。AwesomeReact，这是一些React相关资源的列表，非常庞大和全面。React/ReduxLinks，这也是与React相关的资源列表。与上面不同的是，这个列表主要是收集了大量的文章，里面描述了很多React的知识和技术，比上面的列表要好很多。ReactRocks，这个网站主要收集了各种React组件的例子，可以让你大开眼界。Vue.js框架Vue可能是一个比较符合前端工程师使用习惯的框架。不使用像React.js这样的函数式编程是后端程序员的方式。通过《为什么43%的前端开发者想学习Vue.js》一文，可以看到它的编程方式与React有很大的不同，符合前端开发的传统思维方式。通过文章ReplacingjQueryWithVue.js:NoBuildStepNecessary，我们可以看到从jQuery到Vue的平滑过渡。此外，我们还可以通过“我喜欢Vue的10件事”来了解Vue的一些比较优秀的特性。最欣慰的是，Vue的作者是我的好朋友尤雨熙（EvanYou）。在他最近的专访《Vueon2018-EvanYou专访》中，有很多关于Vue的故事和展望。（注：Vue完全由其支持者和用户资助，这意味着它更接近社区，不受大公司控制。）学习Vue并不难，我想官网看文档（VueOfficialDocumentation(ChineseVersion)），做完就可以快速上手。Vue.jsscreencasts是一个很棒的英文视频教程。另外，给初学者推荐：Vue2.0的推荐学习顺序，由Vue作者编写，具有特殊的意义。Vue确实比较简单，有web开发经验的人也能很快上手，所以这里不会像React那样资料很多。下面是一些我觉得还不错的内容，推荐给大家。如何不用Vue，任何技术都有陷阱，如果你了解了Vue的缺点，你就能扬长避短，更好地利用它们。Vue.js组件通信模式4Vue.js应用程序的AJAX模式如何（安全地）使用带有Vue.js的jQuery插件js当然最后一定要有AwesomeVue，Vue.js中最大最优秀的资源列表。Summary总结一下今天的内容。我首先介绍了前端性能优化的内容，推荐书籍，最佳实践文档，案例，以及一些在线性能测试分析工具。然后重点介绍了React和Vue这两个前端框架，并给出了大量的文章、教程和相关资源。在我看来，React.js采用函数式编程，更符合后端程序员的思维，而Vue是更符合前端工程师习惯的框架。因此，两者相比较，Vue会更加好用。以上为陈浩老师分享。结合之前的文章，内容其实很多。这一篇一时半会儿读不完。如果你不想做一辈子码农，而不仅仅是搬砖，那我们的目标就是更有创意。工程师、建筑师，这些内容值得10年、20年，甚至全身心去学习。希望大家有好东西可以分享，一起学习！ps：想要成为高级程序员（工程师），英语能力必不可少，平时要加强英语学习！你的点赞是我继续分享好东西的动力，欢迎点赞！干货交流系列文章总结如下。我觉得点个Star就好了。欢迎加群，互相学习。https://github.com/qq44924588...我是小智，公众号《大招天下》的作者，前端技术爱好者。我会经常分享自己学习看到的干货，在进步的路上互相鼓励！关注公众号，后台回复福利，就能看到福利，你懂的。
