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. 【Azure Developer】在Azure Resource Graph Explorer中查看当前订阅下的所有资源信息列表并导出（如VM的名称，IP地址内网/公网，OS,区域等)

    问题描述 通过Azure的Resource Graph Explorer(https://portal.azure.cn/#blade/HubsExtension/ArgQueryBlade),可以查 ...

  2. Soul API 网关源码解析 02

    如何读开源项目:对着文档跑demo,对着demo看代码,懂一点就开始试,有问题了问社区. 今日目标: 1.运行examples下面的 http服务 2.学习文档,结合divde插件,发起http请求s ...

  3. Linux下pcstat安装踩坑教程

    首先安装golang 1.进入官方链接下载对应自己系统版本的Golang安装包:https://dl.google.com/go/go1.13.4.linux-amd64.tar.gz root@ub ...

  4. 对于Spring MVC 拦截器的一些了解

    Spring MVC 拦截器的执行顺序 应用场景 假设请求 localhost:8080/ 则要求直接重定向到 localhost:8080/login ; 定义拦截器顺序 permission lo ...

  5. 解读腾讯敏捷研发核心驱动力 腾讯TAPD TAPD 2020-12-17

    解读腾讯敏捷研发核心驱动力 腾讯TAPD TAPD 2020-12-17

  6. （Oracle）DDL及其数据泵导入导出（impdp/expdp）

    create tablespace ybp_dev datafile 'G:\app\Administrator\oradata\health\ybp_dev1.dbf' size 10m autoe ...

  7. Android LocationManagerService启动（一）

    Location服务是系统中很重要的一个服务,几乎当前所有的App都会用到这个服务. 首先看代码在Android源码的位置 Android API frameworks/base/location L ...

  8. LOJ10132

    在 Adera 的异时空中有一张地图.这张地图上有 N 个点,有 N-1 条双向边把它们连通起来.起初地图上没有任何异象石,在接下来的 M 个时刻中,每个时刻会发生以下三种类型的事件之一: 地图的某个 ...

  9. Language Guide (proto3) | proto3 语言指南（十一）包

    Packages - 包 可以向.proto文件中添加可选的package明符,以防止协议消息类型之间的名称冲突. package foo.bar; message Open { ... } 然后你可 ...

  10. Django（中间件）

    中间件的概念 中间件顾名思义,是介于request与response处理之间的一道处理过程,相对比较轻量级,并且在全局上改变django的输入与输出.因为改变的是全局,所以需要谨慎实用,用不好会影响到 ...