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 发布文章使用：只允许注册用户才可以访问！

prefetch & preload & prerender & dns-prefetch & preconnect的更多相关文章

  1. DNS Prefetch 【DNS 预解析技术】

    DNS 实现域名到IP的映射.通过域名访问站点,每次请求都要做DNS解析.目前每次DNS解析,通常在200ms以下.针对DNS解析耗时问题,一些浏览器通过DNS Prefetch 来提高访问的流畅性. ...

  2. Head标签里面的dns-prefetch，preconnect，prefetch和prerender

    开始 今天突然心血来潮想起前端性能优化的问题,这基本是老生常谈的事情了,面试随便都能说上几个,但是还是有点疑问:就是Head标签了,记忆中Head可是藏龙卧虎,各种技能都有,当然这些不可能都一一记住, ...

  3. DNS Prefetch

    DNS 实现域名到IP的映射.通过域名访问站点,每次请求都要做DNS解析.目前每次DNS解析,通常在200ms以下.针对DNS解析耗时问题,一些浏览器通过DNS Prefetch 来提高访问的流畅性. ...

  4. DNS Prefetch初认识

    今天在看一个后台框架时,发现这样的代码: <link rel="dns-prefetch" href="//0.s3.envato.com">< ...

  5. 浏览器 DNS缓存与DNS prefetch （DNS预解析）

    浏览器 DNS缓存 浏览器DNS缓存的时间跟DNS服务器返回的TTL值无关. 注:TTL(Time-To-Live),就是一条域名解析记录在DNS服务器中的存留时间. 浏览器在获取网站域名的实际IP地 ...

  6. 带你玩转prefetch, preload, dns-prefetch，defer和async

    现代浏览器性能优化-JS篇 众所周知,JS的加载和执行会阻塞浏览器渲染,所以目前业界普遍推荐把script放到</body>之前,以解决js执行时找不到dom等问题.但随着现代浏览器的普及 ...

  7. vue-cli3 chainWebpack配置，去除打包后文件的预加载prefetch/preload(已解决)

    //细节配置修改 chainWebpack: config => { console.log(config,'chainWebpack') // 移除 prefetch 插件 config.pl ...

  8. 前端进阶笔记之核心基础知识---那些HTML标签你熟悉吗？

    目录 1.交互实现 1.1 meta标签:自动刷新/跳转 1.2 title标签:消息提醒 2.性能优化 2.1 script标签:调整加载顺序提升渲染速度 2.2 link标签:通过预处理提升渲染速 ...

  9. HTML script tag type all in one

    HTML script tag type all in one script type https://developer.mozilla.org/en-US/docs/Web/HTML/Elemen ...

随机推荐

  1. LiteOS调测利器：backtrace函数原理知多少

    摘要:本文将会和读者分享LiteOS 5.0版本中Cortex-M架构的backtrace软件原理及实现,供大家参考和学习交流. 原理介绍 汇编指令的执行流程 图 1 汇编指令的执行顺序 上图1所示, ...

  2. There are only two hard things in Computer Science: cache invalidation and naming things.

    TwoHardThings https://martinfowler.com/bliki/TwoHardThings.html https://github.com/cch123/golang-not ...

  3. 为什么 Go 模块在下游服务抖动恢复后，CPU 占用无法恢复

    为什么 Go 模块在下游服务抖动恢复后,CPU 占用无法恢复 https://xargin.com/cpu-idle-cannot-recover-after-peak-load/ 极端情况下收缩 G ...

  4. postgresql 知识的整理

    .example { background-color: rgba(229, 236, 243, 1); color: rgba(0, 0, 0, 1); padding: 0.5em; margin ...

  5. 知道 Redis-Cluster 么？说说其中可能不可用的情况

    Redis 集群模式简述 一个集群模式的官方推荐最小最佳实践方案是 6 个节点,3 个 Master 3 个 Slave 的模式,如 图00 所示. key 分槽与转发机制 Redis 将键空间分为了 ...

  6. 用RabbitMQ了好几年之后，我总结出来5点RabbitMQ的使用心得

    大概从 2013 年开始,我就开始了自己和 RabbitMQ 的接触,到现在已经有七年多了. 在这七年中,既有一些对 RabbitMQ 的深度体验,更有无数的血泪史. 而根据我这么多年的使用经验,我将 ...

  7. JavaWeb——JSP内置对象application，JSP属性范围

    application application语法 application对象 JSP属性范围 范围的分类 page request session application pagecontext延伸 ...

  8. HPE 交换机基础配置

    1.交换机命名 (config)# hostname POE-SW 2.vlan创建及端口划分 1)端口加入vlan,两种方式 (config)# vlan 2 (vlan-2)# untagged ...

  9. php之PDO连接mysql数据库，增删改查等等操作实例

    我们使用传统的 mysql_connect .mysql_query方法来连接查询数据库时,如果过滤不严就有SQL注入风险,导致网站被攻击. 虽然可以用mysql_real_escape_string ...

  10. 【Java】构造方法

    成员变量声明时初始化和构造方法中初始化的区别 声明时为成员变量赋值,那每次创建这个类的对象都是同一个值. 构造方法初始化,每次创建对象时可以为每一个对象赋不同的值(此时要通过有参构造). 无返回值类型 ...