4

There's no escaping Internet Explorer 11 as it will be around until 2023 as the default browser of the most popular desktop operating system. Yet, Internet Explorer 11 will not get new updates to JavaScript, CSS3 or HTML5.

Assuming most of the missing features can be transpiled via Babel or polyfilled, what's the best way to avoid that overhead for browsers that do support the same features, such as Chrome and FireFox?

Reference: https://www.browseemall.com/Blog/index.php/2015/11/17/is-internet-explorer-11-the-new-internet-explorer-6/

  • 1) Does transpilation create overhead for the up-to-date browsers? I thought it only happened at build/deploy time. 2) I believe polyfills normally check if the feature already exists before creating the replacement, so if there is a fast native implementation it won't get overwritten. – Ixrec Mar 1 '16 at 16:51
  • I do think transpilation does cause an overhead if the modern browser has features that the transpiler is attempting to mimic by including a runtime. The problem with polyfills is that that testing is happening on the client side, which means we've already incurred the penalty of transfer the source over the wire, possibly unnecessarily – zumalifeguard Mar 2 '16 at 2:16
1

This certainly isn't "the best way" to do it, but that may give you more &/or better ideas, and it seems to work in Firefox, Chrome, IE9+ ... and even on my outdated Android phone :

http://www.ysharp.net/experiments/JSLT/polyfill-poc.html

<!DOCTYPE html> <!-- If only to please Mr. IE, wrt.
                     its so-called "Standards mode", etc -->
<html>
<head>
<title>Polyfill PoC</title>
<script>

var listener = (typeof document.addEventListener !== "undefined" ? document.addEventListener : null),
    onLoad = function() {
      function polyfilled() {
        if (remaining) {
          for (var p = 0; p < needed.length; p++) {
            var s;
            if (s = needed[p].content) {
              eval(s);
              needed[p].content = null;
              remaining--;
            }
          }
        }
        if (!remaining) {
          run();
        }
      }
      function polyIndexOf(id) {
        var p = needed.length;
        while ((--p >= 0) && (needed[p].id !== id));
        return p;
      }
      function grabIt(src, at) {
        var xhr = new XMLHttpRequest();
        remaining++;
        xhr.open("GET", src);
        xhr.onload = function(e) {
          if (xhr.readyState === 4) {
            if (xhr.status === 200) {
              needed[at].content = xhr.responseText;
            } else {
              console.error(xhr.statusText);
            }
          }
          polyfilled();
        };
        xhr.send();
      }
      var polyscripts = document.querySelectorAll("polyfill[id]"),
          remaining = 0,
          needed = [ ];

      // Begin polyfill requirement gathering logic
      if (typeof Array.prototype.find === "undefined") {
        needed.push({ id: "needed_ES5" });
      }

      if (typeof Per === "undefined") {
        needed.push({ id: "needed_Per" });
      }
      // End polyfill requirement gathering logic

      for (var i = 0; i < polyscripts.length; i++) {
        var polyscript = polyscripts[i],
            index;
        if (
          (polyscript.id.substring(0, 7) === "needed_") &&
          ((index = polyIndexOf(polyscript.id)) >= 0)
        ) {
          grabIt(polyscript.getAttribute("src"), index);
        }
      }
      polyfilled();
    };

if (listener) {
  listener.call(document, "DOMContentLoaded", onLoad);
} else {
  window.onload = onLoad;
}

</script>
</head>
<body>


//...

<polyfill id="needed_ES5" src="http://www.ysharp.net/experiments/JSLT/2016-03-07/es5-shim.min.js" />
<polyfill id="needed_Per" src="http://www.ysharp.net/experiments/JSLT/2016-03-07/per.min.js" />
</body>
</html>

'HTH,

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.