Posted 2021-04-18 鎿庡垱澶忔礇鍏婣IOps

浠婂ぉ鍚煈嗗摜璇达紙鍚癸級鍒颁粬浠綉绔欑敤HTTP2鎺ㄩ€佹帴鍙ｈ姹傛瀬澶х殑鍔犲揩鐨勭綉绔欒闂€熷害銆傚叾瀹炴垜鍦ㄥ幓骞寸爺绌?HTTP2_push 鏃跺氨鎯冲埌浜嗚繖涓儏褰€?/p>

鏄惁闇€瑕?push 闈欐€佽祫婧愭槸鏈夌枒闂殑锛氱敱浜庣紦瀛樼殑瀛樺湪锛屼綘涓嶈兘纭繚瀹㈡埛绔湡鐨勯渶瑕佽繖涓枃浠躲€傝櫧鐒舵祻瑙堝櫒鍙互涓诲姩闃绘 PUSH 甯х殑鍙戦€侊紝浣嗘槸瀵逛簬宸插彂鍑虹殑甯ф棤鑳戒负鍔涖€?/p>

鎺ュ彛璇锋眰灏变笉瀛樺湪杩欎釜鎯呭喌锛氬洜涓哄畠浠兘涓嶄細琚紙琚紑鍙戣€呯鎺変簡锛夋祻瑙堝櫒缂撳瓨锛屾瘡娆℃墦寮€椤甸潰閮介渶瑕侀噸鏂板姞杞姐€傛墍浠ユ帹閫佹帴鍙ｈ姹傛€绘槸姝ｇ‘鐨勯€夋嫨銆?/p>

Nginx 1.13.9 灏卞鍔犱簡 HTTP2_Push 鏀寔銆侼ginx 寮€鍚?HTTP2 鎺ㄩ€佹湁涓ょ鏂规硶銆?/p>

http2_push 鎸囦护

寮哄埗鎺ㄩ€佹煇 URL銆傜敤娉曞氨鏄細

http2_push URL;

浠ョ湅鍒帮紝瀵逛簬鏈嶅姟绔帹閫佺殑甯э紝娴忚鍣ㄤ細绛夊埌瀹為檯鏈夎姹傛椂鍐嶅幓瑙ｆ瀽銆?/p>

http2_push_preload 鎸囦护

Nginx 浼氳В鏋愰鍔犺浇 Link 澶村姩鎬佺殑鎺ㄩ€佹煇 URL銆傜敤娉曚负锛?/p>

http2_push_preload on;add_header Link "<URL>; rel=preload; as=TYPE; [crossorigin]";

add_header Link "</restapi/shopping/v1/cities>; rel=preload; as=fetch; crossorigin";

杩欐牱鐨勮瘽锛孨ginx 鍚屾牱浼氭帹閫佽繖涓?API 璧勬簮銆備笉鍚岀殑鏄紝娴忚鍣ㄧ敱浜庢敹鍒颁簡 preload_link 澶达紝鍚屾椂浼氶鍔犺浇杩欎釜璧勬簮銆?/p>

鐪嬪埌锛屽浜庢湇鍔＄鎺ㄩ€佺殑甯э紝娴忚鍣ㄤ細鍦ㄦ帴鏀跺畬姣曞悗绔嬪嵆瑙ｆ瀽

鑷充簬鍝鎯呭喌鏇村ソ锛屽悇浣嶈鑰呰嚜宸卞彇鑸嶃€?/p>

瀹?/span>

绀轰緥涓敤鍒扮殑浠ｇ爜

setTimeout(() => {  const xhr = new XMLHttpRequest();
  xhr.responseType = 'json';
  xhr.onload = e => {    console.log(xhr.response);    document.querySelector('pre').textContent = JSON.stringify(xhr.response, null, 2);
  };
  xhr.open('GET', '/restapi/shopping/v1/cities');
  xhr.send();
}, 1000);

鍙傝€冮摼鎺ワ細

1. https://bugs.chromium.org/p/c...

2. https://developer.mozilla.org...

3. https://w3c.github.io/preload/

4. https://jakearchibald.com/201...

PS锛歨ttp2_push_preload 鐨勬洿楂樼鐢ㄦ硶鍙兘鏄娇鐢?nbsp;njs 鎴?nbsp;openresty 鍔ㄦ€佹坊鍔?Link 澶村疄鐜板姩鎬佹帹閫佽祫婧愶紙渚嬪鏍规嵁涓嶅悓鐨勭敤鎴锋帹閫佷笉鍚岃祫婧愶級
PS2锛氬鏋滀娇鐢?Link 澶存帹閫?API 璧勬簮锛屼竴瀹氳娣诲姞 crossorigin 鍙傛暟锛屽惁鍒欐祻瑙堝櫒涓嶄細浣跨敤鏀跺埌鐨?PUSH 鏁版嵁
PS3锛氱粡娴嬭瘯灏辩畻鍔犱簡 crossorigin 澶?Chrome 涔熶笉涓€瀹氫細鐢ㄦ敹鍒扮殑 PUSH 鏁版嵁锛堣€?Firefox 浼氾紝鍙兘鏄?bug锛夛紝浣跨敤 http2_push 鏄渶淇濋櫓鐨勬柟寮?/p>

---

澶忔礇鍏?AIOps

Make Data Think

浜哄伐鏅鸿兘 | 鏈哄櫒瀛︿範 | IT杩愮淮