ctorx/criticalcss.html

## criticalcss.html
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <h2>Original CSS</h2>
  <style style="display: block; white-space: pre; font-family: monospace">
h2 { margin:0; }
ol { color:red; }
li { color:blue; background-color: red; }
li:hover { color:purple; background-color: red; }
li:first-child {  color:green; background-color: yellow; }
@media (max-width:512px) {
  li:first-child { color: cyan; background-color: lime; }
}
li:last-child { color:pink; background-color: blue; }
  </style>

  <h2>Critical CSS</h2>
  <pre id=output></pre>
  <p>Note the last-child is not in the output because it is not visible (unless you have a huge monitor, in which case, shame on you, shrink your window).</p>
  <ol>
    <li>TEST</li>
    <li>TEST</li>
    <li>TEST</li>
    <li>TEST</li>
    <li>TEST</li>
    <li>TEST</li>
    <li>TEST</li>
    <li>TEST</li>
    <li>TEST</li>
    <li>TEST</li>
    <li>TEST</li>
    <li>TEST</li>
    <li>TEST</li>
    <li>TEST</li>
    <li>TEST</li>
    <li>TEST</li>
    <li>TEST</li>
    <li>TEST</li>
    <li>TEST</li>
    <li>TEST</li>
    <li>TEST</li>
    <li>TEST</li>
    <li>TEST</li>
    <li>TEST</li>
    <li>TEST</li>
    <li>TEST</li>
    <li>TEST</li>
    <li>TEST</li>
    <li>TEST</li>
    <li>TEST</li>
    <li>TEST</li>
    <li>TEST</li>
    <li>TEST</li>
    <li>TEST</li>
    <li>TEST</li>
    <li>TEST</li>
    <li>TEST</li>
    <li>TEST</li>
    <li>TEST</li>
    <li>TEST</li>
    <li>TEST</li>
    <li>TEST</li>
    <li>TEST</li>
    <li>TEST</li>
    <li>TEST</li>
    <li>TEST</li>
    <li>TEST</li>
    <li>TEST</li>
    <li>TEST</li>
    <li>TEST</li>
    <li>TEST</li>
    <li>TEST</li>
    <li>TEST</li>
    <li>TEST</li>
    <li>TEST</li>
    <li>TEST</li>
  </ol>

</body>
</html>

## criticalcss.js
// noprotect
var CSSCriticalPath = function(w, d) {
  var css = {};
  var pushCSS = function(r) {
    // The last selector wins, so over-write
    // merging existing css will happen here...
    css[r.selectorText] = r.cssText;
  };

  var parseTree = function() {
    // Get a list of all the elements in the view.
    var height = w.innerHeight;
    var walker = d.createTreeWalker(d.body, NodeFilter.SHOW_ELEMENT, function(node) { return NodeFilter.FILTER_ACCEPT; }, true);

    while(walker.nextNode()) {
      var node = walker.currentNode;
      var rect = node.getBoundingClientRect();
      if(rect.top < height) {
        // element is in the first scroll of the screen
        var rules = w.getMatchedCSSRules(node);
        if(!!rules) {
          for(var r = 0; r < rules.length; r++) {
            pushCSS(rules[r]);
          }
        }
      }
    }
  };

  this.generateCSS = function() {
    var finalCSS = "";
    for(var k in css) {
      finalCSS += css[k] + "\n";
    }

    return finalCSS;
  };

  parseTree();
};

window.onload = function() {
  var cp = new CSSCriticalPath(window, document);
  var css = cp.generateCSS();

  output.innerText = css;
};
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset=utf-8 />
	<title>JS Bin</title>
	</head>
	<body>
	<h2>Original CSS</h2>
	<style style="display: block; white-space: pre; font-family: monospace">
	h2 { margin:0; }
	ol { color:red; }
	li { color:blue; background-color: red; }
	li:hover { color:purple; background-color: red; }
	li:first-child { color:green; background-color: yellow; }
	@media (max-width:512px) {
	li:first-child { color: cyan; background-color: lime; }
	}
	li:last-child { color:pink; background-color: blue; }
	</style>

	<h2>Critical CSS</h2>
	<pre id=output></pre>
	<p>Note the last-child is not in the output because it is not visible (unless you have a huge monitor, in which case, shame on you, shrink your window).</p>
	<ol>
	<li>TEST</li>
	<li>TEST</li>
	<li>TEST</li>
	<li>TEST</li>
	<li>TEST</li>
	<li>TEST</li>
	<li>TEST</li>
	<li>TEST</li>
	<li>TEST</li>
	<li>TEST</li>
	<li>TEST</li>
	<li>TEST</li>
	<li>TEST</li>
	<li>TEST</li>
	<li>TEST</li>
	<li>TEST</li>
	<li>TEST</li>
	<li>TEST</li>
	<li>TEST</li>
	<li>TEST</li>
	<li>TEST</li>
	<li>TEST</li>
	<li>TEST</li>
	<li>TEST</li>
	<li>TEST</li>
	<li>TEST</li>
	<li>TEST</li>
	<li>TEST</li>
	<li>TEST</li>
	<li>TEST</li>
	<li>TEST</li>
	<li>TEST</li>
	<li>TEST</li>
	<li>TEST</li>
	<li>TEST</li>
	<li>TEST</li>
	<li>TEST</li>
	<li>TEST</li>
	<li>TEST</li>
	<li>TEST</li>
	<li>TEST</li>
	<li>TEST</li>
	<li>TEST</li>
	<li>TEST</li>
	<li>TEST</li>
	<li>TEST</li>
	<li>TEST</li>
	<li>TEST</li>
	<li>TEST</li>
	<li>TEST</li>
	<li>TEST</li>
	<li>TEST</li>
	<li>TEST</li>
	<li>TEST</li>
	<li>TEST</li>
	<li>TEST</li>
	</ol>

	</body>
	</html>
	// noprotect
	var CSSCriticalPath = function(w, d) {
	var css = {};
	var pushCSS = function(r) {
	// The last selector wins, so over-write
	// merging existing css will happen here...
	css[r.selectorText] = r.cssText;
	};

	var parseTree = function() {
	// Get a list of all the elements in the view.
	var height = w.innerHeight;
	var walker = d.createTreeWalker(d.body, NodeFilter.SHOW_ELEMENT, function(node) { return NodeFilter.FILTER_ACCEPT; }, true);

	while(walker.nextNode()) {
	var node = walker.currentNode;
	var rect = node.getBoundingClientRect();
	if(rect.top < height) {
	// element is in the first scroll of the screen
	var rules = w.getMatchedCSSRules(node);
	if(!!rules) {
	for(var r = 0; r < rules.length; r++) {
	pushCSS(rules[r]);
	}
	}
	}
	}
	};

	this.generateCSS = function() {
	var finalCSS = "";
	for(var k in css) {
	finalCSS += css[k] + "\n";
	}

	return finalCSS;
	};

	parseTree();
	};

	window.onload = function() {
	var cp = new CSSCriticalPath(window, document);
	var css = cp.generateCSS();

	output.innerText = css;
	};