Lessjs 工作原理

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

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

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

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

无需额外的 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 提供的组件没有什么不同。