088 程序员练级攻略（2018）：前端性能优化和框架

前端性能优化

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

  • Web Performance in Action ，这本书目前国内没有卖的。你可以看电子版本，我觉得是一本很不错的书，其中有 CSS、图片、字体、JavaScript 性能调优等。
  • Designing for Performance ，这本在线的电子书很不错，其中讲了很多网页优化的技术和相关的工具，可以让你对整体网页性能优化有所了解。
  • High Performance JavaScript ，这本书在国内可以买到，能让你了解如何提升各方面的性能，包括代码的加载、运行、DOM 交互、页面生存周期等。雅虎的前端工程师尼古拉斯·扎卡斯（Nicholas C. Zakas）和其他五位 JavaScript 专家介绍了页面代码加载的最佳方法和编程技巧，来帮助你编写更为高效和快速的代码。你还会了解到构建和部署文件到生产环境的最佳实践，以及有助于定位线上问题的工具。
  • High Performance Web Sites: Essential Knowledge for Front-End Engineers ，这本书国内也有卖，翻译版为《高性能网站建设指南：前端工程师技能精髓》。作者给出了 14 条具体的优化原则，每一条原则都配以范例佐证，并提供了在线支持。

全书内容丰富，主要包括减少 HTTP 请求、Edge Computing 技术、Expires Header 技术、gzip 组件、CSS 和 JavaScript 最佳实践、主页内联、Domain 最小化、JavaScript 优化、避免重定向的技巧、删除重复 JavaScript 的技巧、关闭 ETags 的技巧、Ajax 缓存技术和最小化技术等。

  • 除了上面这几本书之外，Google 的 Web Fundamentals 里的 Performance 这一章节也有很多非常不错的知识和经验。

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

接下来，重点推荐一个性能优化的案例学习网站 WPO Stats 。WPO 是 Web Performance Optimization 的缩写，这个网站上有很多很不错的性能优化的案例分享，一定可以帮助你很多。

然后是一些文章和案例。

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

  • PageSpeed ，谷歌有一组 PageSpeed 工具来帮助你分析和优化网站的性能。Google 出品的，质量相当有保证。
  • YSlow ，雅虎的一个网页分析工具。
  • GTmetrix ，是一个将 PageSpeed 和 YSlow 合并起来的一个网页分析工具，并且加上一些 Page load 或是其它的一些分析。也是一个很不错的分析工具。
  • Awesome WPO ，在 GitHub 上的这个 Awesome 中，你可以找到更多的性能优化工具和资源。

另外，中国的网络有各种问题（你懂的），所以，你不能使用 Google 共享的 JavaScript 链接来提速，你得用中国自己的。你可以到这里看看中国的共享库资源，Forget Google and Use These Hosted JavaScript Libraries in China 。

前端框架

接下来，要学习的是 Web 前端的几大框架。目前而言，前端社区有三大框架 Angular.js、React.js 和 Vue.js。我认为，React 和 Vue 更为强劲一些，所以，我这里只写和 React 和 Vue 相关的攻略。关于两者的比较，网上有好多文章。我这里推荐几篇我觉得还不错的，供你参考。

其实，比较这些框架的优缺点还有利弊并不是要比出个输赢，而是让你了解一下不同框架的优缺点。我觉得，这些框架都是可以学习的。而在我们生活工作中具体要用哪个框架，最好还是要有一些出发点，比如，你是为了找份好的工作，为了快速地搭一个网站，为了改造一个大规模的前端系统，还是纯粹地为了学习……

不同的目的会导致不同的决定。我并不希望上述的这些比较会让你进入 “ 二选一 ” 或是 “ 三选一 ” 的境地。我只是想通过这些文章让你知道这些框架的设计思路和实现原理，这些才是让你受益一辈子的事。

React.js 框架

下面先来学习一下 React.js 框架。

入门

React 学起来并不复杂，就看 React 官方教程 和其文档就好了（ React 的中文教程 ）。

然后，下面的文章会带你了解一下 React.js 的基本原理。

提高

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

这里推荐一本免费的电子书 《Professor Frisby’s Mostly Adequate Guide to Functional Programming》，其中译版为《JS 函数式编程指南中文版》。

下面有几篇文章非常不错。前两篇和函数式编程有关的文章非常值得一读。后三篇是一些比较实用的函数式编程和 React 结合的文章。

还有一些不错的实践和经验。

资源列表

最后就是 React 的资源列表。

  • Awesome React ，这是一些 React 相关资源的列表，很大很全。
  • React/Redux Links ，这也是 React 相关的资源列表，与上面不一样的是，这个列表主要收集了大量的文章，其中讲述了很多 React 知识和技术，比上面的列表好很多。
  • React Rocks ，这个网站主要收集各种 React 的组件示例，可以让你大开眼界。

Vue.js 框架

Vue 可能是一个更符合前端工程师习惯的框架。不像 React.js 那样使用函数式编程方式，是后端程序员的思路。

最令人高兴的是，Vue 的作者是我的好朋友尤雨溪（Evan You），最近一次对他的采访 “Vue on 2018 - Interview with Evan You” 当中有很多故事以及对 Vue 的展望。（注意：Vue 是完全由其支持者和用户资助的，这意味着它更接近社区而不受大公司的控制。）

要学习 Vue 并不难，我认为上官网看文档（ Vue 官方文档（中文版）），照着搞一搞就可以很快上手了。Vue.js screencasts 是一个很不错的英文视频教程。

另外，推荐 新手向：Vue 2.0 的建议学习顺序 ，这是 Vue 作者写的，所以有特殊意义。

Vue 的确比较简单，有 Web 开发经验的人上手也比较快，所以这里也不会像 React 那样给出很多的资料。下面是一些我觉得还不错的内容，推荐给你。

当然，最后一定还有 Awesome Vue ，Vue.js 里最为巨大最为优秀的资源列表。

小结

总结一下今天的内容。我先介绍的是前端性能优化方面的内容，推荐了图书、最佳实践性的文档、案例，以及一些在线性能测试分析工具。随后重点讲述了 React 和 Vue 两大前端框架，给出了大量的文章、教程和相关资源列表。我认为，React.js 使用函数式编程方式，更加符合后端程序员的思路，而 Vue 是更符合前端工程师习惯的框架。因此，两者比较起来，Vue 会更容易上手一些。

参考资料

https://learn.lianglianglee.com/%e4%b8%93%e6%a0%8f/%e5%b7%a6%e8%80%b3%e5%90%ac%e9%a3%8e/088%20%20%e7%a8%8b%e5%ba%8f%e5%91%98%e7%bb%83%e7%ba%a7%e6%94%bb%e7%95%a5%ef%bc%882018%ef%bc%89%ef%bc%9a%e5%89%8d%e7%ab%af%e6%80%a7%e8%83%bd%e4%bc%98%e5%8c%96%e5%92%8c%e6%a1%86%e6%9e%b6.md