页面优化加载简易指南

让页面加载更快是每个网站都需要做的优化。

基础技术包括：

最小化加载文件体积
使用异步加载标签

这里仅作简易的指南，为了新人或者已经忘记初衷的人。

压缩 Compare, Minify

Javascript 压缩脚本推荐两个工具：

扩展阅读 The cost of transpiling es2015 in 2016

CSS 可以尝试下：

扩展阅读 Css Minification Benchmark 2017 report

HTML 优化：

HTML Minifier / Online
HTML Tidy 这个比较古旧，可是非常适合作为优化手段。

扩展阅读 Google’s Minify Resources (HTML, CSS, and JavaScript)

— 2018.04.03 夜深更新到此 —

提醒自己不要忘记前端更多是为了优化阅读体验。

— 2018.04.08 继续更新 —

异步化资源

通过对资源异步加载，将第一次屏显时间提高到最快。

特性: Preload link

<link rel="preload" href="used-later.js" as="script" />
<!-- ...other HTML... -->
<script>
  // 最后通过Javascript再次将已经预加载到缓存的脚本执行
  var usedLaterScript = document.createElement("script");
  usedLaterScript.src = "used-later.js";
  document.body.appendChild(usedLaterScript);
</script>

当然除了 script 也可以加载 style

<link rel="preload" href="custom.css" as="style" />

更进一步优化

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

这个 preload 优势就是浏览器本身加载，速度和加载时机都非常靠前，比起自己通过 Javascript 控制加载时机快多了。

注意，这个特性并不是每个浏览器都完整支持。

使用 Javascript 进行异步

这个是古老的方法，并且可行。可是问题出现在加载实际上。

因为本身 HTML 的顺序加载和解释方式上，一般只有在 HTML 尾部执行 Javascript 才能准确加载异步脚本。

如在 <html /> 后加载 <script />

<html>
  <head></head>
  <body></body>
</html>

<script>
  function rStyle(url) {
    var s = document.getElementsByTagName("head")[0];
    var link = document.createElement("link");
    link.rel = "stylesheet";
    link.type = "text/css";
    link.href = url;
    link.media = "all";
    link.addEventListener("error", function () {
      // handle error
    });
    link.addEventListener("load", function () {
      // handle load done
    });

    s.appendChild(link);
  }

  rStyle("https://iscys.com/js/utils.js");
</script>

在页面解释到此处就是插入一个对象到 DOM 树上，然后异步加载，比较适合业务脚本插入。

压缩 Compare, Minify#

异步化资源#

压缩 Compare, Minify

异步化资源