html资源的预加载preload

2017-10-02

在html页面中加载css资源的时候一般这样使用

<link rel="stylesheet" type="text/css" href="index.css">

现在可以使用<link rel="preload" />来预加载各种资源,例如字体,脚本,图片,音频,这样可以在页面构建dom的时候加载资源,而且不会延迟页面的onload事件,加载后的资源可以给当前页面使用。

<link rel="preload" href="used-later.js" as="script">
<!-- ...other HTML... -->
<script>
  // 在页面加载完成的时候,通过script元素引入资源,由于资源已经预加载了,可以立即使用
  var usedLaterScript = document.createElement('script');
  usedLaterScript.src = 'used-later.js';    
  document.body.appendChild(usedLaterScript)
</script>

利用preload来预加载css文件并立即使用

<link href="./index.css" rel="preload" as="style" onload="this.rel='stylesheet'">

配合媒体查询

在link元素有一个media属性,可以用来指定符合媒体查询条件下加载指定的资源,例如在宽度大于601px的时候会预加载bg-image-wide.png图片,在小于600px的时候会预加载bg-image-narrow.png图片,预加载不会使用,所以在脚本上使用相应媒体查询条件下的预加载的资源

<link rel="preload" href="bg-image-narrow.png" as="image" media="(max-width: 600px)">
<link rel="preload" href="bg-image-wide.png" as="image" media="(min-width: 601px)">
<script>
	var mediaQueryList = window.matchMedia("(max-width: 600px)");
	var header = document.querySelector('header');

	if (mediaQueryList.matches) {
		header.style.backgroundImage = 'url(bg-image-narrow.png)';
	} else {
	    header.style.backgroundImage = 'url(bg-image-wide.png)';
	}
</script>

Preload特性检测

并不是所有的浏览器都支持preload功能,如果浏览器不支持preload功能,那么资源就不会被加载,我们可以检测是否有对应的功能来做相应的兼容策略

var DOMTokenListSupports = function(tokenList, token) {
  if (!tokenList || !tokenList.supports) {
    return;
  }
  try {
    return tokenList.supports(token);
  } catch (e) {
    if (e instanceof TypeError) {
      console.log("The DOMTokenList doesn't have a supported tokens list");
    } else {
      console.error("That shouldn't have happened");
    }
  }
};

var linkSupportsPreload = DOMTokenListSupports(document.createElement("link").relList, "preload");
if (!linkSupportsPreload) {
  // Dynamically load the things that relied on preload.
}

Prload和Prefetch

当能确定网页在未来一定会使用到某个资源时,开发者可以让浏览器提前请求并且缓存好以供后续使用。prefetch支持预拉取图片、脚本或者任何可以被浏览器缓存的资源。
对于当前页面很有必要的资源使用preload,对于可能在将来的页面中使用的资源使用prefetch

标签: javascript css3 html5

如果本文对您有所帮助,可以扫下面二维码给我支持,您的鼓励是我前进的动力!

微信

支付宝

目录

评论

*
*

正在加载验证码......

最新评论

  • 无评论
相关推荐
前端登录凭证存储方案
现在是前后端分离时代,接口登录凭证通常使用cookie,session,web storage来实现,三种方法区别可以阅...
React17.0生命周期调整
在即将到来的react17.0版本,react团队对生命周期做了调整,将会移除 componentWillMount,c...
webpack插件实现
webpack 插件是由「具有 apply 方法的 prototype 对象」所实例化出来的。这个 apply 方法在安...