Soild鎬ц兘灞呯劧杩欎箞鍘夊锛孷ue銆丷eact鍜孉ngular绔熺悍绾疯穼鍑哄墠鍗?/h1> Posted 寮€鍙戣€呮妧鏈墠绾?/a>
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Soild鎬ц兘灞呯劧杩欎箞鍘夊锛孷ue銆丷eact鍜孉ngular绔熺悍绾疯穼鍑哄墠鍗?/h1>
相关的知识,希望对你有一定的参考价值。
鐐瑰嚮鈥?/span>寮€鍙戣€呮妧鏈墠绾?/span>鈥濓紝閫夋嫨鈥滄槦鏍囸煍濃€?/span>
璁╀竴閮ㄥ垎寮€鍙戣€呯湅鍒版湭鏉?/span>
浣滆€?| Ryan Carniato
璇戣€?| 鐜嬪己
绛栧垝 | 鏉庝繆杈?/span>
涔嬪墠鎴戝湪缃戜笂闂查€涚殑鏃跺€欏彂鐜颁簡涓€浠朵簨锛岄偅灏辨槸涓ゅ勾澶氭潵閮芥病浜哄仛涓€娆¢珮姘村钩鐨?javascript 妗嗘灦鎬ц兘瀵规瘮銆傛墍浠ュ湪 2021 骞翠紛濮嬶紝鎴戜滑灏辨潵鎵剧偣涔愯叮锛岃杩欎簺搴撳ソ濂借緝閲忎竴涓嬪惂銆傛湰鏂囦富瑕佸嚭浜庡ū涔愮洰鐨勶紝鍦ㄦ煇绉嶆剰涔変笂璇达紝浼氬叿鏈変竴瀹氱殑鍙傝€冩剰涔夈€?
璇ユ€庝箞瀵规瘮鍛紵閭e氨閫夊嚭 20 涓渶鍙楁杩庣殑 JavaScript 妗嗘灦锛屽苟鐢?JS Framework Benchmark 鏉ヤ竴鍦洪拡閿嬬浉瀵圭殑澶ф瘮鎷煎浣曪紵
鍏嶈矗澹版槑锛氳繖绡囪瘎娴嬩富瑕佹槸鍑轰簬濞变箰鐩殑锛屽彲鑳戒篃浼氭湁浜涘疄闄呬环鍊笺€備竴濡傛棦寰€锛岃繖閲屾彁鍒扮殑姣忎竴涓簱鍦ㄥぇ澶氭暟鍦烘櫙涓晥鐜囬兘寰堥珮銆傚鏋滄湁浠€涔堥渶瑕佸己璋冪殑璇濓紝閭e氨鏄祴鍑虹殑鎬ц兘浼樺娍鍙兘鏉ヨ嚜澶氱涓嶅悓鐨勬妧鏈拰鎶€宸х粍鍚堛€傝櫧鐒朵綘鍙互灏嗘湰鏂囧綋鍋氬弬鑰冿紝浣嗕綘搴旇鑷繁鍘婚獙璇佹鏋跺湪鍚勪釜鐢ㄤ緥涓殑鎬ц兘銆備綘鍙互鍦ㄨ繖閲屾壘鍒版渶鏂扮殑瀹樻柟鎴愮哗瀵规瘮锛?/span>
https://krausest.github.io/js-framework-benchmark/index.html
濡傛灉浣犳兂杩涗竴姝ヤ簡瑙h繖涓熀鍑嗘祴璇曪紝鍙互鍙傞槄鎴戝啓鐨勮繖绡囨寚鍗楋細
https://dev.to/ryansolid/making-sense-of-the-js-framework-benchmark-25hl
杩樻湁涓€鐐归渶瑕佹彁涓€涓嬶紝鎴戞槸 Solid Framework 鐨勪綔鑰咃紝鍥犳鎴戝厤涓嶄簡浼氬湪鏂囩珷涓幒鏉備竴浜涘亸瑙併€備絾鎴戠殑鎵撶畻鏄敖閲忚鏁板瓧璇磋瘽銆備簡瑙h繃杩欎簺鑳屾櫙鍚庯紝灏辫鍧愪笅鏉ユ璧忔瘮璧涘惂銆?/span>
姣旇禌寮€濮?/span>
鎴戠敤鐨勬槸 JS Framework Benchmark 涓渶鏂扮殑 Chrome 87銆傚畠浠槸鐢ㄤ竴閮ㄥ畨瑁?Fedora 33 绯荤粺鐨?Core i7 Razor Blade 15 娴嬪嚭鏉ョ殑锛屼笖缂撹В鎺柦宸插叧闂€?/p>
鎴戞帓闄ゆ帀浜嗘墍鏈夋湁闂鐨勫疄鐜帮紝鐒跺悗閫夊嚭 Github 鏄熺骇鏈€澶氱殑鍓?20 涓簱銆傚浜庢嫢鏈夊涓増鏈殑搴擄紝鎴戦€夌殑鏄畠浠殑鏈€鏂扮増鏈拰娌℃湁浣跨敤绗笁鏂瑰簱鐨勬€ц兘鏈€楂樼殑鍒嗘敮銆?/p>
Vue锛?77k锛?/p>
React锛?61k锛?/p>
Angular锛?8.9k锛?/p>
Svelte锛?0.5k锛?/p>
Preact锛?7.9k锛?/p>
Ember锛?1.7k锛?/p>
HyperApp锛?8.2k锛?/p>
Inferno锛?4.6k锛?/p>
Riot锛?4.4k锛?/p>
Yew锛?4.2k锛?/p>
Mithril锛?2.5k锛?/p>
Alpine锛?2.4k锛?/p>
Knockout锛?.9k锛?/p>
Marko锛?.9k锛?/p>
Rax锛?k锛?/p>
lit-html锛?.9k锛?/p>
Elm锛?.2k锛?/p>
Ractive锛?.8k锛?/p>
Solid锛?.7k锛?/p>
Imba锛?.1k锛?/p>
娉ㄦ剰锛氬浜?lit-html锛屾垜鐢ㄧ殑鏄?LitElement 瀹炵幇锛屽洜涓烘爣鍑嗙増鏍囪浜嗕竴涓棶棰樸€傚畠鐨勫紑閿€搴旇寰堝皬锛屽洜涓哄畠鏄寘瑁呭湪鍗曚釜 Web 缁勪欢涓殑鍘熷 lit-html銆?/span>
杩欐槸褰撲笅 Web 寮€鍙戠敓鎬佺郴缁熶腑闈炲父浼樼鐨勪竴缁勯€夋墜銆傚敖绠?Github 鏄熺骇骞朵笉鑳藉畬鍏ㄨ鏄庨棶棰橈紝浣嗘祴璇曠粨鏋滈噷鏈?100 澶氫釜搴擄紝鍥犳鎴戦渶瑕佷竴涓爣鍑嗘潵閫夊嚭鍙傝禌鑰呫€?/p>
姣忎釜搴撻兘浼氬弬涓庝笁澶х被鍒殑瀵规瘮锛欴OM 鎬ц兘銆佸惎鍔ㄦ寚鏍囧拰鍐呭瓨浣跨敤鎯呭喌銆傛澶栵紝鎴戜細灏嗚繖浜涙鏋跺垎涓?4 缁勶紝杩欐牱灏辫兘鏇村ソ鍦板悓鎬ц兘鐩歌繎鐨勫鎵嬪姣斾簡銆備絾鎴戜篃浼氱粰鍑轰笁澶х被鍒殑鎬绘帓鍚嶃€?/p>
鍦ㄦ瘡涓€缁勪腑閮戒細鏈変綔涓哄弬鑰冪殑鏍囧噯 JavaScript 鏉$洰銆傝繖涓€瀹炵幇浣跨敤浜嗘墍鏈夋渶浼樼鐨勬妧鏈潵鍋氫紭鍖栵紝浠ュ疄鐜版渶浣虫€ц兘銆傚畠灏嗕綔涓烘墍鏈夊姣旂殑鍩虹嚎銆?/p>
涓嬮潰灏卞紑濮嬫瘮璧涘惂銆?/p>
绗?4 缁勨€斺€旀爣鍑嗘€ц兘
杩欎竴缁勯€夋墜鏈€澶氾紝鍖呮嫭涓€浜涙渶娴佽鐨勫簱銆傝繕鏈変竴浜涘簱鏈?Facebook銆丟oogle銆乪Bay 鍜?Alibaba 绛夊ぇ鍏徃鐨勬敮鎸併€傝繖浜涘簱瑕佷箞涓嶅お鍏虫敞鎬ц兘琛ㄧ幇锛岃涔堝氨鏄彧鍏虫敞鏌愪竴鏂归潰鐨勬€ц兘锛岃€屽湪鍏朵粬鏂归潰琛ㄧ幇涓嶄匠銆?/p>
鍥剧墖绗?4 缁勯€熷害鎴愮哗
杩欓噷鏈夊緢澶氱孩鑹插拰姗欒壊鍧楋紝浣嗚璁颁綇锛岃繖浜涘簱骞冲潎鍙瘮鎴戜滑绮惧績浼樺寲鐨勫懡浠ゅ紡鏍囧噯 JavaScript 鍙傝€冩參澶х害涓€鍊嶃€?00ms 姣?200ms 鑳芥參澶氬皯鍛紵
鍦ㄧ函鎬ц兘鏂归潰锛孯eact 鍦ㄨ繖涓€缁勪腑鎷斿緱澶寸銆備絾鑰冭檻鍒版灦鏋勭殑宸紓鎬э紝React銆丮arko銆丄ngular 鍜?Ember 鐨勬暣浣撹〃鐜扮珶鐒朵細濡傛鎺ヨ繎锛岃繖涔熷緢璁╀汉鎯婅銆備笉杩?React锛屽叿浣撴潵璇存槸 React Hooks 瀹炵幇鏈€鍚庤儨鍑恒€傚鏋滀綘闇€瑕侀澶栫殑鍑芥暟鍒涘缓骞跺潥鎸佷娇鐢ㄧ被锛岄偅涔堝氨涓嶇敤瀵规€ц兘鎶卞お澶ф湡鏈涗簡銆俁eact Hooks 鏄娇鐢?React 鐨勬渶楂樻晥閫斿緞锛?/p>
https://blog.usejournal.com/react-hooks-the-most-performant-way-to-write-react-393e135e1cc
杩欓噷鐨勫簱澶ч兘鏈夌畝闄嬬殑鍒楄〃鎺掑簭锛堝鑷寸碂绯曠殑琛屼氦鎹㈡€ц兘锛夛紝鎴栬€呮湁寰堥珮鐨勫垱寤烘垚鏈€侲mber 灏辨槸涓€涓潪甯哥獊鍑虹殑鍏稿瀷锛屽洜涓哄畠鐨勬洿鏂版€ц兘鍚岀粍鐨勫鎵嬭濂藉緱澶氾紝浣嗗垱寤烘€ц兘鍗存槸鏈€宸殑銆?/p>
鏈€鎱㈢殑搴擄紙Knockout銆丷active 鍜?Alpine锛夐兘鏈夌潃鏋舵瀯鐩镐技鐨勭粏绮掑害鍝嶅簲搴撱€侹nockout 鍜?Ractive锛堜篃鏄?Svelte 鐨勪綔鑰?Rich Harris 鐨勪綔鍝侊級閮借捣婧愪簬 VDOM 搴撴祦琛屼箣鍓嶇殑 2010 骞翠唬鍒濇湡銆侫lpine 鐨勯偅鐐?JavaScript 鏂规硶娓叉煋璧锋潵涔熸槸澶熸參鐨勩€備笅涓€涓函绮圭殑缁嗙矑搴﹀搷搴斿簱浼氬湪寰堝悗闈㈢殑瀵规瘮涓墠浼氬嚭鐜般€?/p>
鎺ヤ笅鏉ワ紝鎴戜滑灏嗕富瑕佹牴鎹簱鐨勬墦鍖呭ぇ灏忔潵瀵规瘮鍚姩鎸囨爣绫诲埆銆?/p>
鍥剧墖绗?4 缁勫惎鍔ㄦ垚缁?/span>
杩欓噷鐨勬帓鍚嶅拰涔嬪墠鏈夊緢澶у尯鍒€侫lpine 鐨勯€熷害琛ㄧ幇鏈€宸紝浣嗘垜浠彲浠ョ湅鍒板畠鐨勫寘鏈€灏忥紝鍚姩鏃堕棿鏈€鐭€侻arko锛堟潵鑷?eBay锛夌揣闅忓叾鍚庯紝鎺ヤ笅鏉ユ槸 Rax锛堟潵鑷樋閲屽反宸达級銆傝繖涓変釜搴撻兘鏄负杞婚噺绾у鎴风浜や簰鐨勬湇鍔$娓叉煋鑰屾瀯寤虹殑銆傛墍浠ュ畠浠殑鎬ц兘鍙兘鎺掑湪绗?4 缁勶紝浣嗗惎鍔ㄦ垚缁╁嵈鍦ㄨ繖涓€缁勪腑棰嗗厛銆?/p>
琛ㄦ牸鐨勫悗鍗婇儴鍒嗘槸鎴戜滑鍦ㄥ熀鍑嗘祴璇曚腑鍖呬綋绉渶澶х殑鍑犲悕閫夋墜锛屽叾涓?Ember 鎴愮哗鏈€宸紝澶у皬鏄叾浠栦换浣曞疄鐜扮殑涓ゅ€嶄互涓娿€傛垜涓嶇煡閬撲负浠€涔堣鑺辫垂瓒呰繃鍗婂厗瀛楄妭鎵嶈兘娓叉煋鍑鸿繖涓〃锛屼絾涓嶇鎬庢牱杩欓兘浼氭嫋绱惎鍔ㄦ€ц兘銆?/p>
鏈€鍚庝竴涓被鍒槸鍐呭瓨娑堣€椼€?/p>
鍥剧墖绗?4 缁勫唴瀛樻垚缁?/span>
鍐呭瓨鎴愮哗寰€寰€鏄拰涔嬪墠涓ょ被鎴愮哗鐩稿叧鑱旂殑锛屽洜涓哄畠浼氬鎬ц兘浜х敓閲嶅ぇ褰卞搷锛屽悓鏃跺ぇ鍨嬪簱寰€寰€浼氫娇鐢ㄦ洿澶氬唴瀛樸€侫lpine銆丮arko 鍜?React 浣嶅眳鍓嶄笁銆傝€佹棫鐨勭粏绮掑害鍝嶅簲搴撲娇鐢ㄧ殑鍐呭瓨鏈€澶氾紝Ember 鏁櫔鏈骇銆侲mber 澶悆鍐呭瓨浜嗐€備粎鍦ㄩ〉闈笂娓叉煋 6 涓寜閽箣鍚庯紝瀹冪敤鐨勫唴瀛樺凡缁忔瘮鏍囧噯鍙傝€冨湪鏁翠釜濂椾欢涓墍鐢ㄧ殑杩樿澶氫簡銆?/p>
绗?4 缁勭粨鏋?/span>
鎬讳綋鏉ョ湅锛岃繖涓€缁勫簱鍦?GitHub 涓婃€诲叡鏈?30 涓囨槦锛屽彲鑳藉湪 NPM 涓嬭浇涓崰鎹簡澶ч儴鍒嗕唤棰濄€傚湪杩欑粍閫夋墜涓紝Marko 鍜?Alpine 鐨勫钩鍧囨帓鍚嶆渶楂樸€俁eact 鎺掑悕绗笁锛岃€岄€熷害琛ㄧ幇鏄渶濂界殑銆?/p>
鏈粍涓殑涓€浜涙鏋跺湪甯傚満浠介涓婇仴閬ラ鍏堬紝鑰屼竴浜涜€佹棫鐨勫搷搴斿簱宸茬粡鏄槰鏃ラ粍鑺便€傛帴涓嬫潵鎴戜滑鐮旂┒涓€浜涜〃鐜版洿濂界殑閫夋墜銆?/p>
绗?3 缁勨€斺€旈噸瑙嗘€ц兘
杩欎竴缁勯噷鐨勬鏋跺彲浠ヨ鍦ㄨ璁℃椂鑰冭檻鍒颁簡鎬ц兘闇€姹傘€傚畠浠湪鍖呭ぇ灏忔寚鏍囦笂涔熶笅浜嗗姛澶紝骞朵笖鍦ㄥ垱寤哄拰鏇存柊鎴愭湰涔嬮棿鎵惧埌浜嗗钩琛°€?/p>
鎴戜滑鍦ㄦ湰缁勪腑鑳界湅鍒颁簲鑺卞叓闂ㄧ殑鏂规硶銆傛瘮濡?Yew锛屼竴涓?WebAssembly 妗嗘灦锛堢敤 Rust 缂栧啓锛夛紱LitElement锛屼竴涓?Web 缁勪欢銆傛渶杩戝彂甯冪殑 Vue 3 鏄繖涓鏋剁殑閲嶅ぇ杩涘寲锛岃瀹冭蛋鍑轰簡绗?4 缁勶紝寮€濮嬪拰涓€浜涗箣鍓嶆病鏈夐亣鍒拌繃鐨勫鎵嬬洿鎺ョ珵浜夈€?/p>
闂茶瘽灏戞彁锛屼笅闈㈡潵鐪嬬湅瀹冧滑鐨勮〃鐜般€?/p>
鍥剧墖绗?3 缁勯€熷害鎴愮哗
鏁翠綋鍒嗘暟鎻愰珮浜嗕竴浜涳紝鍚岀粍鍐呯殑宸窛涔熷ぇ澶氫簡銆侾react 鏄湰缁勪腑閫熷害鏈€蹇殑锛孡itElement 鍒欎互寰急鍔e娍绱ч殢鍏跺悗銆俈ue 3 鍜?Riot 閫熷害鐩歌繎锛岄兘浣嶅眳涓父锛屽畠浠篃閮芥湁杩囧搷搴旀€у拰 VDOM 骞跺瓨鐨勫巻鍙层€侻ithril 鏄渶鏃╁皢閫熷害鏀惧湪棣栦綅鐨?VDOM 搴撲箣涓€锛岃€?Yew 浣滀负鍞竴鐨?WASM 搴撹惤鍦ㄤ簡鏈€鍚庛€?/p>
鍦ㄦ€ц兘 profile 鏂归潰锛屾墍鏈夎繖浜涘簱閮藉樊涓嶅銆傝繖缁勯噷闈㈡病鏈夌函绮圭殑鐨勫搷搴斿簱銆傚畠浠兘浣跨敤鑷笂鍚戜笅鐨勬覆鏌撴柟寮忥紝鏃犺鏄?VDOM 杩樻槸绠€鍗曠殑 Tag Template Literal diff 閮戒竴鏍枫€備笌涓婁竴缁勭浉姣旓紝瀹冧滑鐨勫垪琛ㄥ鐞嗘洿鏅鸿兘浜涳紙鍙傞槄琛屼氦鎹㈡€ц兘锛夈€備絾澶氭暟妗嗘灦鐨勮閫夋嫨鎬ц兘杩樻槸鏈€浣庝竴妗c€?/p>
Yew 鏄釜渚嬪锛屼絾瀹冪殑鍏跺畠鎸囨爣閮藉樊涓嶅皯銆傛垜浠湅鐪嬪叾浠栨祴璇曟湁娌℃湁浠€涔堜笉鍚屻€?/p>
鍥剧墖绗?3 缁勫惎鍔ㄦ垚缁?/span>
鎯呭喌鏈夋墍鏀硅锛屼絾鍦ㄥ惎鍔ㄦ寚鏍囨柟闈?Preact 浠嶅浜庨鍏堝湴浣嶃€俌ew 鏄湰缁勪腑鍞竴绉板緱涓婂ぇ鍨嬪簱鐨勩€俉ASM 搴撶殑纭亸澶с€?/p>
杩欓噷鎴戜滑鍙堣兘鐪嬪埌涓€浜涚浉杩戠殑鎴愮哗銆俈ue 涔熷緢澶э紝浠呮浜?Yew銆侾react 鍜?Riot 鐨勮〃鐜伴潪甯告帴杩戙€侻ithril 鍜?LitElement 涔熷樊涓嶅锛岄兘浣嶅眳涓父銆?/p>
Preact 鏄?React 鐨勪竴涓?4kb 鏇夸唬鍝侊紝瀹冩樉鐒舵槸鎴戜滑鐩墠瑙佽繃鐨勬渶灏忕殑搴擄紝浣嗗悗闈㈣繕鏈夋洿灏忕殑鍛€備笉绠℃€庢牱锛屾湰缁勪腑鐨勮繖浜涘簱閮戒笉闇€瑕佺敤鎴峰お鎿嶅績瀹冧滑鐨勫寘澶у皬銆?/p>
鍥剧墖绗?3 缁勫唴瀛樻垚缁?/span>
Yew 杩欐璧簡銆傚湪娴嬭瘯杩囩殑鎵€鏈夋鏋朵腑锛屽畠鐨勫唴瀛樺崰鐢ㄩ噺鏈€灏戙€俉ASM 搴撳湪杩欐柟闈㈠線寰€鑳藉仛寰楀緢濂姐€傚叾浠栨垚缁╅兘闈炲父鎺ヨ繎銆侻ithril 鍜?Preact 鏄渶宸殑锛屼絾钀藉悗涔熶笉鏄緢澶氥€?/p>
杩欓噷娌℃湁浠€涔堢壒鍒€煎緱涓€鎻愮殑涓滆タ銆備綘鍙兘浼氳涓?LitElement 鍙兘姣斿叾浠栧簱锛圷ew 闄ゅ锛夋洿杞诲阀锛屽洜涓哄畠娌℃湁鍍忓叾浠栧簱涓€鏍蜂娇鐢ㄨ櫄鎷?DOM銆備絾鎴戜滑绋嶅悗浼氱湅鍒帮紝VDOM 骞朵笉鎰忓懗鐫€灏辫鍗犵敤鏇村鍐呭瓨銆?/p>
绗?3 缁勭粨鏋?/span>
Riot 鍜?Preact 鐨勫钩鍧囨帓鍚嶆渶楂橈紝鍏舵鏄?LitElement锛屾帓鍚嶇涓夈€俁iot 铏界劧娌℃湁鏄庢樉鑳滃嚭锛屼絾鍦ㄨ繖涓€缁勪腑娌℃湁寮辩偣锛屽洜姝ゅ彇寰椾簡鑳滃埄銆備絾鏄紝杩欎簺妗嗘灦涓棤璁洪€変簡鍝竴涓兘寰堥毦浼氬け鏈涖€傝嚦浜?WASM 鍜?Web 缁勪欢锛屽畠浠唬琛ㄤ簡璁稿浜哄績鐩腑 Web 鐨勬湭鏉ャ€?/p>
浣嗘垜浠繕娌℃湁瀹屾垚銆備笅涓€缁勪唬琛ㄤ簡瀵?Web 鏈潵鐨勫彟涓€绉嶆€濊€冦€傛垜浠杩涘叆缂栬瘧鍣ㄧ殑棰嗗煙浜嗐€?/p>
绗?2 缁勨€斺€旀€ц兘鍐犲啗
杩欎竴缁勭殑绔炰簤寰堟縺鐑堛€傛湰缁勪腑鐨勫鏁板簱閮借绉颁负缂栬瘧璇█锛屾瘡绉嶉兘鏈夎嚜宸辩殑椋庡懗銆傝繖缁勯噷鏈変笉鍙彉鐨勭粨鏋勫寲 Elm銆佸彈 Ruby 鍚彂鐨?Imba 鍜屸€滄鍦ㄦ秷澶辩殑鈥漇velte銆?/p>
娉ㄦ剰锛氭垜鍙戠幇锛屽苟涓嶆槸鎵€鏈変汉閮界啛鎮?Svelte 浠ュ墠閭d釜鈥滄鍦ㄦ秷澶辩殑妗嗘灦鈥濈殑缁板彿銆傝繖涓话鍙锋寚鐨勬槸瀹冧粠杈撳嚭涓熀鏈紪璇戝嚭鑷韩鐨勮兘鍔涖€傛垜骞朵笉鏄 Svelte 娌″笇鏈涗簡锛屽鏋滈€犳垚鍥版壈鎴戝緢鎶辨瓑銆?/span>
姣旇緝鐗规畩鐨勬槸 HyperApp锛屽畠涓庡悓缁勫叾浠栭€夋墜瀹屽叏鐩稿弽銆傚畠娌℃湁缂栬瘧鍣ㄣ€佹病鏈夋ā鏉裤€傚彧鏈?h 鍑芥暟鍜屼竴涓渶绮剧畝鐨?Virtual DOM銆?/p>
鐚滅寽缁撴灉濡備綍锛?/p>
鍥剧墖绗簩缁勯€熷害鎴愮哗
鑳滃嚭鐨勭珶鐒舵槸鏈€绮剧畝鐨勮櫄鎷?DOM銆備笌鏈€杩戠殑娴佽瑙傚康鐩稿弽锛屼簨瀹炶瘉鏄庤櫄鎷?DOM 骞朵笉鏄碂绯曟€ц兘鐨勪唬鍚嶈瘝锛岃€屼笖缂栬瘧骞舵病鏈夌粰鍏朵粬搴撳甫鏉ユ樉钁椾紭鍔裤€?/p>
鍦ㄧ紪璇戠殑搴撲腑锛屾垜浠疄闄呭彲浠ョ湅鍒?3 绉嶄笉鍚岀殑娓叉煋鏂规硶锛屽钩鍧囬€熷害閮藉樊涓嶅銆侷mba 浣跨敤 DOM 涓€鑷存€у姣旀柟娉曪紙鍜屾垜浠箣鍓嶇湅鍒扮殑 LitElement 寰堝儚锛夛紝Elm 浣跨敤铏氭嫙 DOM锛屾帓鍦ㄦ渶鍚庣殑 Svelte 浣跨敤浜嗕竴涓粍浠跺搷搴旂郴缁熴€?/p>
浣犲簲璇ユ敞鎰忕殑鏄紝铏氭嫙 DOM 搴撶殑琛岄€夋嫨鎬ц兘鏈€宸紝浣撶幇鍑轰簡瀹冧滑鐨勯澶栧紑閿€銆備絾杩欎簺搴撹繕鏈夌潃鏇村揩鐨勫垵濮嬫覆鏌撻€熷害銆傚鏋滀綘浠旂粏瑙傚療鍒扮洰鍓嶄负姝㈢殑缁撴灉锛屽簲璇ヨ兘娉ㄦ剰鍒拌櫄鎷?DOM 搴撲笌鍝嶅簲搴撲箣闂村叡鏈夌殑杩欎竴鐗规€с€備笉杩囧湪鍏朵粬鎸囨爣涓婂ぇ瀹剁殑閫熷害閮藉樊涓嶅銆?/p>
鎵€浠ユ垜浠户缁垎鏋愩€傝繖浜涚紪璇戝櫒鐨勫惎鍔ㄦ椂闂?/ 鍖呭ぇ灏忔€庝箞鏍峰憿锛?/p>
鍥剧墖绗?2 缁勫惎鍔ㄦ垚缁?/span>
濡備綘鎵€瑙侊紝杩欎釜灏忓阀鐨勮櫄鎷?DOM 搴撲笉浠呴€熷害鏇村揩锛屽寘涔熸瘮鍏朵粬搴撴洿灏忋€傚疄闄呬笂锛孒yperApp 鏄垜浠墍鏈夊簱涓渶灏忕殑瀹炵幇銆傜紪璇戝櫒鍦ㄥ寘澶у皬鏂归潰娌℃硶鍙栬儨銆?/p>
瀹冨拰 Svelte 閮芥瘮鎴戜滑鐨勬爣鍑?JavaScript 鍙傝€冩瀯寤烘洿灏忋€備负浠€涔堜細杩欐牱鍛紵鍥犱负瀹冧滑鐨勬娊璞℃槸浠ヤ竴绉嶆洿鍔犲彲閲嶇敤鐨勬柟寮忕紪鍐欑殑锛屾墍浠ョ敤鍒扮殑浠g爜鏇村皯銆傛爣鍑?JS 瀹炵幇鐨勪紭鍖栦富瑕侀拡瀵规€ц兘鑰岄潪鍖呭ぇ灏忋€?/p>
Elm 鐨勫寘澶у皬鍦ㄦ湰缁勪腑琛ㄧ幇涔熶笉閿欍€備絾鏄紝Imba 鐨勬垚缁╁紑濮嬭惤鍒颁簡绗?4 缁勭殑姘村钩涓娿€?/p>
鍓╀笅鐨勫氨鏄唴瀛樺崰鐢ㄤ簡锛屼篃鏄紪璇戝櫒澶ф斁寮傚僵鐨勬渶鍚庢満浼氥€?/p>
鍥剧墖绗?2 缁勫唴瀛樻垚缁?/span>
鍐呭瓨缁撴灉闈炲父鎺ヨ繎锛屽嚑涔庢槸骞冲眬锛屼絾鏄?Svelte 缁堜簬涓虹紪璇戝櫒璧㈠緱浜嗚儨鍒┿€傝繖鏄铏氭嫙 DOM 鐨勪竴鍦烘垚鍔熷浠囷紝铏界劧鍓嶈€呴€熷害鏇村揩锛屼綋绉洿灏忋€?/p>
鑰佸疄璇达紝鎵€鏈夎繖浜涘簱閮芥湁鍑鸿壊鐨勫唴瀛?profile銆傜幇鍦ㄦ垜浠簲璇ュ緢娓呮鍦扮湅鍒版洿蹇殑閫熷害涓庢洿浣庣殑鍐呭瓨鍗犵敤涔嬮棿鐨勫叧鑱斾簡銆?/p>
绗?2 缁勭粨鏋?/span>
涓嶈鐩镐俊瀹d紶鍙e彿锛?/p>
瀵广€傚緢澶氫簨鎯呮瘮琛ㄩ潰涓婄湅璧锋潵澶嶆潅寰堝銆傜簿蹇冭璁$殑绯荤粺锛屾棤璁烘槸杩愯鏃惰繕鏄紪璇戞椂锛屾垨鑰呮棤璁洪噰鐢ㄤ綍绉嶆妧鏈柟娉曪紝閮藉彲浠ヨ幏寰楅珮鎬ц兘鐨勮〃鐜般€?/p>
HyperApp 鏄湰缁勭殑澶ц耽瀹讹紝绱ч殢鍏跺悗鐨勬槸 Svelte锛岀劧鍚庢槸 Elm 鍜?Imba銆傚畠浠兘瀵规€ц兘闈炲父閲嶈锛屾墍浠ヤ綘鍙互鏈熸湜杩欎簺搴撳湪澶у鏁版儏鍐典笅閮藉彲浠ユ彁渚涙渶椤跺皷鐨勬€ц兘琛ㄧ幇銆?/p>
鍚庨潰杩樻湁浠€涔堢粨璁哄憿锛?/p>
鎴戝彲浠ュ憡璇変綘锛屽0鏄庡紡 JavaScript 搴撶殑鎬ц兘涔熷彲浠ラ潪甯稿嚭鑹诧紝涓嶇鏄函绮圭殑 WASM銆乄eb Worker 鎴栭殢渚夸粈涔堟妧鏈畠閮戒笉浼氭€曠殑銆備簬鏄垜浠潵鍒颁簡鈥︹€?/p>
绗?1 缁勨€斺€旈《灏栭珮鎵?/span>
鏌愮绋嬪害涓婃湰缁勫彲浠ヨ绉颁负鈥滃揩濡傞棯鐢碘€濓紝鎴戞兂杩欎簺搴撲篃鐢ㄨ繃杩欎釜鍙e彿銆傚叾瀹炰綘鐣欏績鐨勮瘽锛屼細鎰忚瘑鍒板墿涓嬬殑閫夋墜鍙湁涓や綅浜嗐€傚疄闄呬笂锛岃繖涓眰娆′笂鏈変竴浜涘簱鍦ㄤ笉鏂垱閫犳柊鐨勭邯褰曪紝浣嗗叾涓彧鏈変袱涓簱姣旇緝娴佽銆傚畠浠瘮鎵嬪伐浼樺寲鐨勭函 JS 骞冲潎瑕佹參 20锛呫€?/p>
绗?1 缁勯€熷害鎴愮哗
缁撴灉鍊煎緱鐮旂┒涓€鐣€傝繖閲屾垜浠湁涓や釜搴擄紝鏌ョ湅瀹冧滑鐨勪唬鐮佷細鍙戠幇锛岃櫧鐒跺畠浠殑閫熷害鐩歌繎锛屼絾浣跨敤鐨勬柟娉曞畬鍏ㄤ笉鍚屻€侷nferno 鏄笟鍐呮€ц兘鏈€楂樼殑铏氭嫙 DOM 搴撲箣涓€銆備篃灏辨槸璇村湪閫熷害鏈€蹇殑 5 鍚嶉€夋墜涓湁 3 涓槸铏氭嫙 DOM 搴撱€傝閫夋嫨娴嬭瘯鐨勯€熷害涓嬮檷鍙互瑙嗕负璇佹嵁銆?/p>
鍙︿竴鏂归潰锛孲olid 浣跨敤浜嗙粏绮掑害鐨勫搷搴旀€э紝鍜岀 4 缁勪腑鏈€鎱㈢殑鍑犱釜鑰佸簱绫讳技銆傝繖绉嶆妧鏈張鑳藉崰鎹棣栨槸鎸哄鎬殑浜嬫儏锛屼絾姝e鎴戜滑鎵€瑙侊紝Solid 瑙e喅浜嗗畠浠殑缂洪櫡銆傚畠鐨勫垱寤烘椂闂翠笌鏇存柊鏃堕棿涓€鏍峰揩銆備笌绾?JavaScript 鍙湁 5锛呭樊璺濓紝杩欎竴浜嬪疄浠や汉闅句互缃俊銆?/p>
濂囨€殑鏄紝Inferno 鍜?Solid 鐨勫叡鍚岀偣鏄?JSX 妯℃澘鍜屽彈 React 鍚彂鐨?API銆傚湪鍏朵粬閭d簺鏈夌潃瀹氬埗浼樺寲 DSL 鐨勫簱涓紝浣犲ぇ姒備笉浼氱湅鍒拌繖绉嶄笢瑗垮拰椤剁骇鎬ц兘鍚屾椂鍑虹幇銆備絾姝e HyperApp 灞曠ず鐨勪竴鏍凤紝鏌愪簺浜嬫儏瀵规€ц兘鐨勫奖鍝嶆瘮浜轰滑鎯宠薄鐨勮灏忓緢澶氥€?/p>
绗?1 缁勫惎鍔ㄦ垚缁?/span>
缁?HyperApp 鍜?Svelte 鍚庯紝Solid 鏄涓変釜姣旂函 JS 瀹炵幇鏇村皬鐨勫簱锛屼絾 Inferno 涔熶笉钀戒笅椋庛€?/p>
铏界劧楂樻€ц兘搴撲竴鑸細姣旇緝灏忥紝浣嗘湁鏃舵坊鍔犳洿澶氫唬鐮佸彲浠ユ彁楂樻€ц兘锛屽甫鏉ユ洿濂界殑鍒楄〃涓€鑷存€у姣旂畻娉曘€佹洿鏄庣‘鐨勯槻鎶ゆ帾鏂姐€佹洿绮剧粏鐨勬洿鏂帮紝绛夌瓑銆?/p>
Inferno 鍙兘姣斿墠鍑犵粍涓殑鏌愪簺搴撴洿澶э紝浣嗗畠涔熻繕鏄竴涓笉鍒?10kb 鐨勫簱锛岃€屾€ц兘鍒欒秴杩囧嚑涔庢墍鏈夊鎵嬨€?/p>
绗?1 缁勫唴瀛樻垚缁?/span>
濡備綘鎵€瑙侊紝闄や簡浣跨敤 WASM 鐨?Yew 浠ュ锛屽畠浠槸鏁翠釜瀵规瘮涓唴瀛樻秷鑰楁渶灏戠殑妗嗘灦銆傝€冭檻鍒板畠浠殑閫熷害琛ㄧ幇锛岃繖涓粨鏋滃苟涓嶅鎬€?/p>
杩欎簺鍐呭瓨娑堣€楁暟瀛楀弽鏄犱簡璁捐鑰呭瀵硅薄鍜岄棴鍖呭垱寤烘湁鐫€闈炲父娣卞害鐨勬€濊€冦€備袱涓簱閮藉仛浜嗗畾鍒剁殑 JSX 杞崲锛屽甫鏉ヤ簡寰堝鏀剁泭銆?/p>
鍐呭瓨鎬ц兘鐨勬彁鍗囧 Solid 灏や负閲嶈锛屽洜涓?Solid 涓庡ぇ澶氭暟缁嗙矑搴︾殑鍝嶅簲搴撲竴鏍凤紝閮藉皢 CPU 寮€閿€鎹㈡垚浜嗗唴瀛樻秷鑰椼€傚湪杩欑瀵规瘮涓紝Solid 涔嬫墍浠ラ噰鐢ㄤ簡鍜屽鏁版渶鎱㈢殑搴撶被浼肩殑鎶€鏈紝鍗磋兘鎻愪緵鏈€鍑鸿壊鐨勬垚缁╋紝寰堝ぇ涓€閮ㄥ垎鍔熷姵閮芥潵鑷簬瀹冩垚鍔熻В鍐充簡鍐呭瓨娑堣€楅棶棰樸€?/p>
绗?1 缁勭粨鏋?/span>
鎺ヨ繎鏋侀檺銆?/p>
铏借绾?JavaScript 鏄笂闄愶紝浣嗘垜浠繖閲岀殑澹版槑寮忓簱鎬ц兘鍑犱箮娌℃€庝箞钀藉悗锛屼綘瀹屽叏鎰熻涓嶅埌瀹冧滑鐨勫樊璺濄€傝櫧鐒舵垜浠兘瑙夊緱 DOM 涓嶈锛屼絾鍙绮惧績璁捐锛屾湁寰堝鎶€鏈兘鍙互楂樻晥娓叉煋 DOM銆?/p>
杩欓噷鎴戜滑涔熺湅鍒颁簡璇佹嵁銆係olid 鍦ㄥ崄骞村墠灏辫璁や负鏄彜鑰佽€岀紦鎱㈢殑鎶€鏈紝鍙畠绔熺劧澶哄緱浜嗘€ц兘鍐犲啗锛岃€?Inferno 鍐嶄竴娆¤瘉鏄庝簡铏氭嫙 DOM 鍙互楂樻晥瀹屾垚浠讳綍浠诲姟銆?/p>
缁?nbsp; 璁?/span>
鍦ㄦ瀯寤?JavaScript 鍓嶇鏃讹紝鎴戜滑鏈夊緢澶氶€夋嫨銆傛湰鏂囧彧鏄府鍔╁ぇ瀹跺揩閫熶簡瑙f鏋跺甫鏉ョ殑鎬ц兘寮€閿€銆傚綋娑夊強鍒板簲鐢ㄧ▼搴忎腑鐨勫疄闄呮€ц兘涓婚鏃讹紝鐢ㄦ埛浠g爜鐨勫奖鍝嶄細鏇村ぇ銆?/p>
浣嗘垜鎯冲湪杩欓噷鐪熸寮鸿皟鐨勬槸锛屾祴璇曚綘鐨勮В鍐虫柟妗堝苟浜嗚В鎬ц兘琛ㄧ幇鏄緢閲嶈鐨勩€傜幇瀹炲拰瀹d紶鎬绘槸浼氭湁宸紓銆傝櫄鎷?DOM 涓嶈寰楀氨閭d箞鎱€傛垜浠笉鑳戒繚璇佺紪璇戝櫒涓€瀹氫細甯︽潵鏈€灏忕殑鍖呫€傚畾鍒舵ā鏉?DSL 涓嶈寰楁渶浣抽€夐」銆?/p>
鏈€鍚庢垜鎶婃墍鏈夊簱鏀惧湪涓€璧峰仛涓姣斻€傛煇涓簱鎺掑湪鍚庨潰锛屽苟涓嶄竴瀹氭剰鍛崇潃瀹冨氨寰堟參锛屼絾鏄笌杩欎簺琛ㄧ幇鍑鸿壊鐨勭珵浜夊鎵嬬浉姣斿畠鐨勫緱鍒嗘洿宸竴浜涖€?/p>
鎵€鏈夋鏋?/span>
鎵€鏈夋鏋舵斁鍦ㄥ悓涓€寮犺〃涓娿€?/p>
閫熷害
鍚姩
鍐呭瓨
鏈€缁堟帓鍚?/strong>
鎵€鏈夌粨鏋滈兘鍔犲埌涓€涓垪琛ㄤ腑锛堢 1 鍚嶅緱 20 鍒嗭紝鏈€鍚?1 鍚嶅緱 1 鍒嗭級銆傚湪骞冲眬鐨勬儏鍐典笅閫熷害鎴愮哗浼樺厛銆?/p>
Solid锛?7锛?/p>
HyperApp锛?4锛?/p>
Inferno锛?1锛?/p>
Svelte锛?1锛?/p>
Elm锛?6锛?/p>
Riot锛?0锛?/p>
Preact锛?9锛?/p>
Imba锛?6锛?/p>
lit-html锛?6锛?/p>
Yew锛?2锛?/p>
Vue锛?9锛?/p>
Mithril锛?9锛?/p>
Marko锛?8锛?/p>
Alpine锛?8锛?/p>
React锛?9锛?/p>
Rax锛?6锛?/p>
Angular锛?2锛?/p>
Knockout锛?1锛?/p>
Ractive锛?锛?/p>
Ember锛?锛?/p>
鐗瑰埆鎰熻阿 AJ Meyghani 鍦?2018 骞村啓鐨勮繖绡囧姣旀枃绔狅紝杩欑瘒鏂囩珷姝f槸鍙楀叾鍚彂锛?/p>
https://medium.com/@ajmeyghani/javascript-frameworks-performance-comparison-c566d19ab65b
寤朵几闃呰
https://medium.com/javascript-in-plain-english/javascript-frameworks-performance-comparison-2020-cd881ac21fce
鍏嶈垂绂忓埄锛歏ue璧勬枡
鏈変笉灏戣鑰呰闂墠绔殑瀛︿範璧勬枡鐨勶紝涔熸湁涓嶅皯浼欎即閮藉涔犲墠鍚庣鍒嗙鐨勭煡璇嗭紝鑻︿簬鎵句笉鍒板ソ鐨勫熀纭€璧勬枡锛屼簬鏄垜缈荤鍊掓煖锛屾壘浜嗕竴浠藉ソ鐨刅ue鍏ラ棬瑙嗛鍜岀瑪璁皃df锛?
杩欑粰澶у鎵句簡涓€浠藉涔犺祫鏂欙紝寰堝灏忎紮浼撮兘闈犺繖浜涜祫鏂欐垚鍔熷浼氫簡Vue锛屽苟涓旇兘鑷繁鍔ㄦ墜鍐欏墠鍚庣鍒嗙椤圭洰浜嗭紝鐩镐俊浣犱篃鑳借锛?
璧勬枡浠嬬粛
Vue鍏ラ棬锛屽彲浠ュ厛鐪嬮粦椹▼搴忓憳鐨勫厤璐筕ue鍏ラ棬璇剧▼瑙嗛锛岃寰楀緢涓嶉敊锛?灏忔椂闀匡紝瀛﹀畬瓒充互鍏ラ棬鍜屽啓绠€鍗曢」鐩紒
涓€涓猇ue鐨勫叆闂ㄨ棰?/em>
涓€浠絍ue鐨凱DF
濡備綍鑾峰彇鏂囨。锛?/span>
1. 璇嗗埆骞跺叧娉ㄥ叕浼楀彿銆孏ithub涓枃绀惧尯銆嶏紱
2. 鍦ㄤ笅闈㈠叕浼楀彿鍚庡彴鍥炲鍏抽敭瀛椼€?/span>
vue璧勬枡
銆嶃€?/span>
馃憜闀挎寜涓婃柟浜岀淮鐮?nbsp;2 绉?
鍥炲銆?/span>
vue璧勬枡
銆嶅嵆鍙幏鍙栦笂闈㈡墍鏈夎祫鏂?/span>
鐒跺悗Vue鍏ラ棬涔嬪悗锛屾垜浠潵缁撳悎鍚庣瀵规帴寮€鍙戯紝浜庢槸鎴戝綍鍒朵簡涓€涓猄pringBoot + Vue鐨勫紑婧愬崥瀹㈤」鐩紝骞剁紪鍐欎簡璇︾粏鐨勫紑鍙戞枃妗o紝鍖呮嫭鍓嶇鍜屽悗绔€傚彧闇€瑕佹寜鐓ф枃妗o紝缁撳悎璁茶В瑙嗛锛屽氨鑳戒竴姝ヤ竴姝ヨ窡鐫€鍋氶」鐩簡鍝堬紝鐩镐俊杩欐牱鑳藉ぇ澶у姞蹇涔犵殑鏁堢巼锛?
鍚庣鏂囨。锛?/span>
鍓嶇鏂囨。锛?/span>
璁茶В瑙嗛锛?/span>
濡備綍鑾峰彇瑙嗛锛?/span>
1. 璇嗗埆骞跺叧娉ㄥ叕浼楀彿銆?/span>
闈㈣瘯鐜板満
銆嶏紱
2. 鍦ㄤ笅闈㈠叕浼楀彿鍚庡彴鍥炲鍏抽敭瀛椼€?/span>
vue
銆嶃€?/span>
馃憜闀挎寜涓婃柟浜岀淮鐮?nbsp;2 绉?
鍥炲銆?/span>
vue
銆嶅嵆鍙幏鍙栦笂闈㈡墍鏈夎祫鏂?/span>
END
鍚庡彴鍥炲鈥滅數瀛愪功鈥?nbsp;鈥滆祫鏂欌€?nbsp;棰嗗彇涓€浠藉共璐э紝鏁扮櫨鎶€鏈數瀛愪功绛変綘
寮€鍙戣€呮妧鏈墠绾?锛屾眹闆嗘妧鏈墠绾垮揩璁拰鍏虫敞琛屼笟瓒嬪娍锛屽ぇ鍘傚共璐э紝鏄紑鍙戣€呯粡鍘嗗拰鎴愰暱鐨勪紭绉€鎸囧崡銆?/span>
鍘嗗彶鎺ㄨ崘
鐐逛釜鍦ㄧ湅鍚?/span>
以上是关于Soild鎬ц兘灞呯劧杩欎箞鍘夊锛孷ue銆丷eact鍜孉ngular绔熺悍绾疯穼鍑哄墠鍗?/h1>
Posted 寮€鍙戣€呮妧鏈墠绾?/a>
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Soild鎬ц兘灞呯劧杩欎箞鍘夊锛孷ue銆丷eact鍜孉ngular绔熺悍绾疯穼鍑哄墠鍗?/h1>
鐐瑰嚮鈥?/span>寮€鍙戣€呮妧鏈墠绾?/span>鈥濓紝閫夋嫨鈥滄槦鏍囸煍濃€?/span>
璁╀竴閮ㄥ垎寮€鍙戣€呯湅鍒版湭鏉?/span>
璇ユ€庝箞瀵规瘮鍛紵閭e氨閫夊嚭 20 涓渶鍙楁杩庣殑 JavaScript 妗嗘灦锛屽苟鐢?JS Framework Benchmark 鏉ヤ竴鍦洪拡閿嬬浉瀵圭殑澶ф瘮鎷煎浣曪紵
鍏嶈矗澹版槑锛氳繖绡囪瘎娴嬩富瑕佹槸鍑轰簬濞变箰鐩殑锛屽彲鑳戒篃浼氭湁浜涘疄闄呬环鍊笺€備竴濡傛棦寰€锛岃繖閲屾彁鍒扮殑姣忎竴涓簱鍦ㄥぇ澶氭暟鍦烘櫙涓晥鐜囬兘寰堥珮銆傚鏋滄湁浠€涔堥渶瑕佸己璋冪殑璇濓紝閭e氨鏄祴鍑虹殑鎬ц兘浼樺娍鍙兘鏉ヨ嚜澶氱涓嶅悓鐨勬妧鏈拰鎶€宸х粍鍚堛€傝櫧鐒朵綘鍙互灏嗘湰鏂囧綋鍋氬弬鑰冿紝浣嗕綘搴旇鑷繁鍘婚獙璇佹鏋跺湪鍚勪釜鐢ㄤ緥涓殑鎬ц兘銆備綘鍙互鍦ㄨ繖閲屾壘鍒版渶鏂扮殑瀹樻柟鎴愮哗瀵规瘮锛?/span>
https://krausest.github.io/js-framework-benchmark/index.html
濡傛灉浣犳兂杩涗竴姝ヤ簡瑙h繖涓熀鍑嗘祴璇曪紝鍙互鍙傞槄鎴戝啓鐨勮繖绡囨寚鍗楋細
https://dev.to/ryansolid/making-sense-of-the-js-framework-benchmark-25hl
杩樻湁涓€鐐归渶瑕佹彁涓€涓嬶紝鎴戞槸 Solid Framework 鐨勪綔鑰咃紝鍥犳鎴戝厤涓嶄簡浼氬湪鏂囩珷涓幒鏉備竴浜涘亸瑙併€備絾鎴戠殑鎵撶畻鏄敖閲忚鏁板瓧璇磋瘽銆備簡瑙h繃杩欎簺鑳屾櫙鍚庯紝灏辫鍧愪笅鏉ユ璧忔瘮璧涘惂銆?/span>
鎴戠敤鐨勬槸 JS Framework Benchmark 涓渶鏂扮殑 Chrome 87銆傚畠浠槸鐢ㄤ竴閮ㄥ畨瑁?Fedora 33 绯荤粺鐨?Core i7 Razor Blade 15 娴嬪嚭鏉ョ殑锛屼笖缂撹В鎺柦宸插叧闂€?/p>
鎴戞帓闄ゆ帀浜嗘墍鏈夋湁闂鐨勫疄鐜帮紝鐒跺悗閫夊嚭 Github 鏄熺骇鏈€澶氱殑鍓?20 涓簱銆傚浜庢嫢鏈夊涓増鏈殑搴擄紝鎴戦€夌殑鏄畠浠殑鏈€鏂扮増鏈拰娌℃湁浣跨敤绗笁鏂瑰簱鐨勬€ц兘鏈€楂樼殑鍒嗘敮銆?/p>
Vue锛?77k锛?/p>
React锛?61k锛?/p>
Angular锛?8.9k锛?/p>
Svelte锛?0.5k锛?/p>
Preact锛?7.9k锛?/p>
Ember锛?1.7k锛?/p>
HyperApp锛?8.2k锛?/p>
Inferno锛?4.6k锛?/p>
Riot锛?4.4k锛?/p>
Yew锛?4.2k锛?/p>
Mithril锛?2.5k锛?/p>
Alpine锛?2.4k锛?/p>
Knockout锛?.9k锛?/p>
Marko锛?.9k锛?/p>
Rax锛?k锛?/p>
lit-html锛?.9k锛?/p>
Elm锛?.2k锛?/p>
Ractive锛?.8k锛?/p>
Solid锛?.7k锛?/p>
Imba锛?.1k锛?/p>
娉ㄦ剰锛氬浜?lit-html锛屾垜鐢ㄧ殑鏄?LitElement 瀹炵幇锛屽洜涓烘爣鍑嗙増鏍囪浜嗕竴涓棶棰樸€傚畠鐨勫紑閿€搴旇寰堝皬锛屽洜涓哄畠鏄寘瑁呭湪鍗曚釜 Web 缁勪欢涓殑鍘熷 lit-html銆?/span>
杩欐槸褰撲笅 Web 寮€鍙戠敓鎬佺郴缁熶腑闈炲父浼樼鐨勪竴缁勯€夋墜銆傚敖绠?Github 鏄熺骇骞朵笉鑳藉畬鍏ㄨ鏄庨棶棰橈紝浣嗘祴璇曠粨鏋滈噷鏈?100 澶氫釜搴擄紝鍥犳鎴戦渶瑕佷竴涓爣鍑嗘潵閫夊嚭鍙傝禌鑰呫€?/p>
姣忎釜搴撻兘浼氬弬涓庝笁澶х被鍒殑瀵规瘮锛欴OM 鎬ц兘銆佸惎鍔ㄦ寚鏍囧拰鍐呭瓨浣跨敤鎯呭喌銆傛澶栵紝鎴戜細灏嗚繖浜涙鏋跺垎涓?4 缁勶紝杩欐牱灏辫兘鏇村ソ鍦板悓鎬ц兘鐩歌繎鐨勫鎵嬪姣斾簡銆備絾鎴戜篃浼氱粰鍑轰笁澶х被鍒殑鎬绘帓鍚嶃€?/p>
鍦ㄦ瘡涓€缁勪腑閮戒細鏈変綔涓哄弬鑰冪殑鏍囧噯 JavaScript 鏉$洰銆傝繖涓€瀹炵幇浣跨敤浜嗘墍鏈夋渶浼樼鐨勬妧鏈潵鍋氫紭鍖栵紝浠ュ疄鐜版渶浣虫€ц兘銆傚畠灏嗕綔涓烘墍鏈夊姣旂殑鍩虹嚎銆?/p>
涓嬮潰灏卞紑濮嬫瘮璧涘惂銆?/p>
杩欎竴缁勯€夋墜鏈€澶氾紝鍖呮嫭涓€浜涙渶娴佽鐨勫簱銆傝繕鏈変竴浜涘簱鏈?Facebook銆丟oogle銆乪Bay 鍜?Alibaba 绛夊ぇ鍏徃鐨勬敮鎸併€傝繖浜涘簱瑕佷箞涓嶅お鍏虫敞鎬ц兘琛ㄧ幇锛岃涔堝氨鏄彧鍏虫敞鏌愪竴鏂归潰鐨勬€ц兘锛岃€屽湪鍏朵粬鏂归潰琛ㄧ幇涓嶄匠銆?/p>
鍥剧墖绗?4 缁勯€熷害鎴愮哗
杩欓噷鏈夊緢澶氱孩鑹插拰姗欒壊鍧楋紝浣嗚璁颁綇锛岃繖浜涘簱骞冲潎鍙瘮鎴戜滑绮惧績浼樺寲鐨勫懡浠ゅ紡鏍囧噯 JavaScript 鍙傝€冩參澶х害涓€鍊嶃€?00ms 姣?200ms 鑳芥參澶氬皯鍛紵
鍦ㄧ函鎬ц兘鏂归潰锛孯eact 鍦ㄨ繖涓€缁勪腑鎷斿緱澶寸銆備絾鑰冭檻鍒版灦鏋勭殑宸紓鎬э紝React銆丮arko銆丄ngular 鍜?Ember 鐨勬暣浣撹〃鐜扮珶鐒朵細濡傛鎺ヨ繎锛岃繖涔熷緢璁╀汉鎯婅銆備笉杩?React锛屽叿浣撴潵璇存槸 React Hooks 瀹炵幇鏈€鍚庤儨鍑恒€傚鏋滀綘闇€瑕侀澶栫殑鍑芥暟鍒涘缓骞跺潥鎸佷娇鐢ㄧ被锛岄偅涔堝氨涓嶇敤瀵规€ц兘鎶卞お澶ф湡鏈涗簡銆俁eact Hooks 鏄娇鐢?React 鐨勬渶楂樻晥閫斿緞锛?/p>
https://blog.usejournal.com/react-hooks-the-most-performant-way-to-write-react-393e135e1cc
杩欓噷鐨勫簱澶ч兘鏈夌畝闄嬬殑鍒楄〃鎺掑簭锛堝鑷寸碂绯曠殑琛屼氦鎹㈡€ц兘锛夛紝鎴栬€呮湁寰堥珮鐨勫垱寤烘垚鏈€侲mber 灏辨槸涓€涓潪甯哥獊鍑虹殑鍏稿瀷锛屽洜涓哄畠鐨勬洿鏂版€ц兘鍚岀粍鐨勫鎵嬭濂藉緱澶氾紝浣嗗垱寤烘€ц兘鍗存槸鏈€宸殑銆?/p>
鏈€鎱㈢殑搴擄紙Knockout銆丷active 鍜?Alpine锛夐兘鏈夌潃鏋舵瀯鐩镐技鐨勭粏绮掑害鍝嶅簲搴撱€侹nockout 鍜?Ractive锛堜篃鏄?Svelte 鐨勪綔鑰?Rich Harris 鐨勪綔鍝侊級閮借捣婧愪簬 VDOM 搴撴祦琛屼箣鍓嶇殑 2010 骞翠唬鍒濇湡銆侫lpine 鐨勯偅鐐?JavaScript 鏂规硶娓叉煋璧锋潵涔熸槸澶熸參鐨勩€備笅涓€涓函绮圭殑缁嗙矑搴﹀搷搴斿簱浼氬湪寰堝悗闈㈢殑瀵规瘮涓墠浼氬嚭鐜般€?/p>
鎺ヤ笅鏉ワ紝鎴戜滑灏嗕富瑕佹牴鎹簱鐨勬墦鍖呭ぇ灏忔潵瀵规瘮鍚姩鎸囨爣绫诲埆銆?/p>
鍥剧墖绗?4 缁勫惎鍔ㄦ垚缁?/span>
杩欓噷鐨勬帓鍚嶅拰涔嬪墠鏈夊緢澶у尯鍒€侫lpine 鐨勯€熷害琛ㄧ幇鏈€宸紝浣嗘垜浠彲浠ョ湅鍒板畠鐨勫寘鏈€灏忥紝鍚姩鏃堕棿鏈€鐭€侻arko锛堟潵鑷?eBay锛夌揣闅忓叾鍚庯紝鎺ヤ笅鏉ユ槸 Rax锛堟潵鑷樋閲屽反宸达級銆傝繖涓変釜搴撻兘鏄负杞婚噺绾у鎴风浜や簰鐨勬湇鍔$娓叉煋鑰屾瀯寤虹殑銆傛墍浠ュ畠浠殑鎬ц兘鍙兘鎺掑湪绗?4 缁勶紝浣嗗惎鍔ㄦ垚缁╁嵈鍦ㄨ繖涓€缁勪腑棰嗗厛銆?/p>
琛ㄦ牸鐨勫悗鍗婇儴鍒嗘槸鎴戜滑鍦ㄥ熀鍑嗘祴璇曚腑鍖呬綋绉渶澶х殑鍑犲悕閫夋墜锛屽叾涓?Ember 鎴愮哗鏈€宸紝澶у皬鏄叾浠栦换浣曞疄鐜扮殑涓ゅ€嶄互涓娿€傛垜涓嶇煡閬撲负浠€涔堣鑺辫垂瓒呰繃鍗婂厗瀛楄妭鎵嶈兘娓叉煋鍑鸿繖涓〃锛屼絾涓嶇鎬庢牱杩欓兘浼氭嫋绱惎鍔ㄦ€ц兘銆?/p>
鏈€鍚庝竴涓被鍒槸鍐呭瓨娑堣€椼€?/p>
鍥剧墖绗?4 缁勫唴瀛樻垚缁?/span>
鍐呭瓨鎴愮哗寰€寰€鏄拰涔嬪墠涓ょ被鎴愮哗鐩稿叧鑱旂殑锛屽洜涓哄畠浼氬鎬ц兘浜х敓閲嶅ぇ褰卞搷锛屽悓鏃跺ぇ鍨嬪簱寰€寰€浼氫娇鐢ㄦ洿澶氬唴瀛樸€侫lpine銆丮arko 鍜?React 浣嶅眳鍓嶄笁銆傝€佹棫鐨勭粏绮掑害鍝嶅簲搴撲娇鐢ㄧ殑鍐呭瓨鏈€澶氾紝Ember 鏁櫔鏈骇銆侲mber 澶悆鍐呭瓨浜嗐€備粎鍦ㄩ〉闈笂娓叉煋 6 涓寜閽箣鍚庯紝瀹冪敤鐨勫唴瀛樺凡缁忔瘮鏍囧噯鍙傝€冨湪鏁翠釜濂椾欢涓墍鐢ㄧ殑杩樿澶氫簡銆?/p>
鎬讳綋鏉ョ湅锛岃繖涓€缁勫簱鍦?GitHub 涓婃€诲叡鏈?30 涓囨槦锛屽彲鑳藉湪 NPM 涓嬭浇涓崰鎹簡澶ч儴鍒嗕唤棰濄€傚湪杩欑粍閫夋墜涓紝Marko 鍜?Alpine 鐨勫钩鍧囨帓鍚嶆渶楂樸€俁eact 鎺掑悕绗笁锛岃€岄€熷害琛ㄧ幇鏄渶濂界殑銆?/p>
鏈粍涓殑涓€浜涙鏋跺湪甯傚満浠介涓婇仴閬ラ鍏堬紝鑰屼竴浜涜€佹棫鐨勫搷搴斿簱宸茬粡鏄槰鏃ラ粍鑺便€傛帴涓嬫潵鎴戜滑鐮旂┒涓€浜涜〃鐜版洿濂界殑閫夋墜銆?/p>
杩欎竴缁勯噷鐨勬鏋跺彲浠ヨ鍦ㄨ璁℃椂鑰冭檻鍒颁簡鎬ц兘闇€姹傘€傚畠浠湪鍖呭ぇ灏忔寚鏍囦笂涔熶笅浜嗗姛澶紝骞朵笖鍦ㄥ垱寤哄拰鏇存柊鎴愭湰涔嬮棿鎵惧埌浜嗗钩琛°€?/p>
鎴戜滑鍦ㄦ湰缁勪腑鑳界湅鍒颁簲鑺卞叓闂ㄧ殑鏂规硶銆傛瘮濡?Yew锛屼竴涓?WebAssembly 妗嗘灦锛堢敤 Rust 缂栧啓锛夛紱LitElement锛屼竴涓?Web 缁勪欢銆傛渶杩戝彂甯冪殑 Vue 3 鏄繖涓鏋剁殑閲嶅ぇ杩涘寲锛岃瀹冭蛋鍑轰簡绗?4 缁勶紝寮€濮嬪拰涓€浜涗箣鍓嶆病鏈夐亣鍒拌繃鐨勫鎵嬬洿鎺ョ珵浜夈€?/p>
闂茶瘽灏戞彁锛屼笅闈㈡潵鐪嬬湅瀹冧滑鐨勮〃鐜般€?/p>
鍥剧墖绗?3 缁勯€熷害鎴愮哗
鏁翠綋鍒嗘暟鎻愰珮浜嗕竴浜涳紝鍚岀粍鍐呯殑宸窛涔熷ぇ澶氫簡銆侾react 鏄湰缁勪腑閫熷害鏈€蹇殑锛孡itElement 鍒欎互寰急鍔e娍绱ч殢鍏跺悗銆俈ue 3 鍜?Riot 閫熷害鐩歌繎锛岄兘浣嶅眳涓父锛屽畠浠篃閮芥湁杩囧搷搴旀€у拰 VDOM 骞跺瓨鐨勫巻鍙层€侻ithril 鏄渶鏃╁皢閫熷害鏀惧湪棣栦綅鐨?VDOM 搴撲箣涓€锛岃€?Yew 浣滀负鍞竴鐨?WASM 搴撹惤鍦ㄤ簡鏈€鍚庛€?/p>
鍦ㄦ€ц兘 profile 鏂归潰锛屾墍鏈夎繖浜涘簱閮藉樊涓嶅銆傝繖缁勯噷闈㈡病鏈夌函绮圭殑鐨勫搷搴斿簱銆傚畠浠兘浣跨敤鑷笂鍚戜笅鐨勬覆鏌撴柟寮忥紝鏃犺鏄?VDOM 杩樻槸绠€鍗曠殑 Tag Template Literal diff 閮戒竴鏍枫€備笌涓婁竴缁勭浉姣旓紝瀹冧滑鐨勫垪琛ㄥ鐞嗘洿鏅鸿兘浜涳紙鍙傞槄琛屼氦鎹㈡€ц兘锛夈€備絾澶氭暟妗嗘灦鐨勮閫夋嫨鎬ц兘杩樻槸鏈€浣庝竴妗c€?/p>
Yew 鏄釜渚嬪锛屼絾瀹冪殑鍏跺畠鎸囨爣閮藉樊涓嶅皯銆傛垜浠湅鐪嬪叾浠栨祴璇曟湁娌℃湁浠€涔堜笉鍚屻€?/p>
鍥剧墖绗?3 缁勫惎鍔ㄦ垚缁?/span>
鎯呭喌鏈夋墍鏀硅锛屼絾鍦ㄥ惎鍔ㄦ寚鏍囨柟闈?Preact 浠嶅浜庨鍏堝湴浣嶃€俌ew 鏄湰缁勪腑鍞竴绉板緱涓婂ぇ鍨嬪簱鐨勩€俉ASM 搴撶殑纭亸澶с€?/p>
杩欓噷鎴戜滑鍙堣兘鐪嬪埌涓€浜涚浉杩戠殑鎴愮哗銆俈ue 涔熷緢澶э紝浠呮浜?Yew銆侾react 鍜?Riot 鐨勮〃鐜伴潪甯告帴杩戙€侻ithril 鍜?LitElement 涔熷樊涓嶅锛岄兘浣嶅眳涓父銆?/p>
Preact 鏄?React 鐨勪竴涓?4kb 鏇夸唬鍝侊紝瀹冩樉鐒舵槸鎴戜滑鐩墠瑙佽繃鐨勬渶灏忕殑搴擄紝浣嗗悗闈㈣繕鏈夋洿灏忕殑鍛€備笉绠℃€庢牱锛屾湰缁勪腑鐨勮繖浜涘簱閮戒笉闇€瑕佺敤鎴峰お鎿嶅績瀹冧滑鐨勫寘澶у皬銆?/p>
鍥剧墖绗?3 缁勫唴瀛樻垚缁?/span>
Yew 杩欐璧簡銆傚湪娴嬭瘯杩囩殑鎵€鏈夋鏋朵腑锛屽畠鐨勫唴瀛樺崰鐢ㄩ噺鏈€灏戙€俉ASM 搴撳湪杩欐柟闈㈠線寰€鑳藉仛寰楀緢濂姐€傚叾浠栨垚缁╅兘闈炲父鎺ヨ繎銆侻ithril 鍜?Preact 鏄渶宸殑锛屼絾钀藉悗涔熶笉鏄緢澶氥€?/p>
杩欓噷娌℃湁浠€涔堢壒鍒€煎緱涓€鎻愮殑涓滆タ銆備綘鍙兘浼氳涓?LitElement 鍙兘姣斿叾浠栧簱锛圷ew 闄ゅ锛夋洿杞诲阀锛屽洜涓哄畠娌℃湁鍍忓叾浠栧簱涓€鏍蜂娇鐢ㄨ櫄鎷?DOM銆備絾鎴戜滑绋嶅悗浼氱湅鍒帮紝VDOM 骞朵笉鎰忓懗鐫€灏辫鍗犵敤鏇村鍐呭瓨銆?/p>
Riot 鍜?Preact 鐨勫钩鍧囨帓鍚嶆渶楂橈紝鍏舵鏄?LitElement锛屾帓鍚嶇涓夈€俁iot 铏界劧娌℃湁鏄庢樉鑳滃嚭锛屼絾鍦ㄨ繖涓€缁勪腑娌℃湁寮辩偣锛屽洜姝ゅ彇寰椾簡鑳滃埄銆備絾鏄紝杩欎簺妗嗘灦涓棤璁洪€変簡鍝竴涓兘寰堥毦浼氬け鏈涖€傝嚦浜?WASM 鍜?Web 缁勪欢锛屽畠浠唬琛ㄤ簡璁稿浜哄績鐩腑 Web 鐨勬湭鏉ャ€?/p>
浣嗘垜浠繕娌℃湁瀹屾垚銆備笅涓€缁勪唬琛ㄤ簡瀵?Web 鏈潵鐨勫彟涓€绉嶆€濊€冦€傛垜浠杩涘叆缂栬瘧鍣ㄧ殑棰嗗煙浜嗐€?/p>
杩欎竴缁勭殑绔炰簤寰堟縺鐑堛€傛湰缁勪腑鐨勫鏁板簱閮借绉颁负缂栬瘧璇█锛屾瘡绉嶉兘鏈夎嚜宸辩殑椋庡懗銆傝繖缁勯噷鏈変笉鍙彉鐨勭粨鏋勫寲 Elm銆佸彈 Ruby 鍚彂鐨?Imba 鍜屸€滄鍦ㄦ秷澶辩殑鈥漇velte銆?/p>
娉ㄦ剰锛氭垜鍙戠幇锛屽苟涓嶆槸鎵€鏈変汉閮界啛鎮?Svelte 浠ュ墠閭d釜鈥滄鍦ㄦ秷澶辩殑妗嗘灦鈥濈殑缁板彿銆傝繖涓话鍙锋寚鐨勬槸瀹冧粠杈撳嚭涓熀鏈紪璇戝嚭鑷韩鐨勮兘鍔涖€傛垜骞朵笉鏄 Svelte 娌″笇鏈涗簡锛屽鏋滈€犳垚鍥版壈鎴戝緢鎶辨瓑銆?/span>
姣旇緝鐗规畩鐨勬槸 HyperApp锛屽畠涓庡悓缁勫叾浠栭€夋墜瀹屽叏鐩稿弽銆傚畠娌℃湁缂栬瘧鍣ㄣ€佹病鏈夋ā鏉裤€傚彧鏈?h 鍑芥暟鍜屼竴涓渶绮剧畝鐨?Virtual DOM銆?/p>
鐚滅寽缁撴灉濡備綍锛?/p>
鍥剧墖绗簩缁勯€熷害鎴愮哗
鑳滃嚭鐨勭珶鐒舵槸鏈€绮剧畝鐨勮櫄鎷?DOM銆備笌鏈€杩戠殑娴佽瑙傚康鐩稿弽锛屼簨瀹炶瘉鏄庤櫄鎷?DOM 骞朵笉鏄碂绯曟€ц兘鐨勪唬鍚嶈瘝锛岃€屼笖缂栬瘧骞舵病鏈夌粰鍏朵粬搴撳甫鏉ユ樉钁椾紭鍔裤€?/p>
鍦ㄧ紪璇戠殑搴撲腑锛屾垜浠疄闄呭彲浠ョ湅鍒?3 绉嶄笉鍚岀殑娓叉煋鏂规硶锛屽钩鍧囬€熷害閮藉樊涓嶅銆侷mba 浣跨敤 DOM 涓€鑷存€у姣旀柟娉曪紙鍜屾垜浠箣鍓嶇湅鍒扮殑 LitElement 寰堝儚锛夛紝Elm 浣跨敤铏氭嫙 DOM锛屾帓鍦ㄦ渶鍚庣殑 Svelte 浣跨敤浜嗕竴涓粍浠跺搷搴旂郴缁熴€?/p>
浣犲簲璇ユ敞鎰忕殑鏄紝铏氭嫙 DOM 搴撶殑琛岄€夋嫨鎬ц兘鏈€宸紝浣撶幇鍑轰簡瀹冧滑鐨勯澶栧紑閿€銆備絾杩欎簺搴撹繕鏈夌潃鏇村揩鐨勫垵濮嬫覆鏌撻€熷害銆傚鏋滀綘浠旂粏瑙傚療鍒扮洰鍓嶄负姝㈢殑缁撴灉锛屽簲璇ヨ兘娉ㄦ剰鍒拌櫄鎷?DOM 搴撲笌鍝嶅簲搴撲箣闂村叡鏈夌殑杩欎竴鐗规€с€備笉杩囧湪鍏朵粬鎸囨爣涓婂ぇ瀹剁殑閫熷害閮藉樊涓嶅銆?/p>
鎵€浠ユ垜浠户缁垎鏋愩€傝繖浜涚紪璇戝櫒鐨勫惎鍔ㄦ椂闂?/ 鍖呭ぇ灏忔€庝箞鏍峰憿锛?/p>
鍥剧墖绗?2 缁勫惎鍔ㄦ垚缁?/span>
濡備綘鎵€瑙侊紝杩欎釜灏忓阀鐨勮櫄鎷?DOM 搴撲笉浠呴€熷害鏇村揩锛屽寘涔熸瘮鍏朵粬搴撴洿灏忋€傚疄闄呬笂锛孒yperApp 鏄垜浠墍鏈夊簱涓渶灏忕殑瀹炵幇銆傜紪璇戝櫒鍦ㄥ寘澶у皬鏂归潰娌℃硶鍙栬儨銆?/p>
瀹冨拰 Svelte 閮芥瘮鎴戜滑鐨勬爣鍑?JavaScript 鍙傝€冩瀯寤烘洿灏忋€備负浠€涔堜細杩欐牱鍛紵鍥犱负瀹冧滑鐨勬娊璞℃槸浠ヤ竴绉嶆洿鍔犲彲閲嶇敤鐨勬柟寮忕紪鍐欑殑锛屾墍浠ョ敤鍒扮殑浠g爜鏇村皯銆傛爣鍑?JS 瀹炵幇鐨勪紭鍖栦富瑕侀拡瀵规€ц兘鑰岄潪鍖呭ぇ灏忋€?/p>
Elm 鐨勫寘澶у皬鍦ㄦ湰缁勪腑琛ㄧ幇涔熶笉閿欍€備絾鏄紝Imba 鐨勬垚缁╁紑濮嬭惤鍒颁簡绗?4 缁勭殑姘村钩涓娿€?/p>
鍓╀笅鐨勫氨鏄唴瀛樺崰鐢ㄤ簡锛屼篃鏄紪璇戝櫒澶ф斁寮傚僵鐨勬渶鍚庢満浼氥€?/p>
鍥剧墖绗?2 缁勫唴瀛樻垚缁?/span>
鍐呭瓨缁撴灉闈炲父鎺ヨ繎锛屽嚑涔庢槸骞冲眬锛屼絾鏄?Svelte 缁堜簬涓虹紪璇戝櫒璧㈠緱浜嗚儨鍒┿€傝繖鏄铏氭嫙 DOM 鐨勪竴鍦烘垚鍔熷浠囷紝铏界劧鍓嶈€呴€熷害鏇村揩锛屼綋绉洿灏忋€?/p>
鑰佸疄璇达紝鎵€鏈夎繖浜涘簱閮芥湁鍑鸿壊鐨勫唴瀛?profile銆傜幇鍦ㄦ垜浠簲璇ュ緢娓呮鍦扮湅鍒版洿蹇殑閫熷害涓庢洿浣庣殑鍐呭瓨鍗犵敤涔嬮棿鐨勫叧鑱斾簡銆?/p>
涓嶈鐩镐俊瀹d紶鍙e彿锛?/p>
瀵广€傚緢澶氫簨鎯呮瘮琛ㄩ潰涓婄湅璧锋潵澶嶆潅寰堝銆傜簿蹇冭璁$殑绯荤粺锛屾棤璁烘槸杩愯鏃惰繕鏄紪璇戞椂锛屾垨鑰呮棤璁洪噰鐢ㄤ綍绉嶆妧鏈柟娉曪紝閮藉彲浠ヨ幏寰楅珮鎬ц兘鐨勮〃鐜般€?/p>
HyperApp 鏄湰缁勭殑澶ц耽瀹讹紝绱ч殢鍏跺悗鐨勬槸 Svelte锛岀劧鍚庢槸 Elm 鍜?Imba銆傚畠浠兘瀵规€ц兘闈炲父閲嶈锛屾墍浠ヤ綘鍙互鏈熸湜杩欎簺搴撳湪澶у鏁版儏鍐典笅閮藉彲浠ユ彁渚涙渶椤跺皷鐨勬€ц兘琛ㄧ幇銆?/p>
鍚庨潰杩樻湁浠€涔堢粨璁哄憿锛?/p>
鎴戝彲浠ュ憡璇変綘锛屽0鏄庡紡 JavaScript 搴撶殑鎬ц兘涔熷彲浠ラ潪甯稿嚭鑹诧紝涓嶇鏄函绮圭殑 WASM銆乄eb Worker 鎴栭殢渚夸粈涔堟妧鏈畠閮戒笉浼氭€曠殑銆備簬鏄垜浠潵鍒颁簡鈥︹€?/p>
鏌愮绋嬪害涓婃湰缁勫彲浠ヨ绉颁负鈥滃揩濡傞棯鐢碘€濓紝鎴戞兂杩欎簺搴撲篃鐢ㄨ繃杩欎釜鍙e彿銆傚叾瀹炰綘鐣欏績鐨勮瘽锛屼細鎰忚瘑鍒板墿涓嬬殑閫夋墜鍙湁涓や綅浜嗐€傚疄闄呬笂锛岃繖涓眰娆′笂鏈変竴浜涘簱鍦ㄤ笉鏂垱閫犳柊鐨勭邯褰曪紝浣嗗叾涓彧鏈変袱涓簱姣旇緝娴佽銆傚畠浠瘮鎵嬪伐浼樺寲鐨勭函 JS 骞冲潎瑕佹參 20锛呫€?/p>
绗?1 缁勯€熷害鎴愮哗
缁撴灉鍊煎緱鐮旂┒涓€鐣€傝繖閲屾垜浠湁涓や釜搴擄紝鏌ョ湅瀹冧滑鐨勪唬鐮佷細鍙戠幇锛岃櫧鐒跺畠浠殑閫熷害鐩歌繎锛屼絾浣跨敤鐨勬柟娉曞畬鍏ㄤ笉鍚屻€侷nferno 鏄笟鍐呮€ц兘鏈€楂樼殑铏氭嫙 DOM 搴撲箣涓€銆備篃灏辨槸璇村湪閫熷害鏈€蹇殑 5 鍚嶉€夋墜涓湁 3 涓槸铏氭嫙 DOM 搴撱€傝閫夋嫨娴嬭瘯鐨勯€熷害涓嬮檷鍙互瑙嗕负璇佹嵁銆?/p>
鍙︿竴鏂归潰锛孲olid 浣跨敤浜嗙粏绮掑害鐨勫搷搴旀€э紝鍜岀 4 缁勪腑鏈€鎱㈢殑鍑犱釜鑰佸簱绫讳技銆傝繖绉嶆妧鏈張鑳藉崰鎹棣栨槸鎸哄鎬殑浜嬫儏锛屼絾姝e鎴戜滑鎵€瑙侊紝Solid 瑙e喅浜嗗畠浠殑缂洪櫡銆傚畠鐨勫垱寤烘椂闂翠笌鏇存柊鏃堕棿涓€鏍峰揩銆備笌绾?JavaScript 鍙湁 5锛呭樊璺濓紝杩欎竴浜嬪疄浠や汉闅句互缃俊銆?/p>
濂囨€殑鏄紝Inferno 鍜?Solid 鐨勫叡鍚岀偣鏄?JSX 妯℃澘鍜屽彈 React 鍚彂鐨?API銆傚湪鍏朵粬閭d簺鏈夌潃瀹氬埗浼樺寲 DSL 鐨勫簱涓紝浣犲ぇ姒備笉浼氱湅鍒拌繖绉嶄笢瑗垮拰椤剁骇鎬ц兘鍚屾椂鍑虹幇銆備絾姝e HyperApp 灞曠ず鐨勪竴鏍凤紝鏌愪簺浜嬫儏瀵规€ц兘鐨勫奖鍝嶆瘮浜轰滑鎯宠薄鐨勮灏忓緢澶氥€?/p>
绗?1 缁勫惎鍔ㄦ垚缁?/span>
缁?HyperApp 鍜?Svelte 鍚庯紝Solid 鏄涓変釜姣旂函 JS 瀹炵幇鏇村皬鐨勫簱锛屼絾 Inferno 涔熶笉钀戒笅椋庛€?/p>
铏界劧楂樻€ц兘搴撲竴鑸細姣旇緝灏忥紝浣嗘湁鏃舵坊鍔犳洿澶氫唬鐮佸彲浠ユ彁楂樻€ц兘锛屽甫鏉ユ洿濂界殑鍒楄〃涓€鑷存€у姣旂畻娉曘€佹洿鏄庣‘鐨勯槻鎶ゆ帾鏂姐€佹洿绮剧粏鐨勬洿鏂帮紝绛夌瓑銆?/p>
Inferno 鍙兘姣斿墠鍑犵粍涓殑鏌愪簺搴撴洿澶э紝浣嗗畠涔熻繕鏄竴涓笉鍒?10kb 鐨勫簱锛岃€屾€ц兘鍒欒秴杩囧嚑涔庢墍鏈夊鎵嬨€?/p>
绗?1 缁勫唴瀛樻垚缁?/span>
濡備綘鎵€瑙侊紝闄や簡浣跨敤 WASM 鐨?Yew 浠ュ锛屽畠浠槸鏁翠釜瀵规瘮涓唴瀛樻秷鑰楁渶灏戠殑妗嗘灦銆傝€冭檻鍒板畠浠殑閫熷害琛ㄧ幇锛岃繖涓粨鏋滃苟涓嶅鎬€?/p>
杩欎簺鍐呭瓨娑堣€楁暟瀛楀弽鏄犱簡璁捐鑰呭瀵硅薄鍜岄棴鍖呭垱寤烘湁鐫€闈炲父娣卞害鐨勬€濊€冦€備袱涓簱閮藉仛浜嗗畾鍒剁殑 JSX 杞崲锛屽甫鏉ヤ簡寰堝鏀剁泭銆?/p>
鍐呭瓨鎬ц兘鐨勬彁鍗囧 Solid 灏や负閲嶈锛屽洜涓?Solid 涓庡ぇ澶氭暟缁嗙矑搴︾殑鍝嶅簲搴撲竴鏍凤紝閮藉皢 CPU 寮€閿€鎹㈡垚浜嗗唴瀛樻秷鑰椼€傚湪杩欑瀵规瘮涓紝Solid 涔嬫墍浠ラ噰鐢ㄤ簡鍜屽鏁版渶鎱㈢殑搴撶被浼肩殑鎶€鏈紝鍗磋兘鎻愪緵鏈€鍑鸿壊鐨勬垚缁╋紝寰堝ぇ涓€閮ㄥ垎鍔熷姵閮芥潵鑷簬瀹冩垚鍔熻В鍐充簡鍐呭瓨娑堣€楅棶棰樸€?/p>
鎺ヨ繎鏋侀檺銆?/p>
铏借绾?JavaScript 鏄笂闄愶紝浣嗘垜浠繖閲岀殑澹版槑寮忓簱鎬ц兘鍑犱箮娌℃€庝箞钀藉悗锛屼綘瀹屽叏鎰熻涓嶅埌瀹冧滑鐨勫樊璺濄€傝櫧鐒舵垜浠兘瑙夊緱 DOM 涓嶈锛屼絾鍙绮惧績璁捐锛屾湁寰堝鎶€鏈兘鍙互楂樻晥娓叉煋 DOM銆?/p>
杩欓噷鎴戜滑涔熺湅鍒颁簡璇佹嵁銆係olid 鍦ㄥ崄骞村墠灏辫璁や负鏄彜鑰佽€岀紦鎱㈢殑鎶€鏈紝鍙畠绔熺劧澶哄緱浜嗘€ц兘鍐犲啗锛岃€?Inferno 鍐嶄竴娆¤瘉鏄庝簡铏氭嫙 DOM 鍙互楂樻晥瀹屾垚浠讳綍浠诲姟銆?/p>
鍦ㄦ瀯寤?JavaScript 鍓嶇鏃讹紝鎴戜滑鏈夊緢澶氶€夋嫨銆傛湰鏂囧彧鏄府鍔╁ぇ瀹跺揩閫熶簡瑙f鏋跺甫鏉ョ殑鎬ц兘寮€閿€銆傚綋娑夊強鍒板簲鐢ㄧ▼搴忎腑鐨勫疄闄呮€ц兘涓婚鏃讹紝鐢ㄦ埛浠g爜鐨勫奖鍝嶄細鏇村ぇ銆?/p>
浣嗘垜鎯冲湪杩欓噷鐪熸寮鸿皟鐨勬槸锛屾祴璇曚綘鐨勮В鍐虫柟妗堝苟浜嗚В鎬ц兘琛ㄧ幇鏄緢閲嶈鐨勩€傜幇瀹炲拰瀹d紶鎬绘槸浼氭湁宸紓銆傝櫄鎷?DOM 涓嶈寰楀氨閭d箞鎱€傛垜浠笉鑳戒繚璇佺紪璇戝櫒涓€瀹氫細甯︽潵鏈€灏忕殑鍖呫€傚畾鍒舵ā鏉?DSL 涓嶈寰楁渶浣抽€夐」銆?/p>
鏈€鍚庢垜鎶婃墍鏈夊簱鏀惧湪涓€璧峰仛涓姣斻€傛煇涓簱鎺掑湪鍚庨潰锛屽苟涓嶄竴瀹氭剰鍛崇潃瀹冨氨寰堟參锛屼絾鏄笌杩欎簺琛ㄧ幇鍑鸿壊鐨勭珵浜夊鎵嬬浉姣斿畠鐨勫緱鍒嗘洿宸竴浜涖€?/p>
鎵€鏈夋鏋舵斁鍦ㄥ悓涓€寮犺〃涓娿€?/p>
閫熷害
鍚姩
鍐呭瓨
鏈€缁堟帓鍚?/strong>
鎵€鏈夌粨鏋滈兘鍔犲埌涓€涓垪琛ㄤ腑锛堢 1 鍚嶅緱 20 鍒嗭紝鏈€鍚?1 鍚嶅緱 1 鍒嗭級銆傚湪骞冲眬鐨勬儏鍐典笅閫熷害鎴愮哗浼樺厛銆?/p>
Solid锛?7锛?/p>
HyperApp锛?4锛?/p>
Inferno锛?1锛?/p>
Svelte锛?1锛?/p>
Elm锛?6锛?/p>
Riot锛?0锛?/p>
Preact锛?9锛?/p>
Imba锛?6锛?/p>
lit-html锛?6锛?/p>
Yew锛?2锛?/p>
Vue锛?9锛?/p>
Mithril锛?9锛?/p>
Marko锛?8锛?/p>
Alpine锛?8锛?/p>
React锛?9锛?/p>
Rax锛?6锛?/p>
Angular锛?2锛?/p>
Knockout锛?1锛?/p>
Ractive锛?锛?/p>
Ember锛?锛?/p>
鐗瑰埆鎰熻阿 AJ Meyghani 鍦?2018 骞村啓鐨勮繖绡囧姣旀枃绔狅紝杩欑瘒鏂囩珷姝f槸鍙楀叾鍚彂锛?/p>
https://medium.com/@ajmeyghani/javascript-frameworks-performance-comparison-c566d19ab65b
寤朵几闃呰
https://medium.com/javascript-in-plain-english/javascript-frameworks-performance-comparison-2020-cd881ac21fce
璧勬枡浠嬬粛
濡備綍鑾峰彇鏂囨。锛?/span>
2. 鍦ㄤ笅闈㈠叕浼楀彿鍚庡彴鍥炲鍏抽敭瀛椼€?/span> vue璧勬枡 銆嶃€?/span>
馃憜闀挎寜涓婃柟浜岀淮鐮?nbsp;2 绉? 鍥炲銆?/span> vue璧勬枡 銆嶅嵆鍙幏鍙栦笂闈㈡墍鏈夎祫鏂?/span>
鐒跺悗Vue鍏ラ棬涔嬪悗锛屾垜浠潵缁撳悎鍚庣瀵规帴寮€鍙戯紝浜庢槸鎴戝綍鍒朵簡涓€涓猄pringBoot + Vue鐨勫紑婧愬崥瀹㈤」鐩紝骞剁紪鍐欎簡璇︾粏鐨勫紑鍙戞枃妗o紝鍖呮嫭鍓嶇鍜屽悗绔€傚彧闇€瑕佹寜鐓ф枃妗o紝缁撳悎璁茶В瑙嗛锛屽氨鑳戒竴姝ヤ竴姝ヨ窡鐫€鍋氶」鐩簡鍝堬紝鐩镐俊杩欐牱鑳藉ぇ澶у姞蹇涔犵殑鏁堢巼锛? 鍚庣鏂囨。锛?/span> 鍓嶇鏂囨。锛?/span> 璁茶В瑙嗛锛?/span> 濡備綍鑾峰彇瑙嗛锛?/span>
1. 璇嗗埆骞跺叧娉ㄥ叕浼楀彿銆?/span> 闈㈣瘯鐜板満 銆嶏紱
2. 鍦ㄤ笅闈㈠叕浼楀彿鍚庡彴鍥炲鍏抽敭瀛椼€?/span> vue 銆嶃€?/span>馃憜闀挎寜涓婃柟浜岀淮鐮?nbsp;2 绉? 鍥炲銆?/span> vue 銆嶅嵆鍙幏鍙栦笂闈㈡墍鏈夎祫鏂?/span>
END
鍚庡彴鍥炲鈥滅數瀛愪功鈥?nbsp;鈥滆祫鏂欌€?nbsp;棰嗗彇涓€浠藉共璐э紝鏁扮櫨鎶€鏈數瀛愪功绛変綘 寮€鍙戣€呮妧鏈墠绾?锛屾眹闆嗘妧鏈墠绾垮揩璁拰鍏虫敞琛屼笟瓒嬪娍锛屽ぇ鍘傚共璐э紝鏄紑鍙戣€呯粡鍘嗗拰鎴愰暱鐨勪紭绉€鎸囧崡銆?/span> 鍘嗗彶鎺ㄨ崘
鐐逛釜鍦ㄧ湅鍚?/span> 以上是关于Soild鎬ц兘灞呯劧杩欎箞鍘夊锛孷ue銆丷eact鍜孉ngular绔熺悍绾疯穼鍑哄墠鍗?/h1>