Files
CategoryResourceRepost/极客时间专栏/左耳听风/程序员练级攻略/88 | 程序员练级攻略:前端性能优化和框架.md
louzefeng d3828a7aee mod
2024-07-11 05:50:32 +00:00

20 KiB
Raw Blame History

前端性能优化

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

  • [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 。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 Slacks 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

    前端框架

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

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

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

    React.js框架

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

    入门

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

    然后下面的文章会带你了解一下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中最重要的东西。

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