Lower memory usage when comparing strings (#227)

Author: bartveneman

benchmark/memory.js

@@ -4,8 +4,8 @@ import * as fs from 'fs'
 const files = [
   ['bol-com-20190617', 'Bol.com', 117],
   ['bootstrap-5.0.0', 'Bootstrap 5.0.0', 49],
-  ['css-tricks-20190319', 'CSS-Tricks', 50],
   ['cnn-20220403', 'CNN', 360],
+  ['css-tricks-20190319', 'CSS-Tricks', 50],
   ['facebook-20190319', 'Facebook.com', 71],
   ['github-20210501', 'GitHub.com', 95],
   ['gazelle-20210905', 'Gazelle.nl', 312],
@@ -47,4 +47,4 @@ suite.forEach(([name, fn, memory]) => {
   )
 })
 
-console.log(((process.memoryUsage().heapUsed - startMemory) / 1024 / 1024).toFixed(2) + 'MB')
+console.log(((process.memoryUsage().heapUsed - startMemory) / 1024 / 1024).toFixed(2) + 'MB')

benchmark/parse-analyze-ratio.js

@@ -23,14 +23,14 @@ files.forEach(([, name]) => {
 })
 
 console.log('Running benchmark on /dist/analyzer.js:')
-const header = `${'File'.padEnd(maxLen + 2)} | ${'Size'.padEnd(6)} |  total | parse | Analyze        |`
+const header = `${'File'.padEnd(maxLen + 2)} | ${'Size'.padStart(7)} |  total | parse | Analyze        |`
 console.log(''.padEnd(header.length, '='))
 console.log(header)
 console.log(''.padEnd(header.length, '='))
 
 files.forEach(([filename, name]) => {
   const css = fs.readFileSync(`./src/__fixtures__/${filename}.css`, 'utf-8')
-  const fileSize = byteSize(css.length).padStart(6)
+  const fileSize = byteSize(css.length).padStart(7)
   const result = analyzeCss(css)
 
   name = name.padEnd(maxLen + 2)

benchmark/readme.md

@@ -21,16 +21,17 @@ Trello.com              (312 kB):  13.15 ops/sec
 `node benchmark/parse-analyze-ratio.js`
 
 ```
-====================================================================
-File                    | Size   |  total | parse | Analyze        |
-====================================================================
-Bol.com                 | 468 kB |  328ms | 207ms |  120ms (36.6%) |
-Bootstrap 5.0.0         | 195 kB |  120ms |  80ms |   39ms (32.5%) |
-CSS-Tricks              | 195 kB |   96ms |  64ms |   32ms (33.3%) |
-Facebook.com            | 268 kB |  134ms |  78ms |   56ms (41.8%) |
-GitHub.com              | 514 kB |  172ms |  91ms |   79ms (45.9%) |
-Gazelle.nl              | 972 kB |  363ms | 225ms |  134ms (36.9%) |
-Lego.com                | 246 kB |   77ms |  40ms |   36ms (46.8%) |
-Smashing Magazine.com   | 1.1 MB |  350ms | 210ms |  139ms (39.7%) |
-Trello.com              | 312 kB |   92ms |  52ms |   40ms (43.5%) |
+=====================================================================
+File                    |    Size |  total | parse | Analyze        |
+=====================================================================
+Bol.com                 |  468 kB |  330ms | 207ms |  122ms (37.0%) |
+Bootstrap 5.0.0         |  195 kB |  122ms |  87ms |   34ms (27.9%) |
+CSS-Tricks              |  195 kB |   98ms |  64ms |   34ms (34.7%) |
+CNN                     | 1.77 MB |  563ms | 367ms |  193ms (34.3%) |
+Facebook.com            |  268 kB |   96ms |  49ms |   47ms (49.0%) |
+GitHub.com              |  514 kB |  161ms |  79ms |   80ms (49.7%) |
+Gazelle.nl              |  972 kB |  343ms | 215ms |  124ms (36.2%) |
+Lego.com                |  246 kB |   73ms |  37ms |   35ms (47.9%) |
+Smashing Magazine.com   |  1.1 MB |  300ms | 162ms |  136ms (45.3%) |
+Trello.com              |  312 kB |   84ms |  49ms |   34ms (40.5%) |
 ```

benchmark/run.js

@@ -6,6 +6,7 @@ const files = [
   ['bootstrap-5.0.0', 'Bootstrap 5.0.0', 49],
   ['cnn-20220403', 'CNN', 360],
   ['css-tricks-20190319', 'CSS-Tricks', 50],
+  ['cnn-20220403', 'CNN', 360],
   ['facebook-20190319', 'Facebook.com', 71],
   ['github-20210501', 'GitHub.com', 95],
   ['gazelle-20210905', 'Gazelle.nl', 312],

src/__fixtures__/cnn-20220403.json

@@ -143417,11 +143417,12 @@
       }
     },
     "fontFamilies": {
-      "total": 816,
-      "totalUnique": 38,
+      "total": 817,
+      "totalUnique": 39,
       "unique": {
         "sans-serif": 2,
         "monospace,serif": 1,
+        "courier new,monospace": 1,
         "CNN": 28,
         "CNN Condensed": 4,
         "CNN Clock": 14,
@@ -143459,7 +143460,7 @@
         "cnn-icons ": 2,
         "CNN, \"Helvetica Neue\", Verdana, Helvetica, Arial, Utkal, sans-serif": 1
       },
-      "uniquenessRatio": 0.04656862745098039
+      "uniquenessRatio": 0.04773561811505508
     },
     "fontSizes": {
       "total": 2328,

src/atrules/atrules.js

@@ -1,5 +1,6 @@
 import { CountableCollection } from '../countable-collection.js'
 import { hasVendorPrefix } from '../vendor-prefix.js'
+import { endsWith } from '../string-utils.js'
 
 const analyzeAtRules = ({ atrules, stringifyNode }) => {
   /** @type {{[index: string]: string}[]} */
@@ -49,7 +50,7 @@ const analyzeAtRules = ({ atrules, stringifyNode }) => {
       continue
     }
 
-    if (atRuleName.endsWith('keyframes')) {
+    if (endsWith('keyframes', atRuleName)) {
       const name = `@${atRuleName} ${node.prelude}`
       keyframes.push(name)
 

src/index.js

@@ -1,6 +1,5 @@
 import parse from 'css-tree/parser'
 import walk from 'css-tree/walker'
-import { property as getProperty } from 'css-tree/utils'
 import { analyzeRule } from './rules/rules.js'
 import { analyzeSpecificity, compareSpecificity } from './selectors/specificity.js'
 import { colorFunctions, colorNames } from './values/colors.js'
@@ -13,6 +12,9 @@ import { analyzeAtRules } from './atrules/atrules.js'
 import { ContextCollection } from './context-collection.js'
 import { CountableCollection } from './countable-collection.js'
 import { AggregateCollection } from './aggregate-collection.js'
+import { strEquals, startsWith, endsWith } from './string-utils.js'
+import { hasVendorPrefix } from './vendor-prefix.js'
+import { isCustom, isHack, isProperty } from './properties/property-utils.js'
 
 /**
  * Analyze CSS
@@ -133,7 +135,7 @@ const analyze = (css) => {
         atrules.push({
           name: node.name,
           prelude: node.prelude && node.prelude.value,
-          block: node.name === 'font-face' && node.block,
+          block: strEquals('font-face', node.name) && node.block,
         })
         break
       }
@@ -153,7 +155,7 @@ const analyze = (css) => {
       case 'Selector': {
         const selector = stringifyNode(node)
 
-        if (this.atrule && this.atrule.name.endsWith('keyframes')) {
+        if (this.atrule && endsWith('keyframes', this.atrule.name)) {
           keyframeSelectors.push(selector)
           return this.skip
         }
@@ -215,7 +217,7 @@ const analyze = (css) => {
         return this.skip
       }
       case 'Url': {
-        if (node.value.startsWith('data:')) {
+        if (startsWith('data:', node.value)) {
           embeds.push(node.value)
         }
         break
@@ -233,7 +235,7 @@ const analyze = (css) => {
         if (node.important) {
           importantDeclarations++
 
-          if (this.atrule && this.atrule.name.endsWith('keyframes')) {
+          if (this.atrule && endsWith('keyframes', this.atrule.name)) {
             importantsInKeyframes++
           }
         }
@@ -243,59 +245,43 @@ const analyze = (css) => {
         properties.push(property)
         values.push(value)
 
+        if (hasVendorPrefix(property)) {
+          propertyVendorPrefixes.push(property)
+        } else if (isHack(property)) {
+          propertyHacks.push(property)
+        } else if (isCustom(property)) {
+          customProperties.push(property)
+        }
+
         // Process properties first that don't have colors,
         // so we can avoid further walking them;
-        // They're also typically not vendor prefixed,
-        if (property === 'z-index') {
+        if (isProperty('z-index', property)) {
           zindex.push(value)
           return this.skip
-        }
-        if (property === 'font') {
+        } else if (isProperty('font', property)) {
           fontValues.push(value)
           break
-        }
-        if (property === 'font-size') {
+        } else if (isProperty('font-size', property)) {
           fontSizeValues.push(stringifyNode(value))
           break
-        }
-        if (property === 'font-family') {
+        } else if (isProperty('font-family', property)) {
           fontFamilyValues.push(stringifyNode(value))
           break
-        }
-
-        const {
-          vendor: isVendor,
-          hack: isHack,
-          custom: isCustom,
-          basename,
-        } = getProperty(property)
-
-        if (isVendor) {
-          propertyVendorPrefixes.push(property)
-        }
-        if (isHack) {
-          propertyHacks.push(property)
-        }
-        if (isCustom) {
-          customProperties.push(property)
-        }
-
-        if (basename === 'transition' || basename === 'animation') {
+        } else if (isProperty('transition', property) || isProperty('animation', property)) {
           animations.push(value.children)
           break
-        } else if (basename === 'animation-duration' || basename === 'transition-duration') {
+        } else if (isProperty('animation-duration', property) || isProperty('transition-duration', property)) {
           durations.push(stringifyNode(value))
           break
-        } else if (basename === 'transition-timing-function' || basename === 'animation-timing-function') {
+        } else if (isProperty('transition-timing-function', property) || isProperty('animation-timing-function', property)) {
           timingFunctions.push(stringifyNode(value))
           break
-        }
-
-        // These properties potentially contain colors
-        if (basename === 'text-shadow') {
+        } else if (isProperty('text-shadow', property)) {
           textShadows.push(value)
-        } else if (basename === 'box-shadow') {
+          // no break here: potentially contains colors
+        } else if (isProperty('box-shadow', property)) {
           boxShadows.push(value)
+          // no break here: potentially contains colors
         }
 
         walk(value, function (valueNode) {

src/properties/property-utils.js

@@ -0,0 +1,31 @@
+import { hasVendorPrefix } from '../vendor-prefix.js'
+import { endsWith } from '../string-utils.js'
+
+/**
+ * @param {string} property
+ * @see https://github.com/csstree/csstree/blob/master/lib/utils/names.js#L69
+ */
+export function isHack(property) {
+  if (isCustom(property) || hasVendorPrefix(property)) return false
+
+  let code = property.charCodeAt(0)
+
+  return code === 47 // /
+    || code === 95 // _
+    || code === 43 // +
+    || code === 42 // *
+    || code === 38 // &
+    || code === 36 // $
+    || code === 35 // #
+}
+
+export function isCustom(property) {
+  if (property.length < 3) return false
+  // 45 === '-'.charCodeAt(0)
+  return property.charCodeAt(0) === 45 && property.charCodeAt(1) === 45
+}
+
+export function isProperty(basename, property) {
+  if (isCustom(property)) return false
+  return endsWith(basename, property)
+}

src/properties/property-utils.test.js

@@ -0,0 +1,45 @@
+import { suite } from 'uvu'
+import * as assert from 'uvu/assert'
+import { analyze } from '../index.js'
+import { isHack, isCustom, isProperty } from './property-utils.js'
+
+const PropertyUtils = suite('Property Utils')
+
+PropertyUtils('isHack', () => {
+  assert.ok(isHack('/property'))
+  assert.ok(isHack('//property'))
+  assert.ok(isHack('_property'))
+  assert.ok(isHack('+property'))
+  assert.ok(isHack('*property'))
+  assert.ok(isHack('&property'))
+  assert.ok(isHack('#property'))
+  assert.ok(isHack('$property'))
+
+  assert.not.ok(isHack('property'))
+  assert.not.ok(isHack('-property'))
+  assert.not.ok(isHack('--property'))
+})
+
+PropertyUtils('isCustom', () => {
+  assert.ok(isCustom('--property'))
+  assert.ok(isCustom('--MY-PROPERTY'))
+  assert.ok(isCustom('--x'))
+
+  assert.not.ok(isCustom('property'))
+  assert.not.ok(isCustom('-property'))
+  assert.not.ok(isCustom('-webkit-property'))
+  assert.not.ok(isCustom('-moz-property'))
+})
+
+PropertyUtils('isProperty', () => {
+  assert.ok(isProperty('animation', 'animation'))
+  assert.ok(isProperty('animation', 'ANIMATION'))
+  assert.ok(isProperty('animation', '-webkit-animation'))
+  assert.ok(isProperty('font', '_font'))
+  assert.ok(isProperty('width', '*width'))
+
+  assert.not.ok(isProperty('animation', '--animation'))
+  assert.not.ok(isProperty('property', '--Property'))
+})
+
+PropertyUtils.run()

src/selectors/selectors.test.js

@@ -113,6 +113,10 @@ Selectors('have their specificity calculated', () => {
       color: green;
     }
 
+    * {
+      color: brown;
+    }
+
     @media print {
       @media (min-width: 1000px) {
         @supports (display: grid) {
@@ -125,12 +129,13 @@ Selectors('have their specificity calculated', () => {
   `
   const actual = analyze(fixture)
   const expected = [
-    [0, 0, 1,],
-    [0, 0, 1,]
+    [0, 0, 1],
+    [0, 0, 0],
+    [0, 0, 1]
   ]
 
   assert.equal(actual.selectors.specificity.items, expected)
-  assert.equal(actual.selectors.total, 2)
+  assert.equal(actual.selectors.total, 3)
 })
 
 Selectors('calculates selector uniqueness', () => {