鏂囦負鏉ヨ嚜 瑗跨摐瑙嗛鍓嶇鎶€鏈洟闃?/strong> 鐨勬枃绔狅紝宸叉巿鏉?ELab 鍙戝竷銆?/span>

浣滆€咃細寮犳槑榪?/p>

Qwik 鏄粈涔?/span>

Qwik 鏄竴涓墠绔鏋訛紝璇硶綾諱技 React 浣跨敤 JSX 鍜?Hooks錛屼笉榪?Qwik 鏄叏鏍圫SR妗嗘灦錛岃€屼笖 Qwik 閲囩敤浜嗕竴緋誨垪絳栫暐浼樺寲欏甸潰鐨勯灞忔€ц兘錛屽仛鐨勬棤璁哄簲鐢ㄤ綋縐澶э紝棣栧睆鎬ц兘 PageSpeed 嫻嬭瘯鍩烘湰閮借兘杈懼埌婊″垎 Framework Benchmarks銆?/p>

Misko Hevery

Misko Hevery錛孮wik 鐨勪綔鑰咃紝鏇翠負鐭ュ悕鐨凾itle鏄疉ngular.js&Angular鐨勪綔鑰呫€?/p>

浠栧湪鍦ｅ厠鎷夋媺澶у姣曚笟鍚庡厛鍚庡幓浜嗙璋峰緢澶氬叕鍙革紝Intel銆乆erox錛堟柦涔愶級銆丼un鍜孉dobe鍏徃浠栭兘鏈夊伐浣滆繃錛屽湪榪欎簺鍏徃浠栦富瑕佷粠浜?strong>鏁版嵁搴?鍚庣鏂歸潰鐨勫伐浣溿€?/p>

2005騫村姞鍏ヤ簡璋鋒瓕錛?009騫村拰Adam Abrons涓€璧峰紑鍙戜簡Angular.js錛屽悗鏉ユ垚涓鴻胺姝岀殑欏圭洰銆?/p>

2021 騫翠粠璋鋒瓕紱昏亴鍔犲叆builder.io鎴愪負CTO騫跺紑濮嬩簡 Qwik 欏圭洰銆?/p>

涓€涓棶棰?/span>

涓轟粈涔堝墠绔鏋跺眰鍑轟笉絀鳳紝Svelte銆丼olidJS銆丄stro銆丗resh銆丮arko銆丵wik錛?/p>

Big Runtime

React 鍜?Vue 閮芥槸鍩轟簬 Runtime 鐨勬鏋訛紝鍗蟲鏋舵湰韜湁寰堝鐨勪唬鐮侊紝涓旈兘浼氭墦鍖呭埌鏈€緇堢殑浜х墿涓鍙戦€佸埌鐢ㄦ埛鐨勬祻瑙堝櫒閲屾墽琛岋紝褰撶敤鎴烽渶瑕佸湪欏甸潰涓婃墽琛屾搷浣滄敼鍙樼粍浠剁殑鐘舵€佹椂錛屾鏋剁殑 Runtime 浼氭牴鎹柊鐨勭粍浠剁姸鎬?State)璁＄畻(Diff)鍑洪渶瑕佹洿鏂扮殑DOM鑺傜偣浠庤€屾洿鏂癡iew銆?/p>

浠庝笂鍥懼彲浠ョ湅鍑猴紝鍍?Angular銆丷eact銆乂ue 絳?Big Runtime 鐨勬鏋朵綋縐兘姣旇緝澶э紝鍦ㄩ灞忓姞杞界殑鏃跺€欏氨闇€瑕佸姞杞芥鏋剁殑JS鏂囦歡騫朵笖鎵ц鐩稿叧鐨勪唬鐮侊紝閭ｄ箞灝變細浜х敓涓€瀹氱殑鎬ц兘寮€閿€錛屽挨鍏舵槸寮辯綉鍜屼綆鎬ц兘鎵嬫満錛屾€ц兘褰卞搷灝變細瓚婂ぇ銆?/p>

Virtual DOM is Pure Overhead

Virtual DOM is pure overhead

Virtual DOM 騫朵笉楂樻晥銆傝Virtual DOM楂樻晥鏄洜涓哄畠涓嶄細鐩存帴鎿嶄綔鍘熺敓DOM錛屾搷浣淒OM姣旇緝娑堣€楁€ц兘銆傚簲鐢ㄧ姸鎬佸彉鍖栨椂妗嗘灦浼氱敓鎴愭柊鐨?Virtual DOM錛屽茍閫氳繃diff綆楁硶鍘昏綆楀嚭鏈鏁版嵁鏇存柊鐪熷疄鐨勮鍥懼彉鍖栵紝鐒跺悗鍙敼鍙樷€滈渶瑕佹敼鍙樷€濈殑DOM鑺傜偣銆?/p>

React 欏跺眰緇勪歡 state 鏇存柊錛屽鏋滀笉榪涜浠諱綍浼樺寲錛屽垯鎵€鏈夊瓙緇勪歡閮戒細閲嶆覆鏌?re-render)銆傛墍璋撶殑 re-render 鏄綘 Class Component 鐨?render 鏂規硶琚噸鏂版墽琛岋紝鎴栬€呭嚱鏁扮粍浠惰閲嶆柊鎵ц銆傜粍浠惰閲嶆覆鏌撴槸鍥犱負Vitual DOM鐨勯珮鏁堟槸寤虹珛鍦?Diff 綆楁硶涓婄殑錛岃€岃鏈?Diff 涓€瀹氳灝嗙粍浠墮噸娓叉煋鎵嶈兘鐭ラ亾緇勪歡鐨勬柊鐘舵€佸拰鏃х姸鎬佹湁娌℃湁鍙戠敓鏀瑰彉錛屼粠鑰屾墠鑳借綆楀嚭鍝簺DOM闇€瑕佽鏇存柊銆?/p>

姝ｆ槸鍥犱負妗嗘灦鏈韓寰堥毦閬垮厤鏃犵敤鐨勬覆鏌擄紝React鎵嶅厑璁鎬嬌鐢ㄤ竴浜涜濡?code style='overflow-wrap: break-word;padding: 2px 4px;border-radius: 4px;margin-right: 2px;margin-left: 2px;background-color: rgba(27, 31, 35, 0.05);font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(255, 100, 65);'>shouldComponentUpdate銆?code style='overflow-wrap: break-word;padding: 2px 4px;border-radius: 4px;margin-right: 2px;margin-left: 2px;background-color: rgba(27, 31, 35, 0.05);font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(255, 100, 65);'>PureComponent銆?code style='overflow-wrap: break-word;padding: 2px 4px;border-radius: 4px;margin-right: 2px;margin-left: 2px;background-color: rgba(27, 31, 35, 0.05);font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(255, 100, 65);'>memo鍜?code style='overflow-wrap: break-word;padding: 2px 4px;border-radius: 4px;margin-right: 2px;margin-left: 2px;background-color: rgba(27, 31, 35, 0.05);font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(255, 100, 65);'>useMemo鐨凙PI鍘誨憡璇夋鏋跺摢浜涚粍浠朵笉闇€瑕佽閲嶆覆鏌撱€?/p>

鍦?React 16 鐗堟湰涔嬪墠錛孷irtual DOM 鐨勫姣旀槸閫氳繃閫掑綊瀹炵幇錛屽鏋滅粍浠舵爲宓屽寰堟繁錛岄偅鎬ц兘鍔垮繀闄嶄綆錛汻eact 16 涔嬪悗錛屾帹鍑?Fiber 鏋舵瀯錛岃櫧鐒剁渷涓嶆帀蹇呰鐨?render錛屼絾鎶婇€掑綊 Diff 鏀逛負鍙墦鏂殑寰幆錛屽茍涓旇姳璐圭簿鍔涜В鍐充換鍔′紭鍏堢駭璋冨害闂錛屼紭鍖栦簡鐢ㄦ埛浣撻獙銆?/p>

Virtual DOM 榪樻湁涓渶澶х殑闂鈥斺€?strong>棰濆鐨勫唴瀛樺崰鐢?/strong>錛屼互 Vue 鐨?Virtual DOM 瀵硅薄涓轟緥錛?00W 涓┖鐨?Virtual DOM(Vue) 浼氬崰鐢?110M 鍐呭瓨銆?/p>

鎴戣涓烘渶閲嶈鐨勯棶棰樻槸緇勪歡鐘舵€佸埌欏甸潰鍏冪礌鏄湁鏄犲皠鍏崇郴鐨勶紝鑰屾槸鐢?Virtual DOM 鍒欎涪澶變簡榪欎釜鏄犲皠鍏崇郴錛岄渶瑕?DOM Diff 鏉ラ噸鏂版瀯寤鴻繖涓叧緋伙紝綰補鏄浣欑殑娑堣€?Pure Overhead)銆?/p>

SSR Hydration is Pure Overhead

Hydration is Pure Overhead

Hydration 鏄負浜嗗鏈嶅姟绔繘琛屾覆鏌撶殑HTML鎻愪緵浜や簰鑳藉姏鐨勬柟妗堛€侶ydration 鐨勮繃紼嬩竴鑸槸榪愯妗嗘灦鍜岀粍浠朵唬鐮侊紝榪樺師搴旂敤鐘舵€佸拰鏋勫緩Virtual DOM錛屽茍灝嗕簨浠剁洃鍚坊鍔犲埌HTML鍏冪礌涓娿€?/p>

Misko Hevery璁や負Hydration鏄緢浣庢晥鐨勮В鍐蟲柟妗堛€?/p>

浠庝笂鍥懼彲浠ョ湅鍑猴紝Hydration 闇€瑕佽緝闀跨殑鏃墮棿鏉ヨ繘琛屽簲鐢ㄧ殑鐘舵€佹仮澶嶏紝涓昏鍥犱負浠ヤ笅涓ょ偣錛?/p>

1銆佹鏋跺繀欏諱笅杞戒笌褰撳墠欏甸潰鐩稿叧鐨勬墍鏈夌粍浠朵唬鐮佸茍涓旂敱嫻忚鍣ㄥ紩鎿庤繘琛岃В鏋愬拰鎵ц銆?/p>

2銆佹鏋跺繀欏繪墽琛屼笌欏甸潰涓婄殑緇勪歡鍏寵仈鐨勪唬鐮侀噸鏂版瀯寤烘暣涓簲鐢ㄧ▼搴忥紝浠ラ噸寤轟簨浠剁洃鍚拰鍐呴儴緇勪歡鏍戯紝鍗充嬌瀹為檯涓婃病鏈夊垱寤轟換浣曟柊鐨凞OM銆?/p>

鎵€浠?Hydration 鏄函寮€閿€錛屽洜涓烘暣涓簲鐢ㄧ殑鏋勫緩榪囩▼鍦?Node 涓婇兘宸茬粡榪愯榪囦簡錛屼絾鏄繖閮ㄥ垎淇℃伅娌℃湁鍚屾鍒版祻瑙堝櫒錛岃€屾槸涓㈠純鎺変簡錛屾墍浠ュ鎴風闇€瑕侀噸鏂版墽琛屼竴閬嶄唬鐮佽繘琛?Hydration 鏉ラ噸鏂版仮澶嶆暣涓簲鐢ㄣ€傝€屽鏋滄湇鍔＄灝嗘墍鏈夌殑搴旂敤鎵€闇€瑕佺殑淇℃伅搴忓垪鍖栦紶杈撳埌嫻忚鍣紝閭ｄ箞 Hydration 鐨勮繃紼嬪畬鍏ㄥ彲浠ョ渷鐣ャ€?/p>

鑰屼笖 Hydration 鏄笌搴旂敤鐨勫鏉傚害鎴愭姣旂殑銆傛墍浠ュ嵆浣跨敤浜?SSR錛岄〉闈㈢殑 TTI 涔熷彲鑳戒笉鏄緢濂姐€?/p>

紺懼尯鐨勬帰绱?/span>

Precompile

濡備粖寰堝鏂扮殑妗嗘灦閮芥病鏈?VDOM錛屽弽鑰屾槸閫氳繃棰勭紪璇戠劧鍚庣洿鎺ヨ繘琛岀粏綺掑害鐨?DOM鎿嶄綔鏉ヨ揪鍒版瘮 VDOM 鏇村ソ鐨勬€ц兘銆?/p>

Svelte 鏄?Precompile 鐨勫厛琛岃€咃紝鍏墮€氳繃闈欐€佺紪璇戝噺灝戞鏋惰繍琛屾椂鐨勪唬鐮侀噺錛屼竴涓?Svelte2 緇勪歡緙栬瘧浜嗕互鍚庯紝鎵€鏈夐渶瑕佺殑榪愯鏃朵唬鐮侀兘鍖呭惈鍦ㄩ噷闈簡錛岄櫎浜嗗紩鍏ヨ繖涓粍浠舵湰韜紝浣犱笉闇€瑕佸啀棰濆寮曞叆涓€涓墍璋撶殑妗嗘灦榪愯鏃訛紒

<a>{{ msg }}</a>

浼氳緙栬瘧鎴愬涓嬩唬鐮侊細

function renderMainFragment(root, component, target) {
 var a=document . createElement('a');

 var text=document . createTextNode(root . msg);
 a . appendChild(text);

 target . appendChild(a)

return {
 update: function (changed, root) {
 text . data=root . msg;
 },

 teardown: function (detach) {
if (detach) a . parentNode . removeChild(a);
 }
 };
}

鍙互鐪嬪埌錛岃窡鍩轟簬 Virtual DOM 鐨勬鏋剁浉姣旓紝榪欐牱鐨勮緭鍑轟笉闇€瑕?Virtual DOM 鐨?diff/patch 鎿嶄綔錛岃嚜鐒跺彲浠ョ渷鍘誨ぇ閲忎唬鐮侊紝鍚屾椂錛屾€ц兘涓婁篃鍜?vanilla JS 鐩稿樊鏃犲嚑錛堜粎灝辮繖涓畝鍗曠ず渚嬭€岃█錛夛紝鍐呭瓨鍗犵敤鏇存槸鏋佷匠銆傝繖涓€濊礬鍏跺疄騫朵笉鏄畠棣栧垱錛屼箣鍓嶆湁涓€涓€ц兘鐖嗚〃鐨勬ā鏉垮紩鎿?Monkberry.js 涔熸槸榪欐牱瀹炵幇鐨勶紝ng2 鐨勬ā鏉跨紪璇戝叾瀹炰篃璺熻繖涓緢綾諱技錛堜絾鏄腑闂村姞浜嗕竴灞傛覆鏌撴娊璞″眰錛夈€?/p>

濡備綍鐪嬪緟 svelte 榪欎釜鍓嶇妗嗘灦錛? 灝ら洦婧殑鍥炵瓟 - 鐭ヤ箮 https://www.zhihu.com/question/53150351/answer/133912199

SolidJS 涔熸槸 Precompile錛屽拰 Svelte2 鐩告瘮鏈夊皯閲忕殑榪愯鏃訛紝鐩墠 Svelte 涔熸敼涓烘湁灝戦噺榪愯鏃剁殑鏂規鏉ュ噺灝戜唬鐮佷綋縐紝鑰屼笖鏀寔 Tree Shaking銆?/p>

SolidJS

Demo鍦ㄧ嚎紺轟緥

Svelte 鍜?SolidJS 絳夐緙栬瘧妗嗘灦瑙ｅ喅浜?Runtime 鍜?VDOM 鐨勯棶棰橈紝娌℃湁瑙ｅ喅浜?Hydration 鐨勯棶棰樸€?/p>

Islands Architecture

Islands 鏋舵瀯妯″瀷鏃╁湪 2019 騫村氨琚彁鍑烘潵浜嗭紝騫跺湪 2021 騫磋 Preact 浣滆€?code style='overflow-wrap: break-word;padding: 2px 4px;border-radius: 4px;margin-right: 2px;margin-left: 2px;background-color: rgba(27, 31, 35, 0.05);font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(255, 100, 65);'>Json Miller 鍦?Islands Architecture 涓€鏂囦腑寰楀埌鎺ㄥ箍銆傝繖涓ā鍨嬩富瑕佺敤浜?SSR (涔熷寘鎷?SSG) 搴旂敤錛屾垜浠煡閬擄紝鍦ㄤ紶緇熺殑 SSR 搴旂敤涓紝鏈嶅姟绔細緇欐祻瑙堝櫒鍝嶅簲瀹屾暣鐨?HTML 鍐呭錛屽茍鍦?HTML 涓敞鍏ヤ竴孌靛畬鏁寸殑 JS 鑴氭湰鐢ㄤ簬瀹屾垚浜嬩歡鐨勭粦瀹氾紝涔熷氨鏄畬鎴?hydration (娉ㄦ按) 鐨勮繃紼嬨€傚綋娉ㄦ按鐨勮繃紼嬪畬鎴愪箣鍚庯紝欏甸潰涔熸墠鑳界湡姝ｅ湴鑳藉榪涜浜や簰銆傚綋涓€涓〉闈腑鍙湁閮ㄥ垎鐨勭粍浠朵氦浜掞紝閭ｄ箞瀵逛簬榪欎簺鍙氦浜掔殑緇勪歡錛屾垜浠彲浠ユ墽琛?hydration 榪囩▼錛屽洜涓虹粍浠朵箣闂存槸浜掔浉鐙珛鐨勩€?/p>

鑰屽浜庨潤鎬佺粍浠訛紝鍗充笉鍙氦浜掔殑緇勪歡錛屾垜浠彲浠ヨ鍏朵笉鍙備笌 hydration 榪囩▼錛岀洿鎺ュ鐢ㄦ湇鍔＄涓嬪彂鐨?HTML 鍐呭銆傚彲浜や簰鐨勭粍浠跺氨鐘瑰鏁翠釜欏甸潰涓殑瀛ゅ矝(Island)錛屽洜姝よ繖縐嶆ā寮忓彨鍋?Islands 鏋舵瀯銆?/p>

鎽樺綍鑷?Islands 鏋舵瀯鍘熺悊鍜屽疄璺?/span>

Islands Architecture 娌℃湁瑙ｅ喅 Runtime 鐨勯棶棰橈紝閮ㄥ垎瑙ｅ喅浜?Hydration 鍜?VDOM 鐨勯棶棰樸€?/p>

React Server Component(RSC)

React 鍦?2020騫?2鏈堝彂甯冧簡 RSC 鐨?Demo錛屽彲浠ュ湪Node.js涓婅繍琛?RSC錛岀劧鍚庣敓鎴?DSL 涓嬪彂鍒版祻瑙堝櫒錛屾渶鍚庣敱妗嗘灦灞傝В鏋?DSL 騫舵洿鏂板埌 DOM 涓娿€?/p>

RSC 鍙互灝嗕竴浜涚粍浠剁殑娓叉煋鏀懼埌鏈嶅姟绔紝鍓嶇鍋氱函灞曠ず錛岃€屼笖浠匯SC鐨勪緷璧栦笉浼氳鎵撳寘鍒板鎴風錛岃繖鏍峰鏋滄煇涓粍浠舵湁涓€涓緝澶х殑絎笁鏂逛緷璧栵紝灝卞彲浠ユ妸絎笁鏂逛緷璧栨斁鍒癛SC閲岋紝鍦ㄦ湇鍔＄榪愯緇勪歡騫跺皢浜х敓鐨勭粨鏋滀紶杈撳埌嫻忚鍣ㄧ榪涜灞曠ず銆?/p>

鐢ㄥ畼鏂圭粰鍑虹殑demo鏉ヤ婦渚嬪瓙錛屼負浜嗘覆鏌撲竴涓敤markdown鍐欑殑絎旇錛屾垜浠渶瑕佺敤鍒?40kb鐨刯s浠ｇ爜錛坓zip涔嬪悗鏄?4kb錛夊厖褰撹繍琛屾椂錛?/p>

// NoteWithMarkdown.js
// NOTE: *before* Server Components
import marked from 'marked'; // 35.9K (11.2K gzipped)
import sanitizeHtml from 'sanitize-html'; // 206K (63.3K gzipped)

function NoteWithMarkdown({text}) {
 const html=sanitizeHtml(marked(text));
return (/* render */); 
}

絎旇鍙槸鐢ㄤ簬鏌ョ湅錛屾鏃舵鍒誨畠鏄函闈欐€佺殑(涓嶉渶瑕佺敤鎴蜂笌涔嬩氦浜?銆傞偅涔堝鏋滄垜浠兘澶熷湪鏈嶅姟鍣ㄤ笂鎶婂畠娓叉煋鎴愰潤鎬佸唴瀹癸紝鎴戜滑鏄笉鏄渷鎺夋妸澶ч噺js浠ｇ爜浼犺緭鍒板鎴風錛岃В鏋愬拰鎵ц鐨勬垚鏈簡鍛紵鏈変簡React Server Component錛屾垜浠兘澶熷仛鍒拌繖涓€鐐廣€?/p>

RSC 娌℃湁瑙ｅ喅 Runtime 闂錛岄儴鍒嗚В鍐充簡 Hydration 鍜?VDOM 鐨勯棶棰樸€?/p>

Resumable

Resumable (鍙仮澶嶆€?鏄?Qwik 鎻愬嚭鐨勪竴涓蹇碉紝鏄寚SSR鏃跺簲鐢ㄥ湪鏈嶅姟绔墽琛屽悗鍙互鍦ㄥ鎴風鎭㈠鎵ц錛岃€屼笉鐢ㄩ噸鏂版瀯寤哄拰涓嬭澆鎵€鏈夌殑搴旂敤浠ｇ爜錛屼篃涓嶉渶瑕佸鏁翠釜搴旂敤榪涜 Hydration銆?/p>

Qwik 鏄浣曞疄鐜?Resumable 鐨勶紵

Precompile

Qwik 鎻愪緵浜?optimizer 瀵逛唬鐮佽繘琛岄緙栬瘧錛屽簳灞傜敱 SWC 榪涜椹卞姩銆?/p>

鐪嬩竴涓狧elloWorld Demo

涓婇潰鐨勪唬鐮佺粡榪?optimizer.transformModules緙栬瘧鍚庝細鐢熸垚涓€涓狫SON錛岀劧鍚庡鍏跺鐞嗘垚 js 鏂囦歡

鍙互鐪嬪埌錛孮wik 鎶婁竴涓粍浠朵究鍚庢垚浜嗕袱涓枃浠訛紝涓€涓鐞?DOM 閫昏緫錛屼竴涓鐞嗕簨浠墮€昏緫銆?/p>

鏈€鍚庨€氳繃 renderToString 鐢熸垚鐨?SSR HTML 濡備笅錛?/p>

<!DOCTYPE html>
<html q:container="paused" q:version="0.11.1" q:render="ssr" q:base="/build/">
<!--qv q:id=0 q:key=shY4sSSi6wY:hello--> <p on:click="s_9rnzdakbxj8.js#s_9rnZDAkBxj8[0]" q:id="1" > Hello Qwik </p>
<!--/qv--> < script type="qwik/json" > { "ctx" :{ "#1" :{ "r" : "0" }}, "objs" :[ "Qwik" ], "subs" :[]} </ script > 
 < script > window . qwikevents ||=[]; window . qwikevents . push ( "click" ) </ script > 

</html>

Interactive

褰撳湪 SSR 闃舵鐢熸垚 HTML錛岀浜岄儴灝辨槸瑕佸湪嫻忚鍣ㄥ鐞嗕簨浠朵簡錛孊ig Runtime妗嗘灦鏄€氳繃 Hydration 鏉ヨ繘琛屼簨浠剁洃鍚紝璁╅〉闈㈣繘琛屼簨浠跺搷搴旂殑錛岃€孮wik鍒欓噰鍙栦簡瀹屽叏涓嶅悓鐨勬柟妗堛€?/p>

Qwik 鐨勪簨浠剁洃鍚叏閮ㄧ敱欏甸潰涓婄殑 qwikevents 鏉ュ鐞?錛?/p>

 < script > window . qwikevents ||=[]; window . qwikevents . push ( "click" ) </ script > 

1. Qwikevents 浼氱洃鍚?document/window 鐨勫叏灞€浜嬩歡錛岃€屼笉鏄拡瀵規瘡涓狣OM鍗曠嫭鐩戝惉鍏朵簨浠訛紝榪欏彲浠ュ湪涓嶅瓨鍦ㄥ簲鐢ㄤ唬鐮佺殑鎯呭喌涓嬪疄鐜頒簨浠剁洃鍚€?/section>

2. 瀵硅Е鍙戜簨浠剁殑 DOM 鑺傜偣鑾峰彇鍏?on:event灞炴€э紝騫朵粠涓В鏋愬嚭 Qrl 錛岃皟鐢?Qwikloader 鍔犺澆瀵瑰簲鐨凧S鏂囦歡騫舵墽琛屽搴旂殑鏂規硶錛岃€?DOM 涓婄殑 q:id鍜?浜嬩歡涓婄殑[]鍐呯殑鏁板瓧鍒欒〃紺哄叾鏂規硶鐨勫弬鏁般€?/section>

Resumable

Component tree

閫氬父妗嗘灦闇€瑕佸湪嫻忚鍣ㄤ腑鏋勫緩緇勪歡鏍戝疄鐜板欏甸潰鐨勬洿鏂?Hydration)錛孮wik 鍒欓€氳繃鍦?SSR renderToString 鐨勮繃紼嬩腑鏀墮泦緇勪歡淇℃伅騫跺皢鍏跺簭鍒楀寲鍒?HTML 涓婏紝鎵€浠ュ叾涓嶉渶瑕佸湪榪愯鏃舵瀯寤虹粍浠舵爲錛岃€屼笖鍙互瀹炵幇浠ヤ笅鑳藉姏錛?/p>

1. 鍦ㄧ粍浠朵唬鐮佷笉瀛樺湪鐨勬儏鍐典笅閲嶅緩緇勪歡灞傛緇撴瀯淇℃伅錛岀粍浠朵唬鐮佸彲浠ヤ繚鎸佹儼鎬с€?/section>

2. Qwik 鍙互瀹炵幇鎳掑姞杞斤紝鍙負闇€瑕侀噸鏂版覆鏌撶殑緇勪歡閲嶅緩緇勪歡灞傛緇撴瀯淇℃伅錛岃€屼笉鏄暣涓簲鐢ㄣ€?/section>

3. Qwik 鏀墮泦store鍜岀粍浠朵箣闂寸殑鍏崇郴淇℃伅錛屽茍鍒涘緩涓€涓闃呮ā鍨嬶紝閫氱煡 Qwik 鍝簺緇勪歡鐢變簬鐘舵€佹洿鏀硅€岄渶瑕侀噸鏂版覆鏌撱€傝闃呬俊鎭篃琚簭鍒楀寲鍒?HTML銆?/section>

Application state

鎵€鏈夋鏋墮兘闇€瑕佷繚鎸佺姸鎬併€傚ぇ澶氭暟妗嗘灦浠ュ紩鐢ㄥ拰闂寘鐨勫艦寮忓皢姝ょ姸鎬佷繚瀛樺湪浠ｇ爜涓紝榪欐牱灝卞鑷村垵濮嬪寲鏃跺€欓渶瑕佷笅杞芥墍鏈変唬鐮侊紝鍋氬ソ鍏寵仈錛屼篃灝辨槸Hydration錛屼絾鏄繖鏍烽€氬父浼氭湁涓棶棰橈紝灝辨槸濡傛灉闇€瑕佹仮澶嶅瓙緇勪歡錛岄偅鐖剁粍浠朵篃闇€瑕佹仮澶嶃€俀wik鐨勭嫭鐗逛箣澶勫湪浜庣姸鎬佷互灞炴€х殑褰㈠紡淇濆瓨鍦?DOM 涓紝榪欎嬌寰桻wik緇勪歡鍙互鐙珛榪涜鎭㈠銆?/p>

鍦?DOM 涓繚鎸佺姸鎬佺殑鍚庢灉鏈夎澶氱嫭鐗圭殑濂藉錛屽寘鎷細

1銆侀€氳繃浠ュ瓧絎︿覆灞炴€х殑褰㈠紡鍦?DOM 涓繚鎸佺姸鎬侊紝搴旂敤紼嬪簭鍙互闅忔椂搴忓垪鍖栦負 HTML銆?/p>

HTML 鍙互閫氳繃緗戠粶鍙戦€佸茍鍙嶅簭鍒楀寲涓轟笉鍚屽鎴風涓婄殑 DOM銆傜劧鍚庡彲浠ユ仮澶嶅弽搴忓垪鍖栫殑 DOM銆?/p>

2銆佹瘡涓粍浠墮兘鍙互鐙珛浜庝換浣曞叾浠栫粍浠舵潵鎭㈠銆傝繖縐嶅彧鍏佽瀵規暣涓簲鐢ㄧ▼搴忕殑涓€涓瓙闆嗚繘琛孒ydrate 涓斾笉闇€瑕佹椂搴忥紝騫朵粎浠呬笅杞介渶瑕佸搷搴旂敤鎴鋒搷浣滅殑浠ｇ爜錛岃繖涓庝紶緇熸鏋舵湁寰堝ぇ涓嶅悓銆?/p>

3銆丵wik 鏄竴涓棤鐘舵€佹鏋訛紙鎵€鏈夊簲鐢ㄧ▼搴忕姸鎬侀兘浠ュ瓧絎︿覆鐨勫艦寮忓瓨鍦ㄤ簬 DOM 涓級銆傛棤鐘舵€佷唬鐮佹槗浜庡簭鍒楀寲銆佷紶杈撳拰鎭㈠銆傝繖涔熸槸鍏佽緇勪歡褰兼鐙珛Hydration鐨勫師鍥犮€?/p>

4銆佸簲鐢ㄧ▼搴忓彲浠ュ湪浠諱綍鏃墮棿鐐硅繘琛屽簭鍒楀寲錛堜笉浠呬粎鏄湪鍒濆娓叉煋鏃訛級錛屽茍涓斿彲浠ュ嬈″簭鍒楀寲銆?/p>

浼樺寲

澶у涔熶細鏈変釜鐤戦棶錛氬鏋滅綉緇滃歡榪燂紝鐐瑰嚮浜嬩歡浼氫笉浼氬崱欏垮憿錛?/p>

Prefetching

Qwik 鎻愪緵浜?prefetchStrategy 鏂規硶鏉ヨ繘琛?JS 鐨勯鍙栵細

export default function (opts: RenderToStreamOptions) {
return renderToStream(<Root />, {
 manifest,
 prefetchStrategy: {
 // custom prefetching config
 },
 ...opts,
 });
}

榛樿鎯呭喌涓嬶紝Qwik 浼氶鍙栭〉闈笂鎵€鏈夊彲瑙佽妭鐐圭殑鐩戝惉鍣紝涔熷彲浠ヨ嚜宸遍厤緗鍙栫瓥鐣ワ細

One More Thing

Partytown

Partytown錛屾槸涓€涓交閲忕駭鐨勫噺灝戠涓夋柟JS鑴氭湰榪愯瀵艱嚧欏甸潰鍔犺澆闂鐨勫紑婧愬伐鍏鳳紝鐢?Builder.io 緇存姢錛岀洰鍓嶅浜庢祴璇曢樁孌點€傞€氳繃灝嗙涓夋柟JS鍦╓ebWorker榪愯錛屽噺灝戜簡鐢變簬絎笁鏂笿avaScript瀵艱嚧鐨勬墽琛屽歡榪熴€傚叾鎯寵В鍐充互涓嬮棶棰橈細

• 閲婃斁涓葷嚎紼嬭祫婧愪互浠呯敤浜庝富搴旂敤鎵ц;
• 瀵圭涓夋柟鑴氭湰榪涜娌欑洅澶勭悊錛屽茍鍏佽鎴栨嫆緇濆叾璁塊棶涓葷嚎紼?API;
• 鍦?Web Worker 涓殧紱婚暱鏃墮棿榪愯鐨勪換鍔?
• 閫氳繃灝咲OM setters/getters 鎵瑰鐞嗗埌緇勬洿鏂頒腑鏉ュ噺灝戞潵鑷涓夋柟鑴氭湰鐨勫竷灞€闂;
• 闄愬埗絎笁鏂硅剼鏈涓葷嚎紼嬬殑璁塊棶;
• 鍏佽絎笁鏂硅剼鏈畬鍏ㄦ寜鐓у畠浠殑緙栫爜鏂瑰紡榪愯錛岃€屾棤闇€浠諱綍鏇存敼;
• 浠?Web Worker 涓悓姝ユ搷浣?璇誨彇/鍐欏叆)涓葷嚎紼?DOM銆?/section>

Web Worker 鐨勪富瑕侀棶棰樻槸鏃犳硶鐩存帴璁塊棶鍙粠涓葷嚎紼嬭闂殑 DOM API錛屼緥濡?window, document鎴?localStorage銆傝櫧鐒跺彲浠ュ湪涓や釜綰跨▼涔嬮棿鍒涘緩娑堟伅浼犻€掔郴緇熸潵浠ｇ悊 DOM 鎿嶄綔錛屼絾鐢ㄤ簬 Web Worker/涓葷嚎紼嬮€氫俊鐨?code style='overflow-wrap: break-word;padding: 2px 4px;border-radius: 4px;margin-right: 2px;margin-left: 2px;background-color: rgba(27, 31, 35, 0.05);font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(255, 100, 65);'>postMessage API 鏄紓姝ョ殑銆傝繖鎰忓懗鐫€渚濊禆浜庡悓姝?DOM 鎿嶄綔鐨勭涓夋柟鑴氭湰灝嗘棤娉曟寜鐓ч鏈熻繍琛屻€?/p>

Partytown 浣跨敤 JavaScript Proxy銆丼ervice Worker 鍜屽悓姝?XHR 璇鋒眰錛屼粠 Web Worker 鍐呴儴鎻愪緵瀵?DOM API 鐨勫悓姝ヨ闂€?/p>

渚嬪鍦?Web Worker 涓幏鍙?document.title 浼氱粡榪囦互涓嬫楠わ細

1. 鍏堝 document 浣跨敤 Proxy 榪涜鎷︽埅

2. 鍐嶄嬌鐢ㄥ悓姝ョ殑 XHR 鍙戣搗璇鋒眰

3. 鐒跺悗浣跨敤 Service Worker 鎷︽埅璇鋒眰

4. 鏈€鍚庨€氳繃 postMessage寮傛鍙戦€佸埌涓葷嚎紼嬨€?/section>

鏁翠釜嫻佺▼铏界劧姣旇緝綣佺悙錛屼絾鏄叾濂藉灝辨槸鍦╓eb Worker 榪愯鐨?JS 鏉ヨ錛屽叾璁塊棶 DOM API 鏄悓姝ョ殑錛屽畬鍏ㄥ拰涓葷嚎紼嬩竴鏍鳳紝灝變笉蹇呴噸鍐?JS 鏉ュ鐞?DOM API浜嗐€?/p>

姝ゅ錛岄€氳繃 Proxy 鏉ヤ唬鐞?DOM API錛屽彲浠ヨ褰曟墍鏈夌殑 JS 璁塊棶 DOM 璁板綍錛屽茍榪涜鎷︽埅闄愬埗銆?/p>

緇撹

鏈枃瀵圭幇浠?2022/11)澶ч儴鍒嗘鏋惰繘琛屼竴涓畝鍗曠殑鍒嗘瀽錛屼篃鎺㈢┒浜嗕竴浜涚ぞ鍖鴻В鍐蟲柟妗堬紝Qwik 綆楁槸榪欎簺鏂規鐨勯泦澶ф垚鑰咃紝Qwik 鎻愬嚭鐨?Resumable 鎬濇兂鏄鐜頒粖妗嗘灦鐨勪竴涓瑕嗭紝鎴戣涓哄叾瀵瑰墠绔殑鎰忎箟涓嶄簹浜?VDOM 鍜?JSX錛屾湭鏉ュ嚑騫村簲璇ヤ細鏇村鐨勭湅鍒扮ぞ鍖哄 Resumable 鎺㈢儲鍜屽簲鐢紝鐢氳嚦鏈€緇堝彇浠?React 涔熸湭鍙煡銆?/p>

铏界劧鐞嗗康宸茬粡姣旇緝鎴愮啛錛屼絾 Qwik 妗嗘灦鏈韓鐩墠榪樺浜庨潪甯稿垵鏈熺殑鐗堟湰錛屾鏋舵湰韜繕鏈夎緝澶氱殑闂錛屽緩璁ぇ瀹跺彲浠ヨ繘琛屽涔犵爺絀訛紝鎸佺畫鍏蟲敞鍏跺彂灞曪紝浣嗙煭鏈熶笉瑕佸湪姝ｅ紡欏圭洰涓嬌鐢ㄣ€?/p>

鍙傝€?/span>

1. Virtual DOM is pure overhead-https://svelte.dev/blog/virtual-dom-is-pure-overhead

2. Hydration is Pure Overhead-https://www.builder.io/blog/hydration-is-pure-overhead

3. Resumable vs. Hydration-https://qwik.builder.io/docs/concepts/resumable/

4. Resumable JavaScript with Qwik-https://dev.to/this-is-learning/resumable-javascript-with-qwik-2i29

5. MPAs vs. SPAs-https://docs.astro.build/en/concepts/mpa-vs-spa/

6. Islands Architecture-https://jasonformat.com/islands-architecture/

7. The new wave of Javascript web frameworks-https://frontendmastery.com/posts/the-new-wave-of-javascript-web-frameworks/

8. How we cut 99% of our JavaScript with Qwik + Partytown-https://www.builder.io/blog/how-we-cut-99-percent-js-with-qwik-and-partytown?utm_source=pocket_mylist

9. 閮藉揩2020騫達紝浣犺繕娌″惉璇磋繃SvelteJS?-https://zhuanlan.zhihu.com/p/97825481

10. Islands 鏋舵瀯鍘熺悊鍜屽疄璺?https://mp.weixin.qq.com/s/MfztwYyEH30F9IL0keAM5w

11. Virtual DOM 璁ょ煡璇尯-https://juejin.cn/post/6898526276529684493

12. 濡備綍鐪嬪緟 svelte 榪欎釜鍓嶇妗嗘灦錛? 灝ら洦婧?https://www.zhihu.com/question/53150351/answer/133912199

13. 銆恟eact銆戝垵鎺erver component-https://juejin.cn/post/6918602124804915208

14. 鍓嶇妗嗘灦瀵規瘮錛堜富瑕佸悙妲?React 錛?https://juejin.cn/post/7158285916266561572#heading-9

15. Qwik.js妗嗘灦鏄浣曡拷姹傛瀬鑷存€ц兘鐨?!-https://segmentfault.com/a/1190000042250628

16. Introducing Partytown 馃帀: Run Third-Party Scripts From a Web Worker-https://dev.to/adamdbradley/introducing-partytown-run-third-party-scripts-from-a-web-worker-2cnp

17. How Partytown Eliminates Website Bloat From Third-Party Scripts-https://www.smashingmagazine.com/2022/04/partytown-eliminates-website-bloat-third-party-apps/

鍏充簬鎴戜滑

鎴戜滑鏉ヨ嚜瀛楄妭璺沖姩錛屾槸鏃椾笅瑗跨摐瑙嗛鍓嶇閮ㄩ棬錛岃礋璐ｈタ鐡滆棰戠殑浜у搧鐮斿彂宸ヤ綔銆?/p>

鎴戜滑鑷村姏浜庡垎浜駭鍝佸唴鐨勪笟鍔″疄璺碉紝涓轟笟鐣屾彁渚涚粡楠屼環鍊箋€傚寘鎷絾涓嶉檺浜庤惀閿€鎼緩銆佷簰鍔ㄧ帺娉曘€佸伐紼嬭兘鍔涖€佺ǔ瀹氭€с€丯odejs銆佷腑鍚庡彴絳夋柟鍚戙€?/p>

鎴戜滑鍦ㄦ嫑鐨勫矖浣嶏細https://job.toutiao.com/s/rDoHAqH銆傛嫑鑱樼殑鍩庡競錛氬寳浜?涓婃搗/鍘﹂棬銆?/p>

嬈㈣繋澶у鍔犲叆鎴戜滑錛屼竴璧峰仛鏈夋寫鎴樼殑浜嬫儏錛?/strong>