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

这个是我定阅 陈皓先生在极客上的专栏《左耳听风》,我整理出来是为了本身方便进修，同时也分享给你们一同进修，固然假如有兴致，能够去定阅，为了防止广告怀疑，我这就不多说了！以下第一人称是指陈皓先生。

想浏览更多优良文章请猛戳GitHub博客,一年百来篇优良文章等着你！

前端机能优化

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

• 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 规划所带来的一些负面的题目。重假如图象适配的题目，个中引出了一篇文章&＃8221;Native Responsive Images&＃8221; ，值得一读。
• 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?

实在，比较这些框架的优缺点另有利害并非要比出个胜负，而是让你相识一下差别框架的优缺点。我以为，这些框架都是能够进修的。而在我们生涯事情中详细要用哪一个框架，最好照样要有一些起点，比方，你是为了找份好的事情，为了疾速地搭一个网站，为了革新一个大规模的前端体系，照样地道地为了进修……

差别的目的会致使差别的决议。我并不愿望上述的这些比较会让你进入&＃8221;二选一&＃8221;或是&＃8221;三选一&＃8221;的田地。我只是想经由历程这些文章让你晓得这些框架的设想思绪和完成道理，这些才是让你受益一生的事。

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 上的同步。这篇教程很不错。
  • 末了是 &＃8220;State Architecture Patterns in React &＃8221; 系列文章，异常值得一读。
  • 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 连系的文章。

  • Master the Javascript Interview: What is Functional Programming?
  • The Rise and Fall and Rise of Functional Programming (Composing Software)
  • Functional UI and Components as Higher Order Functions
  • Functional Javascript: Reverse-Engineering the Hype
  • Some Thoughts on Function Components in 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

• 实践和履历

  另有一些不错的实践和履历。

  • 9 things every React.js beginner should know
  • Best practices for building large React applications
  • Clean Code vs. Dirty Code: React Best Practices
  • How to become a more productive React Developer
  • 8 Key React Component Decisions

资本列表

末了就是 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: 假如你想成为一位高等的程序员（工程师），英文才能是不可缺乏的，日常平凡也须要增强英文的进修！

你的点赞是我延续分享好东西的动力，迎接点赞！

交换

干货系列文章汇总以下，以为不错点个Star，迎接 加群 互相进修。

https://github.com/qq44924588&＃8230;

我是小智，民众号「大迁天下」作者，对前端手艺坚持进修爱好者。我会常常分享本身所学所看的干货，在进阶的路上，共勉！

关注民众号，背景复兴福利，即可看到福利，你懂的。