摘要：，谷歌給的一份性能指南和最佳實踐。目前而言，前端社區有三大框架和。隨后重點講述了和兩大前端框架，給出了大量的文章教程和相關資源列表。我認為，使用函數式編程方式，更加符合后端程序員的思路，而是更符合前端工程師習慣的框架。

這個是我訂閱 陳皓老師在極客上的專欄《左耳聽風》,我整理出來是為了自己方便學習，同時也分享給你們一起學習，當然如果有興趣，可以去訂閱，為了避免廣告嫌疑，我這就不多說了！以下第一人稱是指陳皓老師。

想閱讀更多優質文章請猛戳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 布局所帶來的一些負面的問題。主要是圖像適配的問題，其中引出了一篇文章"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 學起來并不復雜，就看 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 結合的文章。

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 可能是一個更符合前端工程師習慣的框架。不像 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...

我是小智，公眾號「大遷世界」作者，對前端技術保持學習愛好者。我會經常分享自己所學所看的干貨，在進階的路上，共勉！

關注公眾號，后臺回復福利，即可看到福利，你懂的。