xinyin025/CategoryResourceRepost
1
0
Fork 0
mirror of https://github.com/cheetahlou/CategoryResourceRepost.git synced 2025-11-01 14:53:47 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity
Files
d3828a7aee38a43752ee101cef747d605bf4580a
CategoryResourceRepost/极客时间专栏/左耳听风/程序员练级攻略/88 | 程序员练级攻略：前端性能优化和框架.md
louzefeng d3828a7aee mod
2024-07-11 05:50:32 +00:00

280 lines
20 KiB
Markdown
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<audio id="audio" title="88 | 程序员练级攻略：前端性能优化和框架" controls="" preload="none"><source id="mp3" src="https://static001.geekbang.org/resource/audio/c0/f9/c0b0b028f2dee2cb86601fc8a0f097f9.mp3"></audio>
# 前端性能优化
首先是推荐几本前端性能优化方面的图书。
<li>
[Web Performance in Action](http://www.allitebooks.in/web-performance-action/) ，这本书目前国内没有卖的。你可以看电子版本，我觉得是一本很不错的书，其中有CSS、图片、字体、JavaScript性能调优等。
</li>
<li>
[Designing for Performance](http://designingforperformance.com/) ，这本在线的电子书很不错，其中讲了很多网页优化的技术和相关的工具，可以让你对整体网页性能优化有所了解。
</li>
<li>
[High Performance JavaScript](https://book.douban.com/subject/5362856/) ，这本书在国内可以买到，能让你了解如何提升各方面的性能，包括代码的加载、运行、DOM交互、页面生存周期等。雅虎的前端工程师尼古拉斯·扎卡斯（Nicholas C. Zakas）和其他五位JavaScript专家介绍了页面代码加载的最佳方法和编程技巧，来帮助你编写更为高效和快速的代码。你还会了解到构建和部署文件到生产环境的最佳实践，以及有助于定位线上问题的工具。
</li>
<li>
[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缓存技术和最小化技术等。
</li>
<li>
除了上面这几本书之外，Google的 [Web Fundamentals](https://developers.google.com/web/fundamentals/) 里的 [Performance](https://developers.google.com/web/fundamentals/performance/why-performance-matters/) 这一章节也有很多非常不错的知识和经验。
</li>
接下来是一些最佳实践性的文档。
<li>
[Browser Diet](http://browserdiet.com/zh/) ，前端权威性能指南（中文版）。这是一群为大型站点工作的专家们建立的一份前端性能的工作指南。
</li>
<li>
[PageSpeed Insights Rules](https://developers.google.com/speed/docs/insights/rules) ，谷歌给的一份性能指南和最佳实践。
</li>
<li>
[Best Practices for Speeding Up Your Web Site](https://developer.yahoo.com/performance/rules.html) ，雅虎公司给的一份7个分类共35个最佳实践的文档。
</li>
接下来，重点推荐一个性能优化的案例学习网站 [WPO Stats](https://wpostats.com/) 。WPO是Web Performance Optimization的缩写，这个网站上有很多很不错的性能优化的案例分享，一定可以帮助你很多。
然后是一些文章和案例。
<li>
[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性能的文章，除了比较之外，还可以让你了解一些技术细节。
</li>
<li>
[7 Tips for Faster HTTP/2 Performance](https://www.nginx.com/blog/7-tips-for-faster-http2-performance/) ，对于HTTP/2来说，Nginx公司给出的7个增加其性能的小提示。
</li>
<li>
[Reducing Slack’s memory footprint](https://slack.engineering/reducing-slacks-memory-footprint-4480fec7e8eb) ，Slack团队减少内存使用量的实践。
</li>
<li>
[Pinterest: Driving user growth with performance improvements](https://medium.com/@Pinterest_Engineering/driving-user-growth-with-performance-improvements-cfc50dafadd7) ，Pinterest关于性能调优的一些分享，其中包括了前后端的一些性能调优实践。其实也是一些比较通用的玩法，这篇文章主要是想让前端的同学了解一下如何做整体的性能调优。
</li>
<li>
[10 JavaScript Performance Boosting Tips](http://jonraasch.com/blog/10-javascript-performance-boosting-tips-from-nicholas-zakas) ，10个提高JavaScript运行效率的小提示，挺有用的。
</li>
<li>
[17 Statistics to Sell Web Performance Optimization](http://www.guypo.com/17-statistics-to-sell-web-performance-optimization/) ，这个网页上收集了好些公司的Web性能优化的工程分享，都是非常有价值的。
</li>
<li>
[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/)" ，值得一读。
</li>
<li>
[Improve Page Load Times With DNS Prefetching](http://www.deanhume.com/Home/BlogPost/improve-page-load-times-with-dns-prefetching/80) ，这篇文章教了你一个如何降低DNS解析时间的小技术——DNS prefetching。
</li>
<li>
[Jank Busting for Better Rendering Performance](http://www.html5rocks.com/en/tutorials/speed/rendering/) ，这是一篇Google I/O上的分享，关于前端动画渲染性能提升。
</li>
<li>
[JavaScript Memory Profiling](https://developer.chrome.com/devtools/docs/javascript-memory-profiling) ，这是一篇谷歌官方教你如何使用Chrome的开发工具来分析JavaScript内存问题的文章。
</li>
接下来是一些性能工具。在线性能测试分析工具太多，这里只推荐比较权威的。
<li>
[PageSpeed](https://developers.google.com/speed/pagespeed/) ，谷歌有一组PageSpeed工具来帮助你分析和优化网站的性能。Google出品的，质量相当有保证。
</li>
<li>
[YSlow](https://github.com/marcelduran/yslow) ，雅虎的一个网页分析工具。
</li>
<li>
[GTmetrix](https://gtmetrix.com/) ，是一个将PageSpeed和YSlow合并起来的一个网页分析工具，并且加上一些Page load或是其它的一些分析。也是一个很不错的分析工具。
</li>
<li>
[Awesome WPO](https://github.com/davidsonfellipe/awesome-wpo) ，在GitHub上的这个Awesome中，你可以找到更多的性能优化工具和资源。
</li>
另外，中国的网络有各种问题（你懂的），所以，你不能使用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的基本原理。
<li>
[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的基本原理。
</li>
<li>
[Learn React Fundamentals and Advanced Patterns](https://blog.kentcdodds.com/learn-react-fundamentals-and-advanced-patterns-eac90341c9db) ，这篇文章中有几个短视频，每个视频不超过5分钟，是学习React的一个很不错的地方。
</li>
<li>
[Thinking in React](https://reactjs.org/docs/thinking-in-react.html)，这篇文章将引导你完成使用React构建可搜索产品数据表的思考过程。
</li>
**提高**
学习一个技术最重要的是要学到其中的思想和方法。下面是一些我觉得学习React中最重要的东西。
<li>
**状态**，对于富客户端来说是非常麻烦也是坑最多的地方，这里有几篇文章你可以一读。
<ul>
<li>
[Common React.js mistakes: Unneeded state](http://reactkungfu.com/2015/09/common-react-dot-js-mistakes-unneeded-state/) ，React.js编程的常见错误——不必要的状态。
</li>
<li>
[State is an Anti-Pattern](https://www.reddit.com/r/reactjs/comments/3bjdoe/state_is_an_antipattern/) ，关于如何做一个不错的组件的思考，很有帮助。
</li>
<li>
[Why Local Component State is a Trap](https://www.safaribooksonline.com/blog/2015/10/29/react-local-component-state/) ，一些关于 “Single state tree” 的想法。
</li>
<li>
[Thinking Statefully](https://daveceddia.com/thinking-statefully/) ，几个很不错的例子让你对声明式有状态的技术有更好的理解。
</li>
<li>
传统上，解决React的状态问题一般用Redux。在这里推荐 [Tips to learn React + Redux in 2018](https://www.robinwieruch.de/tips-to-learn-react-redux/) 。Redux是一个状态粘合组件，一般来说，我们会用Redux来做一些数据状态和其上层Component上的同步。这篇教程很不错。
</li>
<li>
最后是 "State Architecture Patterns in React " 系列文章，非常值得一读。
<ul>
- [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&amp;utm_medium=email&amp;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的资源列表。
<li>
[Awesome React](https://github.com/enaqx/awesome-react) ，这是一些React相关资源的列表，很大很全。
</li>
<li>
[React/Redux Links](https://github.com/markerikson/react-redux-links) ，这也是React相关的资源列表，与上面不一样的是，这个列表主要收集了大量的文章，其中讲述了很多React知识和技术，比上面的列表好很多。
</li>
<li>
[React Rocks](https://react.rocks/) ，这个网站主要收集各种React的组件示例，可以让你大开眼界。
</li>
## Vue.js框架
Vue可能是一个更符合前端工程师习惯的框架。不像React.js那样使用函数式编程方式，是后端程序员的思路。
<li>
通过文章 “[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是大相径庭的，符合传统的前端开发的思维方式。
</li>
<li>
通过文章 [Replacing jQuery With Vue.js: No Build Step Necessary](https://www.smashingmagazine.com/2018/02/jquery-vue-javascript/) ，我们可以看到，从jQuery是可以平滑过渡到Vue的。
</li>
<li>
另外，我们可以通过 “[10 things I love about Vue](https://medium.com/@dalaidunc/10-things-i-love-about-vue-505886ddaff2)” ，了解Vue的一些比较优秀的特性。
</li>
最令人高兴的是，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那样给出很多的资料。下面是一些我觉得还不错的内容，推荐给你。
<li>
[How not to Vue](https://itnext.io/how-not-to-vue-18f16fe620b5) ，任何技术都有坑，了解Vue的短板，你就能扬长避短，就能用得更好。
</li>
<li>
[Vue.js Component Communication Patterns](https://alligator.io/vuejs/component-communication/)
</li>
<li>
[4 AJAX Patterns For Vue.js Apps](https://medium.com/js-dojo/4-ajax-patterns-for-vue-js-apps-add915fc9168)
</li>
<li>
[How To (Safely) Use A jQuery Plugin With Vue.js](https://vuejsdevelopers.com/2017/05/20/vue-js-safely-jquery-plugin/)
</li>
<li>
[7 Ways To Define A Component Template in Vue.js](https://vuejsdevelopers.com/2017/03/24/vue-js-component-templates/)
</li>
<li>
[Use Any Javascript Library With Vue.js](https://vuejsdevelopers.com/2017/04/22/vue-js-libraries-plugins/)
</li>
<li>
[Dynamic and async components made easy with Vue.js](https://lobotuerto.com/blog/dynamic-and-async-components-made-easy-with-vuejs/)
</li>
当然，最后一定还有 [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)
<li>入门篇
<ul>
- [零基础启蒙](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)
Reference in New Issue View Git Blame Copy Permalink