400% 鐨勯璺冿紞web 椤甸潰鍔犺浇閫熷益浼樺寲瀹炴垬(杞
鏉ユ簮锛歨ttps://www.rapospectre.com/blog/web-page-loading-optimize-guide
鍓嶈█
聽
涓€涓綉绔欑殑鍔犺浇閫熷害鏈夊閲嶈锛?鍙嶆鎴戠浉淇′箣鍓嶆潵鍗氫富缃戠珯鐨勪汉鑷冲皯鏈?50% 鍦ㄥ姞杞藉畬鎴愬墠鍏抽棴浜嗘湰绔欍€?涓哄暐鎹忥紵 鐪嬪浘
聽
聽
棣栭〉瀹屾暣鍔犺浇鏃堕棿 8.18s锛岀湅鏉ヨ兘杩涙潵鐪嬪崥涓荤綉绔欑殑浜洪兘鏄湡鐖卞憖锛屽搱鍝堛€?姝ｅ父鏉ヨ涓€涓綉椤?4s 鍔犺浇涓嶅畬灏变細娴佸け寰堝ぇ涓€閮ㄥ垎鐢ㄦ埛锛岃€屽崥涓荤殑缃戠珯鍔犺浇鏃堕棿绔熺劧杈惧埌浜?8s 銆傝繖杩樻槸鍦ㄧ數鑴戠锛屽鏋滃湪绉诲姩绔紝鍔犺浇鏃堕棿浼氭洿涔咃紝浣撻獙浼氭洿宸€?杩欐牱鐨勮瘽缃戠珯鍋氬緱鍐嶉毦鐪嬶紝鎵瑰垽鑰呰繘涓嶆潵涓嶆槸鐧芥惌鍢涳紝浜庢槸閽堝 web 椤甸潰鍔犺浇閫熷害鐨勪紭鍖栬揩鍦ㄧ湁鐫€?/span>
聽
鍩轰簬鍗氫富浠ュ墠浼樺寲杩囧叾浠栫綉绔欙紝浜庢槸鍗氫富鍑嗗鎶婅繖娆＄殑浼樺寲杩囩▼璁板綍涓嬫潵鍒嗕韩缁欏ぇ瀹跺€熼壌銆?/span>
聽
1. 椤甸潰鍒嗘瀽
聽
鍏堟潵鐪嬩紭鍖栧墠鐨勯〉闈細
聽
鍔犺浇鏃堕棿 8.18s 锛屼竴鍏?33 涓?璇锋眰锛屽姞杞?1.38MB 銆?鍙互鐪嬪埌瀵逛簬缃戦€熻緝鎱㈢殑娴忚鑰呭厜鍔犺浇璧勬簮灏遍渶瑕?5s 浠ヤ笂锛屽啀鍔犱笂 33 涓姹傚垏鎹㈠紑閿€锛岀畝鐩翠笉鑳芥剦蹇殑鐜╄€嶃€?鎵€浠ユ帴涓嬫潵鐨勪紭鍖栨墜娈靛氨瑕佷粠鍔犺浇娴侀噺鍜岃姹傛暟閲忓叆鎵嬶細
聽
2. 浼樺寲鍥剧墖
聽
鍥剧墖鍦ㄧ綉缁滄祦閲忎腑鍗犳湁寰堝ぇ鐨勬瘮閲嶏紝鍥犳浼樺寲鍥剧墖瀵逛簬鍑忓皯娴侀噺鏈夌潃鑷冲叧閲嶈鐨勪綔鐢ㄣ€?/span>
聽
鍚堝苟灏忓浘鐗?
聽
寰堝椤甸潰鏈夊緢澶氬皬鍥炬爣锛屼竴涓竴涓姞杞藉氨鐩稿綋浜庝竴涓竴涓姹傦紝灏嗚繖浜涘皬鍥剧墖鍚堝苟鎴愪竴涓ぇ鍥剧墖锛岀敤css 鎺у埗鏄剧ず鑼冨洿锛岃繖鏍峰氨鍙渶瑕佷竴涓姹傚嵆鍙姞杞藉畬鎵€鏈夊皬鍥剧墖锛岀灛闂村氨浼氬噺灏戝緢澶氱綉缁滆姹傘€?/span>
聽
浼樺寲鍥剧墖鏍煎紡锛?/span>
聽
寰堝鍥剧墖娌℃湁缁忚繃浼樺寲鐩存帴涓婁紶鍒扮綉椤典腑浼氬崰鐢ㄥ緢澶氶澶栫殑娴侀噺锛屾瘮濡備竴寮犲睆骞曞ぇ灏忕殑鎴浘锛岀敤鎴浘宸ュ叿鐩存帴鎴浘鍚庣殑澶у皬澶ф鏈?1MB 锛屾鏃剁洿鎺ヤ笂浼犲埌缃戦〉涓氨鐩存帴鍗犵敤浜?1MB 娴侀噺锛屼絾鍏跺疄鎴戜滑瀹屽叏鍙互鍙壓鐗插畠 40% 鐨勮川閲忔崲鍙栫缉灏?10 鍊嶇殑澶у皬锛岀綉涓婃湁寰堝杞寲 web 鍥剧墖鐨勭綉绔欙紝褰撶劧濡傛灉浣犳湁 photoshop 鐨勮瘽瀹屽叏鍙互鑷繁瀵煎嚭锛?/span>
聽
灏嗗浘鐗囧湪 ps 涓墦寮€锛岀劧鍚庣偣鍑昏彍鍗曟爮 鈥滄枃浠垛€?鑿滃崟锛岄€夋嫨 鈥滃偍瀛樹负 web 鎵€鐢ㄦ牸寮忊€濓紝鍑虹幇濡備笅瀵硅瘽妗嗭細
聽
聽
涓€鑸儏鍐典笅 jpg 鍥剧墖閫夋嫨鍝佽川涓嵆鍙紝png 鏍煎紡鍥剧墖閫夋嫨 png8 鍗冲彲锛屼絾娉ㄦ剰鏈夐€忔槑鑳屾櫙鐨?png 鍥剧墖瑕侀€夋嫨 png24 锛屽惁鍒欓€忔槑鑳屾櫙涓細鍑虹幇鐧借竟锛実if 鍥剧墖閫夋嫨 gif64 鏃犱豢鑹插嵆鍙€?/span>
聽
涓€鑸粡杩囦紭鍖栫殑鍥剧墖澶у皬鑷冲皯浼氭湁 3鍊?涔嬪樊锛屽浘鐗囧師澶у皬瓒婂ぇ浼樺寲鐨勭粨鏋滀細瓒婂ソ銆?/span>
聽
鍗氫富鐨勭綉绔欐渶鏄剧溂鐨勫浘鐗囧氨鏄〉鐪変笂閭ｄ釜骞介鐨勫浘鐗囧暒锛屾墍浠ュ氨鍏堟嬁瀹冨紑鍒€锛岀粡杩囦互涓婃楠や紭鍖栵細
聽
聽
鐬棿鍑忓皬 4 鍊嶏紝瀹為檯鏁堟灉锛坔ttps://www.rapospectre.com锛夊彲浠ョ湅鐪嬶紝浠ｈ〃鐫€鍗氫富闂ㄩ潰鐨勫浘鐗囩粡杩囦紭鍖栧悗鍜屼紭鍖栧墠鏄剧ず鏁堟灉骞舵病鏈夋槑鏄惧尯鍒紝鑰屾枃浠跺ぇ灏忓嵈鐩稿樊浜?4 鍊嶃€?/span>
聽
3. 浣跨敤鍏嶈垂 cdn 鍔犺浇绗笁鏂硅祫婧?/span>
聽
鎵€鏈夌綉绔欓兘浼氱敤鍒扮涓夋柟璧勬簮锛屽浜庣涓夋柟璧勬簮锛屽鏋滈€夋嫨璁╄嚜宸辩殑鏈嶅姟鍣ㄦ彁渚涳紝閭ｄ箞瀵逛簬灏忓瀷绔欑偣锛屾湰灏变笉澶х殑甯﹀鐩稿綋涓€閮ㄥ垎杩樿琚叕鍏辫祫婧愬崰鐢紝鏃犲舰涔嬩腑鍘嬬缉浜嗘湇鍔″櫒甯﹀锛屽鏋滄妸杩欓儴鍒嗚祫婧愯绗笁鏂?cdn 鎻愪緵锛岄偅涔堝浜庣綉绔欏姞杞介€熷害浼氭湁涓嶅皬鐨勬彁鍗囥€?/span>
聽
鍗氫富閫夌敤鐨勬槸 bootstrap 涓枃绔欐彁渚涚殑 cdn 闈欐€佸簱 锛坔ttps://www.bootcdn.cn/锛夛紝鍗氫富鐪嬭繃涓嶅皯鍥藉唴 cdn 闈欐€佸簱锛屽彲浠ヨ bootstrap 瀹剁殑杩樻槸寰堣壇蹇冪殑锛屾洿鏂板強鏃讹紝璧勬簮鐜板湪涔熷緢涓板瘜锛屽熀鏈崥涓荤敤鐨勪笁鏂硅祫婧愰兘鑳藉湪涓婇潰鎵惧埌锛屼簬鏄帴涓嬫潵灏辨槸鎼滅储闈欐€佽祫婧?锛?鏇挎崲闈欐€佽祫婧愶細
聽
<script src="/s/js/jquery.min.js"></script>
鏀逛负
<script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
聽
杩欓噷涓嶈鍐欏崗璁ご锛岃缃戦〉鑷姩鍒ゆ柇浣跨敤 http 杩樻槸 https 锛?鍏充簬 https 缃戠珯鐨勯儴缃插彲浠ョ湅鍗氫富涔嬪墠鐨勬枃绔狅細 缁欎綘鐨勭綉绔欑┛涓婂琛ｏ紞 HTTPS 鍏嶈垂閮ㄧ讲鎸囧崡 https://www.rapospectre.com/blog/https-deploy-guide锛?/span>
聽
4. 浣跨敤 cdn 鍌ㄥ瓨闈欐€佽祫婧?/span>
聽
涓€鑸綉绔?90% 鐨勬祦閲忛兘鐢ㄤ簬闈欐€佽祫婧愮殑鍔犺浇锛岄櫎浜嗙敤鍏嶈垂 cdn 鍔犺浇绗笁鏂硅祫婧愶紝杩樺彲浠ヨ嚜宸辩敵璇蜂簯绌洪棿鍌ㄥ瓨鑷繁鐨勯潤鎬佽祫婧愶紝杩涗竴姝ュ噺灏忔湇鍔″櫒鐨勫紑閿€锛岃鏈嶅姟鍣ㄥ彧涓撴敞浜庢彁渚涙暟鎹垨鑰呯綉椤垫覆鏌撴湇鍔°€?姣斿鍗氫富浣跨敤鐨勬槸 X鐗?锛屽皢鑷繁鐨勫浘鐗囦粈涔堥兘瀛樺湪 x鐗涗笂锛屾瘡涓湀閮芥湁鍏嶈垂娴侀噺锛屽浜庝釜浜虹綉绔欐潵璇村簲璇ュ鐢ㄣ€?/span>
聽
5. 鍚堝苟鍘嬬缉 js css
聽
闄ゅ幓寮曠敤鍏叡搴擄紝缃戦〉涓繕鏈夎澶氳嚜宸卞啓鐨?js 涓?css锛屽鏋滄垜浠洿鎺ユ妸寮€鍙戠幆澧冪殑鏂囦欢鎷挎潵鐢ㄦ棤鐤戝緢娴垂娴侀噺锛屽洜姝ゅ湪缂栧啓濂界綉椤垫祴璇曞畬姣曞悗锛屾垜浠簲璇ュ皢 css 鍜?js 鍘嬬缉鍚堝苟鎴愪竴涓垨鑰呭嚑涓枃浠讹紝杩欐牱鏃㈠噺灏戜簡璇锋眰娆℃暟鍙堝噺灏戜簡娴侀噺娑堣€楋紝涓€绠弻闆曘€?褰撶劧杩樻湁 html 鍘嬬缉锛屼笉杩?ms 鐜伴樁娈佃繕鏈変竴浜涘潙锛屽氨鍏堜笉鐢ㄤ簡銆?璇村埌鍚堝苟鍘嬬缉锛岀涓€鏃堕棿鎾拷灏辨兂鍒颁簡 webpack 锛屽墠绔伐绋嬪寲绁炲櫒锛岀畝鍗曢厤缃竴涓嬪氨鍙互瀹屽叏鎼炲畾浠诲姟锛?/span>
聽
鍗氫富缃戠珯鑷繁鐨?js 宸ョ▼鏂囦欢鏀惧湪 /webroot/static/src/js/ 涓紝鍋囧鎴戜滑瑕佸皢鍘嬬缉鍚堝苟鍚庣殑鏂囦欢鏀惧湪 /webroot/static/dist/js/ 涓細
聽
鍦?/webroot/ 涓嬫柊寤烘枃浠跺す webpack, 杩涘叆鏂囦欢澶癸紝鏂板缓鏂囦欢 package.json:
聽
{
聽 "name": "RaPo3",
聽 "version": "1.0.0",
聽 "description": "",
聽 "main": "index.js",
聽 "scripts": {
聽 聽 "test": "echo \"Error: no test specified\" && exit 1"
聽 },
聽 "author": "rapospectre",
聽 "license": "ISC",
聽 "devDependencies": {
聽 聽 "css-loader": "^0.24.0",
聽 聽 "style-loader": "^0.13.1",
聽 聽 "webpack": "^1.13.2",
聽 聽 "webpack-dev-server": "^1.15.1"
聽 }
}
聽
淇濆瓨鍚庢墽琛岋細
聽
npm install
//鎴?/span>
cnpm install
//濡傛灉浣犳湁鐨勮瘽
鐒跺悗鏂板缓 webpack 閰嶇疆鏂囦欢 webpack.config.js:
聽
var webpack = require('webpack');
module.exports = {
聽 聽 entry: {
聽 聽 聽 聽 base: ['../static/js/src/http.js', '../static/js/stickUp.min.js', '../static/js/src/base.js'],
聽 聽 聽 聽 index: ['../static/js/src/index.js'],
聽 聽 聽 聽 detail: ['../static/js/editormd.js', '../static/js/src/article.js'],
聽 聽 聽 聽 know: ['../static/js/editormd.js', '../static/js/src/know.js'],
聽 聽 聽 聽 list: ['../static/js/src/list.js']
聽 聽 },
聽 聽 output: {
聽 聽 聽 聽 path: '../static/js/dist/',
聽 聽 聽 聽 filename: '[name].js'
聽 聽 },
聽 聽 plugins: [
聽 聽 聽 聽 new webpack.optimize.UglifyJsPlugin({
聽 聽 聽 聽 聽 聽 output: {
聽 聽 聽 聽 聽 聽 聽 聽 comments: false
聽 聽 聽 聽 聽 聽 },
聽 聽 聽 聽 聽 聽 compress: {
聽 聽 聽 聽 聽 聽 聽 聽 warnings: true
聽 聽 聽 聽 聽 聽 }
聽 聽 聽 聽 }),
聽 聽 ]
}
聽
杩欓噷瑕佹敞鎰忕殑鏄鏋滀綘鐨?js 鏂囦欢闂寸殑寮曠敤鏄紶缁熺殑 html 寮曞叆鍚庡紩鐢ㄩ偅涔堝湪杩欓噷鍚堝苟鏃惰寰楁妸浣犺寮曠敤鐨勬柟娉昞瀵硅薄绛夌瓑璁剧疆涓哄叏灞€锛屾瘮濡?b.js 瑕佸紩鐢?a.js 涓殑鍑芥暟 c锛屽悎骞跺墠瑕佸湪 a.js 涓姞涓婏紙 褰撶劧濡傛灉浣犱竴鐩寸敤 es6/node 鍐?js 灏变笉鐢ㄧ湅杩欓噷浜?锛夛細
聽
window.c = c;
鎴?/span>
this.c = c;
聽
涓嶇劧 c 灏变細琚綋浣滃眬閮ㄥ嚱鏁板皝瑁呰捣鏉ャ€?/span>
聽
鏀瑰畬鍚庤繍琛?webpack 鎻愮ず鎴愬姛鍚庣湅鍒?dist 鐩綍閲屽凡缁忚緭鍑轰簡鍚堝苟鍘嬬缉濂界殑鏂囦欢锛屼箣鍓?12kb 鐨勬枃浠剁粡杩囧帇缂╁悎骞跺悗鍙湁 6kb 澶у皬锛岀劧鍚庢垜浠皢鍏舵浛鎹㈠埌缃戦〉涓嵆鍙€?/span>
聽
6. 浠ｇ爜浼樺寲
聽
椤甸潰浠ｇ爜鐨勪紭鍖栧浜庨〉闈㈠姞杞介€熷害涔熸湁涓嶅皬鐨勫奖鍝嶏紝鏈€骞夸负浜虹煡鐨勶細
聽
HTML澶撮儴鐨凧avaScript鍜屽啓鍦℉TML鏍囩涓殑Style浼氶樆濉為〉闈㈢殑娓叉煋锛屽洜姝SS鏀惧湪椤甸潰澶撮儴骞朵娇鐢↙ink鏂瑰紡寮曞叆锛孞avaScript鐨勫紩鍏ユ斁鍦ㄩ〉闈㈠熬
聽
鍏舵杩樻湁锛?/span>
聽
-
鎸夐渶鍔犺浇锛屾妸缁熻銆佸垎浜瓑 js 鍦ㄩ〉闈?onload 鍚庡啀杩涜鍔犺浇锛屽彲浠ユ彁楂樿闂€熷害锛?/span>
-
浼樺寲 cookie 锛屽噺灏?cookie 浣撶Н锛?/span>
-
閬垮厤 聽鐨?src 涓虹┖锛?/span>
-
灏介噺閬垮厤璁剧疆鍥剧墖澶у皬锛屽娆￠噸璁惧浘鐗囧ぇ灏忎細寮曞彂鍥剧墖鐨勫娆￠噸缁橈紝褰卞搷鎬ц兘锛?/span>
-
鍚堢悊浣跨敤display灞炴€э細
聽聽聽聽聽聽聽聽a.display:inline鍚庝笉搴旇鍐嶄娇鐢╳idth銆乭eight銆乵argin銆乸adding浠ュ強float
聽聽聽聽聽聽聽聽b.display:inline-block鍚庝笉搴旇鍐嶄娇鐢╢loat
聽聽聽聽聽聽聽聽c.display:block鍚庝笉搴旇鍐嶄娇鐢╲ertical-align
聽聽聽聽聽聽聽聽d.display:table-*鍚庝笉搴旇鍐嶄娇鐢╩argin鎴栬€協loat
聽
-
涓嶆互鐢‵loat 鍜?web 瀛椾綋锛?/span>
-
灏介噺浣跨敤CSS3鍔ㄧ敾锛?/span>
-
浣跨敤 ajax 寮傛鍔犺浇閮ㄥ垎璇锋眰锛?/span>
聽
7. HTTP2 涓?gzip
聽
HTTP2 鏄互 SPDY 涓哄熀纭€寮€鍙戠殑銆?SPDY 绯诲垪鍗忚鐢辫胺姝屽紑鍙戯紝浜?2009 骞村叕寮€銆傚畠鐨勮璁＄洰鏍囧氨鏄檷浣?50% 鐨勯〉闈㈠姞杞芥椂闂达紝鎵€浠?HTTP2 鍦ㄥ緢澶х▼搴︿篃鏄负浜嗕紭鍖栭〉闈㈠姞杞芥椂闂达紝鍚屾椂 HTTP2 鏀寔澶氳矾澶嶇敤锛岀畝鍗曡灏辨槸鎵€鏈夌殑璇锋眰閮介€氳繃涓€涓?TCP 杩炴帴骞跺彂瀹屾垚銆?鑰?gzip 澶у閮戒笉闄岀敓锛屽氨鏄竴绉嶅帇缂╃綉椤电殑鎶€鏈紝褰撶劧鍘嬬缉缃戦〉杩涜浼犺緭鐨勪唬浠峰氨鏄粰鏈嶅姟鍣ㄥ鍔犱竴浜涘帇缂╃殑璐熸媴锛屽綋鐒惰繖绉嶇壓鐗叉槸鍊煎緱鐨勩€?/span>
聽
濡備綍寮€鍚?HTTP2 涓?gzip锛?鍗氫富鐨勭綉绔欏熀浜?nginx + uWSGI 杩涜鏈嶅姟锛屽洜姝ゅ彧瑕佸湪 nginx 寮€鍚?HTTP2 涓?gzip 灏卞ソ锛?/span>
聽
寮€鍚?HTTP2
聽
nginx 1.9.5 涔嬪悗鎵嶆敮鎸?HTTP2 锛岃€屼笖闇€瑕侀厤缃紪璇戝弬鏁帮紝鍏充簬 nginx 寮€鍚?HTTP2 璇风洿鎺ョЩ姝ュ崥涓讳箣鍓嶇殑鏂囩珷锛?nginx 閰嶇疆 http2
聽
寮€鍚?gzip
聽
鐩存帴鎵撳紑 nginx 閰嶇疆鏂囦欢, 姣斿鍗氫富鐨勫湪 /etc/nginx/nginx.conf锛?鐒跺悗鍔犱笂锛?/span>
聽
server{
聽 聽 聽 聽 gzip 聽on;
聽 聽 聽 聽 gzip_comp_level 6;
聽 聽 聽 聽 gzip_proxied any;
聽 聽 聽 聽 gzip_types text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript application/x-font-woff;
聽 聽 聽 聽 }
聽
鐒跺悗閲嶅惎 nginx 鍗冲彲
聽
鏈€鍚庯紝璁╂垜浠竻闄ょ紦瀛橈紝鍐嶆鎵撳紑缃戠珯锛?/span>
聽
聽
鎬诲姞杞芥祦閲?527kb 锛岄〉闈㈠畬鎴愬姞杞芥椂闂?1.84s锛屽姣斾箣鍓嶅姞杞芥椂闂?8.18s 锛?.38MB 娴侀噺锛屾暣浣撴椂闂存彁鍗囦簡 4 鍊嶅锛佺敤鎵嬫満绔闂祴璇曪紝绠€鐩村揩鐨勯璧凤紝涓嶄俊浣犱篃鏉ヨ闂? 楠楁祦閲忚劯 )璇曡瘯鍛€锝?/span>
聽
鏈€鍚庯紝闄勪笂鏈枃缃戠珯鐨勬簮鐮佷互鍙婄洰褰曠粨鏋勶紝鍙互閫氳繃 commit 璁板綍鏇村姞鐩磋鐨勭湅鍒颁紭鍖栫殑杩囩▼锛?/span>
聽
https://github.com/bluedazzle/django-vue.js-blog