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. 语言反射规则 - The Laws of Reflection

    [译]Go反射的三个原则(官方博客) | seven的分享 https://sevenyu.top/2019/12/21/laws-of-reflection.html wilhg/The-Laws- ...

  2. 端口被占用通过域名的处理 把www.domain.com均衡到本机不同的端口 反向代理 隐藏端口 Nginx做非80端口转发 搭建nginx反向代理用做内网域名转发 location 规则

    负载均衡-Nginx中文文档 http://www.nginx.cn/doc/example/loadbanlance.html 负载均衡 一个简单的负载均衡的示例,把www.domain.com均衡 ...

  3. odoo-nginx 配置之80端口

    1 upstream odoo { 2 server 127.0.0.1:8069 weight=1 fail_timeout=0; 3 } 4 5 upstream odoo-im { 6 serv ...

  4. exkmp（Z函数） 笔记

    exkmp 用于求解这样的问题: 求文本串 \(T\) 的每一个后缀与模式串 \(M\) 的匹配长度(即最长公共前缀长度).特别的,取 \(M=T\),得到的这个长度被称为 \(Z\) 函数.&quo ...

  5. LOJ2130软件包

    题目描述Linux用户和OSX用户一定对软件包管理器不会陌生.通过软件包管理器,你可以通过一行命令安装某一个软件包,然后软件包管理器会帮助你从软件源下载软件包,同时自动解决所有的依赖(即下载安装这个软 ...

  6. 【译】.NET 5. 0 中 Windows Form 的新特性

    自从 Windows Form 在 2018 年底开源并移植到 .NET Core 以来,团队和我们的外部贡献者都在忙于修复旧的漏洞和添加新功能.在这篇文章中,我们将讨论 .NET 5.0 中 Win ...

  7. 使用 shell 脚本自动对比两个安装目录并生成差异补丁包

    问题的提出 公司各个业务线的安装包小则几十兆.大则几百兆,使用自建的升级系统向全国百万级用户下发新版本时,流量耗费相当惊人.有时新版本仅仅改了几个 dll ,总变更量不过几十 K 而已,也要发布一个完 ...

  8. Go语言学习笔记（3）——面向对象编程

    把存货赶紧更新一波(捂脸) 1. 类型系统 类型系统,就是说一种编程语言怎么设计的它的类型的体系结构. 比如基础类型啊,复合类型啊,一些可以指向任意对象的类型啊,以及类型的语义,面向对象的特性,接口, ...

  9. jvm学习第二天

    0.垃圾回收概述 1.什么是垃圾,怎么判断? 1.1引用计数法 含义 顾名思义,此种算法会在每一个对象上记录这个对象被引用的次数,只要有任何一个对象引用了此对象,这个对象的计数器就+1,取消对这个对象 ...

  10. OLAP、OLTP的介绍和比较(转载)

    OLTP与OLAP的介绍 数据处理大致可以分成两大类:联机事务处理OLTP(on-line transaction processing).联机分析处理OLAP(On-Line Analytical ...