程序員練級攻略（2018）：前端性能優化和框架

時間 2019-11-06

原文原文鏈接

這個是我訂閱陳皓老師在極客上的專欄《左耳聽風》,我整理出來是爲了本身方便學習，同時也分享給大家一塊兒學習，固然若是有興趣，能夠去訂閱，爲了不廣告嫌疑，我這就很少說了！如下第一人稱是指陳皓老師。javascript

想閱讀更多優質文章請猛戳GitHub博客,一年百來篇優質文章等着你！html

前端性能優化

首先是推薦幾本前端性能優化方面的圖書。前端

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 緩存技術和最小化技術等。vue

除了上面這幾本書以外，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 的縮寫，這個網站上有不少很不錯的性能優化的案例分享，必定能夠幫助你不少。html5

而後是一些文章和案例。java

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 內存問題的文章。

接下來是一些性能工具。在線性能測試分析工具太多，這裏只推薦比較權威的。react

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 。jquery

前端框架

接下來，要學習的是 Web 前端的幾大框架。目前而言，前端社區有三大框架 Angular.js、React.js 和 Vue.js。我認爲，React 和 Vue 更爲強勁一些，因此，我這裏只寫和 React 和 Vue 相關的攻略。關於二者的比較，網上有好多文章。我這裏推薦幾篇我以爲還不錯的，供你參考。nginx

其實，比較這些框架的優缺點還有利弊並非要比出個輸贏，而是讓你瞭解一下不一樣框架的優缺點。我以爲，這些框架都是能夠學習的。而在咱們生活工做中具體要用哪一個框架，最好仍是要有一些出發點，好比，你是爲了找份好的工做，爲了快速地搭一個網站，爲了改造一個大規模的前端系統，仍是純粹地爲了學習……git

不一樣的目的會致使不一樣的決定。我並不但願上述的這些比較會讓你進入"二選一"或是"三選一"的境地。我只是想經過這些文章讓你知道這些框架的設計思路和實現原理，這些纔是讓你受益一生的事。

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 的資源列表。

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: 若是你想成爲一名高級的程序員（工程師），英文能力是不可缺乏的，平時也須要增強英文的學習！

你的點贊是我持續分享好東西的動力，歡迎點贊！