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. (转)iOS工具--CocoaPods 安装使用总结

    本文转载自:CocoaPods 安装使用总结(最新) 一.前言 关于什么是CocoaPods,使用CocoaPods的好处等问题本文不做说明,本文只是CocoaPods的安装和使用教程.根据此教程可以 ...

  2. 正向代理 forward proxy、反向代理 reverse proxy、透明代理 transparent proxy

    https://zh.wikipedia.org/wiki/反向代理 反向代理在计算机网络中是代理服务器的一种.服务器根据客户端的请求,从其关系的一组或多组后端服务器(如Web服务器)上获取资源,然后 ...

  3. 小麦苗数据库巡检脚本，支持Oracle、MySQL、SQL Server和PG等数据库

    目录 一.巡检脚本简介 二.巡检脚本特点 三.巡检结果展示 1.Oracle数据库 2.MySQL数据库 3.SQL Server数据库 4.PG数据库 5.OS信息 四.脚本运行方式 1.Oracl ...

  4. Language Guide (proto3) | proto3 语言指南（七）更新消息类型

    Updating A Message Type - 更新消息类型 如果现有的消息类型不再满足您的所有需要(例如,您希望消息格式有一个额外的字段),但是您仍然希望使用用旧格式创建的代码,不要担心!在不破 ...

  5. CSS选择器，属性前缀，长度单位，变形效果，过渡效果，动画效果

    CSS3选择器 ·*通配选择器 ·E标签选择器 ·E#id ID选择器 ·E.class类选择器 ·E F包含选择器,后代选择器 ·E>F子包含选择器 ·E+F相邻兄弟选择器 ·E[foo]属性 ...

  6. 项目Js源码整合

    整合一下目前做的项目中JS中用到的相关源码等,留待记录和使用. 一.ajaxgrid源码部分 1.初始化 2.查询 3.删除 4.保存 5.根据id获取值,时间值等 6.详情.跳转链接 : a 标签 ...

  7. jquery的ajax发送请求后前端不能实时更新

    在IE下用Ajax请求某一页面,通常会因为缓存的原因而返回上一次的结果,造成混乱(比如说多次请求却没有响应). 错误代码如下: $.get("fetch.php") .done(f ...

  8. hdu 6704 K-th occurrence(后缀数组+可持久化线段树)

    Problem Description You are given a string S consisting of only lowercase english letters and some q ...

  9. 2019牛客暑期多校训练营（第二场）E.MAZE(线段树+dp)

    题意:给你一个n*m的矩阵 你只能向左向右相下走 有两种操作 q次询问 一种是把一个单位翻转(即可走变为不可走 不可走变为可走) 另一种是询问从(1,x) 走到 (n,y)有多少种方案 思路:题目n为 ...

  10. AtCoder Beginner Contest 176

    比赛链接:https://atcoder.jp/contests/abc176 A - Takoyaki #include <bits/stdc++.h> using namespace ...