Skip to content

Instantly share code, notes, and snippets.

@terrencewood
Created February 8, 2014 04:11
Show Gist options
  • Save terrencewood/8876579 to your computer and use it in GitHub Desktop.
Save terrencewood/8876579 to your computer and use it in GitHub Desktop.
Bookmarklet to find critical path CSS - full JS copied from https://gist.github.com/PaulKinlan/6284142
javascript:(function(){var CSSCriticalPath=function(w,d,opts){var opt=opts ||{};var css={};var pushCSS=function(r){if(!!css[r.selectorText]===false)css[r.selectorText]={};var styles=r.style.cssText.split(/;(%3F![A-Za-z0-9])/);for(var i=0;i < styles.length;i++){if(!!styles[i]===false)continue;var pair=styles[i].split(": ");pair[0]=pair[0].trim();pair[1]=pair[1].trim();css[r.selectorText][pair[0]]=pair[1];}};var parseTree=function(){var height=w.innerHeight;var walker=d.createTreeWalker(d,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 || opt.scanFullPage){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+=k+" { ";for(var j in css[k]){finalCSS+=j+": "+css[k][j]+"; ";}finalCSS+="}\n";}return finalCSS;};parseTree();};var cp=new CSSCriticalPath(window,document);var css=cp.generateCSS();console.log(css);})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment