JIT Compiled CSS Selector Matching for Browser Performance

Resolve Bottlenecks,
Find Innovative SolutionsGenerate Solutions

Solution Overview

Problem

CSS selector matching in web browsers is a major bottleneck due to the need for traversing large data structures, leading to inefficient performance, especially with increasingly large CSS stylesheets on real websites.

Innovation Solution

Generating machine code from CSS selectors and using Just-In-Time (JIT) compilation to execute this machine code for faster selector matching, reducing the overhead of generating code for unused selectors and improving browser performance.

Engineering Contradictions & Design Principles

VSEngineering Contradiction Analysis

1Speed

If CSS selectors are parsed into data structures and traversed during selector matching, then the matching process can be performed using standard interpretation, but the execution speed is slow due to the need for m×n matches between DOM nodes and CSS selectors

Engineering Contradiction:

ImproveCSS selector matching speedVSAvoidTime spent traversing data structures

Core Design Contradiction:

SpeedVSLoss of time

Solution Approach 1:

The patent replaces the mechanical interpretation and traversal of CSS selector data structures with compiled machine code execution. By compiling the selector matching logic into native machine code, the system eliminates the overhead of virtual machine interpretation and direct data structure traversal, achieving significant performance improvements in matching speed.

Inventive Principle:

Principle #28Mechanics substitution (Replace mechanical system)

Solution Approach 2:

The patent performs preliminary compilation of CSS selectors into machine code before the actual selector matching occurs. This pre-processing step transforms the high-level selector definitions into optimized executable code, so that during runtime, only the pre-compiled machine code needs to be executed without repeated parsing or interpretation overhead.

Inventive Principle:

Principle #10Preliminary action

2Speed

If machine code is generated for all CSS selectors, then execution speed improves, but the overhead of generating code for unused selectors increases

Engineering Contradiction:

ImproveSelector matching execution speedVSAvoidCompilation overhead for unused selectors

Core Design Contradiction:

SpeedVSLoss of energy

Solution Approach 1:

The patent implements partial compilation by selectively compiling only those CSS selectors that are actually used during style sheet processing. Instead of compiling all possible selectors, the system identifies and compiles only the subset of selectors that match elements in the DOM, thereby reducing compilation overhead while maintaining execution speed benefits for the relevant selectors.

Inventive Principle:

Principle #16Partial or excessive action

Solution Approach 2:

The patent dynamically changes the compilation parameter based on usage patterns. The system monitors which selectors are actually applied during style sheet processing and adjusts the compilation behavior accordingly, compiling frequently used selectors into machine code while leaving rarely used selectors in their original form, thus optimizing the balance between compilation overhead and execution performance.

Inventive Principle:

Principle #35Parameter changes

Data Source

PatentUS9805009B2Method and device for cascading style sheet (CSS) selector matching

Publication Date: 2017.10.31 OPERA SOFTVEAR AS

AI summary

The present invention relates to a computer-implemented method for Cascading Style Sheet (CSS) selector matching. The method comprises: generating machine code based on text which includes at least one CSS selector; and executing the machine code to perform the CSS selector matching.The present invention also relates to a corresponding computer device and a computer readable storage medium.