<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: William Martin</title>
    <description>The latest articles on DEV Community by William Martin (@willmart_aqe).</description>
    <link>https://dev.to/willmart_aqe</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3909510%2Fcb252548-ef68-45f8-a5dc-c0f2888fec7f.png</url>
      <title>DEV Community: William Martin</title>
      <link>https://dev.to/willmart_aqe</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/willmart_aqe"/>
    <language>en</language>
    <item>
      <title>I built a CSS selector engine that uses BigInt bitmasks and a dual Bloom bucket index instead of DOM traversal — AQE is now on npm</title>
      <dc:creator>William Martin</dc:creator>
      <pubDate>Sat, 02 May 2026 19:45:44 +0000</pubDate>
      <link>https://dev.to/willmart_aqe/i-built-a-css-selector-engine-that-uses-bigint-bitmasks-and-a-dual-bloom-bucket-index-instead-of-40ak</link>
      <guid>https://dev.to/willmart_aqe/i-built-a-css-selector-engine-that-uses-bigint-bitmasks-and-a-dual-bloom-bucket-index-instead-of-40ak</guid>
      <description>&lt;p&gt;I've been frustrated with querySelectorAll performance in high-frequency scenarios for a while. On large DOMs (10k+ nodes) with 50–100 queries/second — think virtual DOM diffing, live dashboards, design tools — it becomes a real bottleneck.&lt;/p&gt;

&lt;p&gt;So I built AQE (Atomic Quantum Engine): a CSS selector engine that replaces tree traversal with flat, memory-mapped bitwise operations.&lt;/p&gt;

&lt;p&gt;HOW IT WORKS&lt;/p&gt;

&lt;p&gt;Every DOM node gets a 64-bit BigInt bitmask. Each CSS token (tag, .class, #id, [attr], pseudo-class) maps to a unique bit position. Matching a selector becomes a single integer AND:&lt;/p&gt;

&lt;p&gt;(nodeMask &amp;amp; targetMask) === targetMask&lt;/p&gt;

&lt;p&gt;No string parsing. No tree climbing. No attribute iteration at query time.&lt;/p&gt;

&lt;p&gt;AQE LIGHT — free, MIT, on npm now&lt;/p&gt;

&lt;p&gt;Synchronous bitmask pre-filter + el.matches() for complex selectors&lt;/p&gt;

&lt;p&gt;Zero dependencies, single file, works everywhere&lt;/p&gt;

&lt;p&gt;~3–5× faster than querySelectorAll on warm queries&lt;/p&gt;

&lt;p&gt;Best for up to ~5,000 nodes&lt;/p&gt;

&lt;p&gt;npm install atomic-quantum-engine&lt;/p&gt;

&lt;p&gt;BENCHMARKS — 20,000-node DOM, .active[data-ready]&lt;/p&gt;

&lt;p&gt;Warm query: querySelectorAll ~4–8ms / AQE Light ~1–3ms / AQE Pro ~0.1–0.4ms 100 concurrent queries: querySelectorAll ~400–800ms / AQE Light ~150–300ms / AQE Pro ~5–15ms 50k node DOM: querySelectorAll ~10–20ms / AQE Light ~8–15ms / AQE Pro ~0.5–1.5ms&lt;/p&gt;

&lt;p&gt;Run the benchmarks yourself in the browser: &lt;a href="https://willmartaqe.github.io/AQE/" rel="noopener noreferrer"&gt;https://willmartaqe.github.io/AQE/&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;WHEN NOT TO USE IT&lt;/p&gt;

&lt;p&gt;If your DOM has fewer than ~1,000 nodes or you query infrequently, native APIs are faster with zero setup. AQE is for measured bottlenecks at scale.&lt;/p&gt;

&lt;p&gt;npm: &lt;a href="https://www.npmjs.com/package/atomic-quantum-engine" rel="noopener noreferrer"&gt;https://www.npmjs.com/package/atomic-quantum-engine&lt;/a&gt;&lt;br&gt;
GitHub (Light): &lt;a href="https://github.com/willmartAQE/AQE" rel="noopener noreferrer"&gt;https://github.com/willmartAQE/AQE&lt;/a&gt;&lt;br&gt;
Questions: &lt;a href="mailto:williammartin.aqe@gmail.com"&gt;williammartin.aqe@gmail.com&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Happy to answer questions about the architecture, the Bloom index implementation, or the SharedArrayBuffer setup. Would love feedback from anyone building tools where selector performance actually matters.&lt;/p&gt;

</description>
      <category>css</category>
      <category>javascript</category>
      <category>performance</category>
      <category>showdev</category>
    </item>
  </channel>
</rss>
