绠€浠嬪ぇ瀹跺ソ锛屾垜鏄疈IT路骞冲ご鍝ヨ仈鐩燂紝鎴戞槸棣栧腑濉潙瀹樷€斺€旇嫃妤狅紙South路Su锛夛紝浠婂ぉ鍥藉簡绗簩澶╋紝鎴戞病鍑洪棬杩欎釜鍋囨湡锛堜笉瑕侀棶鎴戜负浠€涔堬紝鑷繁鑴戣ˉ~馃槶锛夛紝鍒嗕韩浜嗗墠鍑犲ぉ鐨勫墠绔潰璇曟€荤粨銆傛湁鍚屽鍦ㄧ兢閲岄棶浜嗕竴浜涚粏鑺傘€傚叾涓紝澶у鏈€鍏冲績鐨勬€ц兘浼樺寲锛屾垜浠婂ぉ鏁寸悊浜嗕竴涓嬪叕鍙哥殑椤圭洰銆備竴浜涙垜瑙夊緱涓嶉敊鐨勭偣锛屽垎浜粰澶у锛屽鏈夎浼氾紝杩樻湜鎸囨銆備紭鍖栨杩?銆侀鍏堟槸鏈€鍩虹鐨勶紝CSS鏍峰紡琛ㄦ斁鍦ㄩ〉闈㈢殑Head骞跺鍏ラ摼鎺ラ摼锛宩avascript鏀惧湪搴曢儴body鐨勭粨鏉熸爣绛惧墠锛岄伩鍏嶉樆濉炪€?.js/html/css/pictures閮芥槸鍘嬬缉鍚堝苟锛屽浘鐗囩殑棰勫姞杞藉拰鎳掑姞杞戒篃鏄甯镐究楗€傝繖閲屾帹鑽愪竴娆惧浘鐗囨棤鎹熸瀬搴﹀帇缂╃殑宸ュ叿锛屽彲浠ュ帇缂?0-80%宸﹀彸銆傛瘮杈冮夯鐑︾殑鏄瘡涓€涓猄econdary閮借鎵嬪姩鎿嶄綔鈥斺€擳inyPNG锛屾湁鍏磋叮鐨勫悓瀛﹀彲浠ヤ簡瑙ｄ竴涓嬩粬浠殑API锛岃嚜宸卞皝瑁呬竴涓湇鍔¤皟鐢ㄥ帇缂╋紝涓嶈繃鍏嶈垂娆℃暟鏈夐檺銆?銆佸噺灏慏OM鍏冪礌鏁伴噺鍜孌OM鎿嶄綔锛氬噺灏慏OM鍏冪礌鏁伴噺锛屽悎鐞嗕娇鐢?after銆?before绛変吉绫伙紝閬垮厤椤甸潰娣卞害宓屽锛涗紭鍖杍avascript鎬ц兘锛屽噺灏慏OM鎿嶄綔锛堟垨闆嗕腑鎿嶄綔锛夋鏁帮紝鍙湁鏁堥伩鍏嶉〉闈㈤噸缁?鍥炴祦锛涙€庝箞鑳藉皯鍛紵鎶辨瓑锛屾病鏈夊姙娉曠粰鍑烘爣鍑嗗噯纭殑绛旀銆傛垜鍙兘璇村敖閲忎紭鍖栵紝姣斿鏁版嵁鍒嗛〉锛岄灞忕洿鍑猴紝鎸夐渶鍔犺浇銆?銆丆DN鍒嗗彂闈欐€佽祫婧愶細CDN鐨勬湰鎰忔槸鍦ㄨ浆鍙戙€佷紶杈撱€侀摼璺姈鍔ㄧ瓑鎯呭喌涓嬶紝灏藉彲鑳藉噺灏戣祫婧愮殑杩炴帴銆佽礋杞界姸鎬併€佸埌鐢ㄦ埛鐨勮窛绂汇€佸搷搴旀椂闂寸瓑缁煎悎淇℃伅灏嗙敤鎴风殑璇锋眰閲嶅畾鍚戝埌绂荤敤鎴锋渶杩戠殑鏈嶅姟鑺傜偣銆傝繃鍘讳汉浠璺濈鍒涢€犵編锛屽悗鏉ラ兘璇磋窛绂诲垱閫犵編銆傝繖閲岀殑璺濈鏄敤鎴疯窇璺€犳垚鐨勶紝瓒充互璇存槑CDN鐨勯噸瑕佹€э紱CDN閲囩敤鍚勮妭鐐圭紦瀛樻満鍒讹紝闈炲父閲嶈缂撳瓨銆傚鏋滄病鏈夌浉搴旂殑鏇存柊锛屾偍浠嶇劧浼氱湅鍒版棫缃戦〉銆傝В鍐虫柟娉曟槸鍒锋柊缂撳瓨銆備竷鐗涗簯鍜岃吘璁簯閮藉彲浠ュ崟鐙埛鏂版煇涓枃浠?鐩綍锛涘箍鍛婁笂甯歌锛歑X閰掑ソ锛屼絾涓嶈璐績锛孋DN鎵樼涔熸槸濡傛锛屽悎鐞嗕娇鐢細鍥剧墖銆佸父鐢╦s缁勪欢銆乧ss閲嶇疆鏍峰紡绛夛紝鍗充笉缁忓父鏀瑰姩鐨勬枃浠跺彲浠ュ幓鍒癈DN锛屽寘鎷」鐩腑鐨勪竴浜涗粙缁嶉〉闈紱img鏍囩闇€瑕佽缃珮搴﹀拰瀹藉害锛屽悓鏍疯繖鏍峰仛涔熷彲浠ュ噺灏戦〉闈㈤噸缁?閲嶆帓锛屼娇鐢╓ebP鏍煎紡鍥剧墖锛屽彲浠ュ疄鐜板鍘熷浘锛坧ng锛夊皢杩?8%鐨勫帇缂╋紝褰撶劧瀹冨苟涓嶅畬缇庯細WebP鏄渶鍒濆彂甯冧簬2010骞达紝鐩爣鏄噺灏忔枃浠跺ぇ灏忥紝鏀寔鏃犳崯鍜屾湁鎹熷帇缂╋紝鍔ㄦ€佸拰闈欐€佸浘鐗囷紝鍘嬬缉姣斾紭浜嶨IF銆丣PEG銆丣PEG2000銆丳NG绛夋牸寮忥紝闈炲父閫傚悎缃戠粶绛夊浘鐗囦紶杈擄紝鐜板湪宸茬粡琚秺鏉ヨ秺澶氱殑娴忚鍣ㄦ敮鎸佷簡褰撶劧锛學ebP鏍煎紡涔熸湁瀹冪殑缂虹偣銆備笌鍏朵粬鏍煎紡鐩告瘮锛岀畻娉曟洿鍔犲鏉傘€傚湪鑺傜渷娴侀噺璧勬簮鐨勫悓鏃朵細鍗犵敤璁＄畻璧勬簮锛屽璁＄畻鏈洪€犳垚杈冨ぇ鐨勮礋鎷呫€俉ebP鏀寔鐨勬渶澶у儚绱犳暟涓?6383x16383銆傛湁鎹熷帇缂╃殑WebP浠呮敮鎸?浣峐UV4:2:0鏍煎紡銆傛棤鎹熷帇缂╋紙鍙€嗗帇缂╋級WebP鏀寔VP8L缂栫爜鍜?浣岮RGB鑹插僵绌洪棿銆傛湁鎹熷拰鏃犳崯鍘嬬缉閮芥敮鎸丄lpha閫忔槑閫氶亾锛孖CC棰滆壊閰嶇疆锛孹MP瑙ｈ鏁版嵁锛屾洿璇︾粏鐨勬敮鎸佽鏄庯細caniuse.com浼樼偣锛氫綋绉皬锛岃瀹冨凡缁忓緢灏忎篃涓嶄负杩囷紱灏忚€岀編锛岀敾璐ㄤ篃涓嶉敊锛屽拰鍘熷浘鍑犱箮鐪嬩笉鍑哄樊鍒紱鍔ㄦ€佸浘鐗囩殑gif鍜宩peg鍘嬬缉浠ュ墠鐪嬩笉娓呮锛岀幇鍦ㄨ繖涔坋asy~銆傜己鐐?闅剧偣锛氱洰鍓嶅苟闈炴墍鏈夋祻瑙堝櫒閮芥敮鎸乄ebP锛岄渶瑕佽В鍐虫祻瑙堝櫒閫傞厤闂锛?br/>瀵逛簬宸茬粡涓婄嚎鐨勯」鐩紝浣跨敤WebP闇€瑕佹浛鎹㈠ぇ閲忓浘鐗囷紝宸ヤ綔閲忚繃澶э紙涓嶇‘瀹氬悗鍙扮▼搴忔槸鍚﹀彲浠ュ鐞嗭級銆?.鍩熷悕鎷嗗垎锛氫粈涔堟槸鎷嗗垎鍩熷悕锛熷緢澶氬叕鍙稿垵鏈熼」鐩缓璁惧彧鐢宠涓€涓煙鍚嶏紝缃戠珯鐨勬墍鏈夊唴瀹癸紙html/php/jsp銆乯s銆乧ss銆乮mg绛夐兘鏀惧湪涓€涓煙鍚嶄笅锛夈€傚煙鍚嶆媶鍒嗕富瑕佹槸涓轰簡澧炲姞娴忚鍣ㄨ祫婧愯姹傜殑骞惰搴︼紝灏辨槸骞跺彂闂锛屽彲浠ヨ娴忚鍣ㄥ悓鏃跺彂璧锋洿澶氱殑璇锋眰锛屽悓鏃朵篃瑙ｅ喅浜嗚姹備腑榛樿鎼哄甫cookies鐨勯棶棰橈紝鍑忓皯浜嗘暟鎹紶杈撳瓧鑺傦紱鎬庝箞鎷嗗垎锛熶互鐩墠鍓嶅悗绔垎绂诲紑鍙戜负渚嬶紝寤鸿鍒嗕负涓夌被锛氬墠绔被鈥斺€旈」鐩笟鍔℃湰韬殑htm銆乧ss銆乯s銆佸浘鏍?鍥剧墖绛夛紱闈欐€佺被鈥斺€斾笂杩癈DN璧勬簮绫伙紱鍔ㄦ€佺被鈥斺€斿彲褰掔被涓哄悗绔疉PI鎺ュ彛绫伙紱涓嬮潰鏄悇涓祻瑙堝櫒鐨勫苟鍙戣姹傛暟锛屾暟鎹潵鑷猚horme鎼滅储锛岀弽鐖辩敓鍛斤紝杩滅...6.鍑忓皯http璇锋眰鏁版槸鐨勶紝浣犳病鐪嬮敊锛屽氨鏄噺灏戞暟鍑忓皯http璇锋眰锛岃妭鐪佺綉缁滆姹傛椂闂达紝涓嶈繃浣犲彲鑳藉張瑕侀棶浜嗭紝浣犱笉鏄棭鐐规媶鍒嗗煙鍚嶄簡鍚楋紵锛熶竴涓槸deploymentsplitting锛屼竴涓槸requestreduction锛屾病姣涚梾锛涢鍏堜簡瑙ｄ竴涓媓ttp璇锋眰鐨勮繃绋嬶紙绠€鍗曢€氫織鐨勮В閲婏級锛欴NS鍩熷悕瑙ｆ瀽-1.鎷垮嚭鎵嬫満锛屾壘鍒颁竴涓仈绯讳汉鐨勭數璇濆彿鐮侊紱鍙戣捣TCP3娆℃彙鎵?2.杩炴帴鍚庡瘑鐮侊細A),浣犲ソ锛屼綘濂斤紝鎴戞槸闀挎睙涓€鍙凤紝浣犺兘鍚埌鍚楋紵B)銆佷綘濂斤紝杩欓噷鏄暱姹熶簩鍙凤紝鎴戣兘鍚埌浣狅紝浣犺兘鍚埌鎴戝悧锛烝)銆佹垜鑳藉惉鍒帮紝瑷€褰掓浼犫€︹€︼紱姝ｅ父鐨勬暟鎹紶杈?..-3.鑱婄殑寰堝棬锛?浼犺緭缁撴潫锛岄摼鎺ユ柇寮€鏃舵尌鎵?4.鑱婂ぉ缁撴潫锛屽噯澶囪鍐嶈锛欰),(鍙互鏄湇鍔＄涔熷彲浠ユ槸瀹㈡埛绔?鎴戣璇寸殑閮借瀹屼簡锛屼綘鐪嬪浘鍑烘潵;B)銆佸ソ鐨勶紝鎴戣瀹屼簡锛汢),(B鐒跺悗鍙戜俊鎭粰A),鍐嶈锛汚)锛岀劧鍚嶢鏀跺埌浜咮鐨勮瘽锛孊宸茬粡鏀句笅鐢佃瘽鎸傛柇浜嗭紝A绛変簡涓€浼氬効锛屽惉鍒癇娌¤浠€涔堬紝灏辨寕浜嗙數璇?鎬庝箞浜嗭紝璐变汉鏃犳儏锛屾紨鍛樻棤鎯呭拰浣犺亰浜嗚繖涔堜箙锛屾垜閮戒笉缁欎綘濂借瘎~馃槀锛夛紱褰撶劧鐜板湪鐨凥TTP/2.0娴佺▼涓嶄竴鏍蜂簡锛?.0娴佺▼杩樻湁TLS/SSL澶勭悊銆侶TTP鏄竴绉嶈秴鏂囨湰浼犺緭鈥嬧€嬪崗璁紝淇℃伅鏄槑鏂囩殑HTTPS鏄竴绉嶅畨鍏ㄧ殑SSL锛圕ertificateAuthority锛岃瘉涔︾敵璇凤級鍔犲瘑浼犺緭鍗忚锛孒TTPS鍔犲瘑浼犺緭锛岃韩浠借璇佺綉缁滃崗璁紝鍐呭浼犺緭缁忚繃瀹屾暣鎬ч獙璇侊紝鍐呭杩涜瀵圭О鍔犲瘑锛屽苟涓旀瘡涓繛鎺ョ敓鎴愪竴涓敮涓€鐨勫姞瀵嗗瘑閽ワ紝绗笁鏂规棤娉曚吉閫犳湇鍔″櫒锛堝鎴风锛夌殑韬唤濂藉鏈夊緢澶氾紝姣斿鍓湰锛屼絾鏄篃鏈夊潖澶勶紝鍥犱负涓棿杩炴帴鐨勬鏁颁篃闇€瑕佹椂闂达紝杩欐槸HTTPS鍙樻參鐨勬牴鏈師鍥犱笉閿欙紝涓嬫鏈夋椂闂磋ˉ涓奌TTP/2.0鐨勫浘鐗囥€備竴涓ぇ浣寚鐐规垜銆備粬璇磋繖鏍风湅璧锋潵鏇撮湼姘旓紝澶у浼氭洿鍠滄锛屽搱鍝垀锛氱粨璇細浠庝笂闈㈢殑娴佺▼鍙互鐪嬪嚭锛屾瘡涓姹傞兘杩欎箞澶嶆潅锛屾槸涓嶆槸鏈夊繀瑕佸噺灏慼ttp璇锋眰鐨勬鏁帮紵锛熺瓟妗堟槸鑲畾鐨勶紝鎴戜滑浼氬湪浠ヤ笅鍑犱釜缁村害杩涜浼樺寲锛氬悎骞禞S鍜孋SS鏂囦欢锛涘悎骞跺浘鍍?鍥炬爣绮剧伒锛屾垨浣跨敤iconfont瀛椾綋鍥炬爣锛屾垨SVG绮剧伒锛涗粈涔堟槸Svg绮剧伒锛熻祫婧愭寜闇€鍔犺浇锛屽嵆鍔犺浇褰撳墠椤甸潰浣跨敤鐨勪换浣曚笢瑗匡紝閬垮厤鍔犺浇涓庡綋鍓嶉〉闈㈡棤鍏崇殑涓滆タ銆傚湪杩欐柟闈紝鐩墠鍩轰簬webpack缂栬瘧鎵撳寘宸ュ叿鐨凴eact/Vue/Angular绛塎VVM妗嗘灦鍋氬緱寰堝ソ锛涘墠绔暟鎹紦瀛橈紙姣斿锛氫竴涓垪琛ㄩ〉锛岃緭鍏ヨ鎯咃紝鐒跺悗杩斿洖銆傝繖涓敤鎴风殑浜や簰琛屼负闈炲父棰戠箒锛屽彲浠ョ紦瀛樺垪琛ㄧ殑鏁版嵁杩涘害锛屼笉鐢ㄦ瘡娆¤繑鍥為兘鍔犺浇锛屾瘮濡傛瘡娆℃洿鏂?鍒嗛挓銆?.鏁版嵁璁剧疆缂撳瓨锛屽啓鐨勫お绱簡锛宧ttp缂撳瓨璁剧疆锛屼箣鍓嶇殑闈㈣瘯鎬荤粨馃憠濡備綍璁剧疆http缂撳瓨锛?.鍦ㄧ珯鐐规湇鍔″櫒涓婃墦寮€Gzip鍘嬬缉銆傚綋鐒讹紝浣犱篃鍙互浜嗚В涓€涓婤rotli鎴栬€匷opfli銆傛嵁璇碆rotli姣擥zip鍜孌eflate鏇存湁鏁堛€傛湁鍏磋叮鐨勫悓瀛﹀彲浠ヤ簡瑙ｄ竴涓嬶紱8銆侀伩鍏嶉噸瀹氬悜锛屽敖閲忓噺灏慽frame鐨勪娇鐢紝瀹冧細闃诲涓婚〉闈㈢殑娓叉煋锛?銆侀伩鍏嶄娇鐢–SSExpression锛圕SS琛ㄨ揪寮忥級锛屼篃绉颁负鍔ㄦ€佸睘鎬э紙dynamicproperties锛夛紱10銆乨ns-prefetch,prefetch,preload,defer,async鐨勫悎鐞嗕娇鐢細dns-prefetch锛氫娇鐢╠ns-prefetch瀵归」鐩腑浣跨敤鐨勫煙鍚嶈繘琛孌NS棰勮В鏋愶紝鍑忓皯DNS鏌ヨ锛屽锛?linkrel="dns-prefetch"href="//honeybadger8.github.io"/>;鍚勫ぇBAT宸ㄥご閮芥槸杩欐牱鍋氱殑锛岃鐪嬩笅鍥撅紝浠婂ぉ灏变笉璇磀ns鐨勮缁嗗垎鏋愯繃绋嬩簡锛岀爜瀛椾笉鍔紝鍐欏垎浜瘮鍔犵彮鍋氶」鐩繕绱紝甯屾湜浣犳噦鐨剘;prefetch锛氭槸涓€涓祫婧愬姞杞芥爣蹇楋紝浼樺厛绾у緢浣庯紝娴忚鍣ㄤ細鍦ㄧ┖闂叉椂锛堝嵆涓昏繘绋嬭祫婧愬姞杞藉畬鎴愬悗锛変笅杞藉甫鏈塸refetch鏍囧織鐨勮祫婧愬苟缂撳瓨鍒扮鐩橈紝骞朵細璇诲彇褰撳悗缁ā鍧椾娇鐢ㄨ繖涓枃浠舵椂鐩存帴浠庣紦瀛樹腑鑾峰彇锛涜繖涓姛鑳絯ebpack鏈変竴涓狿lug-ins锛岄厤缃悗缂栬瘧锛屽彲浠ヨ嚜鍔ㄦ彃鍏ュ埌椤甸潰涓紱preload锛氭槸鐨勶紝鏄彲浠ラ鍔犺浇璧勬簮鐨勫睘鎬с€傝鎯呰鍙傝€冨畼鏂笰PI銆備竴鑸儏鍐典笅锛屾垜浠彲鑳戒細棰勫姞杞絘udio銆乮mg銆丗ont銆乻cript绛夎祫婧愶紙鐢氳嚦鏄笅涓€涓矾鐢遍〉闈級锛岃繖鏍峰氨鍙互杈惧埌0绉掓墦寮€椤甸潰鐨勬晥鏋滐紒鏆傛椂鑳芥兂鍒扮殑灏辫繖涔堝锛屾杩庤ˉ鍏呪€︹€︽€荤粨锛氭帹鑽愬伐鍏凤細WebPagetest銆丩ighthouse銆丼peedCurve銆丯ewRelic绛変富鍔?琚姩鐩戞帶宸ュ叿锛屽彲浠ュ府鍔╂垜浠珮鏁堢殑鍒嗘瀽鍜屽彂鐜伴棶棰橈紝浠庤€屽鐥囦笅鑽紱DNS棰勮В鏋愪笉閲嶈銆傚氨鏄粠url鍒拌В鏋怚P锛屾煡璇㈡牴鏈嶅姟鍣ㄧ殑杩囩▼銆備笅娆″彲鑳戒細鎬荤粨鍒嗕韩銆傛湁鍏磋叮鐨勫悓瀛︿篃鍙互鍏堜簡瑙ｄ竴涓嬨€傚仛濂戒竴涓」鐩紝姣忎釜缁嗚妭閮藉緢閲嶈锛屽笇鏈涗粖澶╃殑鍒嗕韩鑳界粰澶у鐨勫伐浣滃甫鏉ヤ竴浜涘府鍔╋紝璋㈣阿锛佹枃绔犲垎浜鍒掞細銆€銆€涓€鐩村湪鎬濊€冨浣曞畾鏈熷垎浜綔鍝佸浗搴嗛噷鐨勭Н绱紝杩欏嚑澶╃湅浜嗗緢澶氬ぇ绁炲啓鐨勫崥瀹€傛渶鍚庯紝缁撳悎鑷繁鐨勮兘鍔涘拰鏃堕棿锛屾垜鍐冲畾灏濊瘯鍦?鍔ㄧ敾#涓婂啓涓€涓郴鍒楁枃绔犮€傚姩鐢诲彲鑳戒富瑕佸寘鎷紙CSS/Canvas锛変袱閮ㄥ垎锛屾杩庡ぇ瀹跺叧娉紒銆€銆€浠ヤ笂灏辨槸浠婂ぉ鐨勫垎浜€備綔涓轰竴涓柊鎵嬶紝鎴戜細鍔姏璁╄嚜宸卞彉寰楁洿濂斤紝鍐欏嚭鏇村ソ鐨勬枃绔犮€傛枃涓鏈夐敊璇紝濡傛灉鎮ㄨ涓烘湰鏂囧鎮ㄦ湁甯姪锛岃鎸囨銆傚鏋滃浣犳湁甯姪锛屾劅瑙変笉閿欙紝璁板緱鍏虫敞鎴戜滑鐨勫叕浼楀彿锛侊紒鏇村鏂囩珷锛氬仛瀹屽皬绋嬪簭椤圭洰锛岃€佹澘缁欐垜鍔犱簡6k宸ヨ祫~闈㈣瘯韪╃殑鍧戦兘鍦ㄨ繖閲屼簡~localStorage濡備綍璁剧疆杩囨湡鏃堕棿锛熶竴姝ユ鏁欎綘鐢昏窇杞﹀浣曠敤CSS3鐢诲嚭鐪嬪緱鎳備綘鐨?D榄旀柟锛烻VGSpritesIconimmutability鐨勪娇鐢ㄦ妧宸у洜React鐨勬寮忎寒鐩歌€屾€荤粨鍒嗕韩锛佷綔鑰咃細鑻忓崡-棣栧腑濉潙瀹樹氦娴佺兢锛?12594095锛屽叕浼楀彿锛歨oneyBadger8鏈枃涓哄師鍒涳紝鐗堟潈褰掍綔鑰呮墍鏈夈€傚晢涓氳浆杞借鑱旂郴@IT路骞冲ご鍝ヨ仈鐩熻幏寰楁巿鏉冦€傞潪鍟嗕笟杞浇璇锋敞鏄庡師鏂囬摼鎺ュ拰鍑哄銆?/p>
