馃幆銆愭繁鍏ヨВ鏋愩€戣法绔鏋剁殑鏍稿績鎶€鏈埌搴曟槸浠€涔堬紵
Posted 鍗や唬鐑?,
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了馃幆銆愭繁鍏ヨВ鏋愩€戣法绔鏋剁殑鏍稿績鎶€鏈埌搴曟槸浠€涔堬紵相关的知识，希望对你有一定的参考价值。
鏈枃鏄垜鍦ㄥ涔犲涓钩鍙?UI 妗嗘灦鍚庣殑涓€浜涙劅瑙︼紝鍙楃簿鍔涘拰鎶€鏈按骞虫墍闄愶紝鏂囦腑瀹氭湁涓嶈冻涔嬪锛岃鍚勪綅澶т浆澶氬鎸囨暀
濡傛灉浣犺寰楁垜鐨勬枃绔犲浣犳湁甯姪锛屽湪鏀惰棌鐨勮繃绋嬩腑锛屼竴瀹氳璁板緱鐐硅禐鍜?strong>鐐瑰湪鐪?/strong>鍝︼紝璋㈣阿浣狅紝杩欏鎴戠湡鐨勫緢閲嶈馃専锛?/p>
涓€銆佸墠绔笁鏉挎枾
姝ｅ紡璁ㄨ銆岃法绔紑鍙戙€嶈繖涓蹇靛墠锛屾垜浠彲浠ュ厛鎬濊€冧竴涓棶棰橈細瀵瑰ぇ閮ㄥ垎鍓嶇宸ヤ綔鏉ヨ锛屽墠绔富瑕佸共浜涘暐锛?/p>
鎴戜釜浜鸿涓猴紝鏃犺鐜鎬庝箞鍙橈紝鍓嶇鍩烘湰涓婂氨鏄仛涓変欢浜嬫儏锛?/p>
- fetch data锛堟暟鎹幏鍙栵級
- manage state锛堢姸鎬佺鐞嗭級
- render page锛堥〉闈㈡覆鏌擄級
娌′簡銆?/p>
涔熻鏈変汉瑙夊緱鎴戣鐨勫お鐗囬潰锛屽叾瀹炴垜浠彲浠ョ悊涓€鐞嗐€傚線杩戜簡璇达紝鐜板湪鐭ヨ瘑浠樿垂鎼炵殑濡傜伀濡傝嵓锛屽姩涓嶅姩灏辨悶涓€孹XX 婧愮爜瑙ｆ瀽銆嶏紝鍒嗘瀽涓€涓嬭繖浜涜绋嬬殑涓婚鍜岀洰褰曪紝浣犲氨浼氬彂鐜板熀鏈兘鏄洿缁曠潃杩欎笁涓柟鍚戝睍寮€璁茬殑锛涘線杩滀簡璇达紝鎴戜滑鍙互鍒嗘瀽涓€涓?Web 鍓嶇鐨勫彂灞曞巻绋嬶細
- 1995 骞村乏鍙筹紝鐢?HTTP/1.0 鎷夊彇鏁版嵁锛岀敤绗竴鐗堢殑 javascript 绠＄悊鍑犱釜鍓嶇鐘舵€侊紝鐢ㄨ８闇茬殑 html 鏍囩灞曠ず椤甸潰
- 2005 骞村乏鍙筹紝鐢?HTTP/1.1 鍜?AJAX 鎷夊彇鏁版嵁锛岀敤 JavaScript 鍋氬仛琛ㄥ崟鐢荤敾鐗规晥锛岀敤 CSS 缇庡寲椤甸潰
- 2010 骞村乏鍙筹紝鐢?HTTP/1.1 鍜?AJAX 鎷夊彇鏁版嵁锛岀敤 jQuery 鎿嶄綔 DOM 澶勭悊鍓嶇閫昏緫锛岀敤 CSS 缇庡寲椤甸潰
2015 骞村乏鍙筹紝闅忕潃 HTML5 鏍囧噯鐨勬帹骞垮拰娴忚鍣ㄦ€ц兘鐨勬彁鍗囷紝鍓嶇寮€濮嬭繘鍏ャ€?strong>瀛︿笉鍔ㄤ簡銆嶇殑鏃朵唬锛?/p>
- 鍦?fetch data 灞傞潰锛岄櫎浜?HTTP/1.1 鍜?AJAX锛孒TTPS 鏉ヤ簡锛孒TTP/2 鏉ヤ簡锛學ebSocket 涔熸潵浜?/li>
- 鍦?manage state 灞傞潰锛孉ngular銆丷eact 鍜?Vue 鍏堝悗鍑虹幇锛屼粠鐜板湪鐪嬶紝React 鐨勭姸鎬侀┍鍔ㄨ鍥剧殑鐞嗗康鐩存帴褰卞搷浜?Flutter 鍜?SwiftUI 鐨勮璁?/li>
- 鍦?render page 灞傞潰锛岄櫎浜嗕紶缁熺殑 HTML + CSS锛岃繕鍔犲叆浜?CSS3銆丆anvas 绛夋蹇碉紝闊宠棰戝姛鑳戒篃寰楀埌鍔犲己
- 鏈€杩戝嚑骞达紝缃戠粶鍗忚瓒嬩簬绋冲畾锛屽嚑骞村唴涔熶笉浼氭湁鍟ュぇ鐨勫彉鍔紱鍥藉唴 React 鍜?Vue 鐨勫湴浣嶅熀鏈ǔ鍥猴紝涓€鍫嗗墠绔洴鐫€ GitHub 杩涘害鏉＄瓑鐗堟湰鏇存柊锛況ender 灞傚嚭浜嗕笉灏戝购铔惧瓙锛屽ソ涓嶅鏄撴憜鑴变簡 IE6锛屽張鏉ヤ簡鍚勭灏忕▼搴忥紝鍚屼竴濂椾笟鍔￠€昏緫鍐欏ソ鍑犻亶涓嶇粡娴庝篃涓嶇幇瀹烇紝杩欐椂鍊欏悇绉嶈法绔柟妗堝氨鏁村嚭鏉ヤ簡
缁忚繃涓€鐣垎鏋愶紝杩欎釜涓夋澘鏂х悊璁虹湅涓婂幓宸茬粡鏈変簺閬撶悊浜嗭紝鎴戜滑椤虹潃杩欎釜鏂瑰悜鍐嶅悜搴曞眰鎬濊€冿細杩欎笁澶у姛鑳芥槸鎬庝箞瀹炵幇鐨勶紵
- fetch data 鏂瑰悜锛屾渶鍚庤闈犵綉缁滃崗璁爤鎶婃暟鎹彂鍑哄幓锛屼絾鏄涓€涓墠绔洿鎺ユ悶濂楁帴瀛楃紪绋嬫槸闈炲父涓嶇幇瀹炵殑锛屾墍浠ユ垜浠渶瑕佹妸缃戠粶鎿嶄綔灏佽涓哄簱锛岃搴旂敤灞傝皟鐢?/li>
- render page 鏂瑰悜锛屾渶鍚庢槸鎶婄浉鍏冲浘鍏冧俊鎭€氳繃鍚勭鍥惧舰 API锛圤penGL/Metal/Vulkan/DirectX锛夊彂缁?GPU 杩涜娓叉煋锛屽緢澶氬墠绔殑鍥惧舰瀛﹁矾绋嬫渶缁堥兘姝簬涓€涓笁瑙掑舰锛岀敤杩欏鎶€鏈爤鍘荤敾 UI 涔熸瀬鍏朵笉鐜板疄锛屾洿涓嶈璇存帓鐗堢郴缁熻繖绉嶅伐绋嬮噺娴╁ぇ鐨勫伐浣滐紝鎵€浠ヨ繖浜涙椿鍎块兘璁╃浉鍏崇殑娓叉煋寮曟搸鍋氫簡
- manage state 鏂瑰悜锛屼綘鍙互鐢ㄥ叏灞€鍙橀噺绠＄悊鐘舵€侊紝鏈€鍚庣殑缁撳眬涓€瀹氳鍚屼簨鎵撶垎锛岀幇鍦ㄤ富娴佹柟妗堥兘鏄噰鐢ㄥ悇绉嶆鏋跺拰 runtime 杩涜鐘舵€佺鐞嗭紝鑰岃繖涓?runtime 鐨勫涓荤幆澧冿紝寰€寰€灏辨槸鏌愪釜璇█鐨?strong>铏氭嫙鏈?/strong>锛屽悓鏃讹紝fetch data 鐨勮捣鐐癸紝涔熸槸鍚屼竴涓櫄鎷熸満
缁忚繃涓婇潰鐨勫垎鏋愭垜浠彲浠ョ湅鍑猴紝鍓嶇鐨勪富瑕佹妧鏈牳蹇冨氨涓や釜锛?strong>铏氭嫙鏈?/strong>鍜?strong>娓叉煋寮曟搸锛岃繖涔熸剰鍛崇潃锛?strong>濡傛灉鎴戜滑鎯宠鎼炶法绔紑鍙戯紝灏卞繀椤诲緱缁熶竴铏氭嫙鏈哄拰娓叉煋寮曟搸銆?/p>
浜屻€佽櫄鎷熸満鍜屾覆鏌撳紩鎿?/h2>1.缃戦〉锛欽S Engine + WebKit
鍥犱负璋锋瓕鐨?Blink 寮曟搸 fork 鑷嫻鏋滅殑 WebKit锛屽悗鏂囦负浜嗘弿杩版柟渚匡紝缁熶竴鐢?WebKit 浠ｆ浛娴忚鍣ㄦ覆鏌撳紩鎿?/blockquote>缃戦〉鏄垚鏈渶浣庝笂鎵嬫渶蹇殑璺ㄧ鏂规浜嗐€傚緱鐩婁簬浜掕仈缃戝紑鏀惧紡鐞嗗康锛岀綉椤靛ぉ鐢熷氨鏄法绔殑锛屾棤璁轰粈涔堟覆鏌撴鏋讹紝WebView 閮芥槸蹇呬笉鍙皯鐨勬牳蹇冪粍浠躲€?/p>
寮€鍙戜汉鍛樼殑鎺ュ叆鎴愭湰涔熸瀬浣庯紝涓昏鎶€鏈氨鏄?Web 寮€鍙戦偅涓€濂楋紝鍓嶇涓昏澶寸柤鐨勬槸鍚勪釜娓叉煋寮曟搸鐨?strong>閫傞厤闂鍜?strong>鎬ц兘闂銆?/p>
鐜板湪涓绘祦鐨?JS Engine 鏄嫻鏋滅殑 JavaScriptCore 鍜岃胺姝岀殑 V8锛屼富娴佺殑娓叉煋寮曟搸鏄嫻鏋滅殑 Webkit 鍜岃胺姝岀殑 Blink銆傝櫧鐒?W3C 鐨勮鑼冨氨鎽嗗湪閭ｉ噷锛屽悇涓祻瑙堝櫒鍘傚晢鍐嶆牴鎹鑼冨疄鐜版祻瑙堝櫒锛岃繖涔熸槸缃戦〉璺ㄧ鐨勫熀纭€銆傞棶棰樺湪浜庢祻瑙堝櫒鍐呮牳瀹炵幇鎬绘湁缁嗗井宸窛锛岄儴鍒嗗疄鐜颁笉鍚堣鑼冿紝閮ㄥ垎瀹炵幇鏈韩灏辨湁 Bug锛岃繖涔熸槸鍓嶇鎽嗚劚涓嶄簡閫傞厤闇€姹傜殑鏈川鍘熷洜銆?/p>
鍙︿竴涓槸鎬ц兘闂銆傚叾瀹?WebKit 鏈韩鐨勬覆鏌撻€熷害杩樻槸寰堝揩鐨勶紝浣嗘槸鍙楅檺浜庝竴浜涙祻瑙堝櫒鐗规€э紝姣斿璇存瀬鍏跺鏉傛瀬鍏跺姩鎬佺殑 CSS 灞炴€э紝DOM 鏍戝拰 CSSOM 鐨勫悎骞讹紝涓荤嚎绋嬪繀椤绘寕璧风瓑寰?JS 鐨勬墽琛岋紝杩欎簺閮戒細澶уぇ闄嶄綆鎬ц兘锛屽墠绔悶鎬ц兘浼樺寲锛屼竴鑸緱渚濇嵁杩欎簺娴忚鍣ㄧ壒鎬ц繘琛屽噺鏋濆鐞嗭紝浣嗘槸鍐嶆€庝箞浼樺寲锛屽湪椤甸潰鎬ц兘鍜屼氦浜掍綋楠屼笂锛屽拰 Native 杩樻槸鏈夊緢澶х殑璺濈銆?/p>
2.缃戦〉 PLUS锛欽S Engine + WebKit + Native 鑳藉姏
鐩存帴鎷夸釜 URL 鎵斿埌 WebView 閲屾槸鏈€绠€鍗曠殑锛屽叾瀹炶繖鏍蜂篃鑳借В鍐冲ぇ閮ㄥ垎闂锛屾瘯绔熷墠绔?90% 鐨勫伐浣滈兘鏄敾 UI 鍐欎笟鍔￠€昏緫锛屼絾鏄繕鏈?10% 鐨勫姛鑳藉仛涓嶅埌锛屾瘮濡傝瑕佸拰 Native 鍚屾鐘舵€侊紝璋冪敤涓€浜涚郴缁熷姛鑳姐€?/p>
瑕佸疄鐜板鎴风鍜岀綉椤靛弻鍚戦€氳鐨勮瘽锛屼竴鑸兘鏄€熷姪 JSBridge 杩涜閫氫俊锛?a href="https://link.segmentfault.com/?url=https%3A%2F%2Fjuejin.cn%2Fpost%2F6844903585268891662" rel="nofollow">銆奐SBridge 鐨勫師鐞嗐€?/a>杩欑瘒鏂囩珷鎬荤粨鐨勪笉閿欙紝鎰熷叴瓒ｇ殑鍚屽鍙互鐪嬩竴涓嬨€?/p>
JSBridge 鍙槸瑙ｅ喅浜?Native 鍜?Web 鐨勪簰鐩歌皟鐢ㄩ棶棰橈紝濡傛灉鎴戞兂鍊熷姪 Native 鍔犲己 Web 鎬庝箞鍔烇紵杩欐椂鍊欏氨鏈変簡涓€浜涙帰绱細
- 棰勭儹锛氭彁鍓嶅垱寤哄拰鍒濆鍖?WebView锛岀敋鑷冲疄鐜?WebView 瀹瑰櫒姹狅紝鍑忓皯 WebView 鐨勫惎鍔ㄦ椂闂?/li>
- 缂撳瓨锛氭妸甯哥敤鐨?Web 璧勬簮棰勫厛瀛樺湪 Native 鏈湴锛岀劧鍚庢嫤鎴祻瑙堝櫒缃戠粶璇锋眰閲嶅畾鍚戝埌鏈湴锛岃繖鏍峰氨鍙互鍔犲揩 Web 鐨勮祫婧愬姞杞介€熷害锛堜篃鍙€滅绾垮寘鈥濇柟妗堬級锛?/li>
- 鍔寔锛氭瘮濡傝 Web 瀵圭綉缁滃姞杞界殑鎺у埗鍔涙瘮杈冨急锛岄儴鍒嗘湁鑳藉姏鐨勫巶鍟嗕細鎶婃墍鏈夌殑缃戠粶璇锋眰閮藉姭鎸佷笅鏉ヤ氦缁?Native 鍘诲仛锛岃繖鏍峰仛鍙互鏇寸伒娲荤殑绠＄悊 Web 璇锋眰
- 鏇挎崲锛氭浛鎹竴鑸寚鏇挎崲 Web 鐨?
Img鏍囩鍜?Video鏍囩锛岃繖涓渶甯歌鐨勫湴鏂瑰氨鏄悇澶ф柊闂荤被瀹㈡埛绔€傚洜涓烘柊闂荤殑鍔ㄦ€佹€у拰瀹炴椂鎬э紝鏂伴椈閮芥槸鐢卞悇涓紪杈?鑷獟浣撻€氳繃鍚庡彴缂栬緫涓嬪彂鐨勶紝杩欐椂鍊欒鍒╃敤 Web 寮哄ぇ鐨勬帓鐗堝姛鑳?/strong>鍘绘樉绀烘枃鏈唴瀹癸紱浣嗘槸涓轰簡鍔犺浇閫熷害鍜岃鐪嬩綋楠岋紝鍥剧墖鍜岃棰戦兘鏄?Native 缁勪欢鏇挎崲鐨?/li>缁忚繃涓婇潰鍑犳锛岀綉椤电殑閫熷害鍩烘湰鍙互杈惧埌绉掑紑鐨勭骇鍒紝杩欓噷闈㈡渶鍏稿瀷鐨勫氨鏄嚑澶ф柊闂诲鎴风锛屽ぇ瀹跺彲浠ヤ笂鎵嬩綋楠屼竴涓嬨€?/p>
3.灏忕▼搴忥細JS Engine + WebKit
灏忕▼搴忥紝鍥藉唴鐨勭壒鑹叉灦鏋勶紝鏈川涓婃槸寰俊鎴愪负娴侀噺榛戞礊鍚庯紝鎯虫垚涓烘祦閲忓垎鍙戝競鍦虹鐞嗗拰鍒嗗彂鑷繁鐨勬祦閲忥紝鎵€浠ヨ繖鏄釜鍟嗕笟鍛抽亾寰堥噸鐨勬鏋躲€?/p>
灏忕▼搴忓湪鎶€鏈笂娌′粈涔堢壒鍒殑鍒涙柊鐐癸紝鏈川涓婂氨鏄槈鍓茬増鐨勭綉椤?/strong>锛屾墍浠ュ井淇″皬绋嬪簭鍑烘潵鍚庡悇涓祦閲忓澶撮兘鎺ㄥ嚭浜嗚嚜宸辩殑灏忕▼搴忥紝姝ｅ鏈変汉鍚愭Ы鐨勶紝灏忕▼搴忕殑瀹炵幇鏂瑰紡鏈?9 绉?/a>锛屽簳灞傚疄鐜板鏍峰寲锛屽悇涓巶瀹炵幇杩樻病鏈夌粺涓€鐨勬爣鍑嗭紝鏈€鍚庡氨鏄粰寮€鍙戣€呭杺灞庯紝鎴戜篃娌″暐濂戒粙缁嶇殑锛屽氨杩欐牱鍚с€?/p>
4.React Native锛欽S Engine + Native RenderPipeLine
React 2013 骞村彂甯冿紝涓ゅ勾鍚?React Native 灏卞彂甯冧簡锛屽墠鍑犵璺ㄦ鏂规鍩烘湰閮芥槸鍩轰簬娴忚鍣ㄦ妧鏈殑锛孯N 杩欎釜璺ㄦ鏂规鐨勫垱鏂版€у湪浜庡畠淇濈暀浜?JS Engine锛屽湪娓叉煋寮曟搸杩欐潯璺笂锛屼粬娌℃湁鑷繁閫犺疆瀛愶紝鑰屾槸澶嶇敤浜嗙幇鏈夌殑 Native 娓叉煋绠＄嚎銆?/p>
杩欐牱鍋氱殑濂藉鍦ㄤ簬锛屼繚鐣? JS Engine锛屽彲浠ユ渶澶х▼搴︾殑澶嶇敤 Web 鐢熸€侊紝姣曠珶 GitHub 涓婅疆瀛愭渶澶氱殑璇█灏辨槸 JavaScript 浜嗭紱澶嶇敤 Native RenderPipeLine锛屽ソ澶勫湪浜庤劚绂?WebKit 鐨勫巻鍙插寘琚憋紝鐩稿鏉ヨ娓叉煋绠＄嚎鏇寸煭锛屾€ц兘鑷劧鑰岀劧灏变笂鍘讳簡銆?/p>
閭ｄ箞闂鏉ヤ簡锛孯N 鏄浣曞仛鍒拌法绔殑锛熻繖涓叾瀹炲叏閮ㄤ话浠椾簬 React 鐨?vdom銆?/p>
vdom
鍓嶇绀惧尯涓婃湁浜涙枃绔犺璁?vdom锛屾€讳細浠庢€ц兘鍜屽紑鍙戜究鎹锋€т笂鍒囧叆璁茶В锛屼粠绾?Web 鍓嶇鐨勮搴︾湅锛岃繖浜涚殑纭槸 vdom 鐨勭壒鐐癸紝浣嗘槸杩欎笉鏄?vdom 鐪熸鐏捣鏉ョ殑鍘熷洜銆倂dom 鏇村ぇ鐨勪环鍊煎湪浜庯紝浜轰滑浠?vdom 韬笂鐪嬪埌璺ㄧ寮€鍙戠殑甯屾湜锛屾墍浠ュ湪 React 鍑虹幇鍚?React Native 绱ц窡鐫€鍑虹幇鏄竴浠堕潪甯歌嚜鐒剁殑浜嬫儏銆備负浠€涔堣繖涔堣锛熻繖涓氨瑕佸厛婧簮涓€涓?UI 寮€鍙戠殑鑼冨紡銆?/p>
UI 寮€鍙戜富瑕佹湁涓ゅぇ鑼冨紡锛?strong>Immediate Mode GUI锛堢珛鍗虫ā寮忥級) 鍜?Retained Mode GUI锛堜繚鐣欐ā寮忥級銆?/p>
绠€鍗曟潵璇达紝IMGUI 姣忓抚閮芥槸鍏ㄩ噺鍒锋柊锛屼富瑕佺敤鍦ㄥ疄鏃舵€у緢楂樼殑棰嗗煙锛堟父鎴?CAD 绛夛級锛汻MGUI 鏄渶骞挎硾鐨?UI 鑼冨紡锛屾瘡涓粍浠堕兘琚皝瑁呭埌涓€涓璞￠噷锛屼究浜庣姸鎬佺鐞嗗拰澶嶆潅鐨勫祵濂楀竷灞€銆傛棤璁烘槸缃戦〉銆乮OS銆丄ndroid 杩樻槸 Qt 绛夋闈㈠紑鍙戦鍩燂紝閮芥槸鍩轰簬 RMGUI 鐨勩€傝繖涓よ€呯殑鍏蜂綋缁嗚妭宸紓锛屽彲浠ョ湅杩欑瘒鐭ヤ箮鍥炵瓟鍜岃繖涓?Youtube 瑙嗛銆?/p>
鎴戜滑鍐嶅洖鍒?React Native 涓紝鏃㈢劧 ios android 鐨勫師鐢熸覆鏌撶绾块兘鏄?RMGUI 鑼冨紡锛岄偅涔堟€绘槸鏈夌浉浼肩偣鐨勶紝姣斿璇?UI 閮芥槸鏍戠姸宓屽甯冨眬锛岄兘鏈変簨浠跺洖璋冪瓑绛夈€傝繖鏃跺€?vdom 鐨勪綔鐢ㄥ氨鍑烘潵浜嗭細
vdom 浣滀负涓€涓函瀵硅薄锛屽彲浠ユ竻鏅扮殑鎻愮偧鍑哄嚭甯冨眬鐨勫祵濂楃粨鏋勶紝鑰屼笖杩欎釜鎶借薄鎻忚堪鏄钩鍙版棤鍏崇殑锛岄偅涔堟垜浠氨鍙互鍒╃敤 JS 鐢熸垚 vdom锛岀劧鍚庡皢 vdom 鏄犲皠鍒?Native 鐨勫竷灞€缁撴瀯涓婏紝鏈€缁堣 Native 娓叉煋瑙嗗浘锛屼互杈惧埌璺ㄥ钩鍙板紑鍙戠殑鐩殑銆?/p>
鍒拌繖閲屽鏋滀綘鏈変簺缂栬瘧鍘熺悊鐨勭煡璇嗭紝浣犲氨浼氬彂鐜?vdom 鍜?IR 鏈変簺绫讳技锛屽悓鏍烽兘鏄娊璞′簬骞冲彴鐨勪腑闂存€侊紝vdom 涓婃帴 React 涓嬫帴 Native RenderPipeLine锛孖R 涓婃帴缂栬瘧鍣ㄥ墠绔笅鎺ョ紪璇戝櫒鍚庣锛屾垜浠彧瑕佸叧蹇冨墠鍗婃鐨勯€昏緫澶勭悊锛岃剰娲荤疮娲婚兘璁╁悗鍗婇儴鍒嗗仛銆?/p>
Hermes
2019 骞?Facebook 涓轰簡浼樺寲 React Native 鐨勬€ц兘锛岀洿鎺ユ帹鍑轰簡鏂扮殑 JS Engine鈥斺€?strong>Hermes锛?a href="https://link.segmentfault.com/?url=https%3A%2F%2Fengineering.fb.com%2F2019%2F07%2F12%2Fandroid%2Fhermes%2F" rel="nofollow">FB 瀹樻柟鍗氭枃浠嬬粛浜嗗緢澶氱殑浼樼偣锛屾垜涓汉璁や负鏈€澶х殑浜偣鏄姞鍏?AOT锛屼紶缁熺殑 JS 鍔犲伐鍔犺浇娴佺▼鏄繖鏍风殑锛?/p>
Babel 璇硶杞崲鈫?Minify 浠ｇ爜鍘嬬缉鈫?install 涓嬭浇浠ｇ爜鈫?Parse 杞负 AST鈫?Compile 缂栬瘧鈫?Execute 鎵цHermes 鍔犲叆 AOT 鍚庯紝
Babel銆?code>Minify銆?code>Parse 鍜?Compile杩欎簺娴佺▼鍏ㄩ儴閮藉湪寮€鍙戣€呯數鑴戜笂瀹屾垚锛岀洿鎺ヤ笅鍙戝瓧鑺傜爜璁?Hermes 杩愯灏辫銆?/p>
杩欐牱鍋氱殑濂藉鍦ㄤ簬锛屽彲浠ュぇ澶х缉鐭?JS 鐨勭紪璇戞椂闂达紝涓嶄俊鐨勮瘽澶у鍙互鐢?Chrome 鍒嗘瀽鍑犱釜澶у瀷缃戠珯锛孞S 鐨勮В鏋愬姞杞芥椂闂村熀鏈崰鏃堕兘鏄?50% 浠ヤ笂锛岄儴鍒嗛噸鍨嬬綉绔欏彲鑳藉崰鏃?90%锛岃繖瀵规闈㈠簲鐢ㄦ潵璇磋繕濂斤紝瀵逛簬鐢甸噺鍜?CPU 閮借寮变笂涓€绾跨殑绉诲姩骞冲彴鏉ヨ锛岃繖浜涢兘鏄Ε濡ョ殑鎬ц兘鏉€鎵嬶紝Hermes 鐨勫姞鍏ュ彲浠ュぇ澶ф敼鍠勮繖涓€鎯呭喌銆?/p>
鐩墠 React Native 0.64 涔熸敮鎸?Hermes 浜嗭紝濡傛灉鏈夊仛 RN 涓氬姟鐨勫悓瀛﹀彲浠ョ帺涓€鐜╋紝鐪嬬湅鍦?iOS 涓婄殑鎬ц兘鎻愬崌鏈夊澶с€?/p>
5.Flutter: Dart VM + Flutter RnderPipeLine
Flutter 鏄渶杩戞瘮杈冪伀鐨勪竴涓法绔柟妗堬紝涔熸湁涓嶅皯浜鸿涓鸿繖鏄渶缁堢殑璺ㄧ鏂规锛屾瘯绔熸闈㈣蒋浠舵椂浠ｏ紝鏈€缁堣儨鍑鸿法绔柟妗堝氨鏄?Qt锛屼粬浠殑鍏卞悓鐗圭偣灏辨槸鑷甫浜嗕竴濂楁覆鏌撳紩鎿庯紝鍙互鎶瑰钩缁堢宸紓銆?/p>
Flutter 鐨勫垱閫犺繕鏄緢鏈夋剰鎬濈殑锛?a href="https://link.segmentfault.com/?url=https%3A%2F%2Fzhuanlan.zhihu.com%2Fp%2F52666477" rel="nofollow">杩欓噷鏈変釜 Eric 鐨勮璋堬紝瑙嗛涓 Eric 宸笉澶氭湁鍗佸嚑骞寸殑 Web 娓叉煋棰嗗煙宸ヤ綔缁忛獙锛屾湁涓€娆″湪 Chrome 鍐呴儴浠栦滑鍋氫簡涓疄楠岋紝鎶婁竴浜涗贡涓冨叓绯熺殑 Web 瑙勮寖鍘绘帀鍚庯紝涓€浜涘熀鍑嗘祴璇曠敋鑷宠兘蹇?20 鍊?/strong>锛屽洜姝?Google 鍐呴儴寮€濮嬬珛椤癸紝Flutter 鐨勫嚭鐜颁簡銆傝嚦浜?Flutter 閫夋嫨 Dart 鐨勭悊鐢憋紝鍧婇棿涓€鐩翠紶璇?Flutter 寮€鍙戠粍闅斿灏辨槸 Dart 寮€鍙戠粍锛岀寰楄繎灏卞ソ PY 浜ゆ槗锛屽弽姝?Dart 涔熸病浜虹敤锛屾病鍟ュ巻鍙插寘琚憋紝鍙互寰堝ソ鐨勭浉搴?Flutter 鐨勯渶姹傘€?/p>
Flutter 鐨勬灦鏋勪篃鏄瘮杈冩竻鏅扮殑锛?/p>
- 铏氭嫙鏈虹敤鐨?Dart VM锛孌art 鍚屾椂鏀寔 JIT 鍜?AOT锛屽彲浠ュ悓鏃朵繚璇佸紑鍙戞晥鐜囧拰杩愯鏁堢巼
- 娓叉煋寮曟搸鍏堟妸 Dart 鏋勫缓鐨勮鍥炬暟鎹紶閫掔粰 Skia锛岀劧鍚?Skia 鍔犲伐鏁版嵁浜ょ粰 OpenGL/Metal 杩欎袱涓浘褰?API锛屾渶缁堜氦缁?GPU 娓叉煋锛屾暣浣撲笂姣?WebKit 鐨勬覆鏌撴祦姘寸嚎娓呮櫚涓嶅皯
浠庣函绮圭▼搴︿笂鐪嬶紝Flutter 鏄仛鐨勬渶褰诲簳鐨勶紝铏氭嫙鏈哄拰娓叉煋寮曟搸閮芥病鏈夌敤涓氬唴鐨勬垚鐔熸柟妗堬紝鑰屾槸鑷€犱簡涓€濂楋紝濂藉灏辨槸娌″暐閫傞厤鍘嬪姏锛屽潖澶勫氨鏄お鏂颁簡锛屼笟鍔″紑鍙戞椂寰€寰€浼氶亣鍒版棤杞瓙鍙敤鐨勫按灏姸鎬侊紝濡傛灉璋锋瓕澶у姏鎺ㄥ箍锛屽浗鍐呭ぇ鍘傛寔缁窡杩涳紝鍓嶆櫙杩樻槸寰堝厜鏄庣殑銆?/p>
6.鍏跺畠鏂瑰悜鐨勬帰绱細JS Engine + Flutter RnderPipeLine锛?/h3>
绀惧尯閲屾湁涓€绉嶅０闊筹紝璁や负 Flutter 鏈€澶х殑璐ョ瑪灏辨槸涓嶈兘鐢?JavaScript 寮€鍙戙€傝繖鏃跺€欏氨浼氭湁浜烘兂锛屽鏋滄垜浠妸 Web 鎶€鏈拰 Flutter 鎶€鏈粨鍚堣捣鏉ワ紝鐢?JS Engine 瀵规帴涓栫晫涓婃渶澶ф渶娲昏穬鐨?JS 绀惧尯锛岀敤 Flutter 娓叉煋寮曟搸瀵规帴楂樻€ц兘娓叉煋浣撻獙锛屽浗瀹夋皯涔愶紝宀備笉缇庡搲锛?/p>
鐩墠鏉ヨ涓€浜涘ぇ鍘傝繕鏄仛浜嗕竴浜涙帰绱紝鎴戠湅浜嗕竴浜涘垎鏋愬拰椤圭洰鏋舵瀯锛屾劅瑙夊氨鏄仛浜嗕釜浣庨厤鐗堢殑 React Native锛孯eact Native 鐨勭幇鏈夋灦鏋勬湁涓€涓€ц兘鐡堕灏辨槸璺ㄨ瑷€璋冪敤鎴愭湰姣旇緝楂橈紝鑰岃繖浜涘ぇ鍘傜殑璋冪敤閾捐矾澶氳揪 4 姝ワ細
JS->C++->Dart->C++锛屾洿鍔犱抚蹇冪梾鐙傦紝鐩墠鐪嬫棤璁烘槸涓婃墜鍜屾帹骞块兘鏄病鏈夌洿鎺ョ敤 RN or Flutter 鏂逛究銆?/p>涓夈€佸悇璺ㄧ鏂规鐨勪笉瓒充箣澶?/h2>
璺ㄧ鏂规涓嶅彲鑳藉彧鏈夊ソ澶勭殑锛屽悇涓柟妗堢殑鍧忓涔熸槸寰堟槑鏄剧殑锛屾垜涓嬮潰绠€鍗曞垪涓€涓嬶細
- 缃戦〉锛氭€ц兘鏄釜杩囧幓涓嶇殑鍧庡効锛岃€屼笖 Apple 鏄庣‘鎸囧嚭涓嶆杩?WebView 濂楀３ APP锛屾湁鎷掑鍗遍櫓
- 缃戦〉 PLUS锛氭妧鏈姇鍏ュ緢楂橈紝鍩烘湰鍙兘澶у巶鐜╄浆
- 灏忕▼搴?/strong>锛氬寮€鍙戣€呬笉鍙嬪ソ锛屾妧鏈崐琛版湡鏋佺煭
- React Native锛氬熀鏈彧鑳界敾 UI锛屼竴鏃﹀仛娣变簡锛屽彧浼?JS 鏍规湰瑙ｅ喅涓嶄簡闂锛孞ava OC 閮藉緱瀛︼紝瀵瑰紑鍙戣€呰姹傛瘮杈冮珮
- Flutter锛欰ndroid 鏀寔寰堝ソ锛屼絾 iOS 骞冲彴鐨勪氦浜掑壊瑁傛劅杩樻槸寰堝己鐨勶紝鑰屼笖鍜?RN 闂涓€鏍凤紝涓€鏃﹀仛娣变簡锛屽繀椤诲涔犲鎴风寮€鍙戠煡璇嗭紝瀵瑰紑鍙戣€呰姹傛瘮杈冮珮
鎬荤殑鏉ヨ锛屽湪鐗虹壊涓€瀹氱敤鎴蜂綋楠岀殑鍓嶆彁涓嬶紝璺ㄧ鏂规鍙互鎻愰珮寮€鍙戣€呯殑寮€鍙戞晥鐜囧拰鍏徃鐨勮繍琛屾晥鐜囷紝鎴戜釜浜鸿涓猴紝鍙鏌愪釜鏂规鐨?ROI 姣旇緝楂橈紝鍏跺疄鏄繕鏄彲浠ユ姇鍏ュ埌鐢熶骇鐨勩€?/p>
鍥涖€佹€荤粨
鏈枃鍒版灏辩粨鏉熶簡锛屾垜鎶婂悇涓法绔妧鏈彁鐐间负涓鸿櫄鎷熸満鍜屾覆鏌撳紩鎿庢妧鏈紝鐒跺悗浠ヨ繖涓や釜鏍稿績鎶€鏈殑瑙掑害鍘绘媶瑙ｅ悇涓法绔柟妗堛€備竴鏃︽蹇电悊娓咃紝鍦ㄩ潰瀵规€ц兘璋冧紭绛夋妧鏈満鏅椂锛屽氨鑳芥姄浣忎富瑕佺煕鐩撅紝鏇村揩鏇村ソ鐨勫彂鐜伴棶棰橈紝瑙ｅ喅闂銆?/p>
濡傛灉浣犺寰楁垜鐨勬枃绔犲浣犳湁甯姪锛屽湪鏀惰棌鐨勮繃绋嬩腑锛屼竴瀹氳璁板緱鐐硅禐鍜?strong>鐐瑰湪鐪?/strong>鍝︼紝璋㈣阿浣狅紝杩欏鎴戠湡鐨勫緢閲嶈馃専锛?/p>
鏈€鍚庢帹鑽愪竴娉㈡垜鐨勪釜浜哄崥瀹細supercodepower.com, 鐩墠涓撴敞鍓嶇鎶€鏈紝瀵瑰浘褰㈠涔熸湁涓€浜涘井灏忕爺绌讹紝娆㈣繋澶у鏉ユ挬锝?/p>
浜斻€佹帹鑽愰槄璇?/h2>
銆愮瓟鐤戣В鎯戙€戜负浠€涔堜綘鐨?Charles 浼氭姄鍖呭け璐ワ紵
webpack 涓偅浜涙渶鏄撴贩娣嗙殑 5 涓煡璇嗙偣
銆愬叏缃戞渶鍏ㄣ€慠eact Native 鎬ц兘浼樺寲鎸囧崡
銆愮嫭瀹躲€慠eact Native 鐗堟湰鍗囩骇鎸囧崡
以上是关于馃幆銆愭繁鍏ヨВ鏋愩€戣法绔鏋剁殑鏍稿績鎶€鏈埌搴曟槸浠€涔堬紵的主要内容，如果未能解决你的问题，请参考以下文章
