How Lessjs Works#

This page explains Lessjs performance design at a system level. If you are looking for script-to-Worker execution details, go to Using Web Workers.

#Key Takeaways First

• This is an architecture overview page: why Lessjs is fast.
• The focus is runtime strategy, not component-level API usage.
• Suggested order: read this page first, then read Using Web Workers for execution rules.

The following optimizations are the reasons why Lessjs web pages can load instantaneously. There are 6 major factors.

#Asynchronous Execution of All JavaScript

JavaScript is very powerful and can modify almost every aspect of a page: content, style, and its impact on user interaction. However, it can also hinder the construction of the DOM and slow down web page rendering (see Adding Interactivity with JavaScript). Therefore, to prevent JavaScript from delaying web page rendering, Lessjs only allows asynchronous JavaScript.

There may be JavaScript within Lessjs components, but these component codes are asynchronously loaded, ensuring no degradation in performance.

spz-script component allows custom JS but does not block web page rendering.

#Based on Web Components

Without the need for additional JavaScript, the rich and flexible Lessjs component library can be used to build powerful and stylish websites.

Lessjs is developed based on native Web Components technology, and each component is a standard Web component. Web components can be used in any HTML environment, with any framework, or without any framework.

#Minimizing the Number of Style Recalculations

Each time some elements are measured, the system has to consume a lot of resources to recalculate styles as the browser needs to layout the entire webpage. In Lessjs web pages, all DOM reads occur before writes. This ensures a maximum of one style recalculation per frame.

Learn more about the impact of style and layout recalculations on rendering performance.

#Priority of Resource Loading

Lessjs can control the downloading of all resources: it sets the priority of resource loading and only loads the necessary content.

When downloading resources, Lessjs optimizes the download to prioritize the currently most important resources. Components' resources within the viewport are loaded first, while those outside the viewport are not loaded. Most resources are only loaded when visible, with only a few components being loaded as long as they are present on the page, such as spz-event. As a result, the page loads very quickly.

#Minimal Execution

Components execute as late and asynchronously as possible. We have built an event-based loading and execution mechanism, where some component code is only executed when actually used.

#Powerful Extensibility

The Lessjs component library implements many components, such as: carousel (spz-carousel), sidebar (spz-sidebar), formatted date (spz-date), etc., comprising 40+ components. However, its powerful features are not limited to these. It also supports customizing components via spz-script scripts. We can customize components with any functionality and behavior. Custom components are no different from the components provided by Lessjs.

#AI Usage Notes (LLM Ready)

• Section density: detected 6 level-2 headings.
• Example density: detected 0 code blocks.
• Read conclusions first: extract definitions, constraints, and boundary conditions.
• Then verify with examples: rely on executable snippets rather than prose only.
• Finally cross-check: open related component pages to avoid doc/runtime drift.