행 선택 성능에서 Vanilla JS를 능가하는 JS 프레임워크를 만든 방법
Source: Dev.to
결과: 1.06 가중 기하 평균
Sigment는 1.06이라는 가중 기하 평균을 달성했으며, Vanilla JS(1.03)와 어깨를 나란히 할 정도로 경쟁력이 높고 대부분의 인기 프레임워크보다 크게 빠릅니다.
행 선택 테스트
- Vanilla JS: 2.6 ms
- Sigment: 2.2 ms 🚀
Sigment가 Vanilla JS보다 빠른 이유는?
속도는 아키텍처에서 비롯됩니다. 일반적인 “최적화되지 않은” Vanilla 구현은 보통 일반 이벤트 위임이나 수동 DOM 조회에 의존합니다. 반면 Sigment는 내부 gve 함수를 통해 DOM 노드에 직접 접근하는 포인터를 사용해 표준 리컨실리레이션 레이어를 우회하고, 전통적인 명령형 코드보다 더 효율적으로 특정 업데이트를 수행합니다.
비밀 소스: createTemplate
빠른 프레임워크를 구축할 때 가장 큰 과제 중 하나는 깔끔한 코드와 순수 성능 사이의 균형을 맞추는 것입니다. Sigment는 createTemplate 함수를 통해 이를 달성합니다.
매 렌더링마다 DOM 노드를 재생성하는 대신, Sigment는 템플릿‑우선 접근 방식을 사용합니다. 즉, 한 번 DOM 구조의 청사진을 만든 뒤 이를 복제하므로, 처음부터 노드를 만드는 것보다 훨씬 빠릅니다.
const userTemplate = createTemplate((name, role) =>
div({ class: "user-card" },
h3(name),
p(role)
)
);
// Usage is clean, declarative, and lightning fast
const view = userTemplate("John Doe", "Developer");이 접근 방식은 메모리 할당을 최소화하고 로직과 브라우저 픽셀 사이의 연결을 가능한 한 짧게 유지합니다.
왜 이것이 중요한가
Sigment는 단순히 벤치마크에서 승리하는 것에 그치지 않습니다. 무거운 Virtual DOM 없이도 현대적이고 반응형인 개발자 경험을 제공한다는 점을 보여줍니다. 특화된 엔진의 속도와 경량 라이브러리의 단순함을 동시에 얻을 수 있습니다.
아키텍처: SPA 및 Islands
전체 싱글 페이지 애플리케이션을 구축하든, Islands 아키텍처(HTML‑first)를 사용하든, Sigment는 불필요한 부피를 추가하지 않으면서 필요에 맞게 조정됩니다.
확인해 보세요
프로젝트는 오픈소스이며 피드백이나 별표를 환영합니다: