预加载

现在的网络情况虽然很乐观,但是

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> 之前是最佳实践,因为对于旧浏览器来说这是唯一的优化选择,此法可保证非脚本的其他一切元素能够以最快的速度得到加载和解析。

接着,我们来看一张图咯:

此图告诉我们以下几个要点:

  1. defer 和 async 在网络读取(下载)这块儿是一样的,都是异步的(相较于 HTML 解析)
  2. 它俩的差别在于脚本下载完之后何时执行,显然 defer 是最接近我们对于应用脚本加载和执行的要求的
  3. 关于 defer,此图未尽之处在于它是按照加载顺序执行脚本的,这一点要善加利用
  4. async 则是一个乱序执行的主,反正对它来说脚本的加载和执行是紧紧挨着的,所以不管你声明的顺序如何,只要它加载完了就会立刻执行
  5. 仔细想想,async 对于应用脚本的用处不大,因为它完全不考虑依赖(哪怕是最低级的顺序执行),不过它对于那些可以不依赖任何脚本或不被任何脚本依赖的脚本来说却是非常合适的,

preload和refetch

preload通常在页面中,我们需要加载一些脚本和样式,而使用 preload 可以对当前页面所需的脚本、样式等资源进行预加载,而无需等到解析到 script 和 link 标签时才进行加载。这一机制使得资源可以更早的得到加载并可用,且更不易阻塞页面的初步渲染,进而提升性能。

使用方式
将 link 标签的 rel 属性的值设为 preload,as 属性的值为资源类型(如脚本为 script,样式表为 style)

&lt;head&gt;
&lt;meta charset="utf-8"&gt;
&lt;title&gt;preload example&lt;/title&gt;
&lt;!-- 对 style.css 和 index.js 进行预加载 --&gt;
&lt;link rel="preload" href="style.css" as="style"&gt;
&lt;link rel="preload" href="index.js" as="script"&gt; &lt;link rel="stylesheet" href="style.css"&gt;
&lt;/head&gt; &lt;body&gt;
&lt;div id="app"&gt;&lt;/div&gt; &lt;script src="index.js"&gt;&lt;/script&gt;
&lt;/body&gt;

prefetchpreload 一样,都是对资源进行预加载,但是 prefetch 加载的资源一般不是用于当前页面的,即未来很可能用到的这样一些资源,简单点说就是其他页面会用到的资源。当然,prefetch 不会像 preload 一样,在页面渲染的时候加载资源,而是利用浏览器空闲时间来下载。当进入下一页面,就可直接从 disk cache 里面取,既不影响当前页面的渲染,又提高了其他页面加载渲染的速度。

使用方式
preload 很相似,无需指定 as 属性:

&lt;head&gt;
&lt;meta charset="utf-8"&gt;
&lt;title&gt;preload example&lt;/title&gt;
&lt;!-- 对 style.css 和 index.js 进行 preload 预加载 --&gt;
&lt;link rel="preload" href="style.css" as="style"&gt;
&lt;link rel="preload" href="index.js" as="script"&gt; &lt;!-- 对资源进行 prefetch 预加载 --&gt;
&lt;link rel="prefetch" href="next.css"&gt;
&lt;link rel="prefetch" href="next.js"&gt; &lt;link rel="stylesheet" href="style.css"&gt;
&lt;/head&gt; &lt;body&gt;
&lt;div id="app"&gt;&lt;/div&gt; &lt;script src="index.js"&gt;&lt;/script&gt;
&lt;/body&gt;

总结:对当前页面需要的资源,使用 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的认识的更多相关文章

  1. 如何配置 webpack 支持 preload, prefetch, dns-prefetch

    如何配置 webpack 支持 preload, prefetch, dns-prefetch webpack , preload, prefetch https://webpack.js.org/p ...

  2. preload & prefetch

    原文地址在 我的笔记里,觉得还行就给个 star 吧:) 关于 preload 和 prefetch 早有耳闻,知道它们可以优化页面加载速度,然具体情况却了解不多.搜索了相关的资料后对其有了些认识,在 ...

  3. Preload,Prefetch 和它们在 Chrome 之中的优先级

    前言 上周五到的时候,想起之前在手游平台上有处理dns-prefetch的优化,那这篇分享的就更仔细了.今日早读文章由@gy134340翻译并授权分享. 正文从这开始- 今天我们来深入研究一下 Chr ...

  4. Web 性能优化:Preload与Prefetch的使用及在 Chrome 中的优先级

    摘要: 理解Preload与Prefetch. 原文:Web 性能优化:Preload,Prefetch的使用及在 Chrome 中的优先级 作者:前端小智 Fundebug经授权转载,版权归原作者所 ...

  5. 一步一步学会preload和prefetch

    preload和prefetch是什么? 我们常说的preload和prefetch,是link标签rel里新增的两种值,用于让浏览器提前加载指定的资源,它们会先被缓存(属于http cache缓存) ...

  6. vue cli 3

    介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统 通过 @vue/cli 搭建交互式的项目脚手架. 通过 @vue/cli + @vue/cli-service-global 快 ...

  7. vue 工作学习总结

    配置ESlint yarn 初始化 yarn init yes 添加依赖 yarn add [package] 升级依赖 yarn upgrade [package] 移出依赖 yarn remove ...

  8. Vue SSR初探

    因为之前用nuxt开发过应用程序,但是nuxt早就达到了开箱即用的目的,所以一直对vue ssr的具体实现存在好奇. 构建步骤 我们通过上图可以看到,vue ssr 也是离不开 webpack 的打包 ...

  9. 常见 Web 性能优化方式

    这篇文章是我阅读 Web Performance 101 之后的进行的粗糙的翻译作为笔记,英语还行的童鞋可以直接看原文. 这篇文章主要介绍了现代 web 加载性能(注意不涉及代码算法等),学习为什么加 ...

随机推荐

  1. HDU 5176

    这道题以前好像在哪遇到过. 注意树的每一条边都是桥,所以,桥两端的点要到达对方是必须通过这条边的.于是,可以把边由小到大排序,利用并查集,这样,每加一条边就连通了一部分,而随着权值的增大,必定是桥两端 ...

  2. nyoj--105--九的余数(水题)

    九的余数 时间限制:3000 ms  |  内存限制:65535 KB 难度:3 描述 现在给你一个自然数n,它的位数小于等于一百万,现在你要做的就是求出这个数整除九之后的余数. 输入 第一行有一个整 ...

  3. Node.js:JXcore

    ylbtech-Node.js:JXcore 1.返回顶部 1. Node.js JXcore 打包 Node.js 是一个开放源代码.跨平台的.用于服务器端和网络应用的运行环境. JXcore 是一 ...

  4. cas-client-core单点登录排除不需要拦截的URL

    同事提了一个要求,要求对外提供的接口不需要经过单点登录验证,我刚开始想,这简单,提供不需要拦截的url数组,在AuthenticationFilter里面对url进行检查,在此数组内,就不需要拦截. ...

  5. wampserver配置多站点

    1.打开C:\wamp\bin\apache\apache2.2.22\conf\httpd.conf(因安装的路径而异),查找listen 80 下面加上listen 8080 2.然后加上 < ...

  6. Mysql库的操作

    一.系统数据库 执行如下命令,查看系统库 show databases; information_schema: 虚拟库,不占用磁盘空间,存储的是数据库启动后的一些参数,如用户表信息.列信息.权限信息 ...

  7. POJ 2299 求逆序对个数 归并排序 Or数据结构

    题意: 求逆序对个数 没有重复数字 线段树实现: 离散化. 单点修改,区间求和 // by SiriusRen #include <cstdio> #include <cstring ...

  8. 以SqlHelper为例论面向对象中封装的使用(续)

    上文以SqlHelper为例说明了面向对象中封装的好处,但是上文只是简单封装,考虑下面代码的情况: public static Activate GetByCode(string code) { Li ...

  9. [OpenWrt]安装mjpg-streamer

    安装mjpg-streamer 远程监控基本上是wifi小车的一个必备功能了.摄像头我用的是奥尼百脑通 D881,这个要100左右. 确认安装了以下软件: kmod-usb2 kmod-video-u ...

  10. RN配置

    Write by lz: 详细参考官方网址: http://reactnative.cn/docs/0.43/getting-started.html#content 若是无法安装 Chocolate ...