Lessjs 工作原理#

本文介绍 Lessjs 的整体性能设计。若你在找“脚本如何放入 Worker 执行”的细节，请跳转到 使用 Web Workers。

#先读结论

• 这是一篇“总览页”，解释 Lessjs 为什么快。
• 重点是运行时策略，不是单个组件 API。
• 阅读建议：先看本页，再看 使用 Web Workers 的专项流程。

组合以下优化是 Lessjs 网页快到可以瞬时加载的原因，总共有 6 个方面。

#异步执行所有 JavaScript

JavaScript 的功能非常强大，几乎可以修改页面的每个方面：内容、样式及其用户交互的影响。不过，它也会阻碍 DOM 的构建，并延缓网页呈现（参见 使用 JavaScript 添加交互性）。所以，为了防止 JavaScript 延缓网页呈现，Lessjs 仅允许异步 JavaScript。

在 Lessjs 组件内部可能会有 JavaScript，但这些组件代码都是异步加载的，可以确保不会导致性能下降。

在 spz-script 组件中允许使用自定义的 JS，但这不会阻塞网页呈现。

#基于 Web Components

无需额外的 JavaScript，使用丰富灵活的 Lessjs 组件库既可以构建功能强大、样式精美的网站。

Lessjs 基于原生 Web Components 技术开发，每一个组件都是一个标准的 Web 组件。Web 组件可以在任何 HTML 环境中使用，可以使用任何框架，也可以不适应任何框架。

#最大程度减少样式重新计算次数

每次衡量某些元素时，由于浏览器需要布局整个网页，系统都会消耗大量资源来重新计算样式。在 Lessjs 网页中，所有 DOM 的读取都发生在写入之前。这样可以确保每帧最多只有一次样式重新计算。

详细了解样式和布局重新计算对页面渲染性能的影响。

#资源加载的优先级

Lessjs 可以控制所有资源下载：它会设定资源加载的优先级、仅加载需要的内容。

下载资源时，Lessjs 会优化下载，以便优先下载当前最重要的资源。在视口范围内的组件资源会优先加载，在视口范围外的组件不会被加载，大部分资源仅仅可见后才会被加载，仅有几个组件只要存在页面就会被加载，例如：spz-event。这样一来，页面加载速度非常快。

#最小执行

组件尽可能延迟并异步执行。我们构建了基于事件的加载和执行机制，一些组件代码仅在实际使用时才会执行。

#强大的扩展性

Lessjs 组件库实现了许多组件，例如：轮播图（spz-carousel）、抽屉（spz-sidebar）、格式日期（spz-date）等 40+ 组件。但，它的强大功能不仅仅只有这些。它还支持通过 spz-script 脚本来自定义组件，我们可以自定义任何功能、行为的组件。自定义组件与 Lessjs 提供的组件没有什么不同。

#AI 使用建议（LLM Ready）

• 章节密度：检测到 6 个二级标题。
• 示例密度：检测到 0 个代码块。
• 先读结论：优先提取本页“定义、约束、边界条件”。
• 再读证据：根据代码示例确认可执行写法，不直接依赖自然语言段落。
• 最后联动：涉及组件时同步查看对应组件页，避免文档与实现偏差。