左耳听风_089_88_程序员练级攻略前端性能优化和框架
你好，我是沈浩网名做做house.这节课呢我们来讲一讲如何对前端的性能进行优化。
并且呢我还会推荐几个好用的前端框架。
对于前端性能的优化呢，首先是推荐几本前端性能优化画面的书。
第一本呢是that performance in action.那这本书呢目前国内没有卖的，你可以看电子版本，我觉得呢是一本很不错的书。
这其中呢有CSS图片字体，还有javascript性能调优啊等等。
第二版呢是designing for perfumless,这本在线的电子书呢还不错。
其中讲了很多网页优化的技术和相关的工具，可以让你对整体的网页性能优化有所了解。
第三本呢是high performance. Javascript这本书呢在国内是可以买到的。
它能让你了解如何提升各个方面的性能，包括代码的加载、运行、dom交互，还有页面生存周期啊等等。
来自雅虎的前端工程师尼古拉斯扎卡斯和其他五位java scpt专家介绍了页面代码加载的最佳方法和编程技巧，来帮助你编写更为高效又快速的代码。
你呢还会了解到构建和部署文件到生产环境的最佳实践，以及有助于定位线上问题的工具。
第四个high performance websites, essential knowledge for front and engineers.这本书呢国内也有卖翻译版，叫做高性能网站建设指南，前端工程师技能精髓。
作者在这里呢给出了十四条具体的优化原则，每一条原则呢都配以范例佐证，并提供了在线的知识。
全书内容丰富，主要呢包括减少HTTP请求edge computing技术、experts header技术、g zip组件CSS和javascript最佳实践主页内联damin最小化javascript优化，避免重定向的技巧，删除重复javascript的技巧，关闭etax的技巧，AX缓存技术和最小化技术等等。
那除了前面的这几本书之外呢，google的wep fundamental里面的performance这一章节也有很多非常不错的知识和经验。
那接下来呢我推荐一些最佳实践的文档。
第一个是brother diet,中文叫做前端权威性能指南。
这个呢是一群为大型站点工作的专家们建立的一份前端性能的工作指南。
第二个paves me in size routes.他呢，是谷歌给了一份性能指南和最佳实践。
第三个是bad practices of spin up your website.这个呢是雅虎公司给的一份七个分类共三十五个最佳实践的文档。
那接下来呢我重点推荐一个性能优化的案例学习网站WPO states. Wpo呢是该performance optimization的缩写。
这个网站上呢有很多很不错的性能优化的案例分享，一定啊可以帮助你很多，然后呢是一些文章和案例。
第一个，the simple performance comparration of HTTPSSPDY and HTTP two.那这个呢是一篇比较浏览器的HTPSSPDY和HTP二性能的文章。
那除了比较之外呢，还可以让你了解一些技术的细节。
第二个seventips for faster HTP two performance.对于HTPR来说，eninx公司给出了七个增加性能的小提示。
第三个reducing slkes memory footprint,是slack团队减少内存使用量的实践。
第四个interest, driving usables with performance improvements interest的关于性能调优的一些分享。
这其中呢包括了前后端的一些性能调优的实践。
其实呢这也是一些比较通用的玩法。
那这篇文章呢主要是想让前端的同学了解一下如何做整体的性能调优。
那第五个呢是ten javascript performance, boosting tips,十个提高javascript运行效率的小提示啊，挺有用的。
第六个seventeen statistics to sell their performance of timizzation.这个网页上呢收集了好些公司的外部性能优化和工程分享啊，都是非常有价值的。
第七个getting started with a picture element.这篇文章呢讲述了responsive布局所带来的一些负面的问题嗯，主要呢是图像适配的问题。
那这其中呢还引出了一篇文章，叫做native responsive images,值得一读。
第八个impropate low times is DNS profession.这篇文章呢教了你一个如何降低DNS解析时间的小技术，叫做DNS profession第九个junk dusting or better running ing performance.这是一篇古舞IO上分享关于前端动画渲染性能的提升。
第十个javascript memory providing这个呢是一篇google官方教你如何使用chrome的开发工具来分析javascripict内存问题的完成。
那接下来呢是一些性能工具，在线性能测试分析工具啊太多了。
所以这里呢我只推荐比较权威的。
第一个呢是pair speed.谷歌呢有一组pix b的工具，来帮助你分析和优化网站的性能。
Google出品呢质量相当有保证。
第二个呢是雅虎的一个网页分析工具y slow.第三个呢是JT metrics.它是一个将page speed和vice slow合并起来的一个网页分析工具。
并且呢加上了一些配置load或者其他的一些分析，也是一个很不错的分析工具。
第四个呢是awesome, WPO.在github上面的这个ausome列表当中啊，你可以找到更多的性能优化工具和资源。
另外呢中国的网络有各种问题，所以说呢你不能使用google共享的javascriript链接来提速。
你得用中国自己的。
你可以从门中我分享的链接当中啊，看一看中国的共享库资源。
那么接下来要学习了是web前端的几大框架。
目前而言呢，前端社区有三大框架、angular GS、 rear GS和六GS.我认为呢react review更为强劲一些。
所以呢我这里啊直接与left view相关的功略。
那关于两者的比较呢，网上有好多的文章，我在这里呢在文稿中推荐了几篇，我觉得还不错啊，供你参考。
其实比较这些框架的优缺点还有利弊啊，并不是说要比出个输赢，而是让你了解一下不同框架的优缺点。
我觉得呢这些框架都是可以学习的。
而在我们的生活和工作当中啊，具体要用哪个框架，最好还是要有一些出发点。
比如说你是为了找一份好的工作，为了快速搭一个网站，为了改造一个大规模的前端系统啊，还是纯粹的为了学习，呃，不同的目的呢会导致不同的决定。
所以我并不希望前面的这些比较会让你进入一个二选一或者三选一的境地。
我只是想通过这些文章，让你知道这些框架的设计思路和实现原理。
那这些呢才是让你受益一辈子的事儿。
下面呢我们先来学习一下react框架，react学起来并不复杂啊，就看react官方教程和它的文档就好了。
然后接下来这几篇文章呢会带你了解一下reni GS的基本原理。
第一篇all the fundamental reality as concept.这篇文章呢讲了所有rei JS的基本原理。
第二篇learn react fundamentals and advanced patterns.这篇文章里呢有几个短视频，每个视频呢不超过五分钟，是学习react一个非常不错的地方。
第三篇linking in react.这篇文章呢将引导你完成使用react构建可搜索产品数据表的思考过程。
学习一个技术，最重要的是要学到其中的思想和方法。
所以接下来我讲的是一些我觉得学习rer的过程当中最重要的东西。
第一个呢是状态，对于复合无端来说是非常麻烦，也是坑最多的地方。
那这里呢有几篇文章，你可以一读第一篇common, react tithmistics a needia state.中文翻译呢叫做reacgize编程的常见错误不必要的状态。
第二篇state is a anti part.关于如何做一个不错的组建的思考，很有帮助。
第三篇why local component state is a trap,是一些关于single state tree的想法。
第四篇呢是thinking stteforly里面有几个很不错的例子，可以让你对生命是有状态的，技术有更好的理解。
另外呢在传统上解决react状态问题啊，一般要使用redux.在这里呢我推荐tips to learn react and redux in twenty eighteen. Redux呢是一个状态粘合组件。
一般来说啊我们会使用redux来做一些数据状态和上层component的同步，那这篇教程呢就很不错。
最后是state architecture patterns in react系列文章啊，非常值得一提react.第二个最重要的东西啊是函数值编程。
从这query过来的同学一定会非常不习惯，react.而从java等后端过来的程序员呢就会很习惯。
所以呢我觉得react就是后端人员开发的，或者说呢是做函数式编程的人开发的。
对此呢，你需要学习一下javascript函数式编程相关的东西。
这里呢我推荐一本免费的电子书professor frresbes mostly adequate guide to functional programming.中译版叫做JS函数式编程指南。
中文版文中呢有几篇文章非常不错，前两篇和函数式编程有关的文章呢非常值得一读。
而后三篇呢是一些比较实用的函数式编程erect相结合的文章。
那接下来呢我们要学习一些react设计模式，react、 partion是一个不错的学习react模式的地方。
呃，除此之外我还在文中列了一些不错的文章啊，也会对你很有帮助。
然后呢，还有一些不错的实践和经验啊，非常值得你学习。
最后呢就是react资源列表。
第一个是awesome react,这是一些react相关资源的列表，很大很全。
第二个呢是react redux links,那这个呢也是react相关的资源列表。
但是呢和前面不一样的是这个列表主要收集了大量的文章，其中呢讲述了很多react的知识和技术，比前面的列表好很多。
第三个呢是red rocks.这个网站呢主要收集各种react的组件示例啊，可以让你大开眼界。
讲完了，react GS呢，接着我们来学习六GS框架。
六可能是一个更符合前端工程师习惯的框架。
他不像react那样使用函数式编程方式是后端程序员的思路。
首先呢通过文章y forty three percent of frontiten developers or to learn view jfs.你可以看出它的编程方式，correct是大相径庭的，符合传统的前端开发的思维方式。
然后呢通过文章replacing dequiry dispbute s mobile step necessary.我们可以看到从jakoria是可以平滑过渡的view的。
另外呢我们可以通过tensence i love about view,了解vview的一些比较优秀的特性。
最令人高兴的是rio的作者呢是我的好朋友。
刘禹锡。
最近一次对他的采访当中啊，有很多的故事和对vivo的展望，要学习view呢并不难。
我认为上官网看文档照着搞一搞就可以，很快的上手了。
Uga screen cast是一个很不错的英文视频教程。
另外呢我推荐新手相越有二点零的建议学习顺序，这个呢是没有作者写的，所以呢有特殊的意义。
六呢的确比较简单，有web开发经验的人上手啊也比较快。
所以在这里呢我也不会像react那样给出很多的资料，有一些我觉得还不错的内容呢，我在文稿里推荐给你。
当然呢最后一定还有awesome.六六GS里面最为巨大最为优秀的资源列表。
我总结一下今天的内容，我先介绍的是前端性能优化方面的内容，推荐了图书最佳实践性的文档案例，还有一些在线性能测试分析工具。
随后呢我重点讲述了react和view两大前端框架，给出了大量的文章、教程和相关的资源列表。
我认为呢react JS使用函数式编程方式更加符合后端程序员的思路，而view呢是更符合前端工程师习惯的框架。
因此两者比较起来呢，六会更容易上手一些。
在下节课呢，我们将讲述前端工程师的一个基本功，UIUX设计，敬请期待。
对嗯。