preload、prefetch的认识
预加载
现在的网络情况虽然很乐观,但是
defer和async
当浏览器碰到 script 脚本的时候:
<script src="script.js"></script>
没有 defer 或 async,浏览器会立即加载并执行指定的脚本,“立即”指的是在渲染该 script 标签之下的文档元素之前,也就是说不等待后续载入的文档元素,读到就加载并执行。
<script async src="script.js"></script>
有 async,加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行(异步)。
<script defer src="myscript.js"></script>
有 defer,加载后续文档元素的过程将和 script.js 的加载并行进行(异步),但是 script.js 的执行要在所有元素解析完成之后,DOMContentLoaded 事件触发之前完成。
然后从实用角度来说呢,首先把所有脚本都丢到 </body> 之前是最佳实践,因为对于旧浏览器来说这是唯一的优化选择,此法可保证非脚本的其他一切元素能够以最快的速度得到加载和解析。
接着,我们来看一张图咯:
此图告诉我们以下几个要点:
- defer 和 async 在网络读取(下载)这块儿是一样的,都是异步的(相较于 HTML 解析)
- 它俩的差别在于脚本下载完之后何时执行,显然 defer 是最接近我们对于应用脚本加载和执行的要求的
- 关于 defer,此图未尽之处在于它是按照加载顺序执行脚本的,这一点要善加利用
- async 则是一个乱序执行的主,反正对它来说脚本的加载和执行是紧紧挨着的,所以不管你声明的顺序如何,只要它加载完了就会立刻执行
- 仔细想想,async 对于应用脚本的用处不大,因为它完全不考虑依赖(哪怕是最低级的顺序执行),不过它对于那些可以不依赖任何脚本或不被任何脚本依赖的脚本来说却是非常合适的,
preload和refetch
preload
通常在页面中,我们需要加载一些脚本和样式,而使用 preload 可以对当前页面所需的脚本、样式等资源进行预加载,而无需等到解析到 script 和 link 标签时才进行加载。这一机制使得资源可以更早的得到加载并可用,且更不易阻塞页面的初步渲染,进而提升性能。
使用方式
将 link 标签的 rel 属性的值设为 preload,as 属性的值为资源类型(如脚本为 script,样式表为 style)
<head>
<meta charset="utf-8">
<title>preload example</title>
<!-- 对 style.css 和 index.js 进行预加载 -->
<link rel="preload" href="style.css" as="style">
<link rel="preload" href="index.js" as="script">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="app"></div>
<script src="index.js"></script>
</body>
prefetch
与 preload
一样,都是对资源进行预加载,但是 prefetch 加载的资源一般不是用于当前页面的,即未来很可能用到的这样一些资源,简单点说就是其他页面会用到的资源。当然,prefetch 不会像 preload 一样,在页面渲染的时候加载资源,而是利用浏览器空闲时间来下载。当进入下一页面,就可直接从 disk cache 里面取,既不影响当前页面的渲染,又提高了其他页面加载渲染的速度。
使用方式
同 preload
很相似,无需指定 as 属性:
<head>
<meta charset="utf-8">
<title>preload example</title>
<!-- 对 style.css 和 index.js 进行 preload 预加载 -->
<link rel="preload" href="style.css" as="style">
<link rel="preload" href="index.js" as="script">
<!-- 对资源进行 prefetch 预加载 -->
<link rel="prefetch" href="next.css">
<link rel="prefetch" href="next.js">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="app"></div>
<script src="index.js"></script>
</body>
总结:对当前页面需要的资源,使用 preload 进行预加载,对其它页面需要的资源进行 prefetch 预加载。
Subresource和Prerender
subresource
可以用来指定资源是最高优先级的。比如,在Chrome和Opera中我们可以加上下面的代码:
<link rel="subresource" href="styles.css">
Chromium的文档这么解释:
和 "Link rel=prefetch"的语义不同,"Link rel=subresource"是一种新的连接关系。rel=prefetch指定了下载后续页面用到资源的低优先级,而rel=subresource则是指定当前页面资源的提前加载。
所以,如果资源是在当前页面需要,或者马上就会用到,则推荐用subresource,否则还是用prefetch。
prerender
是一个重量级的选项,它可以让浏览器提前加载指定页面的所有资源。
<link rel="prerender" href="/thenextpage.html" />
Steve Souders的文章详细解释了这个技术:
prerender就像是在后台打开了一个隐藏的tab,会下载所有的资源、创建DOM、渲染页面、执行JS等等。如果用户进入指定的链接,隐藏的这个页面就会进入马上进入用户的视线。Google Search多年前就利用了这个特性实现了Instant Pages功能。微软最近也宣布会让Bing在IE11上用类似prerender的技术。
但是要注意,一定要在十分确定用户回点某个链接时才用这个特性,否则客户端就会无端的下载很多资源和渲染这个页面。
正如任何提前的动作一样,预判总是有一定风险出错。如果提前的动作是昂贵的(比如高CPU、耗电、占用带宽),就要谨慎使用了。虽然不容易预判用户会点进哪个页面,但还是存在一些典型的场景:
如果用户搜索到了一个明显正确的结果时,那么这个页面就很有可能被点入
如果用户在登录页面,那么登录成功后的页面就很可能接下来会被加载了
如果用户在阅读一个多页面的文章或者有页码的内容时,下一页就很可能会马上被点击了
利用Page Visibility API可以用来防止页面在还没真正展示给用户时就触发了JS的执行。
参考:
defer和async
prefetch与 preload
prefetch预加载
preload当即加载
加载技术概述
dnc fetch
Prerender Subresource
原文地址:https://segmentfault.com/a/1190000016955899
preload、prefetch的认识的更多相关文章
- 如何配置 webpack 支持 preload, prefetch, dns-prefetch
如何配置 webpack 支持 preload, prefetch, dns-prefetch webpack , preload, prefetch https://webpack.js.org/p ...
- preload & prefetch
原文地址在 我的笔记里,觉得还行就给个 star 吧:) 关于 preload 和 prefetch 早有耳闻,知道它们可以优化页面加载速度,然具体情况却了解不多.搜索了相关的资料后对其有了些认识,在 ...
- Preload,Prefetch 和它们在 Chrome 之中的优先级
前言 上周五到的时候,想起之前在手游平台上有处理dns-prefetch的优化,那这篇分享的就更仔细了.今日早读文章由@gy134340翻译并授权分享. 正文从这开始- 今天我们来深入研究一下 Chr ...
- Web 性能优化:Preload与Prefetch的使用及在 Chrome 中的优先级
摘要: 理解Preload与Prefetch. 原文:Web 性能优化:Preload,Prefetch的使用及在 Chrome 中的优先级 作者:前端小智 Fundebug经授权转载,版权归原作者所 ...
- 一步一步学会preload和prefetch
preload和prefetch是什么? 我们常说的preload和prefetch,是link标签rel里新增的两种值,用于让浏览器提前加载指定的资源,它们会先被缓存(属于http cache缓存) ...
- vue cli 3
介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统 通过 @vue/cli 搭建交互式的项目脚手架. 通过 @vue/cli + @vue/cli-service-global 快 ...
- vue 工作学习总结
配置ESlint yarn 初始化 yarn init yes 添加依赖 yarn add [package] 升级依赖 yarn upgrade [package] 移出依赖 yarn remove ...
- Vue SSR初探
因为之前用nuxt开发过应用程序,但是nuxt早就达到了开箱即用的目的,所以一直对vue ssr的具体实现存在好奇. 构建步骤 我们通过上图可以看到,vue ssr 也是离不开 webpack 的打包 ...
- 常见 Web 性能优化方式
这篇文章是我阅读 Web Performance 101 之后的进行的粗糙的翻译作为笔记,英语还行的童鞋可以直接看原文. 这篇文章主要介绍了现代 web 加载性能(注意不涉及代码算法等),学习为什么加 ...
随机推荐
- 为什么pthread_cond_wait须要传递mutex參数
这是来自知乎的一个问题,由@吴志强提出,有意思的是,他看了大家的回答后,突然顿悟了,同一时候也发现有人答错了,于是乎.他自己回答了自己的问题. 我看完后.发现他分析的非常精彩,于是就记录在这.以下是他 ...
- Selenium webdriver-UI Element定位
转:http://blog.csdn.net/jillliang/article/details/8206402 1.创建Fixfox web driver实例 WebDriver driver = ...
- Path Sum II 总结DFS
https://oj.leetcode.com/problems/path-sum-ii/ Given a binary tree and a sum, find all root-to-leaf p ...
- ubuntu刚安装好之后apt-get使用异常
gaozhang 刚安装好之后,想执行apt-get update 任务,出现以下错误提示 提示说明apt正在执行,我们就野蛮的将apt进程杀.死即可,不过有点多,一个个kill 执行完之后再 ...
- HTML网页做成ASP.NET后台的方法以及.NET后台控制前台样式的方法
之前一直不知道,写好的纯HTML网页怎么做成ASP.NET后台的呢,因为之前使用别人的HTML模板写过一个自己的个人博客 果冻栋吖个人博客 当时用的PHP写的.一直在考虑怎么做成.NET的. 今天自己 ...
- POJ 2406 KMP next数组的应用
题意:让你找最小重复串的个数 加深KMP中对next数组的理解 #include <cstdio> #include <cstring> using namespace std ...
- Map初始化
转载至:http://blog.csdn.net/dujianxiong/article/details/54849079 第一种方法:static块初始化 public class Demo{ pr ...
- 创建异步对象XHR的兼容写法、get、post上传数据的方式
兼容ie7以下,创建异步对象的函数 function creatXHR(){ if(typeof XMLHttpRequest != "undefined"){ return ne ...
- Django学习案例一(blog):一. 创建project、app
1.创建project 方法1:使用命令行创建项目.在E盘cmd执行如下命令: django-admin.py startproject myblog 方法2:使用pycharm创建项目.放置位置为D ...
- JavaScript获取非行间样式
<html> <head> <meta charset="utf-8"> <title>无标题文档</title> &l ...