xgqfrms™, xgqfrms® : xgqfrms's offical website of cnblogs! xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!

prefetch & preload & prerender & dns-prefetch & preconnect All In One

prefetch & preload & prerender & dns-prefetch & preconnect All In One

performance optimization 性能优化

image

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> -->

preload types

What types of content can be preloaded?

Many different content types can be preloaded.
The possible as attribute values are:

audio: Audio file, as typically used in <audio>.
document: An HTML document intended to be embedded by a <frame> or <iframe>.
embed: A resource to be embedded inside an <embed> element.
fetch: Resource to be accessed by a fetch or XHR request, such as an ArrayBuffer or JSON file.
font: Font file.
image: Image file.
object: A resource to be embedded inside an <object> element.
script: JavaScript file.
style: CSS stylesheet.
track: WebVTT file.
worker: A JavaScript web worker or shared worker.
video: Video file, as typically used in <video>.

Note: video preloading is included in the Preload spec, but is not currently implemented by browsers.

Note: There's more detail about these values and the web features they expect to be consumed by in the Preload spec — see link element extensions.
Also note that the full list of values the as attribute can take is governed by the Fetch spec — see request destinations.

https://developer.mozilla.org/en-US/docs/web/html/link_types/preload#what_types_of_content_can_be_preloaded

refs

©xgqfrms 2012-2020

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

posted @ 2018-05-03 13:20  xgqfrms  阅读(460)  评论(23)  编辑  收藏  举报