页面优化加载简易指南

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

基础技术包括:

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


压缩 Compare, Minify

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

  1. Uglify 3? / Online
  2. Google 的 Closure / Online
  3. Yahoo YuiCompressor / Online

扩展阅读 The cost of transpiling es2015 in 2016

CSS 可以尝试下:

  1. CSSNano / Online
  2. CSSo / Online
  3. Yahoo YuiCompressor / Online

扩展阅读 Css Minification Benchmark 2017 report

HTML 优化:

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

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

— 2018.04.03 夜深更新到此 —

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

— 2018.04.08 继续更新 —

异步化资源

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

  1. 特性: 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 控制加载时机快多了。

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

  1. 使用 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 树上,然后异步加载,比较适合业务脚本插入。