整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

胖虎Q绑查询工具-一款QQ账号信息查询工具

鑳栬檸Q缁戞煡璇㈠伐鍏?涓€娆綫Q璐﹀彿淇℃伅鏌ヨ宸ュ叿

铏嶲缁戞煡璇㈠伐鍏?/span>鏄竴娆綫Q璐﹀彿淇℃伅鏌ヨ宸ュ叿锛岀敤鎴疯兘澶熼€氳繃杈撳叆QQ璐﹀彿鎴栬€呮墜鏈哄彿鐮佽繘琛屾煡璇紝鍙煡鎵惧埌鍏剁粦瀹氱殑璐﹀彿銆傝蒋浠舵湁鐫€绠€渚跨殑鎿嶄綔鐣岄潰锛屽彧闇€鍑犱釜绠€鍗曠殑姝ラ鍗冲彲瀹屾垚鍙风爜鐨勬煡璇紝骞朵笖杞欢涓虹豢鑹茬増鏈紝鏃犻渶鐢ㄦ埛杩涜瀹夎锛岃В鍘嬩箣鍚庝究鍙珛鍗充娇鐢ㄣ€?/span>

鏉ユ簮锛歨ttp://www.3h3.com/soft/271811.html

杞欢鍔熻兘

1.鎻愪緵鏈€鏂版煡璇㈡帴鍙e彲渚涢€夋嫨銆?/span>

2.鏀寔閫氳繃鎵嬫満鍙锋潵鏌ヨ缁戝畾鐨凲Q鍙风爜銆?/span>

3.鏀寔閫氳繃QQ鍙风爜鏉ユ煡璇㈢粦瀹氱殑鎵嬫満鍙枫€?/span>

浣跨敤璇存槑

杈撳叆鏌ヨ鐨勬墜鏈哄彿鎴栬€呮槸QQ鍙风爜锛岀劧鍚庨€夋嫨鏌ヨ鎺ュ彛锛屽湪鐐瑰嚮鏌ヨ鍔熻兘灏卞彲浠ヨ繘琛屾煡璇簡銆?/span>

鏌ヨ鍑烘潵鐨勭粨鏋滃彲浠ユ敮鎸佸鍒躲€?/span>

tmlq鑳藉瀵?HTML 鏁版嵁杩涜 sed 鎴?grep 鎿嶄綔銆傛垜浠彲浠ヤ娇鐢?htmlq 鎼滅储銆佸垏鐗囧拰杩囨护 HTML 鏁版嵁銆傝鎴戜滑鐪嬬湅濡備綍鍦?Linux 鎴?Unix 涓婂畨瑁呭拰浣跨敤杩欎釜鏂逛究鐨勫伐鍏峰苟澶勭悊 HTML 鏁版嵁銆?/span>

浠€涔堟槸htmlq锛?/span>

htmlq绫讳技浜?jq锛屼絾鐢ㄤ簬 HTML銆備娇鐢?CSS 閫夋嫨鍣ㄤ粠 HTML 鏂囦欢涓彁鍙栭儴鍒嗗唴瀹广€傚湪 CSS 涓紝閫夋嫨鍣ㄧ敤浜庡畾浣嶆垜浠兂瑕佽缃牱寮忕殑缃戦〉涓婄殑 HTML 鍏冪礌銆備緥濡傦紝鎴戜滑鍙互浣跨敤姝ゅ伐鍏疯交鏉炬彁鍙栧浘鍍忔垨鍏朵粬 URL銆?/p>

瀹夎htmlq

棣栧厛闇€瑕佸湪绯荤粺涓畨瑁卌argo鐒跺悗浣跨敤cargo鏉ュ畨瑁卙tmlq锛?/span>

[root@localhost ~]# yum -y install cargo
[root@localhost ~]# cargo install htmlq

璁剧疆鍙墽琛岀殑璺緞

纭繚灏?$HOME/.cargo/bin 娣诲姞鍒?PATH 鍙橀噺涓紝浠ヤ究鑳藉浣跨敤 export 鍛戒护杩愯宸插畨瑁呯殑浜岃繘鍒舵枃浠讹細

[root@localhost ~]# echo 'export PATH="$PATH:$HOME/.cargo/bin"' >> ~/.bash_profile 
[root@localhost ~]# . ~/.bash_profile 

濡備綍浣跨敤 htmlq 浠?HTML 鏂囦欢涓彁鍙栧唴瀹癸紵

涓嬮潰鏄娇鐢╟url鍜宧tmlq鐨勭敤娉曪細

curl -s url | htmlq '#css-selector'
curl -s url2 | htmlq '.css-selector'
curl -s https://www.linuxprobe.com | htmlq --pretty '#content' | more

璁╂垜浠壘鍒伴〉闈腑鐨勬墍鏈夐摼鎺ャ€備緥濡傦細

[root@localhost ~]# curl -s https://www.linuxprobe.com | htmlq --attribute href a


浜烘€у寲鏄剧ずHTML:

[root@localhost ~]# curl --silent https://mgdm.net | htmlq --pretty '#posts'

甯姪鎵嬪唽

浣跨敤涓嬮潰鍛戒护鏌ョ湅甯姪椤甸潰锛?/span>

[root@localhost ~]# htmlq --help
htmlq 0.3.0
Michael Maclean <michael@mgdm.net>
Runs CSS selectors on HTML

USAGE:
    htmlq [FLAGS] [OPTIONS] [selector]...

FLAGS:
    -B, --detect-base          Try to detect the base URL from the <base> tag in the document. If not found, default to
                               the value of --base, if supplied
    -h, --help                 Prints help information
    -w, --ignore-whitespace    When printing text nodes, ignore those that consist entirely of whitespace
    -p, --pretty               Pretty-print the serialised output
    -t, --text                 Output only the contents of text nodes inside selected elements
    -V, --version              Prints version information

OPTIONS:
    -a, --attribute <attribute>    Only return this attribute (if present) from selected elements
    -b, --base <base>              Use this URL as the base for links
    -f, --filename <FILE>          The input file. Defaults to stdin
    -o, --output <FILE>            The output file. Defaults to stdout

ARGS:
    <selector>...    The CSS expression to select [default: html]

鎬荤粨

htmlq鑳藉瀵?HTML 鏁版嵁杩涜 sed 鎴?grep 鎿嶄綔銆傛垜浠彲浠ヤ娇鐢?htmlq 鎼滅储銆佸垏鐗囧拰杩囨护 HTML 鏁版嵁銆?/span>

鏂囦负鏉ヨ嚜 瑗跨摐瑙嗛鍓嶇鎶€鏈洟闃?/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>

浠栧湪鍦e厠鎷夋媺澶у姣曚笟鍚庡厛鍚庡幓浜嗙璋峰緢澶氬叕鍙革紝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鏂囦欢骞朵笖鎵ц鐩稿叧鐨勪唬鐮侊紝閭d箞灏变細浜х敓涓€瀹氱殑鎬ц兘寮€閿€锛屽挨鍏舵槸寮辩綉鍜屼綆鎬ц兘鎵嬫満锛屾€ц兘褰卞搷灏变細瓒婂ぇ銆?/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>

姝f槸鍥犱负妗嗘灦鏈韩寰堥毦閬垮厤鏃犵敤鐨勬覆鏌擄紝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 鏉ラ噸鏂版仮澶嶆暣涓簲鐢ㄣ€傝€屽鏋滄湇鍔$灏嗘墍鏈夌殑搴旂敤鎵€闇€瑕佺殑淇℃伅搴忓垪鍖栦紶杈撳埌娴忚鍣紝閭d箞 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 绛夐缂栬瘧妗嗘灦瑙e喅浜?Runtime 鍜?VDOM 鐨勯棶棰橈紝娌℃湁瑙e喅浜?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 (娉ㄦ按) 鐨勮繃绋嬨€傚綋娉ㄦ按鐨勮繃绋嬪畬鎴愪箣鍚庯紝椤甸潰涔熸墠鑳界湡姝e湴鑳藉杩涜浜や簰銆傚綋涓€涓〉闈腑鍙湁閮ㄥ垎鐨勭粍浠朵氦浜掞紝閭d箞瀵逛簬杩欎簺鍙氦浜掔殑缁勪欢锛屾垜浠彲浠ユ墽琛?hydration 杩囩▼锛屽洜涓虹粍浠朵箣闂存槸浜掔浉鐙珛鐨勩€?/p>

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

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

Islands Architecture 娌℃湁瑙e喅 Runtime 鐨勯棶棰橈紝閮ㄥ垎瑙e喅浜?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浠g爜锛坓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浠g爜浼犺緭鍒板鎴风锛岃В鏋愬拰鎵ц鐨勬垚鏈簡鍛紵鏈変簡React Server Component锛屾垜浠兘澶熷仛鍒拌繖涓€鐐广€?/p>

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

Resumable

Resumable (鍙仮澶嶆€?鏄?Qwik 鎻愬嚭鐨勪竴涓蹇碉紝鏄寚SSR鏃跺簲鐢ㄥ湪鏈嶅姟绔墽琛屽悗鍙互鍦ㄥ鎴风鎭㈠鎵ц锛岃€屼笉鐢ㄩ噸鏂版瀯寤哄拰涓嬭浇鎵€鏈夌殑搴旂敤浠g爜锛屼篃涓嶉渶瑕佸鏁翠釜搴旂敤杩涜 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>
  1. 瀵硅Е鍙戜簨浠剁殑 DOM 鑺傜偣鑾峰彇鍏?on:event灞炴€э紝骞朵粠涓В鏋愬嚭 Qrl 锛岃皟鐢?Qwikloader 鍔犺浇瀵瑰簲鐨凧S鏂囦欢骞舵墽琛屽搴旂殑鏂规硶锛岃€?DOM 涓婄殑 q:id鍜?浜嬩欢涓婄殑[]鍐呯殑鏁板瓧鍒欒〃绀哄叾鏂规硶鐨勫弬鏁般€?/section>

Resumable

Component tree

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

  1. 鍦ㄧ粍浠朵唬鐮佷笉瀛樺湪鐨勬儏鍐典笅閲嶅缓缁勪欢灞傛缁撴瀯淇℃伅锛岀粍浠朵唬鐮佸彲浠ヤ繚鎸佹儼鎬с€?/section>
  1. Qwik 鍙互瀹炵幇鎳掑姞杞斤紝鍙负闇€瑕侀噸鏂版覆鏌撶殑缁勪欢閲嶅缓缁勪欢灞傛缁撴瀯淇℃伅锛岃€屼笉鏄暣涓簲鐢ㄣ€?/section>
  1. Qwik 鏀堕泦store鍜岀粍浠朵箣闂寸殑鍏崇郴淇℃伅锛屽苟鍒涘缓涓€涓闃呮ā鍨嬶紝閫氱煡 Qwik 鍝簺缁勪欢鐢变簬鐘舵€佹洿鏀硅€岄渶瑕侀噸鏂版覆鏌撱€傝闃呬俊鎭篃琚簭鍒楀寲鍒?HTML銆?/section>

Application state

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

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

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

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

2銆佹瘡涓粍浠堕兘鍙互鐙珛浜庝换浣曞叾浠栫粍浠舵潵鎭㈠銆傝繖绉嶅彧鍏佽瀵规暣涓簲鐢ㄧ▼搴忕殑涓€涓瓙闆嗚繘琛孒ydrate 涓斾笉闇€瑕佹椂搴忥紝骞朵粎浠呬笅杞介渶瑕佸搷搴旂敤鎴锋搷浣滅殑浠g爜锛岃繖涓庝紶缁熸鏋舵湁寰堝ぇ涓嶅悓銆?/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銆傝櫧鐒跺彲浠ュ湪涓や釜绾跨▼涔嬮棿鍒涘缓娑堟伅浼犻€掔郴缁熸潵浠g悊 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 杩涜鎷︽埅
  1. 鍐嶄娇鐢ㄥ悓姝ョ殑 XHR 鍙戣捣璇锋眰
  1. 鐒跺悗浣跨敤 Service Worker 鎷︽埅璇锋眰
  1. 鏈€鍚庨€氳繃 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 妗嗘灦鏈韩鐩墠杩樺浜庨潪甯稿垵鏈熺殑鐗堟湰锛屾鏋舵湰韬繕鏈夎緝澶氱殑闂锛屽缓璁ぇ瀹跺彲浠ヨ繘琛屽涔犵爺绌讹紝鎸佺画鍏虫敞鍏跺彂灞曪紝浣嗙煭鏈熶笉瑕佸湪姝e紡椤圭洰涓娇鐢ㄣ€?/p>

鍙傝€?/span>

  1. Virtual DOM is pure overhead-https://svelte.dev/blog/virtual-dom-is-pure-overhead
  1. Hydration is Pure Overhead-https://www.builder.io/blog/hydration-is-pure-overhead
  1. Resumable vs. Hydration-https://qwik.builder.io/docs/concepts/resumable/
  1. Resumable JavaScript with Qwik-https://dev.to/this-is-learning/resumable-javascript-with-qwik-2i29
  1. MPAs vs. SPAs-https://docs.astro.build/en/concepts/mpa-vs-spa/
  1. Islands Architecture-https://jasonformat.com/islands-architecture/
  1. The new wave of Javascript web frameworks-https://frontendmastery.com/posts/the-new-wave-of-javascript-web-frameworks/
  1. 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
  1. 閮藉揩2020骞达紝浣犺繕娌″惉璇磋繃SvelteJS?-https://zhuanlan.zhihu.com/p/97825481
  1. Islands 鏋舵瀯鍘熺悊鍜屽疄璺?https://mp.weixin.qq.com/s/MfztwYyEH30F9IL0keAM5w
  1. Virtual DOM 璁ょ煡璇尯-https://juejin.cn/post/6898526276529684493
  1. 濡備綍鐪嬪緟 svelte 杩欎釜鍓嶇妗嗘灦锛? 灏ら洦婧?https://www.zhihu.com/question/53150351/answer/133912199
  1. 銆恟eact銆戝垵鎺erver component-https://juejin.cn/post/6918602124804915208
  1. 鍓嶇妗嗘灦瀵规瘮锛堜富瑕佸悙妲?React 锛?https://juejin.cn/post/7158285916266561572#heading-9
  1. Qwik.js妗嗘灦鏄浣曡拷姹傛瀬鑷存€ц兘鐨?!-https://segmentfault.com/a/1190000042250628
  1. 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
  1. How Partytown Eliminates Website Bloat From Third-Party Scripts-https://www.smashingmagazine.com/2022/04/partytown-eliminates-website-bloat-third-party-apps/

鍏充簬鎴戜滑

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

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

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

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

- END -