程序员练级攻略(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 这一章节也有很多非常不错的知识和经验。
- 接下来是一些最佳实践性的文档。
- Browser Diet ,前端权威性能指南(中文版)。这是一群为大型站点工作的专家们建立的一份前端性能的工作指南。
- PageSpeed Insights Rules ,谷歌给的一份性能指南和最佳实践。
- Best Practices for Speeding Up Your Web Site ,雅虎公司给的一份 7 个分类共 35 个最佳实践的文档。
接下来,重点推荐一个性能优化的案例学习网站 WPO Stats 。WPO 是 Web Performance Optimization 的缩写,这个网站上有很多很不错的性能优化的案例分享,一定可以帮助你很多。
然后是一些文章和案例。
- A Simple Performance Comparison of HTTPS, SPDY and HTTP/2 ,这是一篇比较浏览器的 HTTPS、SPDY 和 HTTP/2 性能的文章,除了比较之外,还可以让你了解一些技术细节。
- 7 Tips for Faster HTTP/2 Performance ,对于 HTTP/2 来说,Nginx 公司给出的 7 个增加其性能的小提示。
- Reducing Slack’s memory footprint ,Slack 团队减少内存使用量的实践。
- Pinterest: Driving user growth with performance improvements ,Pinterest 关于性能调优的一些分享,其中包括了前后端的一些性能调优实践。其实也是一些比较通用的玩法,这篇文章主要是想让前端的同学了解一下如何做整体的性能调优。
- 10 JavaScript Performance Boosting Tips ,10 个提高 JavaScript 运行效率的小提示,挺有用的。
- Getting started with the Picture Element ,这篇文章讲述了 Responsive 布局所带来的一些负面的问题。主要是图像适配的问题,其中引出了一篇文章"Native Responsive Images" ,值得一读。
- Improve Page Load Times With DNS Prefetching ,这篇文章教了你一个如何降低 DNS 解析时间的小技术——DNS prefetching。
- Jank Busting for Better Rendering Performance ,这是一篇 Google I/O 上的分享,关于前端动画渲染性能提升。
- JavaScript Memory Profiling ,这是一篇谷歌官方教你如何使用 Chrome 的开发工具来分析 JavaScript 内存问题的文章。
接下来是一些性能工具。在线性能测试分析工具太多,这里只推荐比较权威的。
- 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 相关的攻略。关于两者的比较,网上有好多文章。我这里推荐几篇我觉得还不错的,供你参考。
- Angular vs. React vs. Vue: A 2017 comparison
- React or Vue: Which JavaScript UI Library Should You Be Using?
- ReactJS vs Angular5 vs Vue.js - What to choose in 2018?
其实,比较这些框架的优缺点还有利弊并不是要比出个输赢,而是让你了解一下不同框架的优缺点。我觉得,这些框架都是可以学习的。而在我们生活工作中具体要用哪个框架,最好还是要有一些出发点,比如,你是为了找份好的工作,为了快速地搭一个网站,为了改造一个大规模的前端系统,还是纯粹地为了学习……
不同的目的会导致不同的决定。我并不希望上述的这些比较会让你进入"二选一"或是"三选一"的境地。我只是想通过这些文章让你知道这些框架的设计思路和实现原理,这些才是让你受益一辈子的事。
React.js 框架
下面先来学习一下 React.js 框架。
入门
React 学起来并不复杂,就看 React 官方教程 和其文档就好了( React 的中文教程 )。
然后,下面的文章会带你了解一下 React.js 的基本原理。
- All the fundamental React.js concepts ,这篇文章讲了所有的 React.js 的基本原理。
- Learn React Fundamentals and Advanced Patterns ,这篇文章中有几个短视频,每个视频不超过 5 分钟,是学习 React 的一个很不错的地方。
- Thinking in React,这篇文章将引导你完成使用 React 构建可搜索产品数据表的思考过程。
提高
学习一个技术最重要的是要学到其中的思想和方法。下面是一些我觉得学习 React 中最重要的东西。
状态,对于富客户端来说是非常麻烦也是坑最多的地方,这里有几篇文章你可以一读。
- Common React.js mistakes: Unneeded state ,React.js 编程的常见错误——不必要的状态。
- State is an Anti-Pattern ,关于如何做一个不错的组件的思考,很有帮助。
- Why Local Component State is a Trap ,一些关于 “Single state tree” 的想法。
- Thinking Statefully ,几个很不错的例子让你对声明式的有状态的技术有更好的理解。
- 传统上,解决 React 的状态问题一般用 Redux。在这里推荐 Tips to learn React + Redux in 2018 。Redux 是一个状态粘合组件,一般来说,我们会用 Redux 来做一些数据状态和其上层 Component 上的同步。这篇教程很不错。
- 最后是 "State Architecture Patterns in React " 系列文章,非常值得一读。
- Part 1: A Review
- Part 2: The Top-Heavy Architecture, Flux and Performance
- Part 3: Articulation Points, zine and An Overall Strategy
- Part 4: Purity, Flux-duality and Dataflow
函数式编程。从 jQuery 过来的同学一定非常不习惯 React,而从 Java 等后端过来的程序员就会很习惯了。所以,我觉得 React 就是后端人员开发的,或者说是做函数式编程的人开发的。对此,你需要学习一下 JavaScript 函数式编程的东西。
这里推荐一本免费的电子书 《Professor Frisby’s Mostly Adequate Guide to Functional Programming》,其中译版为《JS 函数式编程指南中文版》。下面有几篇文章非常不错。前两篇和函数式编程有关的文章非常值得一读。后三篇是一些比较实用的函数式编程和 React 结合的文章。
设计相关。接下来是学习一些 React 的设计模式。React Pattern 是一个不错的学习 React 模式的地方。除此之外,还有如下的一些不错的文章也会对你很有帮助的。
- React Higher Order Components in depth
- Presentational and Container Components
- Controlled and uncontrolled form inputs in React don’t have to be complicated
- Function as Child Components
- Writing Scalable React Apps with the Component Folder Pattern
- Reusable Web Application Strategies
- Characteristics of an Ideal React Architecture
实践和经验
还有一些不错的实践和经验。
资源列表
最后就是 React 的资源列表。
- Awesome React ,这是一些 React 相关资源的列表,很大很全。
- React/Redux Links ,这也是 React 相关的资源列表,与上面不一样的是,这个列表主要收集了大量的文章,其中讲述了很多 React 知识和技术,比上面的列表好很多。
- React Rocks ,这个网站主要收集各种 React 的组件示例,可以让你大开眼界。
Vue.js 框架
Vue 可能是一个更符合前端工程师习惯的框架。不像 React.js 那样使用函数式编程方式,是后端程序员的思路。
- 通过文章 “Why 43% of Front-End Developers want to learn Vue.js” ,你可以看出其编程方式和 React 是大相径庭的,符合传统的前端开发的思维方式。
- 通过文章 Replacing jQuery With Vue.js: No Build Step Necessary ,我们可以看到,从 jQuery 是可以平滑过渡到 Vue 的。
- 另外,我们可以通过 “10 things I love about Vue” ,了解 Vue 的一些比较优秀的特性。
最令人高兴的是,Vue 的作者是我的好朋友尤雨溪(Evan You),最近一次对他的采访 “Vue on 2018 - Interview with Evan You” 当中有很多故事以及对 Vue 的展望。(注意:Vue 是完全由其支持者和用户资助的,这意味着它更接近社区而不受大公司的控制。)
要学习 Vue 并不难,我认为上官网看文档( Vue 官方文档( 中文版)),照着搞一搞就可以很快上手了。Vue.js screencasts 是一个很不错的英文视频教程。
另外,推荐 新手向:Vue 2.0 的建议学习顺序 ,这是 Vue 作者写的,所以有特殊意义。
Vue 的确比较简单,有 Web 开发经验的人上手也比较快,所以这里也不会像 React 那样给出很多的资料。下面是一些我觉得还不错的内容,推荐给你。
- How not to Vue ,任何技术都有坑,了解 Vue 的短板,你就能扬长避短,就能用得更好。
- Vue.js Component Communication Patterns
- 4 AJAX Patterns For Vue.js Apps
- How To (Safely) Use A jQuery Plugin With Vue.js
- 7 Ways To Define A Component Template in Vue.js
- Use Any Javascript Library With Vue.js
- Dynamic and async components made easy with Vue.js
当然,最后一定还有 Awesome Vue ,Vue.js 里最为巨大最为优秀的资源列表。
小结
总结一下今天的内容。我先介绍的是前端性能优化方面的内容,推荐了图书、最佳实践性的文档、案例,以及一些在线性能测试分析工具。随后重点讲述了 React 和 Vue 两大前端框架,给出了大量的文章、教程和相关资源列表。我认为,React.js 使用函数式编程方式,更加符合后端程序员的思路,而 Vue 是更符合前端工程师习惯的框架。因此,两者比较起来,Vue 会更容易上手一些。
以上是陈皓老师分享的,结合上一篇其实内容是很多的,这个不是一时就能看完的,如果你不想当一辈子的码农,不只只是搬砖的,那我们目标是更具有创造的工程师,架构师,这些内容是值得我们花10年、20年,甚至一身要去学习的,希望大家有好东西也分享出来一起学习哈!
ps: 如果你想成为一名高级的程序员(工程师),英文能力是不可缺少的,平时也需要加强英文的学习!
你的点赞是我持续分享好东西的动力,欢迎点赞!
一个笨笨的码农,我的世界只能终身学习!
欢迎加入前端大家庭,里面会经常分享一些技术资源。