Merge pull request #838 from w3c/preload-fixup

Feat(w3c/style): preload for css, scripts (see #663)

js/core/biblio.js

@@ -7,9 +7,12 @@
 /*globals console*/
 "use strict";
 
-define(
-    ["core/pubsubhub"],
-    function (pubsubhub) {
+define([
+    "core/pubsubhub",
+    "core/utils",
+    ],
+    function (pubsubhub, utils) {
+        var bibrefsURL = new URL("https://specref.herokuapp.com/bibrefs?refs=");
         var getRefKeys = function (conf) {
             var informs = conf.informativeReferences
             ,   norms = conf.normativeReferences
@@ -138,7 +141,13 @@ define(
                 if (badrefs.hasOwnProperty(item)) pubsubhub.pub("error", "Bad reference: [" + item + "] (appears " + badrefs[item] + " times)");
             }
         };
-
+        // Opportunistically dns-prefetch to bibref server, as we don't know yet
+        // if we will actually need to download references yet.
+        var link = utils.createResourceHint({
+            hint: "dns-prefetch",
+            href: bibrefsURL.origin,
+        });
+        document.head.appendChild(link);
         return {
             stringifyRef: stringifyRef,
             run: function (conf, doc, cb) {
@@ -183,7 +192,7 @@ define(
                     cb();
                     return;
                 }
-                var url = "https://specref.herokuapp.com/bibrefs?refs=" + externalRefs.join(",");
+                var url = bibrefsURL.href + externalRefs.join(",");
                 fetch(url)
                     .then(function(response) {
                         return response.json();

js/core/utils.js

@@ -1,18 +1,36 @@
-/*jshint laxcomma: true*/
+/*jshint browser: true */
+/*globals console*/
 // Module core/utils
 // As the name implies, this contains a ragtag gang of methods that just don't fit
 // anywhere else.
 "use strict";
 define(
   ["core/pubsubhub"],
   function(pubsubhub) {
+    var resourceHints = new Set([
+      "dns-prefetch",
+      "preconnect",
+      "preload",
+      "prerender",
+    ]);
+    var fetchDestinations = new Set([
+      "document",
+      "embed",
+      "font",
+      "image",
+      "manifest",
+      "media",
+      "object",
+      "report",
+      "script",
+      "serviceworker",
+      "sharedworker",
+      "style",
+      "worker",
+      "xslt",
+      "",
+    ]);
     var utils = {
-      // --- SET UP
-      run: function(conf, doc, cb, msg) {
-        msg.pub("start", "core/utils");
-        msg.pub("end", "core/utils");
-        cb();
-      },
       /**
        * Allows a node to be swapped into a different document at
        * some insertion point(Element). This function is useful for
@@ -84,7 +102,54 @@ define(
           }, +Infinity);
         return (leftPad === +Infinity) ? 0 : leftPad;
       },
-
+      /**
+       * Creates a link element that represents a resource hint.
+       *
+       * @param {Object} opts Configure the resource hint.
+       * @param {String} opts.hint The type of hint (see resourceHints).
+       * @param {URL|String} opts.href The URL for the resource or origin.
+       * @param {String} [opts.corsMode] Optional, the CORS mode to use (see HTML spec).
+       * @param {String} [opts.as] Optional, fetch destination type (see fetchDestinations).
+       * @param {Bool} [opts.dontRemove] If the hint should remain in the spec after processing.
+       * @return {HTMLLinkElement} A link element ready to use.
+       */
+      createResourceHint: function(opts) {
+        if (!opts || typeof opts !== "object") {
+          throw new TypeError("Missing options");
+        }
+        if (!resourceHints.has(opts.hint)) {
+          throw new TypeError("Invalid resources hint");
+        }
+        var url = new URL(opts.href, document.location);
+        var linkElem = document.createElement("link");
+        var href = url.href;
+        linkElem.rel = opts.hint;
+        switch (linkElem.rel) {
+        case "dns-prefetch":
+        case "preconnect":
+          href = url.origin;
+          if (opts.corsMode || url.origin !== document.location.origin) {
+            linkElem.crossOrigin = opts.corsMode || "anonymous";
+          }
+          break;
+        case "preload":
+          if ("as" in opts && typeof opts.as === "string") {
+            if (!fetchDestinations.has(opts.as)) {
+              console.warn("Unknown request destination: " + opts.as);
+            }
+            linkElem.setAttribute("as", opts.as);
+          }
+          break;
+        case "prerender":
+          href = url.href;
+          break;
+        }
+        linkElem.href = href;
+        if (!opts.dontRemove) {
+          linkElem.classList.add("removeOnSave");
+        }
+        return linkElem;
+      },
       /**
        * Makes a ES conforming iterator allowing objects to be used with
        * methods that can interface with Iterators (Array.from(), etc.).
@@ -346,10 +411,8 @@ define(
       // take a document and either a link or an array of links to CSS and appends a <link/> element
       // to the head pointing to each
       linkCSS: function(doc, styles) {
-        if (!Array.isArray(styles)) {
-          styles = [styles];
-        }
-        styles
+        var stylesArray = Array.isArray(styles) ? [].concat(styles) : [styles];
+        var frag = stylesArray
           .map(function(url) {
             var link = doc.createElement("link");
             link.rel = "stylesheet";
@@ -359,7 +422,8 @@ define(
           .reduce(function(elem, nextLink) {
             elem.appendChild(nextLink);
             return elem;
-          }, doc.head);
+          }, doc.createDocumentFragment());
+        doc.head.appendChild(frag);
       },
 
       // TRANSFORMATIONS

js/profile-w3c-common.js

@@ -35,10 +35,10 @@ define([
     "core/include-config",
     "core/override-configuration",
     "core/default-root-attr",
-    "w3c/l10n",
-    "core/markdown",
     "core/style",
     "w3c/style",
+    "w3c/l10n",
+    "core/markdown",
     "w3c/headers",
     "w3c/abstract",
     "w3c/conformance",
@@ -76,10 +76,6 @@ define([
   function(domReady, runner, ui) {
     var args = Array.from(arguments);
     domReady(function() {
-      ui.addCommand("Save Snapshot", "ui/save-html", "Ctrl+Shift+Alt+S");
-      ui.addCommand("About ReSpec", "ui/about-respec", "Ctrl+Shift+Alt+A");
-      ui.addCommand("Definition List", "ui/dfn-list", "Ctrl+Shift+Alt+D");
-      ui.addCommand("Search Specref DB", "ui/search-specref", "Ctrl+Shift+Alt+space");
       runner
         .runAll(args)
         .then(document.respecIsReady)
@@ -88,7 +84,11 @@ define([
           console.error(err);
           // even if things go critically bad, we should still try to show the UI
           ui.show();
-        })
+        });
+      ui.addCommand("Save Snapshot", "ui/save-html", "Ctrl+Shift+Alt+S");
+      ui.addCommand("About ReSpec", "ui/about-respec", "Ctrl+Shift+Alt+A");
+      ui.addCommand("Definition List", "ui/dfn-list", "Ctrl+Shift+Alt+D");
+      ui.addCommand("Search Specref DB", "ui/search-specref", "Ctrl+Shift+Alt+space");
     });
   }
 );