圖片來源：pexels.com

“別更新了，學不動了”向來是前端開發群體的切膚之痛：

• React 還沒學明白，Vue 就出來了；

• Vue 2.0 還沒上手，3.0 就發布了；

• Node 剛精通，Deno 又 1.0 了；

• Flutter 剛流行，Flutter 又被唱衰了；

• 就更別提原生、跨端、混合開發的循環往復了。

所以前端圈曾經有一位技術專家下過深切的論斷——前端 18 個月難度翻番。此言道出了前端領域更新換代之快背后的前端開發血淚史。也因此，“別更新了，學不動了”這句話成為了不少前端開發玩梗的口頭禪。

但從國內前端專家月影的角度看，如果你不盲目地去追求所謂的“時髦”技術，不去刻意擔心自己是否落伍，而是去多觀察這個行業，找到技術發展內在的規律和脈絡，那么你就知道該如何前進，不會有任何恐慌。

在任何一個領域或方向，知識體系都可以大體上分為基礎知識和領域知識，而領域知識又可以分為通用領域知識和專用領域知識。二者的變化是不一樣的，基礎知識的變化最慢，其次是通用領域知識，然后是專用領域知識。深入學習基礎知識，按需學習領域知識，這就是把握技術本質的基本邏輯。

2021 年 10月 27-28 日，由稀土掘金社區舉辦的首屆稀土開發者大會，將體系化地呈現當前國內大前端領域的技術發展，帶給參會者對大前端技術發展的本質脈絡。目前大會設置了「大前端工程與架構」、「大前端性能優化」、「大前端技術探索」三個專題，邀請了國內一線大廠前端技術專家分享精彩實踐經驗。

大前端工程與架構

專題簡介：

前端工程與架構隨著互聯網的發展，企業業務的不斷深入與變化，前后端不斷拆分與重組；前端架構形態也不斷調整，之前火熱的前端中臺、微前端也不斷更替；現在前端架構在企業發展現狀如何，我們來一起探索。

出品人：張飛彪 字節跳動 創意生態技術負責人

現就職于字節跳動上海研發中心，擔任創意生態技術負責人，之前曾負責抖音電商上海研發團隊、抖音音樂項目、小紅書客戶端。畢業于華東師范大學數學系國家理科基地班，自學完計算機專業的所有主干課程，從事移動軟件開發工作十年以上，先后參與過 Windows Mobile、Windows Phone、嵌入式、 Android 以及 iOS 等平臺的 App 和框架開發，主導了多款大中型 App 的研發，也曾作為客戶端架構師負責過 Android、iOS、Web 三端的基礎架構設計和演進，在移動架構、跨平臺開發等大前端領域具有豐富的研發和管理經驗。

議題介紹：

議題一：《支付寶錢包動態化技術方案的現狀和演進》——王佐 螞蟻集團 支付寶事業群小程序技術部高級技術專家

支付寶在 17 年左右啟動了錢包下一代動態化技術方案 Cube。在過去的 4 年中，通過業務的打磨，逐漸形成了兩個技術產品。一個是面向移動端應用開發的動態卡片技術棧，在原生的 Native 頁面中嵌入動態卡片；開發者使用類 Vue 的語法編寫動態卡片的布局和邏輯，發布即可見，從而提高原生頁面的運營效率。一個是面向 IoT 應用開發的小程序技術棧，向低端設備上的開發者提供提供小程序技術，目前主要應用于電視/收銀臺等場景。

議題二：《美團企業應用前端工程化實踐》——楊林 美團 基礎研發前端技術專家

在美團，支撐業務高效運轉的企業應用是較為復雜的 ToB 業務，包括 HR、財務和 ERP 等業務，這些領域下有 100+ 系統，幾千個頁面，特點是系統多，交互復雜，業務迭代快，本次分享介紹我們建設大型的 ToB 應用的過程，如何通過“微前端架構+開發模板化”的工程化方式，支持眾多業務線并行需求迭代，協同幾百人團隊快速交付。

議題三：《簡潔的藝術 —— astro 帶來的全新體驗》——薛英琛 字節跳動 小程序前端開發工程師

現代前端開發技術的演進史幾乎就是 JavaScript 的發展史，我們越來越少去直接編寫 HTML/CSS，轉而將這項工作交給各類 JavaScript 框架與工具，但是這并不是無痛的抽象，很明顯我們正在為無限的自由買單。Astro 是解決這個問題的一種選擇。它利用 partial-hydrate 的手段，結合用戶交互特點，盡量地按需加載，同時在編譯時自動識別內容去做靜態化。另外，它也天然支持微前端，結合一整套 bundleless 開發鏈路，大幅提升開發者構建復雜的前端應用的開發體驗。

議題四：《貝殼視覺物料生產平臺的架構與實踐》——閆士博 貝殼找房 資深前端工程師

隨著業務發展，公司的視頻、圖片等各類物料的需求日益增長，開發與設計的人力捉襟見肘。貝殼視覺物料生產平臺，是前端技術創新與架構賦能業務的典型，通過自動識別各類設計稿，加之圖文、視頻、動態 GIF 的可視化編輯與數據配置，統一視覺物料的生產管理能力，支持各業務低成本完成物料相關需求，并賦予上千運營人員直接制作視覺物料的能力，大大提高產研效率，為公司的業務運營保駕護航。

大前端性能優化

專題簡介：

在移動互聯網時代，由于設備資源、網絡等因素，性能優化顯得尤為重要，反之，性能不友好的產品，用戶流失率極高。本專場將邀請在 Web 前端、渲染引擎和特定場景下有速度優化經驗的技術專家，通過對性能優化優化工具及技術，去分享其在端上的實踐經驗。

出品人：梁士興 美團買菜終端研發負責人

2009 年畢業于北京航空航天大學，2014 年 7 月份加入到美團，現任美團買菜終端研發組負責人。

多年從事大前端方向的技術研發工作，對應用架構演變、大前端工程化建設以及大前端的技術發展趨勢有濃厚的興趣，希望能夠與大家進行交流和分享。

議題介紹：

議題一：《手淘跨平臺引擎架構與未來演進》——彭濤（龍冥） 阿里巴巴 無線技術專家

互聯網業務如火如荼的飛速發展，新的跨平臺技術也隨著歷史的浪潮在探索和實踐中不斷涌現，最成熟的跨平臺技術莫過于大家熟知的瀏覽器技術。標準化以及其強大的生態，加上硬件的不斷升級所帶來的性能紅利使它一直占據著舉足輕重的重要地位，隨著業務復雜度的不斷提升，從后來的 Weex/React Native，到現在如火如荼的 Flutter，也標志著新一代跨平臺架構已升級為自繪渲染，高性能腳本引擎等內核技術深水區。如何滿足差異化業務場景，依托前端成熟的生態與標準化，減少業務的遷移適配成本，通過一套跨端內核引擎支持多 App，以至多生態乃至不同的前端框架，成為了跨平臺架構的新挑戰。本次將分享從手淘幾年來隨著業務發展所帶來架構升級思考，核心性能瓶頸的突破以及對未來幾年內跨平臺架構的探索方向，希望能與您產生技術上的共鳴與互勉。

議題二：《預加載技術在百度 App 上的應用》——楊剛 百度 百度 App T7 瀏覽內核研發工程師、整體內核技術負責人

隨著移動設備性能的整體提升（CPU、內存、網絡等），越來越多的移動應用通過預取技術來優化 H5 相關業務的首屏性能，百度 App 也在很多業務場景使用了這一技術。預取技術很誘人，對打開速度往往可以起到立竿見影的效果，但在移動端相比 PC 還是有很多需要注意的事項，比如，由于 32 位運行模式的關系，內存仍然是一個需要高度關注的一個點。本次主題將通過對移動端 H5 業務速度拆解、常用優化手段特別是預取技術的原理及優缺點入手，梳理預取技術的注意事項，以及預取技術在百度app的應用實踐過程。

議題三：《前端頁面加載性能優化實踐及運維》——王梓童 美團 買菜事業部 iOS 開發工程師

隨著業務不斷地發展，美團開始引入 RN 用于解決對開發效率和更新速度的需求，同時使用 H5 支撐數量繁多的營銷活動。RN、H5 在性能上相較 Native 技術有著天然的劣勢。如何在享受開發迭代效率提升的同時，滿足用戶日益嚴苛的性能體驗要求，成為每個移動開發者追求的目標。為此，作為美團的新業務團隊，在2021年上半年度對性能進行了專項優化；在半年時間里，將 RN 頁面 1s 內渲染出首屏的比例由40%提升至了85%，實現了頁面秒開甚至近乎直出的性能體驗，H5 TP90 首屏時間由也從 4500ms 降低到了 2000ms。本次分享將深入 RN、H5 的技術原理，分析優化思路，系統性介紹在美團有著豐富實踐的成熟優化措施，以及相關指標是如何監控運維的。相信經過本次分享交流，你可以更全面地了解前端性能的優化方案，并結合自己 App 的實際情況落地。

議題四：《小紅書搭建秒開 H5 的關鍵技術設計》——楊遠翔 小紅書 電商技術部電商大前端負責人

首屏性能一直在快迭代 H5 業務中被人詬病，尤其是在無法定制首屏優化，有豐富內容的運營搭建場景。我們吸取了近幾年業界公開關于性能探索中寶貴實踐經驗，在搭建業務中逐步探索、沉淀出一套基于"真實用戶體感秒開"的技術方案。全員參與(前后端、QA、產品視覺)，管"挖"管"埋"。

大前端技術探索

專題簡介：

隨著互聯網不斷發展，前端技術也跟上班車；Vue 發布 3.0 新特性，React 版本也到了 V17；連 Flutter 也開始和 XD 緊密聯系。本專題將聚焦 2021 新技術及未來前端領域的新技術發展趨勢。

出品人：李玉北 字節跳動 Web Infra 團隊負責人

開源愛好者，熱愛 JavaScript 社區，目前負責字節跳動 Web Infra 團隊 (https://webinfra.org/sg)。團隊的職責是維護公司前端的技術設施和服務（例如：Node.js、Serverless、跨端解決方案等等），并同時打造下一代的 Web 開發引擎，重塑基于 Web 技術棧的應用的開發流程。

議題介紹：

議題一：《開發、維護與微循環》——張立理 百度EE 前端架構師

在一個相對長期維護與發展的應用中，開發者需要更多時間面對功能的增量迭代、已有功能的調整、修復與優化等情況。

傳統的初始腳手架、構建工具、代碼生成等雖有助于項目從零到一的快速啟動，但在增量迭代中難以發揮持續地效益。

項目的長期持續開發是一個個人能力、開發模式、團隊協作緊密結合的過程，本次分享將介紹一種基于組件化的開發形式，力求通過統一的手段進行工作的分解，在細粒度上完成定義、開發、驗證、凍結的研發循環，進而保持合適的開發節奏、效率、質量。

議題二：《從歷史的演進來看前端業務工程的發展》——俞天翔 快手 Web開發探索組前端負責人

從“上古時期”的模板拼裝到“MV*”的大量被使用；從 jQuery 一統天下到 Vue/React 逐步成為全民框架；從 PC 時代到移動時代，從 2B 到 2C，前端 er 們似乎一直都在探索路上不斷前進。在歷史的發展進程中，我們是否能夠積累出屬于我們的工程方案，以應對業務的持續發展。本次分享將結合講者在過去工作中的經驗以及大型活動的“慘痛”開發經歷，針對如何對工程進行設計，將工程中變與不變的部分進行拆解，將業務開發逐步演變成“填空題”，保證持續交付和有效積累。

議題三：MWA（現代 Web 應用）框架和 Modern JS 工程方案——宋振偉 字節跳動 Web Infra研發工程師

前端開發和 Web 開發中出現的范式轉移都已經累積到接近革命的程度，字節跳動 Web Infra 前段時間介紹了「現代 Web 開發」范式和 、Modern Web Stack、MWA 這些新一代技術，這次會進一步基于 Modern.js 開源項目來介紹 MWA 框架、現代 Web 工程方案。

此外，混沌工程、云原生、分布式數據庫、低代碼、機器學習、音視頻技術等專場議題講師已全部上線，目前大會線上直播免費預約火熱進行中，點擊底部 閱讀原文 直達大會官網，了解更多專題詳情。

點擊閱讀原文了解更多詳情

總結

以上是生活随笔為你收集整理的前端18个月难度翻番？来这里把握大前端技术本质进展丨稀土开发者大会的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。