减小JS下载时间

时间 2019-11-12

原文原文链接

核心：减小JS下载时间

预先解析DNS

很是简单，效果立竿见影，加快页面加载时间，多用于预解析CDN的地址的DNSjavascript

<!--在head标签中，越早越好-->
<link rel="dns-prefetch" href="//example.com">

Preload

浏览器会在遇到以下link标签时，马上开始下载main.js(不阻塞parser)，并放在内存中，但不会执行其中的JS语句。只有当遇到script标签加载的也是main.js的时候，浏览器才会直接将预先加载的JS执行掉。html

<link rel="preload" href="/main.js" as="script">

Prefetch

浏览器会在空闲的时候，下载main.js, 并缓存到disk。当有页面使用的时候，直接从disk缓存中读取。其实就是把决定是否和什么时间加载这个资源的决定权交给浏览器。java

若是prefetch还没下载完以前，浏览器发现script标签也引用了一样的资源，浏览器会再次发起请求，这样会严重影响性能的，加载了两次，，因此不要在当前页面立刻就要用的资源上用prefetch，要用preload。浏览器

<link href="main.js" rel="prefetch">

完美的结构

前面两节帮咱们弄懂了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>