Lessjs

高性能 & 用户体验至上的前端组件库

Lessjs 网页几乎可以瞬时加载，你完全可以通过丰富的内置组件快速构建一个优秀的网站。
开始 学习更多 
<spz-sidebar
  layout="nodisplay"
  side="right"" ""left"
  id="sidebar"
></spz-sidebar>

Lessjs “更快”的原因

凭借延迟加载和异步策略，Lessjs 可以为任何规模的网站提供速度更快、用户体验更好的性能和开发体验。

基于 Web Components

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

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

Lessjs 引入了一个强大的布局系统来帮助浏览器更好地推断元素的大小，从而达到减少样式重新计算的效果。

资源加载优先级

Lessjs 可以控制所有资源下载：它会设定资源加载的优先级，仅加载需要的内容。在视口范围内的组件资源会优先加载，在视口范围外的组件不会被加载，这样一来，页面加载速度会非常快。

异步执行所有 JavaScript

Lessjs 组件内部可能会有 JavaScript，但这些组件经过精心设计，可以确保不会导致性能下降。

最小执行

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

强大的扩展性

Lessjs 不仅有大量内置的组件，还支持用户自定义组件。
详细了解 Lessjs 工作原理

使用 Lessjs 构建一切

使用 Lessjs 丰富的组件库快速构建页面。这些组件可直接复制粘贴，可满足基本的 UI 和功能需求。它们可以通过属性和 CSS 在行为和样式上进行自定义。最重要的是，我们时刻以性能优先为宗旨来设计每一个组件。因此，每个组件都能达到出色的性能。
查看完整的组件库
  • 轮播图
  • 手风琴
  • 图片缩放
  • YouTube
spz-carousel 轮播图 
<spz-carousel layout="fill" controls loop>
  <spz-img layout="responsive" width="320" height="400" src="/assets/images/lime.webp" alt="Lime" object-fit="cover"></spz-img>
  <spz-img layout="responsive" width="320" height="400" src="/assets/images/peach.webp" alt="Peach" object-fit="cover"></spz-img>
  <spz-img layout="responsive" width="320" height="400" src="/assets/images/rubus-idaeus.webp" alt="Rubus idaeus" object-fit="cover"></spz-img>
</spz-carousel>
所有关于这个组件
所有关于这个组件
spz-accordion 手风琴 
<spz-accordion layout="container" expand-single-section>
  <section expanded>
    <h3>Header 1</h3>
    <div>Section content 1</div>
  </section>
  <section>
    <h3>Header 2</h3>
    <div>Section content 2</div>
  </section>
  <section>
    <h3>Header 3</h3>
    <div>Section content 3</div>
  </section>
</spz-accordion>
所有关于这个组件

Header 1

Section content 1

Header 2

Section content 2

Header 3

Section content 3
所有关于这个组件
spz-zoom 图片缩放 
<spz-zoom layout="container" zoom-ratio="2">
  <spz-img layout="responsive" width="640" height="480" src="/assets/images/dog-nature.webp" alt="Dog"></spz-img>
</spz-zoom>
所有关于这个组件
鼠标移入放大图片
所有关于这个组件
spz-youtube YouTube 
<spz-youtube
  autoplay
  videoid="GSQV3oXyjMQ"
  layout="responsive"
  width="640"
  height="360"
></spz-youtube>
所有关于这个组件
所有关于这个组件

探索 Lessjs 的成功案例

出类拔萃的性能、效率和开发体验。

Geek

充满故事感，适合构建品牌网站，专为DTC类商家设计的主题。

Flash

专为移动端设计的主题，适合移动端消费者占比较高，想要极致性能的店铺。

Wind

配合开店引导即可一键完成店铺装修，适合想快速开店、铺货的商家。

立即创建您的第一个 Lessjs 网页

您无需下载 Lessjs，也无需安装。
重要的是，它是免费的！
你仅仅需要引入必须的 CDN 脚本。
使用入门