百度Web前端开发实战案例解析
2024/08/19 21:15:38
浠 Web 璇炵敓鍒板浠婏紝Web 鍓嶇鎶€鏈凡缁忛€愭鎴愰暱涓轰竴涓赴瀵屼笖鏈夋椿鍔涚殑鎶€鏈笘鐣屻€傞殢鐫€浜掕仈缃戣涓氬彂灞曟牸灞€鐨勯绻佹紨杩涗互鍙婁骇鍝佺瓥鐣ョ殑涓嶆柇璋冩暣锛屼笉鍚岄樁娈电殑涓氬姟鍦ㄦ妧鏈€夊瀷銆佸墠绔€ц兘浼樺寲銆佺敤鎴蜂氦浜掍綋楠屼笂涓嶆柇浜х敓鏂扮殑闇€姹傦紝涓嶆柇鍦板 Web 鍓嶇鎶€鏈彁鍑烘柊鐨勮姹傘€
10 鏈 27 鏃ワ紝82 鏈熺櫨搴︽妧鏈矙榫欙紝閭€璇蜂簡鏁颁綅鐧惧害鍓嶇鎶€鏈儴 Web 鍓嶇璧勬繁鐮斿彂宸ョ▼甯堬紝浠 Web 鍓嶇鎶€鏈嚭鍙戯紝閫氳繃浜斾釜涓婚锛岀珛瓒崇幇鍦ㄩ潰鍚戞湭鏉ワ紝鐢卞唴鍒板鍦板垎浜櫨搴﹀湪鎼滅储缁勪欢鍖栫殑鎺㈢储銆佹悳绱綋楠屽寮恒€佸紑鏀 Web 閫熷害浼樺寲鍙婂紑鏀 Web 鏈潵鍙戝睍鍙戦潰鐨勬妧鏈矇娣€鍜岀Н绱€
1 鎼滅储缁勪欢鍖栨帰绱笌瀹炶返
棣栧厛杩涜鍒嗕韩鐨勬槸鐧惧害鍓嶇鎶€鏈儴璧勬繁鐮斿彂宸ョ▼甯堥檲楠佸甫鏉ョ殑銆婃悳绱㈢粍浠跺寲鐨勬帰绱笌瀹炶返銆嬨€
涓轰粈涔堟悳绱㈣鍋氱粍浠跺寲锛
鎹檲楠佷粙缁嶏紝鏈€寮€濮嬬殑鐧惧害鎼滅储绉诲姩绔殑鍓嶇鏋舵瀯鏄粠 PC 鏃朵唬杩佺Щ杩囨潵锛屾湇鍔″櫒绔娇鐢 Smarty 鏉ユ覆鏌撴ā鐗堬紝瀹炵幇鍓嶅悗绔垎绂汇€傚墠绔娇鐢 Zepto 鏉ュ畬鎴愪氦浜掗€昏緫锛屼絾鏄畠鐨勬墿灞曟€ф瘮杈冩湁闄愶紝闅句互瀹炵幇瀵 HTML銆丆SS 浠ｇ爜鐨勭粍浠跺寲绠＄悊锛岄殢鐫€绉诲姩绔殑浜や簰褰㈠紡瓒婃潵瓒婂鏉傦紝鍘熸湰鐨勬柟妗堝嚭鐜颁簡灞€闄愭€с€
浜庢槸锛岀粍浠跺寲搴旇繍鑰岀敓銆傜粍浠跺寲鏄妸涓€浜涘彲澶嶇敤鐨勫崟鍏冩彁鍙栧嚭鏉ワ紝閫氳繃瀵瑰嚑涓粍浠剁殑绠＄悊锛屽疄鐜板鏁翠釜鎼滅储缁撴灉椤垫牱寮忕殑鎺у埗锛屾彁楂樺紑鍙戠殑鏁堢巼鍜屾í鍚戝洟闃熸暣浣撳崌绾х殑鏁堢巼銆
鐩墠鐧惧害宸茬粡鏈変簡闈炲父澶氱殑缁勪欢鍖栬В鍐虫柟妗堬紝鍖呮嫭 Lavas 鍜 Reac t銆傚彲浠ュ叿浣撳埌缁勪欢璇硶銆佸熀纭€妗嗘灦浠ュ強鍚屾瀯鍖哄潡銆
濡備笅鍥炬墍绀猴紝缁勪欢璇硶鍖呮嫭鍥涢儴鍒嗭細
鍓嶄笁閮ㄥ垎鍩烘湰鑳藉瑕嗙洊缁勪欢鐨勫父鐢ㄨ娉曪紝鑰屽悓鏋勫湪鏈嶅姟鍣ㄧ鍜屾祻瑙堝櫒绔兘鑳芥墽琛岋紝涓昏鏈 props銆乨ata銆乧omponents銆乧omputed 绛夈€
閭ｄ箞杩欎釜缁勪欢浠ｇ爜鎬庝箞鍦ㄧ嚎涓婅窇璧锋潵鍛紵
棣栧厛浼氬湪绾夸笅閫氳繃缂栬瘧鍣紝鎶婂畠缂栬瘧鎴 PHP銆丣avaScript 涓や唤鍘熺爜銆侾HP 鐨勭紪璇戜骇鐗╁畬鍏ㄤ娇鐢 PHP 鐨勮娉曪紝鍙互鍦ㄥ悗绔舰鎴愪竴涓 Server Runtime锛屽湪杩欎釜杩囩▼涓紝涔熻兘澶熸妸 PHP 鐨勭紪璇戜骇鐗╂覆鏌撴垚瀛楃涓诧紝閫氳繃缃戠粶浼犺緭鍒版祻瑙堝櫒绔€傝€屽湪娴忚鍣ㄧ杩愯鏃跺彲浠ョ敤缂栫爜浜х墿 Javascript 鐨勭粍浠讹紝娓叉煋鎴愬彲鎿嶄綔鐨 HTML 浠ｇ悊缁撴瀯锛屽寘鎷畠鐨勪簨浠跺拰浜や簰銆
鍏朵腑鐨勯毦鐐瑰湪浜庢€庝箞鎶婁竴涓粍浠朵唬鐮佺紪璇戞垚鍦 PHP銆佸湪 JS 閮借兘璺戠殑缁勪欢浠ｇ爜銆傜櫨搴︿細鍋氬浜庢ā鏉垮拰涓€浜涜〃杈捐璁＄殑澶勭悊銆備緥濡傦紝妯℃澘浠ｇ爜鏈変竴涓枃鏈妭鐐癸紝鏈変竴涓嚜瀹氫箟缁勪欢锛屽湪缂栬瘧鐨勮繃绋嬩腑锛屼細鍒╃敤缂栬瘧鍣ㄦ妸瀹冭浆鍖栨垚鎶借薄璇硶鏍戯紝褰㈡垚鏍戠殑缁撴瀯锛屾瘡涓妭鐐归兘鏈変竴浜涘睘鎬у拰淇℃伅锛屽埄鐢ㄨ娉曟爲鐨勭粨鏋勫拰灞炴€т俊鎭紝灏卞彲浠ラ€氳繃浠ｇ爜鐢熸垚鍣ㄥ垎鍒敓鎴 PHP 鍜 JS 鐨勪唬鐮併€
杩欓噷杩樻湁涓€涓棶棰橈紝涓轰粈涔堥渶瑕佷竴涓悓鏋勫尯鍧楀憿锛熻繖鏄洜涓哄悓鏋勫尯鍧楀彲浠ュ緢濂芥帶鍒舵湇鍔″櫒绔兘鎵ц鐨勪唬鐮侊紝鏂逛究璇硶瑙ｆ瀽銆傚彟澶栵紝鐧惧害瀵瑰悓鏋勪唬鐮佸潡杩涜璇硶闄愬埗锛屼互淇濊瘉鏈嶅姟鍣ㄧ鐨勭ǔ瀹氭€э紝涔熷彲浠ユ洿鍔犳柟渚胯В鏋愭垚鎯宠鐨 PHP 浠ｇ爜銆
閫氳繃鏀归€狅紝缁勪欢鍖栨覆鏌撴鏋朵笉浠呭彲浠ヤ娇寰楁晥鐜囨彁鍗囷紝淇濊瘉浜嗕綋楠屼竴鑷存€э紝鑰屼笖杩涜浜嗘í鍚戝崌绾ч檷浣庢垚鏈€
鎬ц兘浼樺寲
閽堝鏈嶅姟鍣ㄧ鐨勬覆鏌撴€ц兘锛岀櫨搴﹀仛浜嗛潪甯哥粏鑷寸殑浼樺寲锛
閭ｄ箞缁勪欢鏄浣曞湪鏈嶅姟鍣ㄧ娓叉煋鎴愭兂瑕佺殑 HTML 瀛楃涓插憿锛
濡備笅鍥炬墍绀猴紝浼氱粡杩囦互涓嬫楠わ細棣栧厛锛屽姞杞界粍浠剁殑閰嶇疆锛屽垱寤虹粍浠剁殑瀹炰緥銆傚湪瀹炰緥鐨勫垱寤鸿繃绋嬩腑锛屽杩欎釜缁勪欢鎵€鏈夌殑鏁版嵁杩涜鍒濆鍖栵紝鍖呮嫭涓€浜涚壒寰佸拰璁＄畻灞炴€э紝寰楀埌鍒濆鍖栫姸鎬佷互鍚庯紝鍐嶆覆鏌撳嚭铏氭嫙 DOM 鏍戯紝鎶婃暣涓粍浠惰妭鐐规暟娓叉煋鎴愪竴涓疄渚嬬殑褰㈠紡锛岀敤铏氭嫙 DOM 鏍戞覆鏌撴垚 HTML 瀛楃涓层€
涓庢鍚屾椂锛岀櫨搴︽悳绱㈠鏁翠釜娓叉煋鐨勮繃绋嬭繘琛屼簡绠€鍖栥€傚湪妗嗘灦灞傦紝閫氳繃鍒涘缓铏氭嫙 DOM锛屽噺灏戜簡涓€娆￠€掑綊锛屼篃鍑忓皯浜嗗湪绾夸笂杩愯鏃剁殑閫昏緫銆傚湪鍩虹缁勪欢灞傦紝鐧惧害瀵规í鍚戝洟闃熻兘澶熷畬鍏ㄦ帶鍒剁殑涓€浜涚畝鍗曠粍浠惰繘琛屼簡浼樺寲銆傚埄鐢 HTML 缂栬瘧鍣ㄧ紪璇戞垚璇硶鏍戯紝璇硶鏍戝瀹冩瘡涓€涓 AST 鑺傜偣杩涜浼樺寲锛岄€氳繃灏 Tag 鐩存帴瀹氫箟涓烘櫘閫氱殑 DOM 鑺傜偣鐨勬柟娉曪紝鐢熸垚鏈€鍚庢兂瑕佺殑鍑芥暟浠ｇ爜銆
妗嗘灦灞傦細娓叉煋娴佺▼绠€鍖
绠€鍗曠粍浠剁紪璇戜紭鍖
鐩墠杩涘睍
鐩墠锛岀櫨搴︽彁渚涙悳绱㈢粍浠跺寲鐨勫伐鍏枫€傛瘮濡傛悳绱 Web 鏃犻殰纰嶈鍒掋€佹悳绱㈡€ц兘鍑嗗叆瑙勮寖銆佹悳绱㈣璁¤鑼冿紱鏈嶅姟鏂归潰鍖呮嫭鎬ц兘鐩戞帶銆佸墠鍚庣寮傚父鐩戞帶绛夛紱杩愯鏂归潰鎻愪緵 VSL 璇煶浜や簰妗嗘灦甯姪寮€鍙戣€呭紑鍙戜竴浜涜闊充氦浜掗€昏緫锛涘伐绋嬫柟闈㈡彁渚涙悳绱㈡晱鎹峰钩鍙帮紝甯姪寮€鍙戣€呯洿鎺ュ畬鎴愯仈璋冦€佹彁娴嬨€佷笂绾匡紱鍦ㄥ簲鐢ㄦ柟闈紝鏈夊崱鐗囥€佸浘鐗囨悳绱€佸挩璇㈡悳绱€佺Щ鍔ㄧ鐨勯椤碉紝杩樻湁涓€浜涚嫭绔嬬殑绔欙紝鍖呮嫭鐧惧害浣撹偛鍜岀櫨搴︽嫑鑱樸€
鎼滅储缁勪欢鍖栨妧鏈叏鏅浘
2 绉诲姩浣撻獙鏍囧噯鍖栧缓璁
绗簩涓 Session 鏄敱鐧惧害鍓嶇鎶€鏈儴璧勬繁鍓嶇宸ョ▼甯堝垬娴畤甯︽潵鐨勩€婄Щ鍔ㄤ綋楠屾爣鍑嗗寲寤鸿銆嬨€
鏋佽嚧鐨勭敤鎴蜂綋楠屾槸 Web 浜у搧鎵€杩芥眰鐨勶紝閭ｄ箞浠€涔堟槸濂界殑鐢ㄦ埛浣撻獙锛屽浣曞幓閲忓寲鐢ㄦ埛浣撻獙鍋氬埌濂界殑浣撻獙鍛紵棣栧厛闇€瑕佹湁涓€濂楁竻鏅扮殑浣撻獙鎸囧鏍囧噯锛岀劧鍚庡啀鍘昏惤鍦般€
绉诲姩浣撻獙鎸囧崡
绉诲姩浣撻獙鎸囧崡鏄熀浜庣Щ鍔 Web 鐢熸€佹彁鍑轰竴濂楅€氱敤鐨勪綋楠屾寚瀵艰鑼冿紝鐩殑鏄洿濂藉湴鏈嶅姟浜庣敤鎴峰強浜у搧鐨勭郴缁燂紝涓哄箍澶х敤鎴锋彁渚涗紭璐ㄧ殑浣撻獙銆備粠鐢ㄦ埛鐨勪綋楠屽眰娆°€佷氦浜掑拰绉诲姩 Web 鐜扮姸锛岀櫨搴﹀綊绾冲嚭鍏釜绾害锛
绗竴锛屽揩閫熺殑淇℃伅鍛堢幇銆傞€熷害蹇參鐩存帴褰卞搷鐢ㄦ埛瀵圭珯鐐圭殑浣撻獙璇勭骇锛屾墍浠ヨ涓讳綋鍐呭蹇€熷憟鐜扮粰鐢ㄦ埛鎵嶆槸浼樿川鐨勪綋楠屽繀闇€鐨勩€
绗簩锛岃璁′氦浜掑眰闈㈠己璋冧竴鑷存€с€備竴鑷寸殑璁捐浜や簰鍙互鍒╃敤鐢ㄦ埛鐨勫涔犵粡楠岋紝闄嶄綆瀛︿範鍜屼娇鐢ㄧ殑鎴愭湰銆
绗笁锛屽ソ浜у搧闇€瑕佸仛鍒拌鐢ㄦ埛浣庢垚鏈€侀珮鏁堝湴瀹屾垚鎵€鏈変氦浜掓搷浣滐紝鏁翠綋鎿嶄綔瑕佹竻鏅版棤闃伙紝甯︾粰鐢ㄦ埛鏈€娴佺晠鐨勪綋楠屻€
绗洓锛屽唴瀹瑰己璋冧紭璐ㄩ槄璇昏鎰熴€傜珯鐐圭殑鍐呭鍙鎬с€佸唴瀹规湰韬川閲忔槸鍚﹁兘澶熻揪鍒帮紝閮芥槸浼樿川鐨勪綋楠屾墍蹇呴渶鐨勩€
绗簲锛屾儏鎰熷眰闈㈡湁涓ょ偣锛岄鍏堟槸鎰夋偊鐨勬儏鎰熻鐭ワ紝鍏舵鏄鐢ㄦ埛瀵圭珯鐐逛俊浠伙紝椤甸潰鏄惁瀹夊叏銆佹槸鍚﹀強鏃跺憡鐭ユ祦閲忎俊鎭瓑绛夈€
绗叚锛屽叧浜庡己鍋ョ殑鍦烘櫙閫傞厤锛屼紭绉€鐨勭珯鐐瑰簲褰撻€傚悎浜庝笉鍚岀殑浜虹兢鍜屽涓荤幆澧冦€
绉诲姩浣撻獙妫€娴嬪钩鍙
鏈変簡浣撻獙鎸囧崡锛屽浣曞揩閫熺煡閬撶珯鐐瑰瓨鍦ㄥ摢浜涢棶棰橈紵杩欏氨闇€瑕佷綋楠屾娴嬪钩鍙 Radar銆
Radar 鐨勬渶搴曞眰鏄 Headless Chrome锛岀櫨搴﹂€氳繃鍗忚鎺ュ彛鍙互闈炲父蹇嵎鍦版搷浣滆繖涓祻瑙堝櫒銆備腑闂寸殑杩愯鏄熀浜庤胺姝屽紑婧愮殑涓€涓綉椤靛伐鍏 Lighthouse 銆傚畠涓昏鏈変袱涓唴瀹癸紝绗竴鏄綉椤垫暟鎹敹闆嗭紝閫氳繃鏁版嵁鍒嗘瀽鑾峰緱鏁版嵁锛屾寜鐓ц鍒欑殑闇€瑕侊紝瀵逛簬杩欎簺鏁版嵁杩涜鍒嗘瀽鍚庤緭鍑烘兂瑕佺殑缁撴灉銆傜浜岋紝Radar 鐨勬牳蹇冩槸闈炲父澶氱殑瑙勫垯锛屼富瑕佸垎涓ょ被锛屼竴绫绘槸鏅€氱殑锛屼竴绫绘槸浜や簰鐨勩€
鍒樻氮瀹囦互浜や簰鐨勮鍒欎负渚嬶紝璇︾粏闃愯堪浜嗕竴涓鍒欐槸濡備綍瀹炵幇鐨勩€傚涓嬪浘锛屼氦浜掔殑瑙勫垯涓昏鍒嗕负涓ら儴鍒嗭紝绗竴鏄満鏅瘑鍒紝绗簩鏄氦浜掑垎鏋愩€備妇涓€涓瘮杈冪畝鍗曠殑渚嬪瓙锛屽綋鐢ㄦ埛鍦ㄩ〉闈㈢湅鍒颁竴涓緭鍏ユ鏃讹紝瑙夊緱鐐瑰嚮鍙互鐩存帴杈撳叆鏄竴涓壇濂界殑浣撻獙銆傞偅涔堝浣曢噺鍖栬繖涓鍒欏憿锛熼鍏堟槸鍦烘櫙璇嗗埆锛屾壘鍒板湪杩欎釜椤甸潰涓湅璧锋潵鍍忚瘎璁鸿緭鍏ユ鐨勫厓绱犮€傜劧鍚庢壘涓€浜涚壒寰侊紝浠庢捣閲忔暟鎹噷闈㈡爣娉ㄣ€佹彁鍙栦竴浜涢€氱敤鐗瑰緛涔嬪悗涓鸿繖涓満鏅缓绔嬬壒寰佸簱銆備箣鍚庡啀鍩轰簬鍦烘櫙鎵€闇€瑕佺殑鐗瑰緛锛岃繘琛岀綉椤电粨鏋勫寲鏁版嵁鎻愬彇銆
Radar 瑙勫垯鏋舵瀯锛堜氦浜掔被瑙勫垯涓轰緥锛
鎺ヤ笅鏉ヨ繖浜涘満鏅厓绱犲氨瑕佽繘琛屼氦浜掑垎鏋愶紝棣栧厛杩涜娣卞害绛涢€夌劧鍚庤繘琛屼氦浜掓搷浣溿€備互妯℃嫙灞忓箷鐨勭偣鍑讳妇渚嬶紝鐐瑰嚮涔嬪墠鐢ㄦ埛浼氱湅椤甸潰鐨勫彉鍔紝姣斿璇 DOM 鐨勫彉鍔ㄣ€佽烦杞殑鍙樺姩锛岀劧鍚庡鍙樺姩杩涜鍒嗘瀽锛岀湅鏄惁绗﹀悎棰勬湡銆
3 鍩轰簬 Custom Elements 鏍囧噯缁勪欢鍖栨瀯寤 Web 搴旂敤
绗笁涓富璁蹭汉鏄櫨搴﹀墠绔妧鏈儴璧勬繁鍓嶇宸ョ▼甯堥偣娣兼睙锛屼粬鐜板満鍒嗕韩浜嗗浣曢珮鏁堝揩閫熺殑鏋勫缓涓€涓綋楠岃壇濂界殑 Web 搴旂敤銆佸熀浜 Custom Elements 鏍囧噯鐨勭粍浠跺寲璁捐銆佸浣曟彁鍗囩敤鎴风浣撻獙鍜屽紑鍙戞晥鐜囥€
棣栧厛鐪嬭嚜瀹氫箟鏍囩锛岃嚜瀹氫箟鏍囩鍦ㄥ姛鑳戒笂閫昏緫涓婁笌 JavaBean 绫讳技锛岄兘灏佽 Java 浠ｇ爜锛屾槸鍙噸鐢ㄧ殑缁勪欢浠ｇ爜锛屽苟涓斿厑璁稿紑鍙戜汉鍛樹负澶嶆潅鐨勬搷浣滄彁渚涢€昏緫鍚嶇О銆傚彟澶栵紝鑷畾涔夋爣绛惧叿鏈夆絸鎸佲絾闅滅銆佹彁楂樺紑鍙戞晥鐜囥€佽瘎浼版€ц兘銆佸 SEO 鑹ソ鐨勭壒鐐广€
鍏朵腑锛屽浣曚娇鐢ㄨ嚜瀹氫箟鏍囩杩涜鎬ц兘璇勪及鍛紵鐧惧害鎻愪緵浜嗕竴濂楁悳绱㈠紩鎿庣殑楠岃瘉宸ュ叿銆傛瘮濡傦紝绗﹀悎鏌愪竴绉嶈鍒欑殑 Custom Elements锛岀粰瀹冩爣楂樺垎锛屼负绗﹀悎楂樻€ц兘鏍囩銆備絾濡傛灉浣跨敤 DIV 鐨勬柟寮忥紝鎼滅储寮曟搸娌″姙娉曠煡閬撳竷灞€鏄笉鏄珮鎬ц兘锛屼篃娌″姙娉曠煡閬撴墍瀵瑰簲鐨 JS 濡備綍瀹炵幇锛屽鏋滄湁浜 Custom Elements 鐨勬爣鍑嗭紝灏辫兘娓呮櫚鍦扮煡閬撹繖涓〉闈㈡兂骞蹭粈涔堛€
鍩轰簬姝わ紝鎴戜滑鍙互璁炬兂锛氬鏋滃畬鍏ㄤ娇鐢ㄨ繖浜 Custom Elements 璇箟鍖栨爣绛炬瀯寤 Web 绔欑偣鍙鍚楋紵
杩欏氨闇€瑕佸紩鍏ョ粍浠跺寲璁捐銆傚叾瀹炵洰鍓嶅瓨鍦ㄧ殑缁勪欢鍖栬璁￠兘鍗冪瘒涓€寰嬶紝鎶婁竴涓〉闈㈢殑鍔熻兘妯″潡浠ョ粍浠舵爲鐘剁殑褰㈠紡鑷敱缁勫悎锛屽爢绉垚涓€涓姛鑳界殑椤甸潰鎴栬€呮槸妯″潡锛岃繖灏辨槸缁勪欢鐨勭粨鏋勩€傚叿浣撹姹傦細
Web Components 鏄寚閫氳繃涓€绉嶆爣鍑嗗寲鐨勯潪渚靛叆鐨勬柟寮忓皝瑁呯殑涓€涓粍浠躲€備富瑕佹爣鍑嗗寘鎷 Custom Elements锛孲hadow DOM锛孒TML Templates锛孒TML Imports 绛夊涓淮搴︾殑瑙勮寖涓庡疄鐜般€
Web Components 鍏煎鎬
4 鎼滅储钀藉湴椤典綋楠屾妧鏈強搴旂敤
绗洓涓富棰樼敱鐧惧害鍓嶇鎶€鏈儴鍓嶇宸ョ▼甯堟潕鍏嗘槑璁茶堪銆傚浣曟洿蹇€佹洿濂界殑灏嗗悇绫绘悳绱㈢粨鏋滈〉闈紶閫掑埌鐢ㄦ埛绔竴鐩翠互鏉ユ槸鐧惧害鎼滅储鍓嶇鐨勬牳蹇冨叧娉ㄧ偣銆傚熀浜庢锛屾潕鍏嗘槑鍒嗗埆浠庡浣曡钀藉湴椤靛姞杞芥洿蹇紝濡備綍璁╂悳绱㈢粨鏋滈〉鍜岃惤鍦伴〉涔嬮棿鍒囨崲鏇村姞椤烘粦浠ュ強鏈潵鐨勬柊鏍囧噯锛屼粙缁嶇櫨搴︽悳绱㈣惤鍦伴〉浣撻獙鎶€鏈殑鎺㈢储銆
濡備綍璁╄惤鍦伴〉鍔犺浇鏇村揩
鎬濊矾涓€锛氭彁鍓嶅姞杞姐€傞€氳繃 Resource Hint 鎻愮ず娴忚鍣ㄩ瑙ｆ瀽鍩熷悕銆佸缓绔嬮杩炴帴锛岀敋鑷宠繘琛岄娓叉煋銆傝嫢鏄笉鏀寔鐨勬祻瑙堝櫒锛屽垯鍙互閫氳繃 JavaScript 妯℃嫙涓€閮ㄥ垎銆
鎬濊矾浜岋細鎶撳彇鏁版嵁銆傞€氳繃寮€鏀惧钩鍙版彁浜ゆ暟鎹紝鐢辩櫨搴︽潵娓叉煋銆
鎬濊矾涓夛細MIP / AMP銆侻IP 鎻愪緵澶氶噸鎺柦锛岃浣跨敤 MIP 鎶€鏈殑椤甸潰鍔犺浇閫熷害鏇翠笂涓€灞傛ゼ銆備緥濡傦紝CDN 鍔犻€熸湇鍔★紱浣跨敤 MIP 璁捐鐨勭綉绔欐病鏈変换浣曞彲浠ラ樆濉炴覆鏌撶殑鑴氭湰锛屾墍鏈夎剼鏈兘鍦ㄩ〉闈富浣撳姞杞藉畬鎴愬悗鎵嶆墽琛屻€傛澶栵紝MIP 瑕佹眰鎵€鏈夐〉闈㈤兘鏄潤鎬佺殑锛屽鏋滄湁闇€瑕佸疄鏃舵洿鏂扮殑鏁版嵁闇€瑕佸紓姝ヨ幏鍙栵紝杩欐牱璁捐鑺傜渷浜嗗悗绔殑娓叉煋鏃堕棿銆
濡備綍鎶婁袱涓〉闈㈣瀺鍚堝湪涓€璧凤紵
鍏跺疄锛屾棤璁烘湁澶氬皯浼樺寲鍔犺浇閫熷害鐨勬墜娈碉紝褰掓牴缁撳簳绂讳笉寮€椤甸潰璺宠浆銆備絾鏄紝娴忚鍣ㄨ烦杞浉瀵规潵璇翠笉澶熷钩婊戯紝鐢ㄦ埛浣撻獙涓嶅濂斤紝鑳戒笉鑳芥妸鍓嶅悗涓や釜椤甸潰铻嶅悎鍒颁竴璧峰憿锛
绛旀褰撶劧鏄偗瀹氱殑銆傛潕鍏嗘槑鍦ㄤ繚璇佷綋楠屻€佷繚闅滃畨鍏ㄥ強淇濇寔寮€鏀剧殑鍩虹涓婏紝璁茶В浜嗙櫨搴﹀墠绔悳绱㈢殑瑙ｅ喅鏂规锛
鍦ㄦ湭鏉ワ紝鐧惧害鎼滅礌灏嗗熀浜庡煙鍚嶃€両frame 娓叉煋闂锛屼负寮€鍙戣€呭甫鏉 Navigation Transition銆丳romotable Iframe銆丳ortals 鍙 Web Packaging 鏂版爣鍑嗭紝甯︽潵鏈€娴佺晠鐨勪綋楠屻€
Navigation Transition锛氶〉闈㈠垏鎹㈢殑浜や簰鏂瑰紡銆傝В鍐充簡璺ㄥ煙闂锛屾病鏈 Iframe 娓叉煋鐨勫巻鍙插寘琚便€備笉杩囧墠涓€涓〉闈緷鐒朵笉鑳芥帶鍒跺悗涓€涓〉闈㈢殑鍔犺浇銆佹覆鏌撱€俰frame 鍙互鎻愬墠鍔犺浇锛屼絾鏄 Navigation Transitions 涓€瀹氳鍦ㄧ敤鎴峰垏鎹㈢殑鏃跺€欏姞杞姐€
Promotable Iframe锛氫笌 Iframe 鐩稿叧锛屾牳蹇冧唬鐮佹槸 Promotable 鐨 API锛屽彧瑕佽皟鐢 Promotable锛屽氨浼氳皟鍔ㄩ〉闈㈢殑涓€灏忓潡锛岃€屽悗璋冨姩鏁翠釜椤甸潰鍙婂唴瀹广€備絾鏄繖绉嶆柟娉曟秹鍙婁竴浜涚敓鍛藉懆鏈熺殑绠＄悊鍜 JS 鐨勫洖鏀堕棶棰橈紝鏄笉澶熷畨鍏ㄧ殑瀹炵幇锛岃€屼笖杩欐牱娌℃湁瑙ｅ喅 CDN 鐨勯棶棰橈紝渚濈劧闇€瑕佹敼鍩熷悕銆
Portals锛氫紶閫侀棬锛屽皢涓€涓〉闈紶閫佸彟涓€涓〉闈€傝繖涓爣鍑嗘槸 Promotable Iframe 鐨勫寮猴紝寮曞叆浜嗕竴涓柊鐨 HTML 鏍囩 portal锛岃繖涓爣绛剧敤鏉ユ浛浠 Iframe 鏄剧ず涓€鍧楃綉椤碉紝鍐欐硶鍜 Iframe 绫讳技銆備絾鏄畠姣 Iframe 澶氫竴涓姛鑳斤紝灏辨槸鍙互閫氳繃 鈥渁ctive鈥 鏂规硶婵€娲诲畠銆備笌姝ゅ悓鏃讹紝 portal 鐨勫瓙鏂囨。浼氭敹鍒颁竴涓 portal zactive 浜嬩欢锛屼簨浠朵腑鍙互鎷垮埌瀹冪殑涓婄骇鍏冪礌锛岃繖鏍峰張鍙互鎶婁笂绾у厓绱犲綋鎴愪竴涓 portal 鎻掑叆鍥炶嚜宸辩殑鏂囨。娴侊紝浣垮緱椤甸潰鍒囨崲鍥炲幓鎴愪负鍙兘銆
Web Packaging锛氳В鍐充簡 CDN 璺ㄨ秺闂銆傝繖涓爣鍑嗗寘鎷笁鏂归潰锛氱鍚嶃€佹墦鍖呫€佸姞杞姐€傚涓嬪浘锛屽乏杈瑰唴瀹规彁渚涜€呮槸绔欓暱锛岀紦瀛樼殑 CDN 绫绘瘮 MIP 鐨 CDN 锛屽彸杈规槸璁块棶鐢ㄦ埛锛岀敤鎴锋祻瑙堟垜浠櫨搴︽悳绱㈢粨鏋滈〉鐨勬椂鍊欙紝閫氳繃 MIP 鐨 Cache CDN 鎻愬墠鎶婃暟鎹彇杩囨潵锛岀敤鎴风湡姝ｇ偣鍑荤殑鏃跺€欙紝鐩存帴浠庡垰鎵嶅彇鍥炴潵鐨勯〉闈㈠幓鍔犺浇瀹冦€傜敱浜庡唴瀹规湰韬槸鍐呭鎻愪緵鑰呮彁渚涚殑锛屾墍浠ヤ粬鍙互瀵逛簬鑷繁 URL 杩涜绛惧悕銆傛湁浜嗚繖涓鍚嶄笖绛惧悕鏈夋晥鐨勬椂鍊欙紝娴忚鍣ㄥ彲浠ヨ嚜宸辨樉绀哄師濮嬬殑缃戝潃锛屽悓鏃跺師濮嬬殑缃戝潃鍙互鍜屽師鏉ョ殑鏈嶅姟鍣ㄨ繘琛屼氦浜掞紝鍍忛€氳繃鍘熺綉鍧€鎵撳紑鐨勪竴鏍凤紝瑙ｅ喅浜 CDN 璺ㄥ煙闂銆
5 濡備綍閫氳繃 Lavas 蹇€熸瀯寤 PWA 绔欑偣
鏈€鍚庝竴涓富棰樼殑璁插笀鏄櫨搴﹀墠绔妧鏈儴璧勬繁鐮斿彂宸ョ▼甯堢帇杞剁洓涓哄ぇ瀹朵粙缁嶅浣曢€氳繃 Lavas 蹇€熸瀯寤 PWA 绔欑偣銆
PWA
PWA锛圥rogress Web App锛夋槸 WEB 鏈潵鐨勫彂灞曟柟鍚戙€備粠浣撻獙涓婃潵璇达紝PWA 鎺ヨ繎鍘熺敓 APP锛岄€氳繃 Manifest 鎶€鏈厑璁哥敤鎴峰揩閫熸墦寮€绔欑偣骞惰幏寰楁矇娴稿紡鐨勪綋楠岋紝閫氳繃 Service Worker 鑳藉鍋氬埌璧勬簮棰勫姞杞藉拰绂荤嚎鍙敤绛変粠鑰屾彁鍗囨€ц兘鍜屽彲鐢ㄦ€э紱鍚屾椂 PWA 鍙堟嫢鏈 Web 绔欑偣鐨勫叡鍚屼紭鍔匡細鍏嶅畨瑁呭拰鑷姩鏇存柊銆
浣嗕笌 Web 绔欑偣涓嶅悓鐨勬槸锛孭WA 鍙堝叿鏈夊彲闈犮€佸揩閫熴€侀粡鎬х瓑鐗圭偣锛
绗竴鏄彲闈犮€傚湪鏂綉鐨勬儏鍐典笅锛孭WA 鍙仛鍒版瘮杈冨弸濂界殑绂荤嚎鎻愮ず锛岃繖涓槸 PWA 鏂綉鐨勬渶楂樼骇锛屽彨鏂綉鍙敤銆
绗簩鏄揩閫熴€53% 鐨勭敤鎴蜂細鏀惧純鍔犺浇鏃堕棿瓒呰繃 3 绉掔殑缃戠珯锛岃秺蹇殑鍔犺浇閫熷害灏辨湁瓒婂皯鐨勭敤鎴锋祦澶便€侾WA 鎻愪緵 Service Worker锛岀‘瀹氬摢浜涜闂紦瀛樸€佸摢浜涜闂綉椤碉紝缂╃煭鍔犺浇鏃堕棿銆
绗笁鏄粡鎬с€傞粡鎬ф槸鎸囩敤鎴疯闂繃涓€娆★紝涓嬩竴娆¤闂槸鍚﹂夯鐑︺€侾WA 浼氱敤涓€涓崐绉掔殑鍚姩鍔ㄧ敾鏉ヤ繚璇佹祻瑙堝櫒棣栭〉鍚姩鐨勯『婊戙€傚彟澶栵紝鍚姩涔嬪悗娌℃湁鐨勫湴鍧€鏍忋€佽彍鍗曟爮锛屼繚璇佺敤鎴风殑娌夋蹈寮忎綋楠屻€
浠庢妧鏈眰闈㈣锛孭WA 鏈夊垎涓哄洓閮ㄥ垎锛
绗竴鏄 Service Worker 銆傚畾涔夐缂撳瓨銆佺綉缁滄嫤鎴拰缂撳瓨绛栫暐銆傚畠鏈韩鏄竴涓 Worker锛屾湁涓撻棬鐨勮娉曪紝闇€瑕 CACHES API锛岄渶瑕佹敞鍐屽強鏇存柊銆
绗簩鏄 Manifest 銆傝繖鏄竴涓 Json 鏂囦欢锛屽畾涔夊揩閫熷叆鍙ｏ紝鍚姩鍔ㄧ敾銆
绗笁鏄 Web Push and Notification 銆傛槸鏈嶅姟鍣ㄦ帹閫佺粰瀹㈡埛绔殑涓诲姩閫氱煡銆
绗洓鏄 APP Shell 銆傝繖骞朵笉鏄柊鎶€鏈紝浣嗗畠鏄父鐢ㄧ殑 PWA 鏋舵瀯銆傜畝鍗曟潵璇达紝灏辨槸鎶婁竴涓 APP 鍒嗘垚浜嗗澹冲拰鍐呭锛岀敤 Service Worker 鎶婂澹崇紦瀛樿捣鏉ワ紝灏嗛噷闈㈢殑椤甸潰杩涜璺宠浆銆
閫氳繃 Lavas 鎼缓 PWA 绔欑偣
Lavas 鍖呮嫭宸ュ叿銆佹枃妗ｄ互鍙婂搴旂殑瑙ｅ喅鏂规鍜屽缓绔欐ā鏉匡紝鏄竴涓紑婧愮殑瑙ｅ喅鏂规銆侺avas 鏈韩鏈変袱閮ㄥ垎锛孡avas cli 鍜 Lavas core锛屽唴閮ㄧ敤 Vue + Vue Router + Vuex 鎼缓绔欑偣锛屽唴缃袱濂楁ā鏉 (basic & app-shell)锛屾敮鎸佷紶缁熸ā寮 SPA 鍜 SSR 蹇€熸覆鏌擄紝鍙互蹇€熸嫢鏈 PWA 鐗规€э紝鐏垫椿鎬у己锛岄厤缃畝鍗曪紝鑰屼笖鏂囨。鍙婃椂鏇存柊锛屽唴瀹瑰畬鏁淬€傞€氳繃 Lavas 鎼缓 PWA 绔欑偣涓昏鏈夊叓涓楠わ細
Lavas 鐨勬妧鏈師鐞嗕富瑕佹湁鑷姩鐢熸垚璺敱瑙勫垯銆丼keleton銆丄pp Shell銆
Vue Router 闇€瑕佸洓涓楠ゅ仛鏁翠欢浜嬫儏锛氱涓€姝ュ畾涔夊拰寮曠敤缁勪欢锛岀浜屾鎶婄粍浠跺拰璺敱鑱旂郴璧锋潵锛岀涓夋鏄妸鍒氬垰鑱旂郴璧锋潵鐨勬暟鎹斁鍒 Router 鍑芥暟鍒涘缓瀹炰緥锛岀鍥涙槸鎶 Router 鏀惧埌 VUE 鍒涘缓瀹炰緥锛岀粨鏉 Vue 瀹炰緥鎸傝浇灏便€
缁忚繃鏀硅繘锛 Router 涓嶇敤鑷繁瀹氫箟椤甸潰绾х粍浠讹紝鍙互璁ゅ畾鍙鍦 Pages 鐩綍涓紝閭ｇ粍浠堕兘鏄〉闈㈢骇鐨勶紝浠庤€屽彲浠ュ疄鐜拌嚜鍔ㄥ寲 Import锛屼笉闇€瑕佹瘡娆″啓涓€澶у爢鐨勪唬鐮併€傚彟澶栵紝缁濆ぇ澶氭暟鎯呭喌璺敱瑙勫垯鍜岀粍浠跺悕绉版槸鏈夊搴斿叧绯荤殑銆傝嚜鍔ㄧ敓鎴愯矾鐢辫鍒欐槧灏勶紝鐪佸幓浜嗗垪鍑烘槧灏勫叧绯荤殑楹荤儲锛屼篃閬垮厤鍚庢湡缁勪欢鏀瑰悕甯︽潵鐨勭淮鎶ゆ垚鏈€
Skeleton 鍙鏋跺睆锛屽氨鏄疄闄呭唴瀹瑰睍鐜颁箣鍓嶏紝鏈変釜澶ф鍐呭缁欑敤鎴风湅锛岃繖鏍风敤鎴锋彁鍓嶇湅鍒颁竴浜涗笢瑗裤€傝繖鏄 Loading 鍗囩骇鐗堬紝鍥犱负姣忎釜缁勪欢鍙互鑷畾涔夋牱寮忋€佸垏鎹㈡椂鏈恒€佸垪琛ㄧ瓑銆
Lavas 鐨 Skeleton 閮藉彲浠ョ敤锛屽疄鐜版€濊矾鏄 Vue 鐨勬寕杞界偣涓€鑸槸涓┖鐨 DIV锛屽湪鏋勫缓鏃跺皢 Skeleton 鐨勫唴瀹规坊鍔犲埌鎸傝浇鐐逛腑锛孷ue 鎸傝浇鍓嶆竻绌 DIV 鍐呯殑鍗犱綅鍐呭锛屾寕杞藉悗娓叉煋涓哄疄闄呭唴瀹癸紝浣跨敤 SW 棰勭紦瀛 HTML锛岃闂椂鐩存帴浠庣紦瀛樹腑鑾峰彇 HTML锛岃繖鏍峰彲浠ヨ鐢ㄦ埛鐪嬪埌鍗犱綅鐨勪笢瑗裤€
App Shell锛屽氨鏄妸涓€涓 APP 鍒嗕袱閮ㄥ垎锛屾湁澶栧３鍜屽唴瀹癸紝鎶婂澹崇紦瀛樿捣鏉ワ紝姣忔墦寮€椤甸潰鍏堟妸澶栧３鎷垮嚭鏉ワ紝鐒跺悗鍐嶆槸鍐呭娓叉煋銆侫pp Shell 瀹炵幇鏈変袱涓楠わ紝绗竴鏄垝鍒嗭紝鍛婅瘔绋嬪簭鍝儴鍒嗘槸澶栧３銆佸摢閮ㄥ垎鏄唴瀹癸紱绗簩鏄▼搴忔妸澶栧３缂撳瓨璧锋潵銆傝繖闇€瑕佸疄鐜颁袱鏂归潰锛岀涓€鏄 SPA锛岄娆¤姹傛湇鍔″櫒杩斿洖 Index.HTML锛屾墍鏈夐〉闈㈢殑娓叉煋鍧囩敱 JS 瀹屾垚锛屽彧鍦ㄦ寕杞界偣鍐呴噸鏂版覆鏌擄紝鍗曢〉 Index.html 灏辨槸 Shell锛屼娇鐢 SW 棰勭紦瀛 Index.html 鍗冲彲銆傜浜屾槸 SSR锛岄娆¤姹傛湇鍔″櫒杩斿洖缁欏叏閮ㄥ唴瀹癸紝鍚庣画椤甸潰鐨勬覆鏌撶敱 JS 瀹屾垚銆
Web 鐢熸€佺殑鍙戝睍灏辨槸浜掕仈缃戠殑鍙戝睍锛屾柊鎶€鏈殑涓嶆柇娑岀幇鍜屾柊鍦烘櫙鐨勪笉鏂疄鐜颁篃璁╄繖涓紑鏀剧殑鐢熸€佸緱浠ユ寔缁箒鑽ｃ€傜帇杞剁洓琛ㄧず锛岀櫨搴﹀笇鏈涘浗鍐呯殑寮€鍙戣€呬笌绔欓暱鑳藉澶氬鍙備笌鍒 PWA 椤圭洰涓紝鍏卞悓寤鸿鍜屾敼鍠勫浗鍐呯殑 Web App 鐢熸€併€
10 鏈 27 鏃ワ紝82 鏈熺櫨搴︽妧鏈矙榫欙紝閭€璇蜂簡鏁颁綅鐧惧害鍓嶇鎶€鏈儴 Web 鍓嶇璧勬繁鐮斿彂宸ョ▼甯堬紝浠 Web 鍓嶇鎶€鏈嚭鍙戯紝閫氳繃浜斾釜涓婚锛岀珛瓒崇幇鍦ㄩ潰鍚戞湭鏉ワ紝鐢卞唴鍒板鍦板垎浜櫨搴﹀湪鎼滅储缁勪欢鍖栫殑鎺㈢储銆佹悳绱綋楠屽寮恒€佸紑鏀 Web 閫熷害浼樺寲鍙婂紑鏀 Web 鏈潵鍙戝睍鍙戦潰鐨勬妧鏈矇娣€鍜岀Н绱€
1 鎼滅储缁勪欢鍖栨帰绱笌瀹炶返
棣栧厛杩涜鍒嗕韩鐨勬槸鐧惧害鍓嶇鎶€鏈儴璧勬繁鐮斿彂宸ョ▼甯堥檲楠佸甫鏉ョ殑銆婃悳绱㈢粍浠跺寲鐨勬帰绱笌瀹炶返銆嬨€
涓轰粈涔堟悳绱㈣鍋氱粍浠跺寲锛
鎹檲楠佷粙缁嶏紝鏈€寮€濮嬬殑鐧惧害鎼滅储绉诲姩绔殑鍓嶇鏋舵瀯鏄粠 PC 鏃朵唬杩佺Щ杩囨潵锛屾湇鍔″櫒绔娇鐢 Smarty 鏉ユ覆鏌撴ā鐗堬紝瀹炵幇鍓嶅悗绔垎绂汇€傚墠绔娇鐢 Zepto 鏉ュ畬鎴愪氦浜掗€昏緫锛屼絾鏄畠鐨勬墿灞曟€ф瘮杈冩湁闄愶紝闅句互瀹炵幇瀵 HTML銆丆SS 浠ｇ爜鐨勭粍浠跺寲绠＄悊锛岄殢鐫€绉诲姩绔殑浜や簰褰㈠紡瓒婃潵瓒婂鏉傦紝鍘熸湰鐨勬柟妗堝嚭鐜颁簡灞€闄愭€с€
浜庢槸锛岀粍浠跺寲搴旇繍鑰岀敓銆傜粍浠跺寲鏄妸涓€浜涘彲澶嶇敤鐨勫崟鍏冩彁鍙栧嚭鏉ワ紝閫氳繃瀵瑰嚑涓粍浠剁殑绠＄悊锛屽疄鐜板鏁翠釜鎼滅储缁撴灉椤垫牱寮忕殑鎺у埗锛屾彁楂樺紑鍙戠殑鏁堢巼鍜屾í鍚戝洟闃熸暣浣撳崌绾х殑鏁堢巼銆
鐩墠鐧惧害宸茬粡鏈変簡闈炲父澶氱殑缁勪欢鍖栬В鍐虫柟妗堬紝鍖呮嫭 Lavas 鍜 Reac t銆傚彲浠ュ叿浣撳埌缁勪欢璇硶銆佸熀纭€妗嗘灦浠ュ強鍚屾瀯鍖哄潡銆
濡備笅鍥炬墍绀猴紝缁勪欢璇硶鍖呮嫭鍥涢儴鍒嗭細
Template锛氱粍浠朵唬鐞嗙粨鏋
娴忚鍣ㄧ锛氱粍浠跺墠绔€昏緫
Style锛氬墠绔牱寮
Config锛氬悓鏋勯€昏緫
鍓嶄笁閮ㄥ垎鍩烘湰鑳藉瑕嗙洊缁勪欢鐨勫父鐢ㄨ娉曪紝鑰屽悓鏋勫湪鏈嶅姟鍣ㄧ鍜屾祻瑙堝櫒绔兘鑳芥墽琛岋紝涓昏鏈 props銆乨ata銆乧omponents銆乧omputed 绛夈€
閭ｄ箞杩欎釜缁勪欢浠ｇ爜鎬庝箞鍦ㄧ嚎涓婅窇璧锋潵鍛紵
棣栧厛浼氬湪绾夸笅閫氳繃缂栬瘧鍣紝鎶婂畠缂栬瘧鎴 PHP銆丣avaScript 涓や唤鍘熺爜銆侾HP 鐨勭紪璇戜骇鐗╁畬鍏ㄤ娇鐢 PHP 鐨勮娉曪紝鍙互鍦ㄥ悗绔舰鎴愪竴涓 Server Runtime锛屽湪杩欎釜杩囩▼涓紝涔熻兘澶熸妸 PHP 鐨勭紪璇戜骇鐗╂覆鏌撴垚瀛楃涓诧紝閫氳繃缃戠粶浼犺緭鍒版祻瑙堝櫒绔€傝€屽湪娴忚鍣ㄧ杩愯鏃跺彲浠ョ敤缂栫爜浜х墿 Javascript 鐨勭粍浠讹紝娓叉煋鎴愬彲鎿嶄綔鐨 HTML 浠ｇ悊缁撴瀯锛屽寘鎷畠鐨勪簨浠跺拰浜や簰銆
鍏朵腑鐨勯毦鐐瑰湪浜庢€庝箞鎶婁竴涓粍浠朵唬鐮佺紪璇戞垚鍦 PHP銆佸湪 JS 閮借兘璺戠殑缁勪欢浠ｇ爜銆傜櫨搴︿細鍋氬浜庢ā鏉垮拰涓€浜涜〃杈捐璁＄殑澶勭悊銆備緥濡傦紝妯℃澘浠ｇ爜鏈変竴涓枃鏈妭鐐癸紝鏈変竴涓嚜瀹氫箟缁勪欢锛屽湪缂栬瘧鐨勮繃绋嬩腑锛屼細鍒╃敤缂栬瘧鍣ㄦ妸瀹冭浆鍖栨垚鎶借薄璇硶鏍戯紝褰㈡垚鏍戠殑缁撴瀯锛屾瘡涓妭鐐归兘鏈変竴浜涘睘鎬у拰淇℃伅锛屽埄鐢ㄨ娉曟爲鐨勭粨鏋勫拰灞炴€т俊鎭紝灏卞彲浠ラ€氳繃浠ｇ爜鐢熸垚鍣ㄥ垎鍒敓鎴 PHP 鍜 JS 鐨勪唬鐮併€
杩欓噷杩樻湁涓€涓棶棰橈紝涓轰粈涔堥渶瑕佷竴涓悓鏋勫尯鍧楀憿锛熻繖鏄洜涓哄悓鏋勫尯鍧楀彲浠ュ緢濂芥帶鍒舵湇鍔″櫒绔兘鎵ц鐨勪唬鐮侊紝鏂逛究璇硶瑙ｆ瀽銆傚彟澶栵紝鐧惧害瀵瑰悓鏋勪唬鐮佸潡杩涜璇硶闄愬埗锛屼互淇濊瘉鏈嶅姟鍣ㄧ鐨勭ǔ瀹氭€э紝涔熷彲浠ユ洿鍔犳柟渚胯В鏋愭垚鎯宠鐨 PHP 浠ｇ爜銆
閫氳繃鏀归€狅紝缁勪欢鍖栨覆鏌撴鏋朵笉浠呭彲浠ヤ娇寰楁晥鐜囨彁鍗囷紝淇濊瘉浜嗕綋楠屼竴鑷存€э紝鑰屼笖杩涜浜嗘í鍚戝崌绾ч檷浣庢垚鏈€
鎬ц兘浼樺寲
閽堝鏈嶅姟鍣ㄧ鐨勬覆鏌撴€ц兘锛岀櫨搴﹀仛浜嗛潪甯哥粏鑷寸殑浼樺寲锛
鍦ㄦ鏋跺眰锛屽娓叉煋娴佺▼杩涜浜嗙畝鍖栵紝娣诲姞浜嗙紦瀛橈紱
鍦ㄥ熀纭€缁勪欢灞傦紝瀵规帶鍒剁殑绠€鍗曠粍浠惰繘琛岀紪璇戜紭鍖栵紱
鍦ㄤ笟鍔″眰锛屾彁渚涘厛楠屽伐鍏枫€佸噯鍏ヨ鑼冿紝绾夸笂鐩戞帶鍜屾姤璀︼紝骞舵彁渚 a-nossr 鎸囦护銆
閭ｄ箞缁勪欢鏄浣曞湪鏈嶅姟鍣ㄧ娓叉煋鎴愭兂瑕佺殑 HTML 瀛楃涓插憿锛
濡備笅鍥炬墍绀猴紝浼氱粡杩囦互涓嬫楠わ細棣栧厛锛屽姞杞界粍浠剁殑閰嶇疆锛屽垱寤虹粍浠剁殑瀹炰緥銆傚湪瀹炰緥鐨勫垱寤鸿繃绋嬩腑锛屽杩欎釜缁勪欢鎵€鏈夌殑鏁版嵁杩涜鍒濆鍖栵紝鍖呮嫭涓€浜涚壒寰佸拰璁＄畻灞炴€э紝寰楀埌鍒濆鍖栫姸鎬佷互鍚庯紝鍐嶆覆鏌撳嚭铏氭嫙 DOM 鏍戯紝鎶婃暣涓粍浠惰妭鐐规暟娓叉煋鎴愪竴涓疄渚嬬殑褰㈠紡锛岀敤铏氭嫙 DOM 鏍戞覆鏌撴垚 HTML 瀛楃涓层€
涓庢鍚屾椂锛岀櫨搴︽悳绱㈠鏁翠釜娓叉煋鐨勮繃绋嬭繘琛屼簡绠€鍖栥€傚湪妗嗘灦灞傦紝閫氳繃鍒涘缓铏氭嫙 DOM锛屽噺灏戜簡涓€娆￠€掑綊锛屼篃鍑忓皯浜嗗湪绾夸笂杩愯鏃剁殑閫昏緫銆傚湪鍩虹缁勪欢灞傦紝鐧惧害瀵规í鍚戝洟闃熻兘澶熷畬鍏ㄦ帶鍒剁殑涓€浜涚畝鍗曠粍浠惰繘琛屼簡浼樺寲銆傚埄鐢 HTML 缂栬瘧鍣ㄧ紪璇戞垚璇硶鏍戯紝璇硶鏍戝瀹冩瘡涓€涓 AST 鑺傜偣杩涜浼樺寲锛岄€氳繃灏 Tag 鐩存帴瀹氫箟涓烘櫘閫氱殑 DOM 鑺傜偣鐨勬柟娉曪紝鐢熸垚鏈€鍚庢兂瑕佺殑鍑芥暟浠ｇ爜銆
妗嗘灦灞傦細娓叉煋娴佺▼绠€鍖
绠€鍗曠粍浠剁紪璇戜紭鍖
鐩墠杩涘睍
鐩墠锛岀櫨搴︽彁渚涙悳绱㈢粍浠跺寲鐨勫伐鍏枫€傛瘮濡傛悳绱 Web 鏃犻殰纰嶈鍒掋€佹悳绱㈡€ц兘鍑嗗叆瑙勮寖銆佹悳绱㈣璁¤鑼冿紱鏈嶅姟鏂归潰鍖呮嫭鎬ц兘鐩戞帶銆佸墠鍚庣寮傚父鐩戞帶绛夛紱杩愯鏂归潰鎻愪緵 VSL 璇煶浜や簰妗嗘灦甯姪寮€鍙戣€呭紑鍙戜竴浜涜闊充氦浜掗€昏緫锛涘伐绋嬫柟闈㈡彁渚涙悳绱㈡晱鎹峰钩鍙帮紝甯姪寮€鍙戣€呯洿鎺ュ畬鎴愯仈璋冦€佹彁娴嬨€佷笂绾匡紱鍦ㄥ簲鐢ㄦ柟闈紝鏈夊崱鐗囥€佸浘鐗囨悳绱€佸挩璇㈡悳绱€佺Щ鍔ㄧ鐨勯椤碉紝杩樻湁涓€浜涚嫭绔嬬殑绔欙紝鍖呮嫭鐧惧害浣撹偛鍜岀櫨搴︽嫑鑱樸€
鎼滅储缁勪欢鍖栨妧鏈叏鏅浘
2 绉诲姩浣撻獙鏍囧噯鍖栧缓璁
绗簩涓 Session 鏄敱鐧惧害鍓嶇鎶€鏈儴璧勬繁鍓嶇宸ョ▼甯堝垬娴畤甯︽潵鐨勩€婄Щ鍔ㄤ綋楠屾爣鍑嗗寲寤鸿銆嬨€
鏋佽嚧鐨勭敤鎴蜂綋楠屾槸 Web 浜у搧鎵€杩芥眰鐨勶紝閭ｄ箞浠€涔堟槸濂界殑鐢ㄦ埛浣撻獙锛屽浣曞幓閲忓寲鐢ㄦ埛浣撻獙鍋氬埌濂界殑浣撻獙鍛紵棣栧厛闇€瑕佹湁涓€濂楁竻鏅扮殑浣撻獙鎸囧鏍囧噯锛岀劧鍚庡啀鍘昏惤鍦般€
绉诲姩浣撻獙鎸囧崡
绉诲姩浣撻獙鎸囧崡鏄熀浜庣Щ鍔 Web 鐢熸€佹彁鍑轰竴濂楅€氱敤鐨勪綋楠屾寚瀵艰鑼冿紝鐩殑鏄洿濂藉湴鏈嶅姟浜庣敤鎴峰強浜у搧鐨勭郴缁燂紝涓哄箍澶х敤鎴锋彁渚涗紭璐ㄧ殑浣撻獙銆備粠鐢ㄦ埛鐨勪綋楠屽眰娆°€佷氦浜掑拰绉诲姩 Web 鐜扮姸锛岀櫨搴﹀綊绾冲嚭鍏釜绾害锛
绗竴锛屽揩閫熺殑淇℃伅鍛堢幇銆傞€熷害蹇參鐩存帴褰卞搷鐢ㄦ埛瀵圭珯鐐圭殑浣撻獙璇勭骇锛屾墍浠ヨ涓讳綋鍐呭蹇€熷憟鐜扮粰鐢ㄦ埛鎵嶆槸浼樿川鐨勪綋楠屽繀闇€鐨勩€
绗簩锛岃璁′氦浜掑眰闈㈠己璋冧竴鑷存€с€備竴鑷寸殑璁捐浜や簰鍙互鍒╃敤鐢ㄦ埛鐨勫涔犵粡楠岋紝闄嶄綆瀛︿範鍜屼娇鐢ㄧ殑鎴愭湰銆
绗笁锛屽ソ浜у搧闇€瑕佸仛鍒拌鐢ㄦ埛浣庢垚鏈€侀珮鏁堝湴瀹屾垚鎵€鏈変氦浜掓搷浣滐紝鏁翠綋鎿嶄綔瑕佹竻鏅版棤闃伙紝甯︾粰鐢ㄦ埛鏈€娴佺晠鐨勪綋楠屻€
绗洓锛屽唴瀹瑰己璋冧紭璐ㄩ槄璇昏鎰熴€傜珯鐐圭殑鍐呭鍙鎬с€佸唴瀹规湰韬川閲忔槸鍚﹁兘澶熻揪鍒帮紝閮芥槸浼樿川鐨勪綋楠屾墍蹇呴渶鐨勩€
绗簲锛屾儏鎰熷眰闈㈡湁涓ょ偣锛岄鍏堟槸鎰夋偊鐨勬儏鎰熻鐭ワ紝鍏舵鏄鐢ㄦ埛瀵圭珯鐐逛俊浠伙紝椤甸潰鏄惁瀹夊叏銆佹槸鍚﹀強鏃跺憡鐭ユ祦閲忎俊鎭瓑绛夈€
绗叚锛屽叧浜庡己鍋ョ殑鍦烘櫙閫傞厤锛屼紭绉€鐨勭珯鐐瑰簲褰撻€傚悎浜庝笉鍚岀殑浜虹兢鍜屽涓荤幆澧冦€
绉诲姩浣撻獙妫€娴嬪钩鍙
鏈変簡浣撻獙鎸囧崡锛屽浣曞揩閫熺煡閬撶珯鐐瑰瓨鍦ㄥ摢浜涢棶棰橈紵杩欏氨闇€瑕佷綋楠屾娴嬪钩鍙 Radar銆
Radar 鐨勬渶搴曞眰鏄 Headless Chrome锛岀櫨搴﹂€氳繃鍗忚鎺ュ彛鍙互闈炲父蹇嵎鍦版搷浣滆繖涓祻瑙堝櫒銆備腑闂寸殑杩愯鏄熀浜庤胺姝屽紑婧愮殑涓€涓綉椤靛伐鍏 Lighthouse 銆傚畠涓昏鏈変袱涓唴瀹癸紝绗竴鏄綉椤垫暟鎹敹闆嗭紝閫氳繃鏁版嵁鍒嗘瀽鑾峰緱鏁版嵁锛屾寜鐓ц鍒欑殑闇€瑕侊紝瀵逛簬杩欎簺鏁版嵁杩涜鍒嗘瀽鍚庤緭鍑烘兂瑕佺殑缁撴灉銆傜浜岋紝Radar 鐨勬牳蹇冩槸闈炲父澶氱殑瑙勫垯锛屼富瑕佸垎涓ょ被锛屼竴绫绘槸鏅€氱殑锛屼竴绫绘槸浜や簰鐨勩€
鍒樻氮瀹囦互浜や簰鐨勮鍒欎负渚嬶紝璇︾粏闃愯堪浜嗕竴涓鍒欐槸濡備綍瀹炵幇鐨勩€傚涓嬪浘锛屼氦浜掔殑瑙勫垯涓昏鍒嗕负涓ら儴鍒嗭紝绗竴鏄満鏅瘑鍒紝绗簩鏄氦浜掑垎鏋愩€備妇涓€涓瘮杈冪畝鍗曠殑渚嬪瓙锛屽綋鐢ㄦ埛鍦ㄩ〉闈㈢湅鍒颁竴涓緭鍏ユ鏃讹紝瑙夊緱鐐瑰嚮鍙互鐩存帴杈撳叆鏄竴涓壇濂界殑浣撻獙銆傞偅涔堝浣曢噺鍖栬繖涓鍒欏憿锛熼鍏堟槸鍦烘櫙璇嗗埆锛屾壘鍒板湪杩欎釜椤甸潰涓湅璧锋潵鍍忚瘎璁鸿緭鍏ユ鐨勫厓绱犮€傜劧鍚庢壘涓€浜涚壒寰侊紝浠庢捣閲忔暟鎹噷闈㈡爣娉ㄣ€佹彁鍙栦竴浜涢€氱敤鐗瑰緛涔嬪悗涓鸿繖涓満鏅缓绔嬬壒寰佸簱銆備箣鍚庡啀鍩轰簬鍦烘櫙鎵€闇€瑕佺殑鐗瑰緛锛岃繘琛岀綉椤电粨鏋勫寲鏁版嵁鎻愬彇銆
Radar 瑙勫垯鏋舵瀯锛堜氦浜掔被瑙勫垯涓轰緥锛
鎺ヤ笅鏉ヨ繖浜涘満鏅厓绱犲氨瑕佽繘琛屼氦浜掑垎鏋愶紝棣栧厛杩涜娣卞害绛涢€夌劧鍚庤繘琛屼氦浜掓搷浣溿€備互妯℃嫙灞忓箷鐨勭偣鍑讳妇渚嬶紝鐐瑰嚮涔嬪墠鐢ㄦ埛浼氱湅椤甸潰鐨勫彉鍔紝姣斿璇 DOM 鐨勫彉鍔ㄣ€佽烦杞殑鍙樺姩锛岀劧鍚庡鍙樺姩杩涜鍒嗘瀽锛岀湅鏄惁绗﹀悎棰勬湡銆
3 鍩轰簬 Custom Elements 鏍囧噯缁勪欢鍖栨瀯寤 Web 搴旂敤
绗笁涓富璁蹭汉鏄櫨搴﹀墠绔妧鏈儴璧勬繁鍓嶇宸ョ▼甯堥偣娣兼睙锛屼粬鐜板満鍒嗕韩浜嗗浣曢珮鏁堝揩閫熺殑鏋勫缓涓€涓綋楠岃壇濂界殑 Web 搴旂敤銆佸熀浜 Custom Elements 鏍囧噯鐨勭粍浠跺寲璁捐銆佸浣曟彁鍗囩敤鎴风浣撻獙鍜屽紑鍙戞晥鐜囥€
棣栧厛鐪嬭嚜瀹氫箟鏍囩锛岃嚜瀹氫箟鏍囩鍦ㄥ姛鑳戒笂閫昏緫涓婁笌 JavaBean 绫讳技锛岄兘灏佽 Java 浠ｇ爜锛屾槸鍙噸鐢ㄧ殑缁勪欢浠ｇ爜锛屽苟涓斿厑璁稿紑鍙戜汉鍛樹负澶嶆潅鐨勬搷浣滄彁渚涢€昏緫鍚嶇О銆傚彟澶栵紝鑷畾涔夋爣绛惧叿鏈夆絸鎸佲絾闅滅銆佹彁楂樺紑鍙戞晥鐜囥€佽瘎浼版€ц兘銆佸 SEO 鑹ソ鐨勭壒鐐广€
鍏朵腑锛屽浣曚娇鐢ㄨ嚜瀹氫箟鏍囩杩涜鎬ц兘璇勪及鍛紵鐧惧害鎻愪緵浜嗕竴濂楁悳绱㈠紩鎿庣殑楠岃瘉宸ュ叿銆傛瘮濡傦紝绗﹀悎鏌愪竴绉嶈鍒欑殑 Custom Elements锛岀粰瀹冩爣楂樺垎锛屼负绗﹀悎楂樻€ц兘鏍囩銆備絾濡傛灉浣跨敤 DIV 鐨勬柟寮忥紝鎼滅储寮曟搸娌″姙娉曠煡閬撳竷灞€鏄笉鏄珮鎬ц兘锛屼篃娌″姙娉曠煡閬撴墍瀵瑰簲鐨 JS 濡備綍瀹炵幇锛屽鏋滄湁浜 Custom Elements 鐨勬爣鍑嗭紝灏辫兘娓呮櫚鍦扮煡閬撹繖涓〉闈㈡兂骞蹭粈涔堛€
鍩轰簬姝わ紝鎴戜滑鍙互璁炬兂锛氬鏋滃畬鍏ㄤ娇鐢ㄨ繖浜 Custom Elements 璇箟鍖栨爣绛炬瀯寤 Web 绔欑偣鍙鍚楋紵
杩欏氨闇€瑕佸紩鍏ョ粍浠跺寲璁捐銆傚叾瀹炵洰鍓嶅瓨鍦ㄧ殑缁勪欢鍖栬璁￠兘鍗冪瘒涓€寰嬶紝鎶婁竴涓〉闈㈢殑鍔熻兘妯″潡浠ョ粍浠舵爲鐘剁殑褰㈠紡鑷敱缁勫悎锛屽爢绉垚涓€涓姛鑳界殑椤甸潰鎴栬€呮槸妯″潡锛岃繖灏辨槸缁勪欢鐨勭粨鏋勩€傚叿浣撹姹傦細
姣忊紑涓 Custom Element 鏄紑涓粍浠
缁勪欢鍐呴儴瀹炵幇鐩稿簲鐨勪氦浜掋€佸姛鑳藉拰鏁版嵁澶勭悊閫昏緫
缁勪欢涔嬮棿閫昏緫鍜屾牱寮忔槸鐙酱闅旂鐨
缁勪欢鏄彲浠ラ€氫俊鐨
缁勪欢鏄彲澶嶁饯鐨
Web Components 鏄寚閫氳繃涓€绉嶆爣鍑嗗寲鐨勯潪渚靛叆鐨勬柟寮忓皝瑁呯殑涓€涓粍浠躲€備富瑕佹爣鍑嗗寘鎷 Custom Elements锛孲hadow DOM锛孒TML Templates锛孒TML Imports 绛夊涓淮搴︾殑瑙勮寖涓庡疄鐜般€
Custom Elements 鏄彁渚涗竴绉嶆柟寮忚寮€鍙戣€呭彲浠ヨ嚜瀹氫箟 HTML 鍏冪礌锛屽寘鎷壒瀹氱殑缁勬垚锛屾牱寮忓拰琛屼负銆傛敮鎸 Web Components 鏍囧噯鐨勬祻瑙堝櫒浼氭彁渚涗竴绯诲垪 API 缁欏紑鍙戣€呯敤浜庡垱寤鸿嚜瀹氫箟鐨勫厓绱狅紝鎴栬€呮墿灞曠幇鏈夊厓绱犮€
Shadow DOM 鏃ㄥ湪鎻愪緵涓€绉嶆洿濂藉湴缁勭粐椤甸潰鍏冪礌鐨勬柟寮忥紝鏉ヤ负鏃ヨ秼澶嶆潅鐨勯〉闈㈠簲鐢ㄦ彁渚涘己澶ф敮鎸侊紝閬垮厤浠ｇ爜闂寸殑鐩镐簰褰卞搷銆傚紑鍙戣€呭彲鍒╃敤 Shadow DOM 灏佽鑷繁鐨 HTML 鏍囩銆丆SS 鏍峰紡鍜 JavaScript 浠ｇ爜銆
HTML Imports 鏄竴绉嶅湪 HTML 涓紩鐢ㄤ互鍙婂鐢ㄥ叾浠栫殑 HTML 鏂囨。鐨勬柟寮忥紝鍙互绠€鍗曠悊瑙ｄ负甯歌鐨勬ā鏉夸腑鐨 include 涔嬬被鐨勪綔鐢ㄣ€傛垜浠彲浠ラ€氳繃 HTML Import 鐨勫舰寮忥紝鐩存帴灏嗗仛鐨 Custom Elements 鐨勬爣绛炬斁杩 HTML 涓繘琛屾覆鏌撴覆鏌撱€
Web Components 鍏煎鎬
4 鎼滅储钀藉湴椤典綋楠屾妧鏈強搴旂敤
绗洓涓富棰樼敱鐧惧害鍓嶇鎶€鏈儴鍓嶇宸ョ▼甯堟潕鍏嗘槑璁茶堪銆傚浣曟洿蹇€佹洿濂界殑灏嗗悇绫绘悳绱㈢粨鏋滈〉闈紶閫掑埌鐢ㄦ埛绔竴鐩翠互鏉ユ槸鐧惧害鎼滅储鍓嶇鐨勬牳蹇冨叧娉ㄧ偣銆傚熀浜庢锛屾潕鍏嗘槑鍒嗗埆浠庡浣曡钀藉湴椤靛姞杞芥洿蹇紝濡備綍璁╂悳绱㈢粨鏋滈〉鍜岃惤鍦伴〉涔嬮棿鍒囨崲鏇村姞椤烘粦浠ュ強鏈潵鐨勬柊鏍囧噯锛屼粙缁嶇櫨搴︽悳绱㈣惤鍦伴〉浣撻獙鎶€鏈殑鎺㈢储銆
濡備綍璁╄惤鍦伴〉鍔犺浇鏇村揩
鎬濊矾涓€锛氭彁鍓嶅姞杞姐€傞€氳繃 Resource Hint 鎻愮ず娴忚鍣ㄩ瑙ｆ瀽鍩熷悕銆佸缓绔嬮杩炴帴锛岀敋鑷宠繘琛岄娓叉煋銆傝嫢鏄笉鏀寔鐨勬祻瑙堝櫒锛屽垯鍙互閫氳繃 JavaScript 妯℃嫙涓€閮ㄥ垎銆
鎬濊矾浜岋細鎶撳彇鏁版嵁銆傞€氳繃寮€鏀惧钩鍙版彁浜ゆ暟鎹紝鐢辩櫨搴︽潵娓叉煋銆
鎬濊矾涓夛細MIP / AMP銆侻IP 鎻愪緵澶氶噸鎺柦锛岃浣跨敤 MIP 鎶€鏈殑椤甸潰鍔犺浇閫熷害鏇翠笂涓€灞傛ゼ銆備緥濡傦紝CDN 鍔犻€熸湇鍔★紱浣跨敤 MIP 璁捐鐨勭綉绔欐病鏈変换浣曞彲浠ラ樆濉炴覆鏌撶殑鑴氭湰锛屾墍鏈夎剼鏈兘鍦ㄩ〉闈富浣撳姞杞藉畬鎴愬悗鎵嶆墽琛屻€傛澶栵紝MIP 瑕佹眰鎵€鏈夐〉闈㈤兘鏄潤鎬佺殑锛屽鏋滄湁闇€瑕佸疄鏃舵洿鏂扮殑鏁版嵁闇€瑕佸紓姝ヨ幏鍙栵紝杩欐牱璁捐鑺傜渷浜嗗悗绔殑娓叉煋鏃堕棿銆
濡備綍鎶婁袱涓〉闈㈣瀺鍚堝湪涓€璧凤紵
鍏跺疄锛屾棤璁烘湁澶氬皯浼樺寲鍔犺浇閫熷害鐨勬墜娈碉紝褰掓牴缁撳簳绂讳笉寮€椤甸潰璺宠浆銆備絾鏄紝娴忚鍣ㄨ烦杞浉瀵规潵璇翠笉澶熷钩婊戯紝鐢ㄦ埛浣撻獙涓嶅濂斤紝鑳戒笉鑳芥妸鍓嶅悗涓や釜椤甸潰铻嶅悎鍒颁竴璧峰憿锛
绛旀褰撶劧鏄偗瀹氱殑銆傛潕鍏嗘槑鍦ㄤ繚璇佷綋楠屻€佷繚闅滃畨鍏ㄥ強淇濇寔寮€鏀剧殑鍩虹涓婏紝璁茶В浜嗙櫨搴﹀墠绔悳绱㈢殑瑙ｅ喅鏂规锛
淇濊瘉浣撻獙锛氶€氳繃 Iframe 鍔犺浇椤甸潰锛涢€氳繃 PostMessage 绛夋柟娉曞疄鐜颁氦浜掑姩鏁堛€
淇濋殰瀹夊叏锛氫笉鍏佽浣跨敤澶栭儴鑴氭湰锛岄渶瑕佸皝瑁呯粍浠跺鏍革紱閫氳繃鏍￠獙纭繚 HTML 绗﹀悎瑙勮寖銆
淇濇寔寮€鏀撅細閫氳繃 GitHub 杩借釜寮€鍙戙€
鍦ㄦ湭鏉ワ紝鐧惧害鎼滅礌灏嗗熀浜庡煙鍚嶃€両frame 娓叉煋闂锛屼负寮€鍙戣€呭甫鏉 Navigation Transition銆丳romotable Iframe銆丳ortals 鍙 Web Packaging 鏂版爣鍑嗭紝甯︽潵鏈€娴佺晠鐨勪綋楠屻€
Navigation Transition锛氶〉闈㈠垏鎹㈢殑浜や簰鏂瑰紡銆傝В鍐充簡璺ㄥ煙闂锛屾病鏈 Iframe 娓叉煋鐨勫巻鍙插寘琚便€備笉杩囧墠涓€涓〉闈緷鐒朵笉鑳芥帶鍒跺悗涓€涓〉闈㈢殑鍔犺浇銆佹覆鏌撱€俰frame 鍙互鎻愬墠鍔犺浇锛屼絾鏄 Navigation Transitions 涓€瀹氳鍦ㄧ敤鎴峰垏鎹㈢殑鏃跺€欏姞杞姐€
Promotable Iframe锛氫笌 Iframe 鐩稿叧锛屾牳蹇冧唬鐮佹槸 Promotable 鐨 API锛屽彧瑕佽皟鐢 Promotable锛屽氨浼氳皟鍔ㄩ〉闈㈢殑涓€灏忓潡锛岃€屽悗璋冨姩鏁翠釜椤甸潰鍙婂唴瀹广€備絾鏄繖绉嶆柟娉曟秹鍙婁竴浜涚敓鍛藉懆鏈熺殑绠＄悊鍜 JS 鐨勫洖鏀堕棶棰橈紝鏄笉澶熷畨鍏ㄧ殑瀹炵幇锛岃€屼笖杩欐牱娌℃湁瑙ｅ喅 CDN 鐨勯棶棰橈紝渚濈劧闇€瑕佹敼鍩熷悕銆
Portals锛氫紶閫侀棬锛屽皢涓€涓〉闈紶閫佸彟涓€涓〉闈€傝繖涓爣鍑嗘槸 Promotable Iframe 鐨勫寮猴紝寮曞叆浜嗕竴涓柊鐨 HTML 鏍囩 portal锛岃繖涓爣绛剧敤鏉ユ浛浠 Iframe 鏄剧ず涓€鍧楃綉椤碉紝鍐欐硶鍜 Iframe 绫讳技銆備絾鏄畠姣 Iframe 澶氫竴涓姛鑳斤紝灏辨槸鍙互閫氳繃 鈥渁ctive鈥 鏂规硶婵€娲诲畠銆備笌姝ゅ悓鏃讹紝 portal 鐨勫瓙鏂囨。浼氭敹鍒颁竴涓 portal zactive 浜嬩欢锛屼簨浠朵腑鍙互鎷垮埌瀹冪殑涓婄骇鍏冪礌锛岃繖鏍峰張鍙互鎶婁笂绾у厓绱犲綋鎴愪竴涓 portal 鎻掑叆鍥炶嚜宸辩殑鏂囨。娴侊紝浣垮緱椤甸潰鍒囨崲鍥炲幓鎴愪负鍙兘銆
Web Packaging锛氳В鍐充簡 CDN 璺ㄨ秺闂銆傝繖涓爣鍑嗗寘鎷笁鏂归潰锛氱鍚嶃€佹墦鍖呫€佸姞杞姐€傚涓嬪浘锛屽乏杈瑰唴瀹规彁渚涜€呮槸绔欓暱锛岀紦瀛樼殑 CDN 绫绘瘮 MIP 鐨 CDN 锛屽彸杈规槸璁块棶鐢ㄦ埛锛岀敤鎴锋祻瑙堟垜浠櫨搴︽悳绱㈢粨鏋滈〉鐨勬椂鍊欙紝閫氳繃 MIP 鐨 Cache CDN 鎻愬墠鎶婃暟鎹彇杩囨潵锛岀敤鎴风湡姝ｇ偣鍑荤殑鏃跺€欙紝鐩存帴浠庡垰鎵嶅彇鍥炴潵鐨勯〉闈㈠幓鍔犺浇瀹冦€傜敱浜庡唴瀹规湰韬槸鍐呭鎻愪緵鑰呮彁渚涚殑锛屾墍浠ヤ粬鍙互瀵逛簬鑷繁 URL 杩涜绛惧悕銆傛湁浜嗚繖涓鍚嶄笖绛惧悕鏈夋晥鐨勬椂鍊欙紝娴忚鍣ㄥ彲浠ヨ嚜宸辨樉绀哄師濮嬬殑缃戝潃锛屽悓鏃跺師濮嬬殑缃戝潃鍙互鍜屽師鏉ョ殑鏈嶅姟鍣ㄨ繘琛屼氦浜掞紝鍍忛€氳繃鍘熺綉鍧€鎵撳紑鐨勪竴鏍凤紝瑙ｅ喅浜 CDN 璺ㄥ煙闂銆
5 濡備綍閫氳繃 Lavas 蹇€熸瀯寤 PWA 绔欑偣
鏈€鍚庝竴涓富棰樼殑璁插笀鏄櫨搴﹀墠绔妧鏈儴璧勬繁鐮斿彂宸ョ▼甯堢帇杞剁洓涓哄ぇ瀹朵粙缁嶅浣曢€氳繃 Lavas 蹇€熸瀯寤 PWA 绔欑偣銆
PWA
PWA锛圥rogress Web App锛夋槸 WEB 鏈潵鐨勫彂灞曟柟鍚戙€備粠浣撻獙涓婃潵璇达紝PWA 鎺ヨ繎鍘熺敓 APP锛岄€氳繃 Manifest 鎶€鏈厑璁哥敤鎴峰揩閫熸墦寮€绔欑偣骞惰幏寰楁矇娴稿紡鐨勪綋楠岋紝閫氳繃 Service Worker 鑳藉鍋氬埌璧勬簮棰勫姞杞藉拰绂荤嚎鍙敤绛変粠鑰屾彁鍗囨€ц兘鍜屽彲鐢ㄦ€э紱鍚屾椂 PWA 鍙堟嫢鏈 Web 绔欑偣鐨勫叡鍚屼紭鍔匡細鍏嶅畨瑁呭拰鑷姩鏇存柊銆
浣嗕笌 Web 绔欑偣涓嶅悓鐨勬槸锛孭WA 鍙堝叿鏈夊彲闈犮€佸揩閫熴€侀粡鎬х瓑鐗圭偣锛
绗竴鏄彲闈犮€傚湪鏂綉鐨勬儏鍐典笅锛孭WA 鍙仛鍒版瘮杈冨弸濂界殑绂荤嚎鎻愮ず锛岃繖涓槸 PWA 鏂綉鐨勬渶楂樼骇锛屽彨鏂綉鍙敤銆
绗簩鏄揩閫熴€53% 鐨勭敤鎴蜂細鏀惧純鍔犺浇鏃堕棿瓒呰繃 3 绉掔殑缃戠珯锛岃秺蹇殑鍔犺浇閫熷害灏辨湁瓒婂皯鐨勭敤鎴锋祦澶便€侾WA 鎻愪緵 Service Worker锛岀‘瀹氬摢浜涜闂紦瀛樸€佸摢浜涜闂綉椤碉紝缂╃煭鍔犺浇鏃堕棿銆
绗笁鏄粡鎬с€傞粡鎬ф槸鎸囩敤鎴疯闂繃涓€娆★紝涓嬩竴娆¤闂槸鍚﹂夯鐑︺€侾WA 浼氱敤涓€涓崐绉掔殑鍚姩鍔ㄧ敾鏉ヤ繚璇佹祻瑙堝櫒棣栭〉鍚姩鐨勯『婊戙€傚彟澶栵紝鍚姩涔嬪悗娌℃湁鐨勫湴鍧€鏍忋€佽彍鍗曟爮锛屼繚璇佺敤鎴风殑娌夋蹈寮忎綋楠屻€
浠庢妧鏈眰闈㈣锛孭WA 鏈夊垎涓哄洓閮ㄥ垎锛
绗竴鏄 Service Worker 銆傚畾涔夐缂撳瓨銆佺綉缁滄嫤鎴拰缂撳瓨绛栫暐銆傚畠鏈韩鏄竴涓 Worker锛屾湁涓撻棬鐨勮娉曪紝闇€瑕 CACHES API锛岄渶瑕佹敞鍐屽強鏇存柊銆
绗簩鏄 Manifest 銆傝繖鏄竴涓 Json 鏂囦欢锛屽畾涔夊揩閫熷叆鍙ｏ紝鍚姩鍔ㄧ敾銆
绗笁鏄 Web Push and Notification 銆傛槸鏈嶅姟鍣ㄦ帹閫佺粰瀹㈡埛绔殑涓诲姩閫氱煡銆
绗洓鏄 APP Shell 銆傝繖骞朵笉鏄柊鎶€鏈紝浣嗗畠鏄父鐢ㄧ殑 PWA 鏋舵瀯銆傜畝鍗曟潵璇达紝灏辨槸鎶婁竴涓 APP 鍒嗘垚浜嗗澹冲拰鍐呭锛岀敤 Service Worker 鎶婂澹崇紦瀛樿捣鏉ワ紝灏嗛噷闈㈢殑椤甸潰杩涜璺宠浆銆
閫氳繃 Lavas 鎼缓 PWA 绔欑偣
Lavas 鍖呮嫭宸ュ叿銆佹枃妗ｄ互鍙婂搴旂殑瑙ｅ喅鏂规鍜屽缓绔欐ā鏉匡紝鏄竴涓紑婧愮殑瑙ｅ喅鏂规銆侺avas 鏈韩鏈変袱閮ㄥ垎锛孡avas cli 鍜 Lavas core锛屽唴閮ㄧ敤 Vue + Vue Router + Vuex 鎼缓绔欑偣锛屽唴缃袱濂楁ā鏉 (basic & app-shell)锛屾敮鎸佷紶缁熸ā寮 SPA 鍜 SSR 蹇€熸覆鏌擄紝鍙互蹇€熸嫢鏈 PWA 鐗规€э紝鐏垫椿鎬у己锛岄厤缃畝鍗曪紝鑰屼笖鏂囨。鍙婃椂鏇存柊锛屽唴瀹瑰畬鏁淬€傞€氳繃 Lavas 鎼缓 PWA 绔欑偣涓昏鏈夊叓涓楠わ細
鍑嗗鐜 & 鍒濆鍖栭」鐩€傚畨瑁 Lavas cli锛屽垵濮嬪寲椤圭洰锛岄€夋嫨妯℃澘锛屽畨瑁呬緷璧栥€
鍒涘缓鏂伴〉闈€
娣诲姞閾炬帴銆備娇鐢 <router-link>锛屾敞鎰忓拰 Vue 淇濇寔涓€鑷达紝to 灞炴€ф寚鏄庣洰鏍囬〉闈紝鏀寔瀛楃涓叉牸寮忕殑鍦板潃锛屾敮鎸佸璞°€傜劧鍚庡惎鍔ㄨ皟璇曟湇鍔″櫒銆
鍜屾湇鍔＄閫氳銆傚畨瑁 axios锛屽紩鍏 axios锛屽悜鍚庣鍙戦€佽姹傘€
浣跨敤 Vues 绠＄悊鏁版嵁銆
鍒涘缓 STORE锛岄渶瑕佸畾涔変竴浜涘唴瀹广€傛妸璇锋眰鏁版嵁绉诲姩鍒 action 閲岄潰锛岃幏鍙栨垚鍔熷悗璋冪敤 commit 瑙﹀彂 mutation 鍘绘洿鏀 state銆
鍦ㄧ粍浠朵腑锛岄€氳繃 store.dispatch 瑙﹀彂 action 鑾峰彇鏁版嵁锛岀劧鍚庨€氳繃 mapState 鎶 state 鍜岃绠楀睘鎬у叧鑱旓紝鏈€鍚庨€氳繃璁＄畻灞炴€у湪椤甸潰涓婁娇鐢ㄣ€
閰嶇疆 Manifest 銆侻anifestt.json 瀹氫箟浜嗗惎鍔 URL锛屽畾涔夊悇绉嶅昂瀵哥殑 icon锛屽畾涔夊姩鐢婚厤鑹插拰鍚姩妯″紡銆
閰嶇疆 Service Worker銆傞厤缃紝鎸囧畾妯℃澘浣嶇疆銆佹瀯寤轰綅缃
鏋勫缓鍜屼笂绾裤€傛墽琛屾瀯寤哄懡浠 > lavas build锛涘惎鍔ㄧ敓浜х幆澧 > cd dist锛> lavas start銆
Lavas 鐨勬妧鏈師鐞嗕富瑕佹湁鑷姩鐢熸垚璺敱瑙勫垯銆丼keleton銆丄pp Shell銆
Vue Router 闇€瑕佸洓涓楠ゅ仛鏁翠欢浜嬫儏锛氱涓€姝ュ畾涔夊拰寮曠敤缁勪欢锛岀浜屾鎶婄粍浠跺拰璺敱鑱旂郴璧锋潵锛岀涓夋鏄妸鍒氬垰鑱旂郴璧锋潵鐨勬暟鎹斁鍒 Router 鍑芥暟鍒涘缓瀹炰緥锛岀鍥涙槸鎶 Router 鏀惧埌 VUE 鍒涘缓瀹炰緥锛岀粨鏉 Vue 瀹炰緥鎸傝浇灏便€
缁忚繃鏀硅繘锛 Router 涓嶇敤鑷繁瀹氫箟椤甸潰绾х粍浠讹紝鍙互璁ゅ畾鍙鍦 Pages 鐩綍涓紝閭ｇ粍浠堕兘鏄〉闈㈢骇鐨勶紝浠庤€屽彲浠ュ疄鐜拌嚜鍔ㄥ寲 Import锛屼笉闇€瑕佹瘡娆″啓涓€澶у爢鐨勪唬鐮併€傚彟澶栵紝缁濆ぇ澶氭暟鎯呭喌璺敱瑙勫垯鍜岀粍浠跺悕绉版槸鏈夊搴斿叧绯荤殑銆傝嚜鍔ㄧ敓鎴愯矾鐢辫鍒欐槧灏勶紝鐪佸幓浜嗗垪鍑烘槧灏勫叧绯荤殑楹荤儲锛屼篃閬垮厤鍚庢湡缁勪欢鏀瑰悕甯︽潵鐨勭淮鎶ゆ垚鏈€
Skeleton 鍙鏋跺睆锛屽氨鏄疄闄呭唴瀹瑰睍鐜颁箣鍓嶏紝鏈変釜澶ф鍐呭缁欑敤鎴风湅锛岃繖鏍风敤鎴锋彁鍓嶇湅鍒颁竴浜涗笢瑗裤€傝繖鏄 Loading 鍗囩骇鐗堬紝鍥犱负姣忎釜缁勪欢鍙互鑷畾涔夋牱寮忋€佸垏鎹㈡椂鏈恒€佸垪琛ㄧ瓑銆
Lavas 鐨 Skeleton 閮藉彲浠ョ敤锛屽疄鐜版€濊矾鏄 Vue 鐨勬寕杞界偣涓€鑸槸涓┖鐨 DIV锛屽湪鏋勫缓鏃跺皢 Skeleton 鐨勫唴瀹规坊鍔犲埌鎸傝浇鐐逛腑锛孷ue 鎸傝浇鍓嶆竻绌 DIV 鍐呯殑鍗犱綅鍐呭锛屾寕杞藉悗娓叉煋涓哄疄闄呭唴瀹癸紝浣跨敤 SW 棰勭紦瀛 HTML锛岃闂椂鐩存帴浠庣紦瀛樹腑鑾峰彇 HTML锛岃繖鏍峰彲浠ヨ鐢ㄦ埛鐪嬪埌鍗犱綅鐨勪笢瑗裤€
App Shell锛屽氨鏄妸涓€涓 APP 鍒嗕袱閮ㄥ垎锛屾湁澶栧３鍜屽唴瀹癸紝鎶婂澹崇紦瀛樿捣鏉ワ紝姣忔墦寮€椤甸潰鍏堟妸澶栧３鎷垮嚭鏉ワ紝鐒跺悗鍐嶆槸鍐呭娓叉煋銆侫pp Shell 瀹炵幇鏈変袱涓楠わ紝绗竴鏄垝鍒嗭紝鍛婅瘔绋嬪簭鍝儴鍒嗘槸澶栧３銆佸摢閮ㄥ垎鏄唴瀹癸紱绗簩鏄▼搴忔妸澶栧３缂撳瓨璧锋潵銆傝繖闇€瑕佸疄鐜颁袱鏂归潰锛岀涓€鏄 SPA锛岄娆¤姹傛湇鍔″櫒杩斿洖 Index.HTML锛屾墍鏈夐〉闈㈢殑娓叉煋鍧囩敱 JS 瀹屾垚锛屽彧鍦ㄦ寕杞界偣鍐呴噸鏂版覆鏌擄紝鍗曢〉 Index.html 灏辨槸 Shell锛屼娇鐢 SW 棰勭紦瀛 Index.html 鍗冲彲銆傜浜屾槸 SSR锛岄娆¤姹傛湇鍔″櫒杩斿洖缁欏叏閮ㄥ唴瀹癸紝鍚庣画椤甸潰鐨勬覆鏌撶敱 JS 瀹屾垚銆
Web 鐢熸€佺殑鍙戝睍灏辨槸浜掕仈缃戠殑鍙戝睍锛屾柊鎶€鏈殑涓嶆柇娑岀幇鍜屾柊鍦烘櫙鐨勪笉鏂疄鐜颁篃璁╄繖涓紑鏀剧殑鐢熸€佸緱浠ユ寔缁箒鑽ｃ€傜帇杞剁洓琛ㄧず锛岀櫨搴﹀笇鏈涘浗鍐呯殑寮€鍙戣€呬笌绔欓暱鑳藉澶氬鍙備笌鍒 PWA 椤圭洰涓紝鍏卞悓寤鸿鍜屾敼鍠勫浗鍐呯殑 Web App 鐢熸€併€