prefetch & preload & prerender & dns-prefetch & preconnect
performance optimization 性能优化
link & as
preload
预加载
https://alligator.io/html/preload-prefetch/#preloading-javascript
https://www.digitalocean.com/community/tutorials/html-preload-prefetch
<link rel="preload" href="used-later.js" as="script">
<!-- ... -->
<script>
var usedLaterScript = document.createElement('script');
usedLaterScript.src = 'used-later.js';
document.body.appendChild(usedLaterScript);
</script>
<link rel="preload" href="/static/js/app.f0740e69f6377b5e784f.js" as="script">
<link rel="preload" href="/static/js/14.3d579fef7bcc5b20c2cc.js" as="script">
<link rel="preload" href="/static/css/app.d3668b3b356b3a7a2ff319b33312d3b2.css" as="style">
<link rel="prefetch" href="/static/js/12.cbf64669f2914491841d.js">
rel="prerender"
prerender
<!DOCTYPE html>
<html lang="en-us" manifest="manifest.appcache">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=3.0">
<title>xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!</title>
<link rel="icon" href="images/logo.png" type="image/png">
<link rel="icon" href="./favicon.ico" type="image/x-icon">
<!-- SEO meta -->
<link rel="author" type="text/plain" href="https://www.xgqfrms.xyz/humans.txt" />
<link rel="manifest" href="manifest.json">
<link rel="shortlink" href="https://xgqfrms.xyz/">
<link rel="copyright" href="https://xgqfrms.xyz/copyright.html">
<!-- 预呈现和预提取支持:https://msdn.microsoft.com/library/dn265039(v=vs.85).aspx -->
<!--
<link rel="prerender" href="https://www.webgeeker.xyz/index.html" />
<link rel="prefetch" href="https://www.webgeeker.xyz/css/style.css" />
<link rel="dns-prefetch" href="https://www.webgeeker.xyz/" />
-->
<!-- Content Security Policy:内容安全策略(CSP) -->
<!--
<meta http-equiv="Content-Security-Policy" content="script-src 'self'; object-src 'none'; style-src 'cdn.xgqfrms.xyz'; child-src 'https: https:'">
-->
<!--
https://realfavicongenerator.net/
https://css-tricks.com/favicon-quiz/
-->
<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/android-chrome-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="manifest" href="/manifest.json">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#00ff00">
<meta name="msapplication-TileColor" content="#2d89ef">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">
<meta name="theme-color" content="#00ccff">
<!-- HEAD -->
<!-- <meta name="robots" content="noindex" /> -->
<meta name="author" content="xgqfrms, webgeeker">
<meta name="keywords" content="xgqfrms, webgeeker, github, xgqfrms.xyz, webgeeker.xyz, Tutorials, ES5 ES6 ES7, React 2, Angular 2, Ionic 2">
<meta name="description" content="xgqfrms.xyz : xgqfrms's offical website of GitHub! & xgqfrms, webgeeker, github, xgqfrms.xyz, webgeeker.xyz, Tutorials, ES5 ES6 ES7, React 2, Angular 2, Ionic 2">
<meta name="application-name" content="xgqfrms.xyz, webgeeker.xyz">
<meta name="generator" content="Sublime Text 3, Visual Studio Code 1.6, Google Chrome Canary, GitHub, React 2, Angular 2, Ionic 2">
<meta name="msapplication-TileColor" content="#00ff00" />
<!-- media query -->
<!-- RSS -->
<link href="https://xgqfrms.xyz/feeds/posts.rss" type="application/rss+xml" rel="alternate" title="Blog RSS" />
<link href="https://xgqfrms.xyz/feeds/atom.xml" type="application/atom+xml" rel="alternate" title="Atom Feed" />
</head>
https://developer.mozilla.org/en-US/docs/Web/Performance/prerender
dns-prefetch
https://developer.mozilla.org/en-US/docs/Web/Performance/dns-prefetch
preconnect & dns-prefetch
https://developers.google.com/web/fundamentals/performance/resource-prioritization
https://www.keycdn.com/blog/resource-hints
DNS 查询、重定向以及指向处理用户请求的最终服务器的若干往返
<link rel="preconnect">
<link rel="preconnect" href="https://example.com">
<link rel="dns-prefetch">
<link rel="dns-prefetch" href="https://example.com">
async & defer
<!-- async & defer -->
<!-- <script src="https://cdn.xgqfrms.xyz/js-hacks/drc-drm.js" async></script> -->
<!-- <script src="https://cdn.xgqfrms.xyz/js-hacks/drc-drm.js" defer></script> -->
©xgqfrms 2012-2020
www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！