带你玩转prefetch, preload, dns-prefetch，defer和async
现代浏览器性能优化-JS篇
众所周知，JS的加载和执行会阻塞浏览器渲染，所以目前业界普遍推荐把script放到</body>之前，以解决js执行时找不到dom等问题。但随着现代浏览器的普及，浏览器为我们提供了更多强大的武器，合理利用，方可大幅提高页面加载速度。
理解渲染过程（HTML Parser）
首先我们从浏览器的角度解释一下从输入URL到页面展示经历了些什么，以如下html文档举例
<html>
<head>
<link rel="stylesheet" type="text/css" href="/style.css">
<script type="text/javascript" src="/header.js"></script>
</head>
<body>
<p>Text</p>
<script type="text/javascript" src="/main.js"></script>
</body>
</html>浏览器自上而下读取html文档（此过程叫html parser），当发现style.css文件时，浏览器parser停下来去搞css，等style.css下载并解析完毕，浏览器继续parser。紧接着发现header.js， 于是html parser又停了，浏览器下载并执行完header.js，继续parser。此时屏幕上还什么都没有。...parser，发现<p>，遂将p中文字展示了出来。紧接着又发现main.js，浏览器又停下parser，下载并执行完main.js才继续parser，直到页面渲染完毕。
我们假设header.js中只有一行代码console.log('header')， 但服务器响应很慢，要10秒才能把它返回给浏览器，浏览器执行这段代码需要1ms，那在这 10s+1ms 内，页面将一直空白。浏览器执行JS的时间取决于代码质量和硬件，并不是前端工程师随便可以优化的，所以优化的重点在JS的下载时间。
核心：减少JS下载时间
预先解析DNS
非常简单，效果立竿见影，加快页面加载时间，多用于预解析CDN的地址的DNS
<!--在head标签中，越早越好-->
<link rel="dns-prefetch" href="//example.com">Preload
浏览器会在遇到如下link标签时，立刻开始下载main.js(不阻塞parser)，并放在内存中，但不会执行其中的JS语句。
只有当遇到script标签加载的也是main.js的时候，浏览器才会直接将预先加载的JS执行掉。
<link rel="preload" href="/main.js" as="script">Prefetch
浏览器会在空闲的时候，下载main.js, 并缓存到disk。当有页面使用的时候，直接从disk缓存中读取。其实就是把决定是否和什么时间加载这个资源的决定权交给浏览器。
如果prefetch还没下载完之前，浏览器发现script标签也引用了同样的资源，浏览器会再次发起请求，这样会严重影响性能的，加载了两次，，所以不要在当前页面马上就要用的资源上用prefetch，要用preload。
<link href="main.js" rel="prefetch">JS在什么时候执行的（defer和async）
上面我们的例子中，script标签都是在没有多余属性的情况下执行的，只要下载过程结束，浏览器就会将JS执行掉。
defer和async是script标签的两个属性，用于在不阻塞页面文档解析的前提下，控制脚本的下载和执行。
defer，async与下载时机也有关，具体看这张图。
defer的执行时间是在所有元素解析完成之后，DOMContentLoaded 事件触发之前。
async的执行时间是在当前JS脚本下载完成后，所以多个async script是执行顺序是不固定的。async只能用于加载一些独立无依赖的代码，比如Google Analysis之类。
完美的结构
前面两节帮我们弄懂了JS的下载和执行时机，那什么样的页面才是完美符合现代浏览器的那？其实关键在于的preload和prefetch！提前告知浏览器，我们的网站马上要用的是什么，以后可能要用的是什么，浏览器才能更快的渲染页面。下面是一段实例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Faster</title>
<link rel="dns-prefetch" href="//cdn.com/">
<link rel="preload" href="//js.cdn.com/currentPage-part1.js" as="script">
<link rel="preload" href="//js.cdn.com/currentPage-part2.js" as="script">
<link rel="preload" href="//js.cdn.com/currentPage-part3.js" as="script">
<link rel="prefetch" href="//js.cdn.com/prefetch.js">
</head>
<body>
<script type="text/javascript" src="//js.cdn.com/currentPage-part1.js" defer></script>
<script type="text/javascript" src="//js.cdn.com/currentPage-part2.js" defer></script>
<script type="text/javascript" src="//js.cdn.com/currentPage-part3.js" defer></script>
</body>
</html>首先，Parser在遇到head中preload时开始下载JS，读到script标签的时候，如果已经下载完了，直接按顺序执行之。如果没下载完，则会等到下载完再执行。这样就可以在刚进入页面时开始非阻塞的下载JS代码了。
其次，页面会在空闲时，加载prefetch的JS，如果之后页面发生跳转，跳转的目标页面引入了prefetch.js，浏览器会直接从disk缓存中读取执行。
将script标签依然放在</body>之前，并增加defer标签，确保老浏览器兼容，并在所有DOM元素解析完成之后执行其中的代码。
至此，完美的HTML结构出炉了。
CSS的下载和解析一样会阻塞渲染，造成白屏，CSS中的字体文件更是影响首屏渲染关键因素之一，下一篇幅我会结合preload和prefetch，带你一起优化CSS，告诉你什么是最适合现代浏览器的CSS加载策略，期待的话，点个赞吧！
本文转载于:猿2048⇛https://www.mk2048.com/blog/blog.php?id=haabcc1k10j
带你玩转prefetch, preload, dns-prefetch，defer和async的更多相关文章
- Preload，Prefetch 和它们在 Chrome 之中的优先级
前言 上周五到的时候,想起之前在手游平台上有处理dns-prefetch的优化,那这篇分享的就更仔细了.今日早读文章由@gy134340翻译并授权分享. 正文从这开始- 今天我们来深入研究一下 Chr ...
- Web 性能优化：Preload与Prefetch的使用及在 Chrome 中的优先级
摘要: 理解Preload与Prefetch. 原文:Web 性能优化:Preload,Prefetch的使用及在 Chrome 中的优先级 作者:前端小智 Fundebug经授权转载,版权归原作者所 ...
- prefetch & preload & prerender & dns-prefetch & preconnect
prefetch & preload & prerender & dns-prefetch & preconnect performance optimization ...
- DNS Prefetch
DNS 实现域名到IP的映射.通过域名访问站点,每次请求都要做DNS解析.目前每次DNS解析,通常在200ms以下.针对DNS解析耗时问题,一些浏览器通过DNS Prefetch 来提高访问的流畅性. ...
- DNS Prefetch初认识
今天在看一个后台框架时,发现这样的代码: <link rel="dns-prefetch" href="//0.s3.envato.com">< ...
- 浏览器 DNS缓存与DNS prefetch （DNS预解析）
浏览器 DNS缓存 浏览器DNS缓存的时间跟DNS服务器返回的TTL值无关. 注:TTL(Time-To-Live),就是一条域名解析记录在DNS服务器中的存留时间. 浏览器在获取网站域名的实际IP地 ...
- DNS Prefetch 【DNS 预解析技术】
DNS 实现域名到IP的映射.通过域名访问站点,每次请求都要做DNS解析.目前每次DNS解析,通常在200ms以下.针对DNS解析耗时问题,一些浏览器通过DNS Prefetch 来提高访问的流畅性. ...
- [PWA] Optimize Assets Delivery using preload and prefetch
By default, browsers load the assets in a render-blocking way. Modern browsers introduced prefetch a ...
- preload、prefetch的认识
预加载 现在的网络情况虽然很乐观,但是 defer和async 当浏览器碰到 script 脚本的时候: <script src="script.js"></sc ...
随机推荐
- Hbase的namespace命令操作
一.什么是namespace 在RDBMS中有database的概念,用来对table进行分组,那么在HBase中当表比较多的时候如何对表分组呢,就是namespace,可以简单的把namespace ...
- c# TabControl控件中TabPage选项卡切换时触发的事件
选项卡切换触发的是tabcontrol控件的SelectedIndexChanged事件. 当tabcontrol控件的任何一个tabpage被点击或选择,即发生SelectedIndexChange ...
- Lua中如何实现类似gdb的断点调试--02通用变量打印
在前一篇01最小实现中,我们实现了Lua断点调试的的一个最小实现.我们编写了一个模块,提供了两个基本的接口:设置断点和删除断点. 虽然我们已经支持在断点进行变量的打印,但是需要自己指定层数以及变量索引 ...
- Python 列表的（元素的删除）
del:根据索引值删除元素 del 可以删除列表中的单个元素,格式为: del listname[index] 其中,listname 表示列表名称,index 表示元素的索引值.del 也可以删除中 ...
- 前端工程化：使用 shelljs 生成 yapi 接口文件
之前的文章介绍了使用 yapi-to-typescript (下文简称 ytt)生成接口类型定义文件,方便我们直接使用接口的请求和响应类型,能减少很多写接口类型的时间. 使用 yapi-to-type ...
- 服务端&客户端注册进Eureka
目录 服务端(接口提供方) 创建项目 导入Eureka客户端POM 启动类添加注解 配置YML 暴漏接口 启动服务 集群 配置成功后页面如下 客户端(接口调用方) 修改Yml文件 配置类 启动类添加注 ...
- RhaPHP 微信公众号管理系统
框架网址https://www.rhaphp.com/ 开发手册网址:: https://www.kancloud.cn/langleigelang/rhaphp/588488 git 克隆,如果克隆 ...
- 【基础】tail命令查看日志
一.tail 命令介绍 tail 命令可以将文件指定位置到文件结束的内容写到标准输出. 如果你不知道tail命令怎样使用,可以在命令行执行命令tail --help就能看到tail命令介绍和详细的参数 ...
- Java数组经典例题
数组中元素的求和 public class T02 { public static void main(String[] args) { int[][]arr=new int[][]{{1,2,3,4 ...
- 职场PUA
哈哈 你这个的底层逻辑是什么? 顶层设计在哪? 最终交付价值是什么? 过程的抓手在哪里? 如何保证结果的闭环? 你比别人的亮点在哪里? 优势在哪里? 你的思考和沉淀在哪里? 你有形成自己的方法论吗?