免费视频淫片aa毛片_日韩高清在线亚洲专区vr_日韩大片免费观看视频播放_亚洲欧美国产精品完整版

作者：Peter譚金杰

https://juejin.im/post/5d8f3062e51d45782632e363

大前端時代以及即將到來的5G時代，3D可視化，音視頻直播技術(shù)，IM即時通訊場景應(yīng)用我覺得都是大有可為的。前段時間爆款換臉應(yīng)用出現(xiàn)，到近段時間頭像加??的火爆，這是好事。

不知不覺，九月就要過去，由于這個月工作上，被C++折磨得很難受，而且其他時間都在學習，所以沒有時間寫文章，好在技術(shù)提升很大。今天準備好好談一談重型應(yīng)用的架構(gòu)以及技術(shù)選型，為接下來我的正式架構(gòu)設(shè)計做個鋪墊。

為什么寫重型應(yīng)用的架構(gòu)和技術(shù)選型

1. 傳統(tǒng)的web前端，只能發(fā)個ajax請求，畫畫頁面。了不得寫個webApp

2. 想讓后端的同學們，了解下目前大前端的世界，現(xiàn)在的前端跟以前不一樣了，特別現(xiàn)在市場很缺高級前端，但是術(shù)業(yè)有專攻，這點我承認

3. 大前端的定義，太廣泛，在我看來，必須深入前端某個方向，以及能獨立設(shè)計不那么復雜場景下的后端架構(gòu)。

4. 在極客時間上提問了winter老師，我自我感覺已經(jīng)良好，但是迷茫了。他回懟了我：想一想你用你的技術(shù)做出了什么nb的東西把。

5. 是人都想做出點什么事情，我想引起大家的共鳴去使用某些技術(shù)，或者朝著這個方向去發(fā)展，共同提升 社區(qū)的技術(shù)整體層次

什么是重型應(yīng)用

例如微信，QQ,Telegram, 以及一些工具類的應(yīng)用

說到這些大家肯定覺得，為什么不說是游戲？當然游戲也算，可是我相信做出1000萬人每天都在用的產(chǎn)品是大家的夢想，起碼能吹一輩子吧

工具類的東西其實是最難做的，比如vsCode ， Excel ，PhotoShop這些。這也是為什么這么多年出現(xiàn)成功的工具類產(chǎn)品這么少。這里不得不提到vsCode，它其實就是用ELectron開發(fā)，基于TypeScript。當然肯定使用了不少C++插件，說到這里，留下傷心的眼淚，最近也是被折磨得很難受

成功開發(fā)一個重型應(yīng)用的好處

1. 出去面試基本上很容易成功，特別是專業(yè)性強的崗位，例如你在QQ開發(fā)了十幾年，你根本不用出去找工作，當然你應(yīng)該也不會跑

2. 技術(shù)全面，復雜場景你都能hold住

3. 有能吹的地方，可以跟誰說：我開發(fā)的東西，多少萬人在用，老了還能吹。程序員嘛，一半時間都在吹水，還有接近一半時間在劃水，只有一丁點時間在寫代碼

4. 更容易財務(wù)自由，生活自由，例如現(xiàn)在很多有過成功的重型應(yīng)用開發(fā)者已經(jīng)不單純靠代碼產(chǎn)出維持生活。他們做技術(shù)顧問，賣課程，出書，辦培訓都甚至比單純寫業(yè)務(wù)代碼賺得多很多

正式開始

• 目前跨平臺框架，移動端比較成熟的是React-native，但是大家有所了解的都應(yīng)該知道，這個框架雖然生態(tài)比較成熟，但是在面對眾多手機的適配難度，以及性能方面存在的缺陷，如果用它制作重型應(yīng)用我覺得是不合適的，如果要做重型應(yīng)用，移動端應(yīng)該使用原生。

• 庫克說過，中國的移動端開發(fā)確實很強，美國人要做一個應(yīng)用，首先考慮的是PC桌面端，而國內(nèi)首先考慮的是移動端。

國內(nèi)移動端開發(fā)人員，在我看來已經(jīng)人目前已經(jīng)夠多了，如果說你現(xiàn)在不會React-native和Flutter，我也不建議你去深入學習，特別是Flutter.

為什么要這么說？

React-native剛出來的時候，坑多吧?，F(xiàn)在Flutter也是，可是當你從RN最初的版本踩坑踩到現(xiàn)在，之前踩的坑大都沒有意義（說這些話想過被噴，但是...此處省略一萬字，建議去了解下原理和基本使用，不要耗費太多時間）

一個技術(shù)你去使用，并不是它多流行，只要它足夠流行。---來自某位國內(nèi)大佬

技術(shù)的學習，應(yīng)該多往底層鉆研，如果你走錯了路，鉆錯了方向，浪費了時間得不償失，我之前有說過，前端最核心的幾個基礎(chǔ)知識點，應(yīng)用層的東西從來不會很難。前提你的基礎(chǔ)足夠扎實

前端20個真正靈魂拷問，吃透這些你就是中級前端工程師 【上篇】

前端20個靈魂拷問 徹底搞明白你就是中級前端工程師 【中篇】

前端20個靈魂拷問 徹底搞明白你就是中級前端工程師 【下篇】

這些文章很多同學應(yīng)該都看過，爭議也很大，在我現(xiàn)在看也寫得很爛，但是它里面的知識點是夠的。當然你必須要去結(jié)合起來，然后深入學習每個知識點。

既然說了移動端沒有合適的重型跨平臺應(yīng)用開發(fā)框架，那么只有PC端了。還有多少小伙伴在PC端開發(fā)呢？

Electron開發(fā)，來了

我不止一次提到過這個框架，我覺得它真是一個非常棒的框架，為什么這么說呢？

1. 我跟很多朋友說過，如果想開發(fā)APP，不會寫原生，那么你肯定達不到某種境界。因為你始終有很多很多的黑盒過程，可是Electron就會大大降低這個概率。

2. 基本上沒有適配和差異性，linux和Mac以及Windows三者都可以運行，除了Mac上某些特殊場景需要自己設(shè)計下菜單快捷鍵之類，以及一些文件IO等MAC默認行為

3. 最新的Node版本、運行的V8環(huán)境以及最新的谷歌瀏覽器一起被打包，最新的技術(shù)和API都可以用，無需適配擔心兼容性，真正放飛自我，可以隨時隨刻用Node.js實現(xiàn)功能，甚至調(diào)用大量C++插件，著名的VSCode就是這樣而來

你甚至可以看成Electron給web網(wǎng)頁套上一層殼，你可以在主進程寫你的Node.js去實現(xiàn)功能，渲染進程你怎么寫怎么寫，還可以呼叫封裝好的原生接口。遇到特別復雜的需求，用C++插件去實現(xiàn)吧

最終打包出來的安裝包跟正常的桌面應(yīng)用是一樣的，正常安裝卸載等，都已經(jīng)封裝好。

目前GitHub上已經(jīng)有77.2K的star

應(yīng)用層面的東西，大都不會太難，Electron的文檔已經(jīng)非常全面，基于它出現(xiàn)了很多復雜，而且成功的工具類重型應(yīng)用。我相信它

whatsApp也是基于它，國外還有一些很NB的應(yīng)用也是。這里不做過多闡述，可以確定它是一個成熟而且成功的框架

可能很多人看到這里又要說標題黨了，別急，下面來干貨。

重型應(yīng)用架構(gòu)注重的核心問題

1. 項目本身的最重要功能是什么

2. 項目本身出發(fā)點是為客戶提供什么方便

3. 項目的核心競爭力是什么

一個好的開發(fā)，它一定能懂一些產(chǎn)品，甚至測試，當然他也應(yīng)該會炒河粉，35歲以后好維持生活

我們今天舉一個例子，IM，即時通訊，Telegram，20萬人超級群端到端加密的核心賣點產(chǎn)品

電報Telegram：

現(xiàn)在回答上面三個問題：

項目本身的最重要功能是什么

答案：即時通訊，信息的收發(fā)

項目本身出發(fā)點是為客戶提供什么方便

使用產(chǎn)品進行消息傳遞

項目的核心競爭力是什么

20萬人的超級群，端到端加密，隱私足夠安全

核心競爭力，往往代表了這個應(yīng)用產(chǎn)物的技術(shù)最難點，因為誰都能做，那么就不是核心競爭力了

所以我們其他的都忽略，關(guān)注第三點，開始進行技術(shù)選型，架構(gòu)。

單線程的Node.js和JavaScript重型應(yīng)用架構(gòu)設(shè)計

要想寫好這個架構(gòu)，我覺得你首先在自身的擅長領(lǐng)域不能有太多的黑盒過程。例如框架源碼，庫原理實現(xiàn)，瀏覽器和Node.js的事件EventLopp以及他們的缺陷，你要熟知在心。因為像這種應(yīng)用，一個小方向可能就會掏空你的技術(shù)棧，耗盡你的精力，例如音視頻、圖片處理等。

單線程的Node.js以及js主解析引擎，讓我們又愛又恨。

這款應(yīng)用的核心競爭力，是20萬人超級群，那么數(shù)據(jù)量很大，大批量渲染壓力和頻繁加解密計算耗時、頻繁數(shù)據(jù)庫寫入壓力都是不可避免的，那么我們的Node.js擅長異步非阻塞，以及前端渲染進程的異步就顯得尤為重要

前端架構(gòu)整體的核心除了技術(shù)選型以及大體框架外，就是任務(wù)調(diào)度。

這里的任務(wù)調(diào)度分兩種：

1.渲染任務(wù)調(diào)度

2.非渲染任務(wù)調(diào)度

單個渲染任務(wù)調(diào)度

1.React框架中，多次傳入對象，setState會自動合并到一次執(zhí)行，其實就是一種節(jié)流思想

2.React的Fiber架構(gòu)思想,把若干個任務(wù)分割成多個小任務(wù)執(zhí)行，中間根據(jù)你的任務(wù)優(yōu)先級安排去選擇時機執(zhí)行

3.淘寶的分片渲染方案，跟上面第二條有一些類似

我之前說過，應(yīng)用層的東西都不難，只要你基礎(chǔ)足夠扎實，能手寫出簡單的框架，以及庫。你絕對能非常輕松應(yīng)對前端百分80以上的性能問題和需求，技術(shù)最終都是相似的

上面只是說了別人的一些比較簡單的優(yōu)化方案，下面才是開始我們自己的渲染任務(wù)調(diào)度：

回到我們的Telegram架構(gòu)設(shè)計方案：

渲染任務(wù)架構(gòu)過程需要著重考慮的幾個問題：

1.渲染數(shù)據(jù)量特別大

2.更新特別頻繁

3.盡可能手動回收垃圾，避免消息量過大，v8垃圾回收的時間不確定性導致內(nèi)存被白白占用，引起卡頓

4.考慮大批量數(shù)據(jù)到達渲染進程的用戶應(yīng)用體驗，確定用戶交互屬于高優(yōu)先級任務(wù)，其他的哪些是低優(yōu)先級-但必須執(zhí)行的任務(wù)，哪些是中優(yōu)先級任務(wù)，這里說的任務(wù)，都是渲染任務(wù)。

今天在學習一篇小冊，里面有一句話引起了我的共鳴，在計算機的世界，如果有解決不了的問題，那就加一個中間層，如果還不行，那就加兩個。-后面這句是我加的

這個是我自己編寫的React：mini-react源碼地址

PReact源碼中，是將需要更新的組件放入隊列中，然后一次清空，偽代碼：

上面這段代碼其實很重要，核心思想就是：

每當進入這個函數(shù)，如果發(fā)現(xiàn)隊列隊列里沒有任務(wù)就去執(zhí)行defer函數(shù)

defer函數(shù)執(zhí)行是異步，此時defer下面的setStateQueue已經(jīng)被push了進去數(shù)據(jù)，這樣達到一幀完成一次渲染任務(wù)調(diào)度

當然上面僅僅一個小的任務(wù)調(diào)度，這個必須要了解，才能往下看

requestAnimationFrame和requestIdleCallback使用：

你需要深入了解React框架的Fiber架構(gòu)，這塊尤其重要，是性能優(yōu)化，任務(wù)調(diào)度的基礎(chǔ)，上面有提到，React在每次diff對比階段，將任務(wù)分割成若干個小任務(wù)，此時如果有RAF和RID的任務(wù)，就要考慮去執(zhí)行了

RAF的任務(wù)會每次在下一次小任務(wù)前執(zhí)行

RID的任務(wù)只有在下一次小人物前，有空余時間才會執(zhí)行，所以它不一定會執(zhí)行。（特別高頻必須執(zhí)行的任務(wù)）

Fiber架構(gòu)配合單個任務(wù)分割已經(jīng)介紹完畢，下面出思維導圖出整體的任務(wù)調(diào)度

整體渲染任務(wù)調(diào)度

核心的兩點：

1.釋放主線程的占用，讓用戶的操作最快得到響應(yīng)

2.合理調(diào)度任務(wù)，分高、中、低三種優(yōu)先級別任務(wù)

理清思路：

1.數(shù)據(jù)通過IPC通信到達渲染進程

2.全部交給子線程去進行計算，組裝數(shù)據(jù)，通過異步的postMessage事件通信，拿到渲染數(shù)據(jù)

3.調(diào)度渲染任務(wù)，用戶操作交互

4.釋放主線程

這里特別提示，為什么我一直強調(diào)不要使用定時器，一旦應(yīng)用變得很復雜，如果任務(wù)調(diào)度不合理，定時器里的代碼是要很久很久才能執(zhí)行的。當然，只有重型應(yīng)用會這樣

渲染任務(wù)調(diào)度這塊，主要是微任務(wù)，RAF,RID分片渲染以及同步代碼，隊列調(diào)度等手段。

主進程，接入層任務(wù)調(diào)度

核心思想跟渲染進程大概一致：

1.盡量釋放主進程，保持空閑，讓用戶的操作即時得到反饋，因為很多操作會調(diào)用主進程的接口

2.異步調(diào)度任務(wù)，寫入數(shù)據(jù)庫異步，解密計算可以使用nextTick等方式去調(diào)度添加隊列

這里提到，任務(wù)調(diào)度的核心一點就是，頻繁觸發(fā)的任務(wù)必須加入隊列，異步清空，否則像解密這種同步計算耗時，一旦被頻繁觸發(fā)就會引起阻塞。即使交給了其他進程，也要做隊列

整體架構(gòu)以及技術(shù)選型注意點

1.技術(shù)選型時，盡量選擇自己熟悉它原理的庫，以及能用Demo測試模擬場景的技術(shù)，測試通過再選用，不同技術(shù)之間解決問題出發(fā)點不一樣，可能會有沖突

2.隊列和多進程、多線程的開啟，并不是一定需要的，你可以自己設(shè)定一套規(guī)則，當一段時間的任務(wù)到達多少次被觸發(fā)時候選擇開啟多線程，多進程。否則就是浪費

3.重型應(yīng)用架構(gòu)遠不止這些，所以標題是淺談，等下個月技術(shù)作者再度飛速提升一波，再來談這些。