国产成人精品无码青草_亚洲国产美女精品久久久久∴_欧美人与鲁交大毛片免费_国产果冻豆传媒麻婆精东

15158846557 或 在線咨詢 在線咨詢
15158846557 或 在線咨詢
所在位置： 首頁 > 營銷資訊 > 網(wǎng)站運(yùn)營 > 【百度技術(shù)分享】San介紹以及在百度APP的實(shí)踐

【百度技術(shù)分享】San介紹以及在百度APP的實(shí)踐

時(shí)間：2023-07-13 16:03:01 | 來源：網(wǎng)站運(yùn)營

時(shí)間：2023-07-13 16:03:01 來源：網(wǎng)站運(yùn)營

【百度技術(shù)分享】San介紹以及在百度APP的實(shí)踐：導(dǎo)讀：San是百度自研的高性能MVVM框架，它是一個(gè)快速、輕量、靈活的JavaScript組件框架，體積小巧，兼容性好，性能卓越，目前已落地百度APP包括搜索、feed、小程序等核心業(yè)務(wù)，服務(wù)于億級(jí)用戶，開源社區(qū)已超過36位貢獻(xiàn)者，Star數(shù)量超過4.3K。

一、前端開發(fā)的演進(jìn)

在過去的 10 到 15 年中，Javascript 無疑是發(fā)展最快的編程語言之一，它不再使用丑陋的、非結(jié)構(gòu)化的代碼和插件在網(wǎng)站上編寫簡(jiǎn)單的邏輯，而是發(fā)展為具有構(gòu)建功能完備的跨平臺(tái)應(yīng)用程序能力的強(qiáng)大生態(tài)。

隨著對(duì) web 平臺(tái)的需求變得越來越復(fù)雜，前端開發(fā)者確實(shí)需要重新設(shè)計(jì)新的輪子。一些優(yōu)秀的 JavaScript 框架和庫陸續(xù)登上舞臺(tái)：

隨著 Angular、React、Vue 等框架和庫的興起，前端開發(fā)人員的焦點(diǎn)也從「如何編寫代碼」轉(zhuǎn)移到了「選擇哪種開發(fā)框架」。

二、San 的誕生

記得在 2016 年之前的時(shí)候，我所在部門的同學(xué)雖然對(duì) React、Vue、Angular 等主流框架都有所嘗試，但最終核心業(yè)務(wù)里面用的仍然是 jQuery。從我們業(yè)務(wù)的用戶數(shù)據(jù)來看，IE8 - 仍占據(jù)著一定的市場(chǎng)份額：https://gs.statcounter.com/browser-market-share/all/china/2016。

如果把 Vue、React 這些 MVVM 框架比做洋槍大炮，那 jQuery 只能算是大刀長(zhǎng)矛，面對(duì)洋槍大炮，低版本 IE 兼容性問題讓做 2C 業(yè)務(wù)的同學(xué)只能摩拳擦掌、望洋興嘆。IE 兼容性相關(guān)的問題未來終將不再是問題，但是我們已經(jīng)等不及要解決它了；出于對(duì)現(xiàn)狀的不滿意，我們開始了 San 的研發(fā)，并于 2016 正式推出。PC 端瀏覽器的 兼容性是個(gè)繞不開的理由，San 為這類的業(yè)務(wù)需求提供了技術(shù)選型方案。

如果拿車來比喻，我們想造的是一臺(tái)陸巡。相比轎車甚至多數(shù) SUV，它沒有那么好開，看不到很多 2.0T 的車尾燈；相比牧馬人和 benz G，他越野能力和通過性也沒那么強(qiáng)。但是它很可靠，能穩(wěn)穩(wěn)當(dāng)當(dāng)、舒適地帶你到任何想去的地方。(@Erik)

三、San的特性介紹

San 是一個(gè)做了無數(shù)減法后誕生的東西，它專注于一個(gè)輕快的，注重性能和兼容性的，數(shù)據(jù)為驅(qū)動(dòng)形式的 UI 框架，配合相應(yīng)的狀態(tài)管理等庫來形成生態(tài)。從功能上來看，San 并沒有出奇的地方，其設(shè)計(jì)初衷是更好的性能、體積和兼容性，提高應(yīng)用的天花板，減少應(yīng)用開發(fā)者的后顧之憂。

San 通過聲明式的類 HTML 視圖模板，在支持所有原生 HTML 的語法特性外，還支持了數(shù)據(jù)到視圖的綁定指令、業(yè)務(wù)開發(fā)中最常使用的分支、循環(huán)指令等，在保持良好的易用性基礎(chǔ)上，由框架完成基于字符串的模板解析，并構(gòu)建出視圖層的 節(jié)點(diǎn)關(guān)系樹，通過高性能的視圖引擎快速生成 UI 視圖。San 中定義的數(shù)據(jù)會(huì)被封裝，使得當(dāng)數(shù)據(jù)發(fā)生有效變更時(shí)通知 San 組件，San 組件依賴模板編譯階段生成的節(jié)點(diǎn)關(guān)系樹，確定需要變更的最小視圖，進(jìn)而完成視圖的異步更新，保證了視圖更新的高效性。

組件是 San 的基本單位，是獨(dú)立的數(shù)據(jù)、邏輯、視圖的封裝單元。從頁面角度看，組件是 HTML 元素的擴(kuò)展；從功能模式角度看，組件是一個(gè) ViewModel。San 組件提供了完整的生命周期，與 WebComponent 的生命周期相符合，組件間是可嵌套的樹形關(guān)系，完整的支持了組件層級(jí)、組件間的通信，方便組件間的數(shù)據(jù)流轉(zhuǎn)。San 的組件機(jī)制，可以有效支撐業(yè)務(wù)開發(fā)上的組件化需求。

San 支持組件反解，以此提供服務(wù)端渲染能力，可以解決純前端渲染導(dǎo)致的響應(yīng)用戶交互時(shí)延長(zhǎng)、SEO 問題。除此之外，San 還提供了一些周邊開源產(chǎn)品，與 San 配合使用，可以幫助開發(fā)者快速搭建可維護(hù)的大型 SPA 應(yīng)用。

作為一個(gè) MVVM 的組件框架。它體積小巧，兼容性好（IE6），性能卓越，是一個(gè)可靠、可依賴的實(shí)現(xiàn)響應(yīng)式用戶界面的解決方案。對(duì)于用過 Vue 或者 React 的開發(fā)者來說，San 框架非常容易上手，學(xué)習(xí)成本很低。

Size 對(duì)比
性能對(duì)比
數(shù)據(jù)來源：https://krausest.github.io/js-framework-benchmark/current.html

四、淺談其他框架

San 尤其適合前端業(yè)務(wù)邏輯相對(duì)簡(jiǎn)單的業(yè)務(wù)。目前，在百度內(nèi)部已有多個(gè)產(chǎn)品線把 San 定為業(yè)務(wù)首選前端開發(fā)框架，相關(guān)的業(yè)務(wù)已服務(wù)于億級(jí)用戶，這足以證明 San 是可靠、可依賴的前端框架。

而框架之間的對(duì)比似乎又是一個(gè)繞不過的話題，我們不能無視房間里面的大象。

對(duì)比 React

React 是經(jīng)過實(shí)戰(zhàn)檢驗(yàn)的領(lǐng)導(dǎo)者，得到了企業(yè)和龐大的開源社區(qū)的支持。該庫可以更好地?cái)U(kuò)展，讓你創(chuàng)建復(fù)雜的企業(yè)級(jí)應(yīng)用。從虛擬 DOM 到 JSX，從 Immutable 到 React Hooks，React 社區(qū)提出了很多偉大的革命性的想法。React 作為一個(gè)庫而不是框架，許多依賴都源于由社區(qū)構(gòu)建和支持的第三方庫，無論是技術(shù)選型還是應(yīng)用開發(fā)，都有著極大的靈活性，它的學(xué)習(xí)曲線相對(duì)也更加陡峭。

對(duì)比 Vue

Vue 使用一種更傳統(tǒng)的方法，可以用簡(jiǎn)潔的模板語法來聲明式地將數(shù)據(jù)渲染進(jìn) DOM 系統(tǒng)。還提供單文件組件的模塊化方式，將 HTML 模板、樣式和 JS 代碼通過標(biāo)簽分隔。這種開發(fā)方式容易讓前端開發(fā)人員更親切，也使得框架易于學(xué)習(xí)。另外，Vue 的文檔和生態(tài)方面，堪稱業(yè)界典范。

San 汲取了 Vue 的一些優(yōu)秀設(shè)計(jì)，同時(shí)也體現(xiàn)了一些新的思路。例如：在 Vue 中，數(shù)據(jù)直接置于組件下，methods 被規(guī)約。而在 San 中，method 直接置于組件下，數(shù)據(jù)被規(guī)約（其實(shí)已經(jīng)被封裝）。

相較于 Vue，San 在 API 的設(shè)計(jì)上更加節(jié)制。Vue 在組件通訊上，就提供了至少 6 種方案（參考 https://juejin.cn/post/6844903784963899405）；而 San 則只提供 4 種方案（https://baidu.github.io/san/practice/），包含 store。San 不提倡使用 mixin，mixin 意味著組件有隱式依賴，組件在不同的 mixin 環(huán)境下，渲染結(jié)果和行為可能不同，同一個(gè)組件在不同環(huán)境下是不可預(yù)期的。目前 Vue3 也推薦使用 Composition api 來取代 mixin。

五、San 的生態(tài)建設(shè)

圍繞著 San 生態(tài)的建設(shè)也在持續(xù)進(jìn)行中，目前已經(jīng)有了包括 San CLI、無極組件庫、Santd、San DevTools、San SSR 等，周邊生態(tài)已基本和 Vue 等業(yè)內(nèi)主流框架對(duì)齊，足以滿足當(dāng)前的業(yè)務(wù)需求。當(dāng)然，繁榮程度還有很大差距。需要廣大開發(fā)者跟我們一起，共同建設(shè)繁榮的 San 技術(shù)生態(tài)。

目前 San 跟 Vue/React 的主流框架生態(tài)對(duì)比如下：

San、Vue 和 React 的生態(tài)對(duì)比
San CLI

CLI 工具致力于將打包構(gòu)建等基礎(chǔ)工具標(biāo)準(zhǔn)化，使開發(fā)人員專注于業(yè)務(wù)開發(fā)，不必花太多時(shí)間在 webpack、babel、postcss 等工具配置上。CLI 工具經(jīng)歷了 Hulk CLI1.0、Hulk CLI2.0、San CLI 三個(gè)版本的迭代（Hulk 是一開始做的偏業(yè)務(wù)的公司內(nèi)部版本），現(xiàn)已對(duì)外開源。

目前 San-CLI 的主要功能：

san cli 的可視化界面

UI 組件庫

San 無極組件庫是公司內(nèi)部一套基于無極產(chǎn)品設(shè)計(jì)中臺(tái)規(guī)范而開發(fā)的 San 版本的 UI 組件，主要用于百度各個(gè)產(chǎn)品線的 C 端業(yè)務(wù)。

Santd（官網(wǎng) https://ecomfe.github.io/santd/）是一套基于 Ant Design 設(shè)計(jì)規(guī)范的 UI 組件庫，目前主要用在多個(gè)內(nèi)部的后臺(tái)系統(tǒng)。

Santd 開源地址：https://github.com/ecomfe/santd

San DevTools

San DevTools 是前端開發(fā)工具中的利器，它能輔助開發(fā)者快速定位問題，發(fā)現(xiàn)性能瓶頸。


當(dāng)你無法快速找到自定義事件 (Event) 在哪個(gè)組件上觸發(fā)，消息（message）被哪個(gè)組件捕獲，出了問題的界面對(duì)應(yīng)哪個(gè)數(shù)據(jù)字段時(shí)，DevTools 都能助你一臂之力。

開源地址：https://github.com/baidu/san-devtools

San SSR

為 San 提供一個(gè) SSR 代碼框架和工具，將組件渲染為服務(wù)器端的 HTML 代碼，實(shí)現(xiàn)同一組件同時(shí)運(yùn)行在服務(wù)端和瀏覽器中，實(shí)現(xiàn)前后端同構(gòu)。

San SSR 開源地址：https://github.com/baidu/san-ssr

六、San 在百度 APP 中的應(yīng)用

這些年，隨著移動(dòng)開發(fā)技術(shù)的發(fā)展，我們的業(yè)務(wù)和團(tuán)隊(duì)都得到了長(zhǎng)足的發(fā)展，但是技術(shù)棧卻越來越亂，這是十分糟糕的。

對(duì)于一個(gè)大的研發(fā)團(tuán)隊(duì)來說，統(tǒng)一技術(shù)?？梢约由钋岸藞F(tuán)隊(duì)技術(shù)沉淀，防止重復(fù)造輪子，也有利于架構(gòu)和解決方案的遷移，從而提升整體代碼質(zhì)量和開發(fā)效率，避免重復(fù)踩坑。

2018 年底開始，百度 APP 高工開始推動(dòng)前端技術(shù)棧的統(tǒng)一，基于前端技術(shù)選型做項(xiàng)目腳手架、開發(fā) CLI 工具、封裝公共函數(shù)庫、業(yè)務(wù)通用組件庫。終極目標(biāo)是實(shí)現(xiàn)一套代碼，多端統(tǒng)一，先后用 San 做 H5、小程序、San-native 方案、San-SSR 服務(wù)端渲染等。

技術(shù)選型：為什么是 San

選擇 San 作為統(tǒng)一技術(shù)棧的前端框架，主要基于以下幾個(gè)原因：

首先是業(yè)務(wù)特點(diǎn)，百度 APP 的業(yè)務(wù)主要是以展現(xiàn)為主，核心業(yè)務(wù)的前端頁面都是多 Webview 隔開的多頁面的，交互相對(duì)比較簡(jiǎn)單，所以一個(gè)輕量和靈活的框架是首選；業(yè)務(wù)上我們不僅僅有移動(dòng)端還有功能相同的 PC 頁面，San 出色的兼容性，能輕松實(shí)現(xiàn) PC 和移動(dòng)端組件復(fù)用，我們可以做到一套組件在 PC 和移動(dòng)上都可用。

其次，移動(dòng)端采用開源方案（Vue/React）也是可以考慮的，外部庫的好處在于發(fā)展的非常快，經(jīng)常會(huì)有些新的 feature。但這也將會(huì)是個(gè)很大的風(fēng)險(xiǎn)，開源庫的快速迭代意味著隨時(shí)有新的最佳實(shí)踐取代舊的模式而頻繁的破壞性更改，讓早期采用者承擔(dān)重構(gòu)成本。

最后，San 是一個(gè)普適性的前端框架，我們的小程序、San-native（類似 react-native）和 San SSR 都是基于 San，實(shí)現(xiàn)底層架構(gòu)框架統(tǒng)一，真正做到從「Learn Once，Write Anywhere」到「 Write Once，Run AnyWhere」。

目前 San 作為主流的前端框架，被廣泛應(yīng)用到百度 APP 下包括百度 APP Feed 落地頁（包括 PC）、移動(dòng)端搜索結(jié)果頁（百度搜索結(jié)果頁，包括 PC）、個(gè)人動(dòng)態(tài)落地頁、用戶個(gè)人主頁（包括 PC 版）、話題、百度 APP 和搜索頻道（san-native）等多個(gè)產(chǎn)品業(yè)務(wù)方向之中。

七、San 技術(shù)棧典型落地場(chǎng)景

Wise 搜索前端

基于 San SSR 的改造，搜索業(yè)務(wù)實(shí)現(xiàn)了跨平臺(tái)的同時(shí)，保證了老版架構(gòu)遷移的平滑過渡：

  1. 組件化：把歷史 Smarty 模板遷移 San 組件定義；
  2. 過渡期：通過跨平臺(tái)的 SSR，一份代碼分別編譯到 PHP、 Node.js；
  3. 最終態(tài)：SSR 只編譯到 Node.js，業(yè)務(wù)代碼無需重寫。
San 采取和 Vue/React 完全不同的方式進(jìn)行 SSR，把解析和編譯工作移到編譯期，進(jìn)一步減小運(yùn)行時(shí)開銷。

數(shù)據(jù)來源：https://github.com/searchfe/san-ssr-target-php/tree/master/test/perf

項(xiàng)目收益

  1. 提升開發(fā)效率：通過架構(gòu)升級(jí)，從舊的技術(shù)棧遷移到 San，實(shí)現(xiàn)業(yè)務(wù)的組件化，降低了后續(xù)的維護(hù)成本；
  2. 性能小幅提升：從測(cè)試數(shù)據(jù)來看 San SSR + PHP 和 Smarty+PHP 在一些場(chǎng)景下互有優(yōu)劣，而在實(shí)際的業(yè)務(wù)場(chǎng)景（搜索結(jié)果頁）有一定的是正向收益。

百度 APP Feed 圖文落地頁前端

老的 feed 圖文落地頁需要同時(shí)維護(hù) smarty + react 兩份模板代碼，維護(hù)成本高。由于開發(fā)人員的變動(dòng)，對(duì)于一些歷史業(yè)務(wù)邏輯都很模糊。通過使用 san 技術(shù)棧的重構(gòu)，取得了不錯(cuò)的收益：

項(xiàng)目收益

  1. 代碼開發(fā)從開發(fā)雙語言代碼遷移為統(tǒng)一語言，落地?zé)o極規(guī)范，減少樣式問題的開發(fā)量，將開發(fā)效率提升 30% 以上；
  2. 首字節(jié)到達(dá)時(shí)間減少 26%，同步內(nèi)容渲染結(jié)束時(shí)間減少 56%，各項(xiàng)性能耗時(shí)減少 20% 以上；
  3. HTML 平均內(nèi)容體積減小 16%。

Feed 頻道 / 搜索六合頻道

Talos 是百度研發(fā)的一套動(dòng)態(tài) Native 視圖框架，渲染引擎融合 Webview 和 NA，能同時(shí)支持 NA 和 Hybrid 的開發(fā)需求。它既能滿足獨(dú)立 App 的開發(fā)，也能滿足平臺(tái)型 App 內(nèi)嵌。它專注性能優(yōu)化，主要指標(biāo)均優(yōu)于同類框架。

San Native 作為 Talos 中的一種 DSL, 采用 San UI 框架作為底層驅(qū)動(dòng)，通過重寫 Document 以及 Element 類來驅(qū)動(dòng)端渲染，使得 Web 前端工程師可以十分方便的編寫原生移動(dòng)應(yīng)用，一套代碼多端運(yùn)行。目前主要應(yīng)用在百度 APP 首頁 Feed 頻道和搜索結(jié)果頁六合頻道。

Talos 與 Hippy 性能對(duì)比 ：

百度小程序

San 作為百度小程序底層渲染框架，提供了小程序所需的渲染機(jī)制，保證能夠以組件化的方式進(jìn)行小程序開發(fā)。同時(shí)提供了很多性能優(yōu)化機(jī)制，很好的提升整體的運(yùn)行性能。

San 底層提供簡(jiǎn)潔清晰的模板結(jié)構(gòu) ANode，能夠被小程序框架所修飾，從而實(shí)現(xiàn)部分高頻基礎(chǔ)組件原生化，使得運(yùn)行時(shí)渲染性能提升 50%。

San 提供壓縮模板線下打包機(jī)制，將 template 編譯成 ANode，可以避免在瀏覽器端進(jìn)行 template 解析，提高初始裝載性能。同時(shí)提供一種壓縮方式將其轉(zhuǎn)化成 APack，讓其體積更小、網(wǎng)絡(luò)傳輸成本更低，小程序接入后啟動(dòng)時(shí)間將縮短 20ms+。

附：San 生態(tài)相關(guān)

San 核心庫

工具鏈

UI 庫

跨端方案

延伸閱讀

最后歡迎參與 san 周邊的開發(fā)：

原文鏈接：

百度架構(gòu)師

百度官方技術(shù)公眾號(hào)上線啦！

技術(shù)干貨 · 行業(yè)資訊 · 線上沙龍 · 行業(yè)大會(huì)

招聘信息 · 內(nèi)推信息 · 技術(shù)書籍 · 百度周邊

歡迎各位同學(xué)關(guān)注！






關(guān)鍵詞：實(shí)踐,技術(shù)

74
73
25
news

版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。

為了最佳展示效果，本站不支持IE9及以下版本的瀏覽器，建議您使用谷歌Chrome瀏覽器。 點(diǎn)擊下載Chrome瀏覽器
關(guān)閉