大前端時代以及即將到來的 5G 時代，使得 3D 可視化、音視頻直播技術、IM 即時通訊等場景應用變得大有可爲。無論是前段時間爆款換臉應用出現，還是近期時間頭像加的火爆，似乎都在表明一個點“好事將近”。
不知不覺，九月已經過去，由於這個月工作上，被 C++ 折磨得很難受，而且其他時間都在學習，所以沒有時間寫文章，好在技術提升很大。今天準備好好談一談重型應用的架構以及技術選型，爲接下來我的正式架構設計做個鋪墊。
爲什麼寫重型應用的架構和技術選型
- 傳統的 web 前端，只能發個 ajax 請求，畫畫頁面。了不得寫個 webApp。
- 想讓後端的同學們，瞭解下目前大前端的世界，現在的前端跟以前不一樣了，特別現在市場很缺高級前端，但是術業有專攻，這點我承認。
- 大前端的定義，太廣泛，在我看來，必須深入前端某個方向，以及能獨立設計不那麼複雜場景下的後端架構。
- 在極客時間上提問了 winter 老師，我自我感覺已經良好，但是迷茫了。他回懟了我：想一想你用你的技術做出了什麼 nb 的東西吧。
- 是人都想做出點什麼事情，我想引起大家的共鳴去使用某些技術，或者朝着這個方向去發展，共同提升 社區的技術整體層次。
什麼是重型應用
例如微信、QQ、Telegram 以及一些工具類的應用。
說到這些大家肯定覺得，爲什麼不說是遊戲？當然遊戲也算，可是我相信做出 1000 萬人每天都在用的產品是大家的夢想，起碼能吹一輩子吧。
工具類的東西其實是最難做的，比如 vsCode ， Excel ，PhotoShop 這些。這也是爲什麼這麼多年出現成功的工具類產品這麼少。這裏不得不提到 vsCode，它其實就是用 ELectron 開發，基於 TypeScript。當然肯定使用了不少 C++ 插件，說到這裏，留下傷心的眼淚，最近也是被折磨得很難受。
成功開發一個重型應用的好處
- 出去面試基本上很容易成功，特別是專業性強的崗位，例如你在 QQ 開發了十幾年，你根本不用出去找工作，當然你應該也不會跑。
- 技術全面，複雜場景你都能 hold 住。
- 有能吹的地方，可以跟誰說：我開發的東西，多少萬人在用，老了還能吹。程序員嘛，一半時間都在吹水，還有接近一半時間在划水，只有一丁點時間在寫代碼。
- 更容易財務自由，生活自由，例如現在很多有過成功的重型應用開發者已經不單純靠代碼產出維持生活。他們做技術顧問，賣課程，出書，辦培訓都甚至比單純寫業務代碼賺得多很多。
正式開始
- 目前跨平臺框架，移動端比較成熟的是 React-Native，但是大家有所瞭解的都應該知道，這個框架雖然生態比較成熟，但是在面對衆多手機的適配難度，以及性能方面存在的缺陷，如果用它製作重型應用我覺得是不合適的，如果要做重型應用，移動端應該使用原生。
- 庫克說過，中國的移動端開發確實很強，美國人要做一個應用，首先考慮的是 PC 桌面端，而國內首先考慮的是移動端。
國內移動端開發人員，在我看來已經人目前已經夠多了，如果說你現在不會 React-Native 和 Flutter，我也不建議你去深入學習，特別是 Flutter。
爲什麼要這麼說？
React-Native 剛出來的時候，坑多吧。現在 Flutter 也是，可是當你從 RN 最初的版本踩坑踩到現在，之前踩的坑大都沒有意義。（說這些話想過被噴，但是… 此處省略一萬字，建議去了解下原理和基本使用，不要耗費太多時間）
一個技術你去使用，並不是它多流行，只要它足夠流行。— 來自某位國內大佬
技術的學習，應該多往底層鑽研，如果你走錯了路，鑽錯了方向，浪費了時間得不償失，我之前有說過，前端最核心的幾個基礎知識點，應用層的東西從來不會很難。前提你的基礎足夠紮實。
既然說了移動端沒有合適的重型跨平臺應用開發框架，那麼只有 PC 端了。還有多少小夥伴在 PC 端開發呢？
Electron 開發，來了
我不止一次提到過這個框架，我覺得它真是一個非常棒的框架，爲什麼這麼說呢？
- 我跟很多朋友說過，如果想開發 APP，不會寫原生，那麼你肯定達不到某種境界。因爲你始終有很多很多的黑盒過程，可是 Electron 就會大大降低這個概率。
- 基本上沒有適配和差異性，Linux 和 Mac 以及 Windows 三者都可以運行，除了 Mac 上某些特殊場景需要自己設計下菜單快捷鍵之類，以及一些文件 IO 等 MAC 默認行爲。
- 最新的 Node 版本、運行的 V8 環境以及最新的谷歌瀏覽器一起被打包，最新的技術和 API 都可以用，無需適配擔心兼容性，真正放飛自我，可以隨時隨刻用 Node.js 實現功能，甚至調用大量 C++ 插件，著名的 VSCode 就是這樣而來。
你甚至可以看成 Electron 給 web 網頁套上一層殼，你可以在主進程寫你的 Node.js 去實現功能，渲染進程你怎麼寫怎麼寫，還可以呼叫封裝好的原生接口。遇到特別複雜的需求，用 C++ 插件去實現吧。
最終打包出來的安裝包跟正常的桌面應用是一樣的，正常安裝卸載等，都已經封裝好。
目前 GitHub 上已經有 77.2K 的 star。
應用層面的東西，大都不會太難，Electron 的文檔已經非常全面，基於它出現了很多複雜，而且成功的工具類重型應用。我相信它。
WhatsApp 也是基於它，國外還有一些很 NB 的應用也是。這裏不做過多闡述，可以確定它是一個成熟而且成功的框架。
可能很多人看到這裏又要說標題黨了，別急，下面來乾貨。
重型應用架構注重的核心問題
- 項目本身的最重要功能是什麼？
- 項目本身出發點是爲客戶提供什麼方便？
- 項目的核心競爭力是什麼？
一個好的開發，它一定能懂一些產品，甚至測試，當然他也應該會炒河粉，35 歲以後好維持生活。
我們今天舉一個例子，IM，即時通訊，Telegram，20 萬人超級羣端到端加密的核心賣點產品。
電報 Telegram：
現在回答上面三個問題：- 項目本身的最重要功能是什麼？答案：即時通訊，信息的收發。
- 項目本身出發點是爲客戶提供什麼方便？答案：使用產品進行消息傳遞
- 項目的核心競爭力是什麼？答案：20 萬人的超級羣，端到端加密，隱私足夠安全
核心競爭力，往往代表了這個應用產物的技術最難點，因爲誰都能做，那麼就不是核心競爭力了
所以我們其他的都忽略，關注第三點，開始進行技術選型，架構。
Node.js 和 JavaScript 的重型應用架構設計
要想寫好這個架構，我覺得你首先在自身的擅長領域不能有太多的黑盒過程。例如框架源碼，庫原理實現，瀏覽器和 Node.js 的事件 EventLopp 以及他們的缺陷，你要熟知在心。因爲像這種應用，一個小方向可能就會掏空你的技術棧，耗盡你的精力，例如音視頻、圖片處理等。
單線程的 Node.js 以及 js 主解析引擎，讓我們又愛又恨。
這款應用的核心競爭力，是 20 萬人超級羣，那麼數據量很大，大批量渲染壓力和頻繁加解密計算耗時、頻繁數據庫寫入壓力都是不可避免的，那麼我們的 Node.js 擅長異步非阻塞，以及前端渲染進程的異步就顯得尤爲重要。
前端架構整體的核心除了技術選型以及大體框架外，就是任務調度。
這裏的任務調度分兩種：
- 渲染任務調度。
- 非渲染任務調度。
單個渲染任務調度
- React 框架中，多次傳入對象，setState 會自動合併到一次執行，其實就是一種節流思想。
- React 的 Fiber 架構思想, 把若干個任務分割成多個小任務執行，中間根據你的任務優先級安排去選擇時機執行。
- 淘寶的分片渲染方案，跟上面第二條有一些類似。
我之前說過，應用層的東西都不難，只要你基礎足夠紮實，能手寫出簡單的框架，以及庫。你絕對能非常輕鬆應對前端百分 80 以上的性能問題和需求，技術最終都是相似的。
上面只是說了別人的一些比較簡單的優化方案，下面纔是開始我們自己的渲染任務調度：
回到我們的 Telegram 架構設計方案。
渲染任務架構過程需要着重考慮的幾個問題：
- 渲染數據量特別大。
- 更新特別頻繁。
- 儘可能手動回收垃圾，避免消息量過大，v8 垃圾回收的時間不確定性導致內存被白白佔用，引起卡頓。
- 考慮大批量數據到達渲染進程的用戶應用體驗，確定用戶交互屬於高優先級任務，其他的哪些是低優先級 - 但必須執行的任務，哪些是中優先級任務，這裏說的任務，都是渲染任務。
今天在學習一篇小冊，裏面有一句話引起了我的共鳴，在計算機的世界，如果有解決不了的問題，那就加一箇中間層，如果還不行，那就加兩個。
——後面這句是我加的。
這個是我自己編寫的 React， mini-react 源碼地址點擊這裏。
PReact 源碼中，是將需要更新的組件放入隊列中，然後一次清空，僞代碼：
if (setStateQueue.length === 0) {
// 清空隊列的辦法是異步執行
defer(flush);
}
setStateQueue.push({
stateChange,
component
});
function defer(fn) {
//requestIdleCallback 的兼容性不好，對於用戶交互頻繁多次合併更新來說，requestAnimation 更有及時性高優先級，requestIdleCallback 則適合處理可以延遲渲染的任務～
// if (window.requestIdleCallback) {
// console.log('requestIdleCallback');
// return requestIdleCallback(fn);
// }
// 高優先級任務
return requestAnimationFrame(fn);
}
while ((component = renderQueue.shift())) {
renderComponent(component);
}
上面這段代碼其實很重要，核心思想就是：
每當進入這個函數，如果發現隊列隊列裏沒有任務就去執行 defer 函數。
defer 函數執行是異步，此時 defer 下面的 setStateQueue 已經被 push 了進去數據，這樣達到一幀完成一次渲染任務調度。
當然上面僅僅一個小的任務調度，這個必須要了解，才能往下看
requestAnimationFrame 和 requestIdleCallback 使用：
你需要深入瞭解 React 框架的 Fiber 架構，這塊尤其重要，是性能優化，任務調度的基礎，上面有提到，React 在每次 diff 對比階段，將任務分割成若干個小任務，此時如果有 RAF 和 RID 的任務，就要考慮去執行了。
RAF 的任務會每次在下一次小任務前執行。
RID 的任務只有在下一次小人物前，有空餘時間纔會執行，所以它不一定會執行。（特別高頻必須執行的任務）
Fiber 架構配合單個任務分割已經介紹完畢，下面出思維導圖出整體的任務調度。
整體渲染任務調度
核心的兩點：
- 釋放主線程的佔用，讓用戶的操作最快得到響應。
- 合理調度任務，分高、中、低三種優先級別任務。
理清思路：
- 數據通過 IPC 通信到達渲染進程。
- 全部交給子線程去進行計算，組裝數據，通過異步的 postMessage 事件通信，拿到渲染數據。
- 調度渲染任務，用戶操作交互。
- 釋放主線程。
這裏特別提示，爲什麼我一直強調不要使用定時器，一旦應用變得很複雜，如果任務調度不合理，定時器裏的代碼是要很久很久才能執行的。當然，只有重型應用會這樣。
渲染任務調度這塊，主要是微任務，RAF,RID 分片渲染以及同步代碼，隊列調度等手段。
主進程，接入層任務調度
核心思想跟渲染進程大概一致：1. 儘量釋放主進程，保持空閒，讓用戶的操作即時得到反饋，因爲很多操作會調用主進程的接口。
2. 異步調度任務，寫入數據庫異步，解密計算可以使用 nextTick 等方式去調度添加隊列。
這裏提到，任務調度的核心一點就是，頻繁觸發的任務必須加入隊列，異步清空，否則像解密這種同步計算耗時，一旦被頻繁觸發就會引起阻塞。即使交給了其他進程，也要做隊列。
整體架構以及技術選型注意點
- 技術選型時，儘量選擇自己熟悉它原理的庫，以及能用 Demo 測試模擬場景的技術，測試通過再選用，不同技術之間解決問題出發點不一樣，可能會有衝突。
- 隊列和多進程、多線程的開啓，並不是一定需要的，你可以自己設定一套規則，當一段時間的任務到達多少次被觸發時候選擇開啓多線程，多進程。否則就是浪費。
- 重型應用架構遠不止這些，所以標題是淺談，等下個月技術作者再度飛速提升一波，再來談這些。
本文轉載自微信公衆號：前端巔峯