1 line
22 KiB
JavaScript
1 line
22 KiB
JavaScript
"use strict";(self.webpackChunkjjbook=self.webpackChunkjjbook||[]).push([[8670],{3905:function(e,t,n){n.d(t,{Zo:function(){return k},kt:function(){return d}});var r=n(7294);function l(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function a(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function i(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?a(Object(n),!0).forEach((function(t){l(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):a(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function p(e,t){if(null==e)return{};var n,r,l=function(e,t){if(null==e)return{};var n,r,l={},a=Object.keys(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=0||(l[n]=e[n]);return l}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(l[n]=e[n])}return l}var o=r.createContext({}),u=function(e){var t=r.useContext(o),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},k=function(e){var t=u(e.components);return r.createElement(o.Provider,{value:t},e.children)},c={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},m=r.forwardRef((function(e,t){var n=e.components,l=e.mdxType,a=e.originalType,o=e.parentName,k=p(e,["components","mdxType","originalType","parentName"]),m=u(n),d=l,s=m["".concat(o,".").concat(d)]||m[d]||c[d]||a;return n?r.createElement(s,i(i({ref:t},k),{},{components:n})):r.createElement(s,i({ref:t},k))}));function d(e,t){var n=arguments,l=t&&t.mdxType;if("string"==typeof e||l){var a=n.length,i=new Array(a);i[0]=m;var p={};for(var o in t)hasOwnProperty.call(t,o)&&(p[o]=t[o]);p.originalType=e,p.mdxType="string"==typeof e?e:l,i[1]=p;for(var u=2;u<a;u++)i[u]=n[u];return r.createElement.apply(null,i)}return r.createElement.apply(null,n)}m.displayName="MDXCreateElement"},7565:function(e,t,n){n.r(t),n.d(t,{frontMatter:function(){return p},contentTitle:function(){return o},metadata:function(){return u},toc:function(){return k},default:function(){return m}});var r=n(7462),l=n(3366),a=(n(7294),n(3905)),i=["components"],p={sidebar_label:"\u7efc\u5408\uff1a\u5982\u4f55\u51cf\u5c11\u767d\u5c4f\u7684\u65f6\u95f4",sidebar_position:12},o="\u5982\u4f55\u51cf\u5c11\u767d\u5c4f\u7684\u65f6\u95f4",u={unversionedId:"book3/topic-white-screen-optimization",id:"book3/topic-white-screen-optimization",isDocsHomePage:!1,title:"\u5982\u4f55\u51cf\u5c11\u767d\u5c4f\u7684\u65f6\u95f4",description:"\u56de\u7b54\u5173\u952e\u70b9",source:"@site/docs/book3/topic-white-screen-optimization.md",sourceDirName:"book3",slug:"/book3/topic-white-screen-optimization",permalink:"/awesome-interview/book3/topic-white-screen-optimization",tags:[],version:"current",sidebarPosition:12,frontMatter:{sidebar_label:"\u7efc\u5408\uff1a\u5982\u4f55\u51cf\u5c11\u767d\u5c4f\u7684\u65f6\u95f4",sidebar_position:12},sidebar:"tutorialSidebar",previous:{title:"\u7b97\u6cd5\uff1a\u4e8c\u53c9\u641c\u7d22\u6811\u7684\u7b2c k \u4e2a\u7ed3\u70b9",permalink:"/awesome-interview/book3/algorithm-binary-tree-k"}},k=[{value:"\u56de\u7b54\u5173\u952e\u70b9",id:"\u56de\u7b54\u5173\u952e\u70b9",children:[]},{value:"\u77e5\u8bc6\u70b9\u6df1\u5165",id:"\u77e5\u8bc6\u70b9\u6df1\u5165",children:[{value:"1. \u524d\u7aef\u6027\u80fd\u76d1\u63a7\u6307\u6807",id:"1-\u524d\u7aef\u6027\u80fd\u76d1\u63a7\u6307\u6807",children:[]},{value:"2. DNS \u89e3\u6790\u4f18\u5316",id:"2-dns-\u89e3\u6790\u4f18\u5316",children:[]},{value:"3. TCP \u8fde\u63a5\u4f18\u5316",id:"3-tcp-\u8fde\u63a5\u4f18\u5316",children:[]},{value:"4. \u8bf7\u6c42\u4f18\u5316",id:"4-\u8bf7\u6c42\u4f18\u5316",children:[]},{value:"5. \u9875\u9762\u89e3\u6790\u4f18\u5316",id:"5-\u9875\u9762\u89e3\u6790\u4f18\u5316",children:[]},{value:"6. \u8d44\u6e90\u52a0\u8f7d\u4f18\u5316\u548c\u9875\u9762\u6e32\u67d3\u4f18\u5316",id:"6-\u8d44\u6e90\u52a0\u8f7d\u4f18\u5316\u548c\u9875\u9762\u6e32\u67d3\u4f18\u5316",children:[]},{value:"7. \u63a5\u53e3\u8bf7\u6c42\u4f18\u5316",id:"7-\u63a5\u53e3\u8bf7\u6c42\u4f18\u5316",children:[]}]},{value:"\u6269\u5c55\u9605\u8bfb",id:"\u6269\u5c55\u9605\u8bfb",children:[{value:"1. Native \u76f8\u5173\u4f18\u5316",id:"1-native-\u76f8\u5173\u4f18\u5316",children:[]}]},{value:"\u53c2\u8003\u8d44\u6599",id:"\u53c2\u8003\u8d44\u6599",children:[]}],c={toc:k};function m(e){var t=e.components,n=(0,l.Z)(e,i);return(0,a.kt)("wrapper",(0,r.Z)({},c,n,{components:t,mdxType:"MDXLayout"}),(0,a.kt)("h1",{id:"\u5982\u4f55\u51cf\u5c11\u767d\u5c4f\u7684\u65f6\u95f4"},"\u5982\u4f55\u51cf\u5c11\u767d\u5c4f\u7684\u65f6\u95f4"),(0,a.kt)("h2",{id:"\u56de\u7b54\u5173\u952e\u70b9"},"\u56de\u7b54\u5173\u952e\u70b9"),(0,a.kt)("p",null,(0,a.kt)("inlineCode",{parentName:"p"},"\u8d44\u6e90\u4f18\u5316")," ",(0,a.kt)("inlineCode",{parentName:"p"},"\u9884\u52a0\u8f7d")," ",(0,a.kt)("inlineCode",{parentName:"p"},"\u670d\u52a1\u7aef\u6e32\u67d3")," ",(0,a.kt)("inlineCode",{parentName:"p"},"\u6027\u80fd\u76d1\u63a7\u6307\u6807")," ",(0,a.kt)("inlineCode",{parentName:"p"},"HTTP/2")),(0,a.kt)("p",null,"\u524d\u7aef\u6027\u80fd\u4f18\u5316\u662f\u524d\u7aef\u5f00\u53d1\u4e2d\u4e00\u4e2a\u91cd\u8981\u73af\u8282\uff0c\u5b83\u5305\u62ec\u5f88\u591a\u5185\u5bb9\uff0c\u5176\u4e2d\u9875\u9762\u7684\u767d\u5c4f\u65f6\u95f4\u662f\u7528\u6237\u6700\u521d\u63a5\u89e6\u5230\u7684\u90e8\u5206\uff0c\u767d\u5c4f\u65f6\u95f4\u8fc7\u957f\u4f1a\u663e\u8457\u5f71\u54cd\u7528\u6237\u7684\u7559\u5b58\u7387\u548c\u8f6c\u6362\u7387\u3002"),(0,a.kt)("p",null,"\u6211\u4eec\u4ee5\u4e00\u4e2a APP \u5185\u5d4c Webview \u6253\u5f00\u9875\u9762\u4f5c\u4e3a\u4f8b\u5b50\uff0c\u6765\u5206\u6790\u9875\u9762\u6253\u5f00\u8fc7\u7a0b\u4ee5\u53ca\u53ef\u4f18\u5316\u7684\u65b9\u5411\uff1a"),(0,a.kt)("ol",{start:0},(0,a.kt)("li",{parentName:"ol"},"\u524d\u7f6e\u6761\u4ef6",(0,a.kt)("ul",{parentName:"li"},(0,a.kt)("li",{parentName:"ul"},"\u6027\u80fd\u76d1\u63a7\u6307\u6807"))),(0,a.kt)("li",{parentName:"ol"},"APP \u5185\u70b9\u51fb\u6253\u5f00\u9875\u9762"),(0,a.kt)("li",{parentName:"ol"},"DNS \u89e3\u6790",(0,a.kt)("ul",{parentName:"li"},(0,a.kt)("li",{parentName:"ul"},"\u9884\u89e3\u6790"),(0,a.kt)("li",{parentName:"ul"},"\u57df\u540d\u6536\u655b"))),(0,a.kt)("li",{parentName:"ol"},"TCP \u8fde\u63a5",(0,a.kt)("ul",{parentName:"li"},(0,a.kt)("li",{parentName:"ul"},"\u9884\u8fde\u63a5"))),(0,a.kt)("li",{parentName:"ol"},"\u53d1\u9001\u5e76\u54cd\u5e94\u8bf7\u6c42",(0,a.kt)("ul",{parentName:"li"},(0,a.kt)("li",{parentName:"ul"},"HTTP/2"))),(0,a.kt)("li",{parentName:"ol"},"\u6d4f\u89c8\u5668\u89e3\u6790\u9875\u9762",(0,a.kt)("ul",{parentName:"li"},(0,a.kt)("li",{parentName:"ul"},"\u670d\u52a1\u7aef\u6e32\u67d3"))),(0,a.kt)("li",{parentName:"ol"},"\u52a0\u8f7d\u8d44\u6e90\u5e76\u6e32\u67d3\u9875\u9762",(0,a.kt)("ul",{parentName:"li"},(0,a.kt)("li",{parentName:"ul"},"\u9aa8\u67b6\u5c4f"),(0,a.kt)("li",{parentName:"ul"},"\u8d44\u6e90\u4f18\u5316"),(0,a.kt)("li",{parentName:"ul"},"\u8d44\u6e90\u9884\u52a0\u8f7d"))),(0,a.kt)("li",{parentName:"ol"},"\u8bf7\u6c42\u63a5\u53e3\uff0c\u83b7\u53d6\u6570\u636e\u5e76\u6e32\u67d3",(0,a.kt)("ul",{parentName:"li"},(0,a.kt)("li",{parentName:"ul"},"\u63a5\u53e3\u9884\u52a0\u8f7d"),(0,a.kt)("li",{parentName:"ul"},"\u63a5\u53e3\u5408\u5e76")))),(0,a.kt)("h2",{id:"\u77e5\u8bc6\u70b9\u6df1\u5165"},"\u77e5\u8bc6\u70b9\u6df1\u5165"),(0,a.kt)("h3",{id:"1-\u524d\u7aef\u6027\u80fd\u76d1\u63a7\u6307\u6807"},"1. \u524d\u7aef\u6027\u80fd\u76d1\u63a7\u6307\u6807"),(0,a.kt)("p",null,"\u6027\u80fd\u4f18\u5316\u7684\u524d\u7f6e\u6761\u4ef6\u662f\u6027\u80fd\u6709\u6d4b\u91cf\u6807\u51c6\u5e76\u53ef\u4ee5\u88ab\u76d1\u63a7\u3002\u5e38\u7528\u7684\u6027\u80fd\u76d1\u63a7\u6307\u6807\u6709\u4ee5\u4e0b\u51e0\u5757\u3002"),(0,a.kt)("p",null,"Navigation Timing API\uff1a"),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},"responseStart - fetchStart\uff1a\u6536\u5230\u9996\u5b57\u8282\u7684\u8017\u65f6"),(0,a.kt)("li",{parentName:"ul"},"domContentLoadedEventEnd\xa0- fetchStart\uff1aHTML \u52a0\u8f7d\u5b8c\u6210\u8017\u65f6"),(0,a.kt)("li",{parentName:"ul"},"loadEventStart - fetchStart\uff1a\u9875\u9762\u5b8c\u5168\u52a0\u8f7d\u8017\u65f6"),(0,a.kt)("li",{parentName:"ul"},"domainLookupEnd - domainLookupStart\uff1aDNS \u89e3\u6790\u8017\u65f6"),(0,a.kt)("li",{parentName:"ul"},"connectEnd - connectStart\uff1aTCP \u8fde\u63a5\u8017\u65f6"),(0,a.kt)("li",{parentName:"ul"},"responseStart - requestStart\uff1aTime to First Byte\uff08TTFB\uff09"),(0,a.kt)("li",{parentName:"ul"},"responseEnd - responseStart\uff1a\u6570\u636e\u4f20\u8f93\u8017\u65f6"),(0,a.kt)("li",{parentName:"ul"},"domInteractive - responseEnd\uff1aDOM \u89e3\u6790\u8017\u65f6"),(0,a.kt)("li",{parentName:"ul"},"loadEventStart - domContentLoadedEventEnd\uff1a\u8d44\u6e90\u52a0\u8f7d\u8017\u65f6\uff08\u9875\u9762\u4e2d\u540c\u6b65\u52a0\u8f7d\u7684\u8d44\u6e90)")),(0,a.kt)("p",null,"Lighthouse Performance\uff1a"),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},"FP\uff08First Paint\uff09\uff1a\u9996\u6b21\u7ed8\u5236"),(0,a.kt)("li",{parentName:"ul"},"FCP\uff08First Contentful Paint\uff09\uff1a\u9996\u6b21\u5185\u5bb9\u7ed8\u5236"),(0,a.kt)("li",{parentName:"ul"},"FMP\uff08First Meaningful Paint\uff09\uff1a\u9996\u6b21\u6709\u6548\u7ed8\u5236"),(0,a.kt)("li",{parentName:"ul"},"LCP\uff08Largest Contentful Paint\uff09\uff1a\u6700\u5927\u53ef\u89c1\u5143\u7d20\u7ed8\u5236"),(0,a.kt)("li",{parentName:"ul"},"TTI\uff08Time to Interactive\uff09\uff1a\u53ef\u4ea4\u4e92\u65f6\u95f4"),(0,a.kt)("li",{parentName:"ul"},"TTFB\uff08Time to First Byte\uff09\uff1a\u6d4f\u89c8\u5668\u63a5\u6536\u7b2c\u4e00\u4e2a\u5b57\u8282\u7684\u65f6\u95f4")),(0,a.kt)("p",null,"\u9664\u4e86\u4e0a\u9762\u4e4b\u5916\uff0cUC \u5185\u6838\u4e5f\u6709\u4e00\u5957\u6027\u80fd\u76d1\u63a7\u6307\u6807\uff1a"),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},"T0\uff1aBlink \u6536\u5230 HTTP Head \u7684\u65f6\u95f4\u3002"),(0,a.kt)("li",{parentName:"ul"},"T1\uff1a\u9996\u5c4f\u6709\u5185\u5bb9\u663e\u793a\u7684\u65f6\u95f4\u3002"),(0,a.kt)("li",{parentName:"ul"},"T2\uff1a\u9996\u5c4f\u5168\u90e8\u663e\u793a\u51fa\u6765\u7684\u65f6\u95f4\u3002")),(0,a.kt)("h3",{id:"2-dns-\u89e3\u6790\u4f18\u5316"},"2. DNS \u89e3\u6790\u4f18\u5316"),(0,a.kt)("p",null,"DNS \u89e3\u6790\u4f18\u5316\u662f\u6027\u80fd\u4f18\u5316\u91cd\u8981\u7684\u4e00\u73af\uff0cDNS \u7684\u4f5c\u7528\u662f\u6839\u636e\u57df\u540d\u83b7\u53d6\u5bf9\u5e94\u7684 IP \u5730\u5740\uff0c\u83b7\u53d6\u4e4b\u540e\u540e\u7eed\u7684 HTTP \u6d41\u7a0b\u624d\u80fd\u8fdb\u884c\u4e0b\u53bb\u3002"),(0,a.kt)("p",null,"DNS \u89e3\u6790\u662f\u4e00\u4e2a\u5f00\u9500\u8f83\u5927\u7684\u8fc7\u7a0b\uff0c\u4e00\u6b21 DNS \u89e3\u6790\u901a\u5e38\u9700\u8981\u8017\u8d39\u51e0\u5341\u5230\u4e0a\u767e\u6beb\u79d2\uff0c\u800c\u5728\u79fb\u52a8\u7aef\u7f51\u7edc\u6216\u5176\u4ed6\u5f31\u7f51\u73af\u5883\u4e0b DNS \u89e3\u6790\u5ef6\u8fdf\u4f1a\u66f4\u52a0\u4e25\u91cd\uff0c\u5bf9 DNS \u89e3\u6790\u4f18\u5316\u5219\u53ef\u4ee5\u51cf\u5c11\u8fd9\u4e00\u6b65\u9aa4\u7684\u8017\u65f6\u3002"),(0,a.kt)("h4",{id:"21-dns-\u9884\u89e3\u6790"},"2.1 DNS \u9884\u89e3\u6790"),(0,a.kt)("p",null,"\u6211\u4eec\u53ef\u4ee5\u901a\u8fc7 DNS \u9884\u89e3\u6790\u7684\u65b9\u5f0f\u63d0\u524d\u83b7\u53d6 IP \u5730\u5740\uff0c\u4ee5\u7f29\u77ed\u540e\u7eed\u8bf7\u6c42\u7684\u54cd\u5e94\u65f6\u95f4\u3002"),(0,a.kt)("p",null,"\u524d\u7aef\u53ef\u4ee5\u901a\u8fc7 ",(0,a.kt)("inlineCode",{parentName:"p"},"dns-prefetch")," \u9884\u89e3\u6790\uff0c\u5177\u4f53\u65b9\u5f0f\u5982\u4e0b\uff1a"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-html"},'<link rel="dns-prefetch" href="https://hzfe.org/" />\n')),(0,a.kt)("h4",{id:"22-\u57df\u540d\u6536\u655b"},"2.2 \u57df\u540d\u6536\u655b"),(0,a.kt)("p",null,"\u57df\u540d\u6536\u655b\u7684\u76ee\u7684\u662f\u51cf\u5c11\u9875\u9762\u4e2d\u57df\u540d\u7684\u6570\u91cf\uff0c\u4ece\u800c\u51cf\u5c11\u6240\u9700\u7684 DNS \u89e3\u6790\u6b21\u6570\uff0c\u6700\u7ec8\u51cf\u5c11\u9875\u9762\u7684 DNS \u89e3\u6790\u8fc7\u7a0b\u7684\u8017\u65f6\uff0c\u52a0\u5feb\u9875\u9762\u52a0\u8f7d\u901f\u5ea6\u3002"),(0,a.kt)("h3",{id:"3-tcp-\u8fde\u63a5\u4f18\u5316"},"3. TCP \u8fde\u63a5\u4f18\u5316"),(0,a.kt)("p",null,"\u524d\u7aef\u53ef\u4ee5\u901a\u8fc7 ",(0,a.kt)("inlineCode",{parentName:"p"},"preconnect")," \u5728\u8bf7\u6c42\u53d1\u9001\u524d\u9884\u5148\u6267\u884c\u4e00\u4e9b\u64cd\u4f5c\uff0c\u8fd9\u4e9b\u64cd\u4f5c\u5305\u62ec DNS \u89e3\u6790\uff0cTCP \u63e1\u624b \u548c TLS \u534f\u5546\u3002\u5177\u4f53\u65b9\u5f0f\u5982\u4e0b\uff1a"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-html"},'<link href="https://hzfe.org" rel="preconnect" />\n')),(0,a.kt)("h3",{id:"4-\u8bf7\u6c42\u4f18\u5316"},"4. \u8bf7\u6c42\u4f18\u5316"),(0,a.kt)("p",null,"\u901a\u8fc7\u4f7f\u7528 HTTP/2 \u534f\u8bae\uff0c\u53ef\u4ee5\u4f9d\u8d56 HTTP/2 \u7684\u591a\u8def\u590d\u7528\u3001\u9996\u90e8\u538b\u7f29\u3001\u4e8c\u8fdb\u5236\u5206\u5e27\u548c\u670d\u52a1\u7aef\u63a8\u9001\u7b49\u7279\u6027\uff0c\u4ece\u800c\u52a0\u5feb\u6574\u4f53\u8bf7\u6c42\u7684\u54cd\u5e94\u901f\u5ea6\uff0c\u52a0\u5feb\u9875\u9762\u7684\u6e32\u67d3\u5c55\u793a\u3002"),(0,a.kt)("h3",{id:"5-\u9875\u9762\u89e3\u6790\u4f18\u5316"},"5. \u9875\u9762\u89e3\u6790\u4f18\u5316"),(0,a.kt)("p",null,"\u6d4f\u89c8\u5668\u83b7\u53d6 HTML \u6587\u4ef6\u540e\uff0c\u9700\u8981\u5bf9 HTML \u89e3\u6790\uff0c\u7136\u540e\u624d\u80fd\u5f00\u59cb\u6e32\u67d3\u9875\u9762\uff0c\u8fd9\u4e2a\u8fc7\u7a0b\u4e2d\u9875\u9762\u4e5f\u662f\u5904\u4e8e\u767d\u5c4f\u72b6\u6001\u3002\u901a\u8fc7\u5bf9\u8fd9\u4e00\u8fc7\u7a0b\u8fdb\u884c\u4f18\u5316\u53ef\u4ee5\u52a0\u5feb\u9875\u9762\u7684\u6e32\u67d3\u5c55\u793a\u3002"),(0,a.kt)("h4",{id:"51-\u670d\u52a1\u7aef\u6e32\u67d3server-side-rendering"},"5.1 \u670d\u52a1\u7aef\u6e32\u67d3\uff08Server-Side Rendering\uff09"),(0,a.kt)("p",null,"\u76ee\u524d\u6d41\u884c\u7684\u524d\u540e\u7aef\u5206\u79bb\u7684\u5f00\u53d1\u6a21\u5f0f\uff0c\u7531\u4e8e\u524d\u7aef\u9700\u8981\u7b49\u5f85 JS \u6587\u4ef6\u548c\u63a5\u53e3\u52a0\u8f7d\u5b8c\u6210\u4e4b\u540e\u624d\u80fd\u6e32\u67d3\u9875\u9762\uff0c\u5bfc\u81f4\u767d\u5c4f\u65f6\u95f4\u53d8\u957f\u3002\u670d\u52a1\u7aef\u6e32\u67d3\u662f\u6307\u5728\u670d\u52a1\u7aef\u5c06\u9875\u9762\u7684\u6e32\u67d3\u903b\u8f91\u5904\u7406\u597d\uff0c\u7136\u540e\u5c06\u5904\u7406\u597d\u7684 HTML \u76f4\u63a5\u8fd4\u56de\u7ed9\u524d\u7aef\u5c55\u793a\u3002\u8fd9\u6837\u5373\u53ef\u51cf\u5c11\u9875\u9762\u767d\u5c4f\u7684\u65f6\u95f4\u3002"),(0,a.kt)("h4",{id:"52-\u9884\u6e32\u67d3"},"5.2 \u9884\u6e32\u67d3"),(0,a.kt)("p",null,"\u9664\u4e86\u670d\u52a1\u7aef\u6e32\u67d3\u4e4b\u5916\uff0c\u8fd8\u53ef\u4ee5\u5728\u524d\u7aef\u6253\u5305\u65f6\u4f7f\u7528 prerender-spa-plugin \u4e4b\u7c7b\u7684\u63d2\u4ef6\u8fdb\u884c\u7b80\u5355\u7684\u9884\u6e32\u67d3\uff0c\u51cf\u5c11\u9875\u9762\u767d\u5c4f\u7684\u65f6\u95f4\u3002"),(0,a.kt)("h3",{id:"6-\u8d44\u6e90\u52a0\u8f7d\u4f18\u5316\u548c\u9875\u9762\u6e32\u67d3\u4f18\u5316"},"6. \u8d44\u6e90\u52a0\u8f7d\u4f18\u5316\u548c\u9875\u9762\u6e32\u67d3\u4f18\u5316"),(0,a.kt)("p",null,"\u6d4f\u89c8\u5668\u89e3\u6790 HTML \u7684\u540c\u65f6\u4f1a\u52a0\u8f7d\u76f8\u5173\u7684\u8d44\u6e90\uff0c\u901a\u8fc7\u5bf9\u8d44\u6e90\u7684\u52a0\u8f7d\u8fc7\u7a0b\u8fdb\u884c\u4f18\u5316\u4e5f\u53ef\u4ee5\u51cf\u5c11\u9875\u9762\u7684\u767d\u5c4f\u65f6\u95f4\u3002"),(0,a.kt)("h4",{id:"61-\u9aa8\u67b6\u5c4f"},"6.1 \u9aa8\u67b6\u5c4f"),(0,a.kt)("p",null,"\u9aa8\u67b6\u5c4f\u662f\u5728\u9700\u8981\u7b49\u5f85\u52a0\u8f7d\u5185\u5bb9\u7684\u4f4d\u7f6e\u63d0\u4f9b\u4e00\u4e9b\u56fe\u5f62\u7ec4\u5408\u5360\u4f4d\uff0c\u63d0\u524d\u7ed9\u7528\u6237\u63cf\u8ff0\u9875\u9762\u7684\u57fa\u7840\u7ed3\u6784\uff0c\u7b49\u5f85\u6570\u636e\u52a0\u8f7d\u5b8c\u6210\u4e4b\u540e\uff0c\u518d\u66ff\u6362\u6210\u5b9e\u9645\u7684\u5185\u5bb9\u3002"),(0,a.kt)("p",null,"\u9aa8\u67b6\u5c4f\u53ef\u4ee5\u5728\u6570\u636e\u52a0\u8f7d\u524d\uff0c\u63d0\u524d\u6e32\u67d3\u9875\u9762\uff0c\u7f29\u77ed\u767d\u5c4f\u65f6\u95f4\uff0c\u63d0\u5347\u7528\u6237\u4f53\u9a8c\u3002"),(0,a.kt)("h4",{id:"62-\u9759\u6001\u8d44\u6e90\u4f18\u5316"},"6.2 \u9759\u6001\u8d44\u6e90\u4f18\u5316"),(0,a.kt)("p",null,"\u9759\u6001\u8d44\u6e90\u7684\u4f18\u5316\u4e3b\u8981\u5206\u4e3a\u4e24\u4e2a\u65b9\u5411\uff1a\u51cf\u5c0f\u8d44\u6e90\u5927\u5c0f\uff0c\u52a0\u5feb\u8d44\u6e90\u52a0\u8f7d\u901f\u5ea6\u3002"),(0,a.kt)("p",null,(0,a.kt)("strong",{parentName:"p"},"\u51cf\u5c0f\u8d44\u6e90\u5927\u5c0f")),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},"Gzip \u538b\u7f29\u6587\u4ef6"),(0,a.kt)("li",{parentName:"ul"},"JS \u6587\u4ef6\u62c6\u5206\uff0c\u52a8\u6001\u52a0\u8f7d")),(0,a.kt)("p",null,(0,a.kt)("strong",{parentName:"p"},"\u52a0\u5feb\u8d44\u6e90\u52a0\u8f7d\u901f\u5ea6")),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},"CDN\uff08Content Delivery Network\uff09"),(0,a.kt)("li",{parentName:"ul"},"HTTP/2")),(0,a.kt)("h4",{id:"63-\u8d44\u6e90\u9884\u52a0\u8f7d"},"6.3 \u8d44\u6e90\u9884\u52a0\u8f7d"),(0,a.kt)("p",null,(0,a.kt)("strong",{parentName:"p"},"prefetch")),(0,a.kt)("p",null,"\u524d\u7aef\u53ef\u4ee5\u4f7f\u7528 prefetch \u6765\u6307\u5b9a\u63d0\u524d\u83b7\u53d6\u4e4b\u540e\u9700\u8981\u4f7f\u7528\u5230\u7684\u8d44\u6e90\uff0c\u6d4f\u89c8\u5668\u5c06\u4f1a\u5728\u7a7a\u95f2\u7684\u65f6\u5019\u52a0\u8f7d\u8d44\u6e90\uff0c\u4f8b\u5982:"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-html"},'<link rel="prefetch" href="https://hzfe.org/index.js" as="script" />\n')),(0,a.kt)("p",null,(0,a.kt)("strong",{parentName:"p"},"preload")),(0,a.kt)("p",null,"\u524d\u7aef\u53ef\u4ee5\u4f7f\u7528 preload \u6765\u6307\u5b9a\u63d0\u524d\u83b7\u53d6\u4e4b\u540e\u9700\u8981\u4f7f\u7528\u5230\u7684\u8d44\u6e90\uff0c\u6d4f\u89c8\u5668\u5c06\u4f1a\u7acb\u5373\u52a0\u8f7d\u5bf9\u5e94\u8d44\u6e90\uff0c\u5728\u89e3\u6790\u5230\u5bf9\u5e94\u8d44\u6e90\u65f6\u5373\u53ef\u7acb\u5373\u6267\u884c\uff0c\u4f8b\u5982:"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-html"},'<link rel="preload" href="https://hzfe.org/index.js" as="script" />\n')),(0,a.kt)("p",null,(0,a.kt)("strong",{parentName:"p"},"quicklink")),(0,a.kt)("p",null,"quicklink \u662f Google \u5f00\u6e90\u7684\u9884\u52a0\u8f7d\u5e93\uff0cquicklink \u4f1a\u5224\u65ad\u94fe\u63a5\u8fdb\u5165\u89c6\u53e3\u4e4b\u540e\uff0c\u5728\u95f2\u65f6\u9884\u52a0\u8f7d\u3002quicklink \u5b9e\u9645\u4e0a\u52a0\u901f\u7684\u662f\u6b21\u7ea7\u9875\u9762\u3002"),(0,a.kt)("h3",{id:"7-\u63a5\u53e3\u8bf7\u6c42\u4f18\u5316"},"7. \u63a5\u53e3\u8bf7\u6c42\u4f18\u5316"),(0,a.kt)("p",null,"\u6d4f\u89c8\u5668\u5728\u52a0\u8f7d\u5b8c HTML \u548c\u8d44\u6e90\u4e4b\u540e\uff0c\u4e00\u822c\u9700\u8981\u8bf7\u6c42\u63a5\u53e3\u83b7\u53d6\u6570\u636e\u4e4b\u540e\u624d\u4f1a\u5b8c\u6574\u6e32\u67d3\u9875\u9762\uff0c\u5bf9\u63a5\u53e3\u8bf7\u6c42\u8fdb\u884c\u4f18\u5316\u4e5f\u53ef\u52a0\u5feb\u9875\u9762\u7684\u5c55\u793a\u3002"),(0,a.kt)("p",null,(0,a.kt)("strong",{parentName:"p"},"\u63a5\u53e3\u5408\u5e76")),(0,a.kt)("p",null,"\u8fc7\u591a\u7684\u63a5\u53e3\u8bf7\u6c42\u4f1a\u5f71\u54cd\u9875\u9762\u521d\u59cb\u5316\u65f6\u7684\u6e32\u67d3\u8fc7\u7a0b\uff0c\u53ef\u4ee5\u901a\u8fc7\u589e\u52a0\u4e00\u5c42\u4e2d\u95f4\u5c42\u5408\u5e76\u90e8\u5206\u8bf7\u6c42\uff0c\u8fbe\u5230\u52a0\u901f\u9875\u9762\u5c55\u793a\u7684\u76ee\u7684\u3002"),(0,a.kt)("h2",{id:"\u6269\u5c55\u9605\u8bfb"},"\u6269\u5c55\u9605\u8bfb"),(0,a.kt)("h3",{id:"1-native-\u76f8\u5173\u4f18\u5316"},"1. Native \u76f8\u5173\u4f18\u5316"),(0,a.kt)("p",null,(0,a.kt)("strong",{parentName:"p"},"WebView \u5bb9\u5668\u9884\u52a0\u8f7d")),(0,a.kt)("p",null,"\u5185\u5d4c\u5728 APP \u5185\u7684\u7f51\u9875\u767d\u5c4f\u65f6\u95f4\u5b9e\u9645\u8fd8\u4f9d\u8d56 APP \u7684 WebView \u521d\u59cb\u5316\u65f6\u95f4\uff0c\u6240\u4ee5\u901a\u8fc7\u5bf9 APP \u7684 WebView \u5bb9\u5668\u8fdb\u884c\u4f18\u5316\u4e5f\u53ef\u4ee5\u51cf\u5c11\u9875\u9762\u7684\u767d\u5c4f\u65f6\u95f4\uff0c\u4f8b\u5982\u9884\u70ed WebView\uff0c\u5373\u5728 APP \u6253\u5f00\u4e4b\u540e\u7684\u67d0\u4e00\u65f6\u95f4\u70b9\uff0c\u9884\u5148\u52a0\u8f7d\u4e00\u4e2a\u6216\u591a\u4e2a WebView \u5bb9\u5668\uff0c\u5728\u7528\u6237\u70b9\u51fb\u6253\u5f00\u7f51\u9875\u65f6\u76f4\u63a5\u4f7f\u7528\u9884\u70ed\u597d\u7684 WebView\u3002"),(0,a.kt)("p",null,(0,a.kt)("strong",{parentName:"p"},"DNS \u4f18\u5316")),(0,a.kt)("p",null,"APP \u53ef\u4ee5\u5728\u6253\u5f00\u4e4b\u540e\u9884\u89e3\u6790\u7f51\u9875\u6240\u9700\u7684\u4e00\u4e9b\u57df\u540d\uff0c\u5728\u6253\u5f00\u7f51\u9875\u65f6\u5373\u53ef\u76f4\u63a5\u4f7f\u7528 DNS \u7f13\u5b58\u3002"),(0,a.kt)("p",null,(0,a.kt)("strong",{parentName:"p"},"\u8d44\u6e90\u9884\u52a0\u8f7d")),(0,a.kt)("p",null,"APP \u53ef\u4ee5\u5c06\u7f51\u9875\u4e2d\u6240\u9700\u7684\u8d44\u6e90\u9884\u52a0\u8f7d\u5230\u672c\u5730\uff0c\u5728\u7f51\u9875\u8bf7\u6c42\u8d44\u6e90\u65f6\u76f4\u63a5\u62e6\u622a\u5e76\u8fd4\u56de\u672c\u5730\u6587\u4ef6\uff0c\u5373\u53ef\u52a0\u5feb\u7f51\u9875\u52a0\u8f7d\u901f\u5ea6\uff0c\u51cf\u5c11\u767d\u5c4f\u65f6\u95f4\u3002"),(0,a.kt)("p",null,(0,a.kt)("strong",{parentName:"p"},"\u63a5\u53e3\u9884\u52a0\u8f7d")),(0,a.kt)("p",null,"APP \u53ef\u4ee5\u901a\u8fc7\u914d\u7f6e\u6587\u4ef6\u83b7\u53d6\u7f51\u9875\u9700\u8981\u63d0\u524d\u53d1\u8d77\u8bf7\u6c42\u7684\u63a5\u53e3\uff0c\u5728\u7528\u6237\u8fdb\u5165\u9875\u9762\u65f6\u540c\u6b65\u53d1\u8d77\u8bf7\u6c42\uff0c\u5373\u53ef\u5728\u9875\u9762\u8f7d\u5165\u5b8c\u6210\u4e4b\u540e\u76f4\u63a5\u4f7f\u7528\uff0c\u51cf\u5c11\u767d\u5c4f\u65f6\u95f4\u3002"),(0,a.kt)("h2",{id:"\u53c2\u8003\u8d44\u6599"},"\u53c2\u8003\u8d44\u6599"),(0,a.kt)("ol",null,(0,a.kt)("li",{parentName:"ol"},(0,a.kt)("a",{parentName:"li",href:"https://developer.mozilla.org/en-US/docs/Web/API/Navigation_timing_API"},"Navigation Timeing API"))))}m.isMDXComponent=!0}}]); |