10x performance boosts

.gitignore

@@ -48,4 +48,5 @@ node_modules
 # built
 dest/asset/js/content.js
 test/index.build.js
+test/index.build.js.map
 .cache

CHANGELOG.md

@@ -1,3 +1,8 @@
+**ver 2.4.0 | 06/09/2019**
+
+1. Code optimization: 10x speed up!
+2. Build tool: switch browserify to parcel
+
 **ver 2.3.2 | 18/11/2018**
 
 1. More friendly prompt text for first use or error display.

dest/manifest.json

@@ -1,6 +1,6 @@
 {
   "name": "CSS Used",
-  "version": "2.3.3",
+  "version": "2.4.0",
   "permissions": ["<all_urls>","tabs"],
   "author": "Bob",
   "icons": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "css-used-chrome-ext",
-  "version": "2.3.3",
+  "version": "2.4.0",
   "description": "A chrome extension to get all css rules used by the selected DOM and its children.",
   "main": "./src/main.js",
   "scripts": {

src/filterRules.js

@@ -5,12 +5,17 @@
 // each testing is wrapped by a settimeout timmer to make it async
 // because the testing can be a long time if too many.
 
-var debugMode = false;
+var debugMode = process.env.NODE_ENV!=='production';
 const cssHelper = require('./cssHelper');
 
 // may match accoding to interaction
-const pseudocls = '((-(webkit|moz|ms|o)-)?(full-screen|fullscreen))|-o-prefocus|active|checked|disabled|empty|enabled|focus|hover|in-range|invalid|link|out-of-range|target|valid|visited',
-  pseudoele = '((-(webkit|moz|ms|o)-)?(focus-inner|input-placeholder|placeholder|selection|resizer|scrollbar(-(button|thumb|corner|track(-piece)?))?))|-ms-(clear|reveal|expand)|-moz-(focusring)|-webkit-(details-marker)|after|before|first-letter|first-line';
+const PseudoClass = '((-(webkit|moz|ms|o)-)?(full-screen|fullscreen))|-o-prefocus|active|checked|disabled|empty|enabled|focus|hover|in-range|invalid|link|out-of-range|target|valid|visited',
+  PseudoElement = '((-(webkit|moz|ms|o)-)?(focus-inner|input-placeholder|placeholder|selection|resizer|scrollbar(-(button|thumb|corner|track(-piece)?))?))|-ms-(clear|reveal|expand)|-moz-(focusring)|-webkit-(details-marker)|after|before|first-letter|first-line',
+  MaxPossiblePseudoLength=30,
+  REG0=new RegExp('^(:(' + PseudoClass + ')|::?(' + PseudoElement + '))+$', ''),
+  REG1=new RegExp('( |^)(:(' + PseudoClass + ')|::?(' + PseudoElement + '))+( |$)', 'ig'),
+  REG2=new RegExp('\\((:(' + PseudoClass + ')|::?(' + PseudoElement + '))+\\)', 'ig'),
+  REG3=new RegExp('(:(' + PseudoClass + ')|::?(' + PseudoElement + '))+', 'ig');
 
 function filterRules($0, objCss, taskTimerRecord) {
   var promises = [];
@@ -29,7 +34,7 @@ function filterRules($0, objCss, taskTimerRecord) {
     objCss.normRule.forEach(function (rule, idx) {
       promises.push(new Promise(function (res, rej) {
         var timer = setTimeout(function () {
-          if (idx % 100 === 0) {
+          if (idx % 1000 === 0) {
             chrome.runtime.sendMessage({
               dom: domlist.length - 1,
               rule: objCss.normRule.length,
@@ -53,21 +58,21 @@ function filterRules($0, objCss, taskTimerRecord) {
               // but wont apply now 
               // eg. :active{xxx}
               // only works when clicked on and actived
-              if (sel.match(new RegExp('^(:(' + pseudocls + ')|::?(' + pseudoele + '))+$', ''))) {
+              if (sel.length<MaxPossiblePseudoLength && sel.match(REG0)){
                 selMatched.push(sel);
               } else {
                 let count = [];
-                let replacedSel = sel.replace(new RegExp('( |^)(:(' + pseudocls + ')|::?(' + pseudoele + '))+( |$)', 'ig'), ' * ');
-                replacedSel = replacedSel.replace(new RegExp('\\((:(' + pseudocls + ')|::?(' + pseudoele + '))+\\)', 'ig'), '(*)');
-                replacedSel = replacedSel.replace(new RegExp('(:(' + pseudocls + ')|::?(' + pseudoele + '))+', 'ig'), '');
-                try {
-                  if ($0.matches(sel) || $0.querySelectorAll(sel).length !== 0) {
-                    selMatched.push(sel);
-                  }
-                } catch (e) {
-                  count.push(sel);
-                  count.push(e);
-                }
+                let replacedSel = sel.replace(REG1, ' * ')
+                  .replace(REG2, '(*)')
+                  .replace(REG3, '');
+                // try {
+                //   if ($0.matches(sel) || $0.querySelectorAll(sel).length !== 0) {
+                //     selMatched.push(sel);
+                //   }
+                // } catch (e) {
+                //   count.push(sel);
+                //   count.push(e);
+                // }
                 try {
                   if ($0.matches(replacedSel) || $0.querySelectorAll(replacedSel).length !== 0) {
                     selMatched.push(sel);

test/index.js

@@ -1,3 +1,23 @@
+let wSocket = new WebSocket('ws://' + 'localhost' + ':' + '12345' + '');
+
+wSocket.onopen = function() {
+  // console.log("Primary Socket Connected.");
+};
+
+wSocket.onmessage = function(evt) {
+  // console.log(evt);
+  location.reload();
+}
+
+wSocket.onclose = function() {
+  console.log("Primary Socket Closed.");
+  wSocket = null;
+};
+
+wSocket.onerror = function(evt) {
+  console.error(evt);
+}
+
 import expected from './expected.js'
 import getCssUsed from '../src/main.js'
 
@@ -18,24 +38,5 @@ window.chrome = {
     }
   }
 }
-getCssUsed(document.documentElement);
-
-let wSocket = new WebSocket('ws://' + 'localhost' + ':' + '12345' + '');
-
-wSocket.onopen = function() {
-  // console.log("Primary Socket Connected.");
-};
-
-wSocket.onmessage = function(evt) {
-  // console.log(evt);
-  location.reload();
-}
-
-wSocket.onclose = function() {
-  console.log("Primary Socket Closed.");
-  wSocket = null;
-};
 
-wSocket.onerror = function(evt) {
-  console.error(evt);
-}
+getCssUsed(document.documentElement);

test/test.js

@@ -6,7 +6,7 @@ const entryFiles = Path.join(__dirname, './index.js');
 const options = {
   outDir: './test',
   outFile: 'index.build.js',
-  scopeHoist: true, // Turn on experimental scope hoisting/tree shaking flag, for smaller production bundles
+  // sourceMaps: true,
   hmrPort: 12345, // hmr socket port
 };