# 前端性能优化 首先是推荐几本前端性能优化方面的图书。

[Web Performance in Action](http://www.allitebooks.in/web-performance-action/) ，这本书目前国内没有卖的。你可以看电子版本，我觉得是一本很不错的书，其中有CSS、图片、字体、JavaScript性能调优等。

[Designing for Performance](http://designingforperformance.com/) ，这本在线的电子书很不错，其中讲了很多网页优化的技术和相关的工具，可以让你对整体网页性能优化有所了解。

[High Performance JavaScript](https://book.douban.com/subject/5362856/) ，这本书在国内可以买到，能让你了解如何提升各方面的性能，包括代码的加载、运行、DOM交互、页面生存周期等。雅虎的前端工程师尼古拉斯·扎卡斯（Nicholas C. Zakas）和其他五位JavaScript专家介绍了页面代码加载的最佳方法和编程技巧，来帮助你编写更为高效和快速的代码。你还会了解到构建和部署文件到生产环境的最佳实践，以及有助于定位线上问题的工具。

[High Performance Web Sites: Essential Knowledge for Front-End Engineers](https://book.douban.com/subject/26411563/) ，这本书国内也有卖，翻译版为《高性能网站建设指南：前端工程师技能精髓》。作者给出了14条具体的优化原则，每一条原则都配以范例佐证，并提供了在线支持。 全书内容丰富，主要包括减少HTTP请求、Edge Computing技术、Expires Header技术、gzip组件、CSS和JavaScript最佳实践、主页内联、Domain最小化、JavaScript优化、避免重定向的技巧、删除重复JavaScript的技巧、关闭ETags的技巧、Ajax缓存技术和最小化技术等。

除了上面这几本书之外，Google的 [Web Fundamentals](https://developers.google.com/web/fundamentals/) 里的 [Performance](https://developers.google.com/web/fundamentals/performance/why-performance-matters/) 这一章节也有很多非常不错的知识和经验。

接下来是一些最佳实践性的文档。

[Browser Diet](http://browserdiet.com/zh/) ，前端权威性能指南（中文版）。这是一群为大型站点工作的专家们建立的一份前端性能的工作指南。

[PageSpeed Insights Rules](https://developers.google.com/speed/docs/insights/rules) ，谷歌给的一份性能指南和最佳实践。

[Best Practices for Speeding Up Your Web Site](https://developer.yahoo.com/performance/rules.html) ，雅虎公司给的一份7个分类共35个最佳实践的文档。

接下来，重点推荐一个性能优化的案例学习网站 [WPO Stats](https://wpostats.com/) 。WPO是Web Performance Optimization的缩写，这个网站上有很多很不错的性能优化的案例分享，一定可以帮助你很多。 然后是一些文章和案例。

[A Simple Performance Comparison of HTTPS, SPDY and HTTP/2](http://blog.httpwatch.com/2015/01/16/a-simple-performance-comparison-of-https-spdy-and-http2/) ，这是一篇比较浏览器的HTTPS、SPDY和HTTP/2性能的文章，除了比较之外，还可以让你了解一些技术细节。

[7 Tips for Faster HTTP/2 Performance](https://www.nginx.com/blog/7-tips-for-faster-http2-performance/) ，对于HTTP/2来说，Nginx公司给出的7个增加其性能的小提示。

[Reducing Slack’s memory footprint](https://slack.engineering/reducing-slacks-memory-footprint-4480fec7e8eb) ，Slack团队减少内存使用量的实践。

[Pinterest: Driving user growth with performance improvements](https://medium.com/@Pinterest_Engineering/driving-user-growth-with-performance-improvements-cfc50dafadd7) ，Pinterest关于性能调优的一些分享，其中包括了前后端的一些性能调优实践。其实也是一些比较通用的玩法，这篇文章主要是想让前端的同学了解一下如何做整体的性能调优。

[10 JavaScript Performance Boosting Tips](http://jonraasch.com/blog/10-javascript-performance-boosting-tips-from-nicholas-zakas) ，10个提高JavaScript运行效率的小提示，挺有用的。

[17 Statistics to Sell Web Performance Optimization](http://www.guypo.com/17-statistics-to-sell-web-performance-optimization/) ，这个网页上收集了好些公司的Web性能优化的工程分享，都是非常有价值的。

[Getting started with the Picture Element](http://deanhume.com/Home/BlogPost/getting-started-with-the-picture-element/8109) ，这篇文章讲述了Responsive布局所带来的一些负面的问题。主要是图像适配的问题，其中引出了一篇文章"[Native Responsive Images](https://dev.opera.com/articles/native-responsive-images/)" ，值得一读。

[Improve Page Load Times With DNS Prefetching](http://www.deanhume.com/Home/BlogPost/improve-page-load-times-with-dns-prefetching/80) ，这篇文章教了你一个如何降低DNS解析时间的小技术——DNS prefetching。

[Jank Busting for Better Rendering Performance](http://www.html5rocks.com/en/tutorials/speed/rendering/) ，这是一篇Google I/O上的分享，关于前端动画渲染性能提升。

[JavaScript Memory Profiling](https://developer.chrome.com/devtools/docs/javascript-memory-profiling) ，这是一篇谷歌官方教你如何使用Chrome的开发工具来分析JavaScript内存问题的文章。

接下来是一些性能工具。在线性能测试分析工具太多，这里只推荐比较权威的。

[PageSpeed](https://developers.google.com/speed/pagespeed/) ，谷歌有一组PageSpeed工具来帮助你分析和优化网站的性能。Google出品的，质量相当有保证。

[YSlow](https://github.com/marcelduran/yslow) ，雅虎的一个网页分析工具。

[GTmetrix](https://gtmetrix.com/) ，是一个将PageSpeed和YSlow合并起来的一个网页分析工具，并且加上一些Page load或是其它的一些分析。也是一个很不错的分析工具。

[Awesome WPO](https://github.com/davidsonfellipe/awesome-wpo) ，在GitHub上的这个Awesome中，你可以找到更多的性能优化工具和资源。

另外，中国的网络有各种问题（你懂的），所以，你不能使用Google共享的JavaScript链接来提速，你得用中国自己的。你可以到这里看看中国的共享库资源，[Forget Google and Use These Hosted JavaScript Libraries in China](http://chineseseoshifu.com/blog/china-hosted-javascript-libraries-jquery-dojo-boostrap.html) 。 # 前端框架 接下来，要学习的是Web前端的几大框架。目前而言，前端社区有三大框架Angular.js、React.js和Vue.js。我认为，React和Vue更为强劲一些，所以，我这里只写和React和Vue相关的攻略。关于两者的比较，网上有好多文章。我这里推荐几篇我觉得还不错的，供你参考。 - [Angular vs. React vs. Vue: A 2017 comparison](https://medium.com/unicorn-supplies/angular-vs-react-vs-vue-a-2017-comparison-c5c52d620176) - [React or Vue: Which JavaScript UI Library Should You Be Using?](https://medium.com/js-dojo/react-or-vue-which-javascript-ui-library-should-you-be-using-543a383608d) - [ReactJS vs Angular5 vs Vue.js - What to choose in 2018?](https://medium.com/@TechMagic/reactjs-vs-angular5-vs-vue-js-what-to-choose-in-2018-b91e028fa91d) 其实，比较这些框架的优缺点还有利弊并不是要比出个输赢，而是让你了解一下不同框架的优缺点。我觉得，这些框架都是可以学习的。而在我们生活工作中具体要用哪个框架，最好还是要有一些出发点，比如，你是为了找份好的工作，为了快速地搭一个网站，为了改造一个大规模的前端系统，还是纯粹地为了学习…… 不同的目的会导致不同的决定。我并不希望上述的这些比较会让你进入“二选一”或是“三选一”的境地。我只是想通过这些文章让你知道这些框架的设计思路和实现原理，这些才是让你受益一辈子的事。 ## React.js框架 下面先来学习一下React.js框架。 **入门** React学起来并不复杂，就看 [React 官方教程](https://reactjs.org/tutorial/tutorial.html) 和其文档就好了（ [React 的中文教程](https://doc.react-china.org/) ）。 然后，下面的文章会带你了解一下React.js的基本原理。

[All the fundamental React.js concepts](https://medium.freecodecamp.org/all-the-fundamental-react-js-concepts-jammed-into-this-single-medium-article-c83f9b53eac2) ，这篇文章讲了所有的React.js的基本原理。

[Learn React Fundamentals and Advanced Patterns](https://blog.kentcdodds.com/learn-react-fundamentals-and-advanced-patterns-eac90341c9db) ，这篇文章中有几个短视频，每个视频不超过5分钟，是学习React的一个很不错的地方。

[Thinking in React](https://reactjs.org/docs/thinking-in-react.html)，这篇文章将引导你完成使用React构建可搜索产品数据表的思考过程。

**提高** 学习一个技术最重要的是要学到其中的思想和方法。下面是一些我觉得学习React中最重要的东西。

**状态**，对于富客户端来说是非常麻烦也是坑最多的地方，这里有几篇文章你可以一读。

• [Common React.js mistakes: Unneeded state](http://reactkungfu.com/2015/09/common-react-dot-js-mistakes-unneeded-state/) ，React.js编程的常见错误——不必要的状态。
• [State is an Anti-Pattern](https://www.reddit.com/r/reactjs/comments/3bjdoe/state_is_an_antipattern/) ，关于如何做一个不错的组件的思考，很有帮助。
• [Why Local Component State is a Trap](https://www.safaribooksonline.com/blog/2015/10/29/react-local-component-state/) ，一些关于 “Single state tree” 的想法。
• [Thinking Statefully](https://daveceddia.com/thinking-statefully/) ，几个很不错的例子让你对声明式有状态的技术有更好的理解。
• 传统上，解决React的状态问题一般用Redux。在这里推荐 [Tips to learn React + Redux in 2018](https://www.robinwieruch.de/tips-to-learn-react-redux/) 。Redux是一个状态粘合组件，一般来说，我们会用Redux来做一些数据状态和其上层Component上的同步。这篇教程很不错。
• 最后是 "State Architecture Patterns in React " 系列文章，非常值得一读。
  - [Part 1: A Review](https://medium.com/@skylernelson_64801/state-architecture-patterns-in-react-a-review-df02c1e193c6) - [Part 2: The Top-Heavy Architecture, Flux and Performance](https://medium.com/@skylernelson_64801/state-architecture-patterns-in-react-part-2-the-top-heavy-architecture-flux-and-performance-a388b928ce89) - [Part 3: Articulation Points, zine and An Overall Strategy](https://medium.com/@skylernelson_64801/state-architecture-patterns-in-react-part-3-articulation-points-zine-and-an-overall-strategy-cf076f906391) - [Part 4: Purity, Flux-duality and Dataflow](https://medium.com/@skylernelson_64801/state-architecture-patterns-in-react-part-4-purity-flux-duality-and-dataflow-d06016b3379a) **函数式编程**。从jQuery过来的同学一定非常不习惯React，而从Java等后端过来的程序员就会很习惯了。所以，我觉得React就是后端人员开发的，或者说是做函数式编程的人开发的。对此，你需要学习一下JavaScript函数式编程的东西。 这里推荐一本免费的电子书 《[Professor Frisby’s Mostly Adequate Guide to Functional Programming](https://github.com/MostlyAdequate/mostly-adequate-guide)》，其中译版为《[JS函数式编程指南中文版](https://jigsawye.gitbooks.io/mostly-adequate-guide/content/)》。 下面有几篇文章非常不错。前两篇和函数式编程有关的文章非常值得一读。后三篇是一些比较实用的函数式编程和React结合的文章。 - [Master the JavaScript Interview: What is Functional Programming?](https://medium.com/javascript-scene/master-the-javascript-interview-what-is-functional-programming-7f218c68b3a0?utm_source=mybridge&utm_medium=email&utm_campaign=read_more) - [The Rise and Fall and Rise of Functional Programming (Composing Software)](https://medium.com/javascript-scene/the-rise-and-fall-and-rise-of-functional-programming-composable-software-c2d91b424c8c) - [Functional UI and Components as Higher Order Functions](https://blog.risingstack.com/functional-ui-and-components-as-higher-order-functions/) - [Functional JavaScript: Reverse-Engineering the Hype](http://banderson.github.io/functional-js-reverse-engineering-the-hype/) - [Some Thoughts on Function Components in React](https://medium.com/javascript-inside/some-thoughts-on-function-components-in-react-cb2938686bc7) **设计相关**。接下来是学习一些React的设计模式。[React Pattern](https://reactpatterns.com/) 是一个不错的学习React模式的地方。除此之外，还有如下的一些不错的文章也会对你很有帮助的。 - [React Higher Order Components in depth](https://medium.com/@franleplant/react-higher-order-components-in-depth-cf9032ee6c3e) - [Presentational and Container Components](https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0) - [Controlled and uncontrolled form inputs in React don’t have to be complicated](https://goshakkk.name/controlled-vs-uncontrolled-inputs-react/) - [Function as Child Components](https://medium.com/merrickchristensen/function-as-child-components-5f3920a9ace9) - [Writing Scalable React Apps with the Component Folder Pattern](https://medium.com/styled-components/component-folder-pattern-ee42df37ec68) - [Reusable Web Application Strategies](https://medium.freecodecamp.org/reusable-web-application-strategies-d51517ea68c8) - [Characteristics of an Ideal React Architecture](https://medium.com/@robftw/characteristics-of-an-ideal-react-architecture-883b9b92be0b) **实践和经验** 还有一些不错的实践和经验。 - [9 things every React.js beginner should know](https://camjackson.net/post/9-things-every-reactjs-beginner-should-know) - [Best practices for building large React applications](https://engineering.siftscience.com/best-practices-for-building-large-react-applications/) - [Clean Code vs. Dirty Code: React Best Practices](https://americanexpress.io/clean-code-dirty-code/) - [How to become a more productive React Developer](https://dev.to/jakoblind/how-to-become-a-more-productive-react-developer) - [8 Key React Component Decisions](https://medium.freecodecamp.org/8-key-react-component-decisions-cc965db11594) **资源列表** 最后就是React的资源列表。
  • [Awesome React](https://github.com/enaqx/awesome-react) ，这是一些React相关资源的列表，很大很全。
  • [React/Redux Links](https://github.com/markerikson/react-redux-links) ，这也是React相关的资源列表，与上面不一样的是，这个列表主要收集了大量的文章，其中讲述了很多React知识和技术，比上面的列表好很多。
  • [React Rocks](https://react.rocks/) ，这个网站主要收集各种React的组件示例，可以让你大开眼界。
  ## Vue.js框架 Vue可能是一个更符合前端工程师习惯的框架。不像React.js那样使用函数式编程方式，是后端程序员的思路。
  • 通过文章 “[Why 43% of Front-End Developers want to learn Vue.js](https://medium.com/vue-mastery/why-43-of-front-end-developers-want-to-learn-vue-js-7f23348bc5be)” ，你可以看出其编程方式和React是大相径庭的，符合传统的前端开发的思维方式。
  • 通过文章 [Replacing jQuery With Vue.js: No Build Step Necessary](https://www.smashingmagazine.com/2018/02/jquery-vue-javascript/) ，我们可以看到，从jQuery是可以平滑过渡到Vue的。
  • 另外，我们可以通过 “[10 things I love about Vue](https://medium.com/@dalaidunc/10-things-i-love-about-vue-505886ddaff2)” ，了解Vue的一些比较优秀的特性。
  最令人高兴的是，Vue的作者是我的好朋友尤雨溪（Evan You），最近一次对他的采访 “[Vue on 2018 - Interview with Evan You](https://blog.hackages.io/https-blog-hackages-io-evanyoubhack2017-cc5559806157)” 当中有很多故事以及对Vue的展望。（**注意：Vue是完全由其支持者和用户资助的，这意味着它更接近社区而不受大公司的控制。**） 要学习Vue并不难，我认为上官网看文档（ [Vue 官方文档](http://vuejs.org/guide/)（[中文版](https://cn.vuejs.org/v2/guide/)）），照着搞一搞就可以很快上手了。[Vue.js screencasts](https://laracasts.com/series/learn-vue-2-step-by-step) 是一个很不错的英文视频教程。 另外，推荐 [新手向：Vue 2.0的建议学习顺序](https://zhuanlan.zhihu.com/p/23134551) ，这是Vue作者写的，所以有特殊意义。 Vue的确比较简单，有Web开发经验的人上手也比较快，所以这里也不会像React那样给出很多的资料。下面是一些我觉得还不错的内容，推荐给你。
  • [How not to Vue](https://itnext.io/how-not-to-vue-18f16fe620b5) ，任何技术都有坑，了解Vue的短板，你就能扬长避短，就能用得更好。
  • [Vue.js Component Communication Patterns](https://alligator.io/vuejs/component-communication/)
  • [4 AJAX Patterns For Vue.js Apps](https://medium.com/js-dojo/4-ajax-patterns-for-vue-js-apps-add915fc9168)
  • [How To (Safely) Use A jQuery Plugin With Vue.js](https://vuejsdevelopers.com/2017/05/20/vue-js-safely-jquery-plugin/)
  • [7 Ways To Define A Component Template in Vue.js](https://vuejsdevelopers.com/2017/03/24/vue-js-component-templates/)
  • [Use Any Javascript Library With Vue.js](https://vuejsdevelopers.com/2017/04/22/vue-js-libraries-plugins/)
  • [Dynamic and async components made easy with Vue.js](https://lobotuerto.com/blog/dynamic-and-async-components-made-easy-with-vuejs/)
  当然，最后一定还有 [Awesome Vue](https://github.com/vuejs/awesome-vue) ，Vue.js里最为巨大最为优秀的资源列表。 # 小结 总结一下今天的内容。我先介绍的是前端性能优化方面的内容，推荐了图书、最佳实践性的文档、案例，以及一些在线性能测试分析工具。随后重点讲述了React和Vue两大前端框架，给出了大量的文章、教程和相关资源列表。我认为，React.js使用函数式编程方式，更加符合后端程序员的思路，而Vue是更符合前端工程师习惯的框架。因此，两者比较起来，Vue会更容易上手一些。 下篇文章，我们将讲述前端工程师的一个基本功——UI/UX设计。敬请期待。 下面是《程序员练级攻略》系列文章的目录。 - [开篇词](https://time.geekbang.org/column/article/8136)
  • 入门篇
    - [零基础启蒙](https://time.geekbang.org/column/article/8216) - [正式入门](https://time.geekbang.org/column/article/8217) - [程序员修养](https://time.geekbang.org/column/article/8700) - [编程语言](https://time.geekbang.org/column/article/8701) - [理论学科](https://time.geekbang.org/column/article/8887) - [系统知识](https://time.geekbang.org/column/article/8888) - [软件设计](https://time.geekbang.org/column/article/9369) - [Linux系统、内存和网络（系统底层知识）](https://time.geekbang.org/column/article/9759) - [异步I/O模型和Lock-Free编程（系统底层知识）](https://time.geekbang.org/column/article/9851) - [Java底层知识](https://time.geekbang.org/column/article/10216) - [数据库](https://time.geekbang.org/column/article/10301) - [分布式架构入门（分布式架构）](https://time.geekbang.org/column/article/10603) - [分布式架构经典图书和论文（分布式架构）](https://time.geekbang.org/column/article/10604) - [分布式架构工程设计(分布式架构)](https://time.geekbang.org/column/article/11232) - [微服务](https://time.geekbang.org/column/article/11116) - [容器化和自动化运维](https://time.geekbang.org/column/article/11665) - [机器学习和人工智能](https://time.geekbang.org/column/article/11669) - [前端基础和底层原理（前端方向）](https://time.geekbang.org/column/article/12271) - [前端性能优化和框架（前端方向）](https://time.geekbang.org/column/article/12389) - [UI/UX设计（前端方向）](https://time.geekbang.org/column/article/12486) - [技术资源集散地](https://time.geekbang.org/column/article/12561)