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

這個(gè)是我訂閱 陳皓老師在極客上的專欄《左耳聽(tīng)風(fēng)》,我整理出來(lái)是為了自己方便學(xué)習(xí)，同時(shí)也分享給你們一起學(xué)習(xí)，當(dāng)然如果有興趣，可以去訂閱，為了避免廣告嫌疑，我這就不多說(shuō)了！以下第一人稱是指陳皓老師。

想閱讀更多優(yōu)質(zhì)文章請(qǐng)猛戳GitHub博客,一年百來(lái)篇優(yōu)質(zhì)文章等著你！

首先是推薦幾本前端性能優(yōu)化方面的圖書(shū)。

Web Performance in Action ，這本書(shū)目前國(guó)內(nèi)沒(méi)有賣(mài)的。你可以看電子版本，我覺(jué)得是一本很不錯(cuò)的書(shū)，其中有 CSS、圖片、字體、JavaScript 性能調(diào)優(yōu)等。

Designing for Performance ，這本在線的電子書(shū)很不錯(cuò)，其中講了很多網(wǎng)頁(yè)優(yōu)化的技術(shù)和相關(guān)的工具，可以讓你對(duì)整體網(wǎng)頁(yè)性能優(yōu)化有所了解。

High Performance JavaScript ，這本書(shū)在國(guó)內(nèi)可以買(mǎi)到，能讓你了解如何提升各方面的性能，包括代碼的加載、運(yùn)行、DOM 交互、頁(yè)面生存周期等。雅虎的前端工程師尼古拉斯·扎卡斯（Nicholas C. Zakas）和其他五位 JavaScript 專家介紹了頁(yè)面代碼加載的最佳方法和編程技巧，來(lái)幫助你編寫(xiě)更為高效和快速的代碼。你還會(huì)了解到構(gòu)建和部署文件到生產(chǎn)環(huán)境的最佳實(shí)踐，以及有助于定位線上問(wèn)題的工具。

High Performance Web Sites: Essential Knowledge for Front-End Engineers ，這本書(shū)國(guó)內(nèi)也有賣(mài)，翻譯版為《高性能網(wǎng)站建設(shè)指南：前端工程師技能精髓》。作者給出了 14 條具體的優(yōu)化原則，每一條原則都配以范例佐證，并提供了在線支持。

全書(shū)內(nèi)容豐富，主要包括減少 HTTP 請(qǐng)求、Edge Computing 技術(shù)、Expires Header 技術(shù)、gzip 組件、CSS 和 JavaScript 最佳實(shí)踐、主頁(yè)內(nèi)聯(lián)、Domain 最小化、JavaScript 優(yōu)化、避免重定向的技巧、刪除重復(fù) JavaScript 的技巧、關(guān)閉 ETags 的技巧、Ajax 緩存技術(shù)和最小化技術(shù)等。

除了上面這幾本書(shū)之外，Google 的 Web Fundamentals 里的 Performance 這一章節(jié)也有很多非常不錯(cuò)的知識(shí)和經(jīng)驗(yàn)。

接下來(lái)是一些最佳實(shí)踐性的文檔。

Browser Diet ，前端權(quán)威性能指南（中文版）。這是一群為大型站點(diǎn)工作的專家們建立的一份前端性能的工作指南。

PageSpeed Insights Rules ，谷歌給的一份性能指南和最佳實(shí)踐。

Best Practices for Speeding Up Your Web Site ，雅虎公司給的一份 7 個(gè)分類共 35 個(gè)最佳實(shí)踐的文檔。

接下來(lái)，重點(diǎn)推薦一個(gè)性能優(yōu)化的案例學(xué)習(xí)網(wǎng)站 WPO Stats 。WPO 是 Web Performance Optimization 的縮寫(xiě)，這個(gè)網(wǎng)站上有很多很不錯(cuò)的性能優(yōu)化的案例分享，一定可以幫助你很多。

然后是一些文章和案例。

A Simple Performance Comparison of HTTPS, SPDY and HTTP/2 ，這是一篇比較瀏覽器的 HTTPS、SPDY 和 HTTP/2 性能的文章，除了比較之外，還可以讓你了解一些技術(shù)細(xì)節(jié)。

7 Tips for Faster HTTP/2 Performance ，對(duì)于 HTTP/2 來(lái)說(shuō)，Nginx 公司給出的 7 個(gè)增加其性能的小提示。

Reducing Slack’s memory footprint ，Slack 團(tuán)隊(duì)減少內(nèi)存使用量的實(shí)踐。

Pinterest: Driving user growth with performance improvements ，Pinterest 關(guān)于性能調(diào)優(yōu)的一些分享，其中包括了前后端的一些性能調(diào)優(yōu)實(shí)踐。其實(shí)也是一些比較通用的玩法，這篇文章主要是想讓前端的同學(xué)了解一下如何做整體的性能調(diào)優(yōu)。

10 JavaScript Performance Boosting Tips ，10 個(gè)提高 JavaScript 運(yùn)行效率的小提示，挺有用的。

Getting started with the Picture Element ，這篇文章講述了 Responsive 布局所帶來(lái)的一些負(fù)面的問(wèn)題。主要是圖像適配的問(wèn)題，其中引出了一篇文章"Native Responsive Images" ，值得一讀。

Improve Page Load Times With DNS Prefetching ，這篇文章教了你一個(gè)如何降低 DNS 解析時(shí)間的小技術(shù)——DNS prefetching。

Jank Busting for Better Rendering Performance ，這是一篇 Google I/O 上的分享，關(guān)于前端動(dòng)畫(huà)渲染性能提升。

JavaScript Memory Profiling ，這是一篇谷歌官方教你如何使用 Chrome 的開(kāi)發(fā)工具來(lái)分析 JavaScript 內(nèi)存問(wèn)題的文章。

接下來(lái)是一些性能工具。在線性能測(cè)試分析工具太多，這里只推薦比較權(quán)威的。

PageSpeed ，谷歌有一組 PageSpeed 工具來(lái)幫助你分析和優(yōu)化網(wǎng)站的性能。Google 出品的，質(zhì)量相當(dāng)有保證。

YSlow ，雅虎的一個(gè)網(wǎng)頁(yè)分析工具。

GTmetrix ，是一個(gè)將 PageSpeed 和 YSlow 合并起來(lái)的一個(gè)網(wǎng)頁(yè)分析工具，并且加上一些 Page load 或是其它的一些分析。也是一個(gè)很不錯(cuò)的分析工具。

Awesome WPO ，在 GitHub 上的這個(gè) Awesome 中，你可以找到更多的性能優(yōu)化工具和資源。

另外，中國(guó)的網(wǎng)絡(luò)有各種問(wèn)題（你懂的），所以，你不能使用 Google 共享的 JavaScript 鏈接來(lái)提速，你得用中國(guó)自己的。你可以到這里看看中國(guó)的共享庫(kù)資源，F(xiàn)orget Google and Use These Hosted JavaScript Libraries in China 。

接下來(lái)，要學(xué)習(xí)的是 Web 前端的幾大框架。目前而言，前端社區(qū)有三大框架 Angular.js、React.js 和 Vue.js。我認(rèn)為，React 和 Vue 更為強(qiáng)勁一些，所以，我這里只寫(xiě)和 React 和 Vue 相關(guān)的攻略。關(guān)于兩者的比較，網(wǎng)上有好多文章。我這里推薦幾篇我覺(jué)得還不錯(cuò)的，供你參考。

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?

其實(shí)，比較這些框架的優(yōu)缺點(diǎn)還有利弊并不是要比出個(gè)輸贏，而是讓你了解一下不同框架的優(yōu)缺點(diǎn)。我覺(jué)得，這些框架都是可以學(xué)習(xí)的。而在我們生活工作中具體要用哪個(gè)框架，最好還是要有一些出發(fā)點(diǎn)，比如，你是為了找份好的工作，為了快速地搭一個(gè)網(wǎng)站，為了改造一個(gè)大規(guī)模的前端系統(tǒng)，還是純粹地為了學(xué)習(xí)……

不同的目的會(huì)導(dǎo)致不同的決定。我并不希望上述的這些比較會(huì)讓你進(jìn)入"二選一"或是"三選一"的境地。我只是想通過(guò)這些文章讓你知道這些框架的設(shè)計(jì)思路和實(shí)現(xiàn)原理，這些才是讓你受益一輩子的事。

下面先來(lái)學(xué)習(xí)一下 React.js 框架。

入門(mén)

React 學(xué)起來(lái)并不復(fù)雜，就看 React 官方教程 和其文檔就好了（ React 的中文教程 ）。

然后，下面的文章會(huì)帶你了解一下 React.js 的基本原理。

All the fundamental React.js concepts ，這篇文章講了所有的 React.js 的基本原理。

Learn React Fundamentals and Advanced Patterns ，這篇文章中有幾個(gè)短視頻，每個(gè)視頻不超過(guò) 5 分鐘，是學(xué)習(xí) React 的一個(gè)很不錯(cuò)的地方。

Thinking in React，這篇文章將引導(dǎo)你完成使用 React 構(gòu)建可搜索產(chǎn)品數(shù)據(jù)表的思考過(guò)程。

提高

學(xué)習(xí)一個(gè)技術(shù)最重要的是要學(xué)到其中的思想和方法。下面是一些我覺(jué)得學(xué)習(xí) React 中最重要的東西。

狀態(tài)，對(duì)于富客戶端來(lái)說(shuō)是非常麻煩也是坑最多的地方，這里有幾篇文章你可以一讀。

Common React.js mistakes: Unneeded state ，React.js 編程的常見(jiàn)錯(cuò)誤——不必要的狀態(tài)。

State is an Anti-Pattern ，關(guān)于如何做一個(gè)不錯(cuò)的組件的思考，很有幫助。

Why Local Component State is a Trap ，一些關(guān)于 “Single state tree” 的想法。

Thinking Statefully ，幾個(gè)很不錯(cuò)的例子讓你對(duì)聲明式的有狀態(tài)的技術(shù)有更好的理解。

傳統(tǒng)上，解決 React 的狀態(tài)問(wèn)題一般用 Redux。在這里推薦 Tips to learn React + Redux in 2018 。Redux 是一個(gè)狀態(tài)粘合組件，一般來(lái)說(shuō)，我們會(huì)用 Redux 來(lái)做一些數(shù)據(jù)狀態(tài)和其上層 Component 上的同步。這篇教程很不錯(cuò)。

最后是 "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

函數(shù)式編程。從 jQuery 過(guò)來(lái)的同學(xué)一定非常不習(xí)慣 React，而從 Java 等后端過(guò)來(lái)的程序員就會(huì)很習(xí)慣了。所以，我覺(jué)得 React 就是后端人員開(kāi)發(fā)的，或者說(shuō)是做函數(shù)式編程的人開(kāi)發(fā)的。對(duì)此，你需要學(xué)習(xí)一下 JavaScript 函數(shù)式編程的東西。

這里推薦一本免費(fèi)的電子書(shū) 《Professor Frisby’s Mostly Adequate Guide to Functional Programming》，其中譯版為《JS 函數(shù)式編程指南中文版》。

下面有幾篇文章非常不錯(cuò)。前兩篇和函數(shù)式編程有關(guān)的文章非常值得一讀。后三篇是一些比較實(shí)用的函數(shù)式編程和 React 結(jié)合的文章。

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

設(shè)計(jì)相關(guān)。接下來(lái)是學(xué)習(xí)一些 React 的設(shè)計(jì)模式。React Pattern 是一個(gè)不錯(cuò)的學(xué)習(xí) React 模式的地方。除此之外，還有如下的一些不錯(cuò)的文章也會(huì)對(duì)你很有幫助的。

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

實(shí)踐和經(jīng)驗(yàn)

還有一些不錯(cuò)的實(shí)踐和經(jīng)驗(yàn)。

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 相關(guān)資源的列表，很大很全。

React/Redux Links ，這也是 React 相關(guān)的資源列表，與上面不一樣的是，這個(gè)列表主要收集了大量的文章，其中講述了很多 React 知識(shí)和技術(shù)，比上面的列表好很多。

React Rocks ，這個(gè)網(wǎng)站主要收集各種 React 的組件示例，可以讓你大開(kāi)眼界。

Vue 可能是一個(gè)更符合前端工程師習(xí)慣的框架。不像 React.js 那樣使用函數(shù)式編程方式，是后端程序員的思路。

通過(guò)文章 “Why 43% of Front-End Developers want to learn Vue.js” ，你可以看出其編程方式和 React 是大相徑庭的，符合傳統(tǒng)的前端開(kāi)發(fā)的思維方式。

通過(guò)文章 Replacing jQuery With Vue.js: No Build Step Necessary ，我們可以看到，從 jQuery 是可以平滑過(guò)渡到 Vue 的。

另外，我們可以通過(guò) “10 things I love about Vue” ，了解 Vue 的一些比較優(yōu)秀的特性。

最令人高興的是，Vue 的作者是我的好朋友尤雨溪（Evan You），最近一次對(duì)他的采訪 “Vue on 2018?-?Interview with Evan You” 當(dāng)中有很多故事以及對(duì) Vue 的展望。（注意：Vue 是完全由其支持者和用戶資助的，這意味著它更接近社區(qū)而不受大公司的控制。）

要學(xué)習(xí) Vue 并不難，我認(rèn)為上官網(wǎng)看文檔（ Vue 官方文檔（ 中文版）），照著搞一搞就可以很快上手了。Vue.js screencasts 是一個(gè)很不錯(cuò)的英文視頻教程。

另外，推薦 新手向：Vue 2.0 的建議學(xué)習(xí)順序 ，這是 Vue 作者寫(xiě)的，所以有特殊意義。

Vue 的確比較簡(jiǎn)單，有 Web 開(kāi)發(fā)經(jīng)驗(yàn)的人上手也比較快，所以這里也不會(huì)像 React 那樣給出很多的資料。下面是一些我覺(jué)得還不錯(cuò)的內(nèi)容，推薦給你。

How not to Vue ，任何技術(shù)都有坑，了解 Vue 的短板，你就能揚(yáng)長(zhǎng)避短，就能用得更好。

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

當(dāng)然，最后一定還有 Awesome Vue ，Vue.js 里最為巨大最為優(yōu)秀的資源列表。

總結(jié)一下今天的內(nèi)容。我先介紹的是前端性能優(yōu)化方面的內(nèi)容，推薦了圖書(shū)、最佳實(shí)踐性的文檔、案例，以及一些在線性能測(cè)試分析工具。隨后重點(diǎn)講述了 React 和 Vue 兩大前端框架，給出了大量的文章、教程和相關(guān)資源列表。我認(rèn)為，React.js 使用函數(shù)式編程方式，更加符合后端程序員的思路，而 Vue 是更符合前端工程師習(xí)慣的框架。因此，兩者比較起來(lái)，Vue 會(huì)更容易上手一些。

以上是陳皓老師分享的，結(jié)合上一篇其實(shí)內(nèi)容是很多的，這個(gè)不是一時(shí)就能看完的，如果你不想當(dāng)一輩子的碼農(nóng)，不只只是搬磚的，那我們目標(biāo)是更具有創(chuàng)造的工程師，架構(gòu)師，這些內(nèi)容是值得我們花10年、20年，甚至一身要去學(xué)習(xí)的，希望大家有好東西也分享出來(lái)一起學(xué)習(xí)哈！

ps: 如果你想成為一名高級(jí)的程序員（工程師），英文能力是不可缺少的，平時(shí)也需要加強(qiáng)英文的學(xué)習(xí)！

你的點(diǎn)贊是我持續(xù)分享好東西的動(dòng)力，歡迎點(diǎn)贊！

干貨系列文章匯總?cè)缦拢X(jué)得不錯(cuò)點(diǎn)個(gè)Star，歡迎 加群 互相學(xué)習(xí)。

https://github.com/qq44924588...

我是小智，公眾號(hào)「大遷世界」作者，對(duì)前端技術(shù)保持學(xué)習(xí)愛(ài)好者。我會(huì)經(jīng)常分享自己所學(xué)所看的干貨，在進(jìn)階的路上，共勉！

關(guān)注公眾號(hào)，后臺(tái)回復(fù)福利，即可看到福利，你懂的。