極客時間-左耳聽風-程序員攻略-前端性能優化和框架

前端性能優化和框架

前端性能優化

前端性能優化方面的圖書。

• 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 運行效率的小提示，挺有用的。
• 17 Statistics to Sell Web Performance Optimization ，這個網頁上收集了好些公司的 Web 性能優化的工程分享，都是很是有價值的。
• 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

• 函數式編程。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 官方文檔（中文版））。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 兩大前端框架，給出了大量的文章、教程和相關資源列表。