程序員練級攻略（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 結合的文章。

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

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

一個笨笨的碼農，個人世界只能終身學習！