6개 카테고리 중 Svelte 4승, Solid 2승, 무승부 none엣지 케이스는 아래 라이브 테스트를 실행하면 집계에 들어갑니다. 여기에 저장되지 않고 여러분의 브라우저에서 측정됩니다.
엣지 케이스
아직 실행하지 않았습니다일상적인 네 가지 상황을 여러분의 브라우저에서 나란히 돌립니다. 케이스에서 ‘실행’을 누르고 무슨 일이 일어나는지 보세요. 여기에 미리 녹화해 둔 것은 없습니다.오래된 응답이 새 응답을 덮어씀서버가 답하는 것보다 빠르게 목록을 클릭해 봅니다.실행Solid○아직 실행하지 않았습니다Svelte○아직 실행하지 않았습니다코드 보기높이가 제각각인 10,000행행마다 높이가 다른 긴 목록을 스크롤합니다.실행Solid○아직 실행하지 않았습니다Svelte○아직 실행하지 않았습니다코드 보기마운트 100번 뒤에 남은 구독구독한 컴포넌트를 백 번 마운트하고 언마운트합니다.실행Solid○아직 실행하지 않았습니다Svelte○아직 실행하지 않았습니다코드 보기깨진 항목 하나가 트리를 무너뜨림카드 스무 개 중 하나에 잘못된 데이터를 넣습니다.실행Solid○아직 실행하지 않았습니다Svelte○아직 실행하지 않았습니다코드 보기
코드
Solid 4개 중 3개, Svelte 4개 중 1개 · Solid 앞섬읽을 것이 얼마나 되는지, 그중 남의 것이 얼마나 되는지.SolidSvelteLines of code (TodoMVC)——집계 제외: Solid의 데이터가 없습니다Fewer lines to read when someone else picks the project up. Counts the code you write and maintain yourself, not a stylesheet you installed from npm.npm packages shipped12Solid가 Svelte보다 50% 아래How many npm packages end up inside the bundle the browser downloads. This is code your users execute, not code your build machine reads.Distinct `node_modules/<package>` paths in the `sources` of the production build sourcemaps. Scaffolded on 2026-08-13 with each framework's own getting-started command: react `npm create vite@latest app -- --template react-ts`; vue `npm create vue@latest app -- --default`; svelte `npx sv create app --template minimal --types ts --no-add-ons --install npm`; solid `npm create solid@latest app -- --vanilla --ts --template basic`; angular `npx @angular/cli@21 new app --defaults --skip-git --package-manager=npm`; $mol `git clone --depth 1 https://github.com/hyoo-ru/mam.git app && npm install`. For $mol, the sourcemap of the deployed todomvc.hyoo.ru bundle.Soliddocs.solidjs.com/quick-start2026-08-13Sveltesvelte.dev/…/creating-a-project2026-08-13Dev dependencies declared57Solid가 Svelte보다 29% 아래Packages the starter project names in its own package.json. Build-time tooling included: this is the list your development environment inherits, not what reaches the browser.Entries in `dependencies` plus `devDependencies` of a fresh starter project. Scaffolded on 2026-08-13 with each framework's own getting-started command: react `npm create vite@latest app -- --template react-ts`; vue `npm create vue@latest app -- --default`; svelte `npx sv create app --template minimal --types ts --no-add-ons --install npm`; solid `npm create solid@latest app -- --vanilla --ts --template basic`; angular `npx @angular/cli@21 new app --defaults --skip-git --package-manager=npm`; $mol `git clone --depth 1 https://github.com/hyoo-ru/mam.git app && npm install`.Soliddocs.solidjs.com/quick-start2026-08-13Sveltesvelte.dev/…/creating-a-project2026-08-13Dev packages installed7022Svelte가 Solid보다 69% 아래How many separate packages npm resolves into node_modules on a clean checkout. Each one is an author your build trusts, and every CI run downloads all of them.Distinct name+version pairs in `npm ls --all` after scaffolding and installing the starter project. Scaffolded on 2026-08-13 with each framework's own getting-started command: react `npm create vite@latest app -- --template react-ts`; vue `npm create vue@latest app -- --default`; svelte `npx sv create app --template minimal --types ts --no-add-ons --install npm`; solid `npm create solid@latest app -- --vanilla --ts --template basic`; angular `npx @angular/cli@21 new app --defaults --skip-git --package-manager=npm`; $mol `git clone --depth 1 https://github.com/hyoo-ru/mam.git app && npm install`.Soliddocs.solidjs.com/quick-start2026-08-13Sveltesvelte.dev/…/creating-a-project2026-08-13node_modules size65 MB68 MBSolid가 Svelte보다 4.4% 아래Disk footprint of a fresh checkout. None of it ships to the browser, but all of it is downloaded by every CI run and every new machine on the team.`du -sk node_modules` after scaffolding and installing the starter project. Scaffolded on 2026-08-13 with each framework's own getting-started command: react `npm create vite@latest app -- --template react-ts`; vue `npm create vue@latest app -- --default`; svelte `npx sv create app --template minimal --types ts --no-add-ons --install npm`; solid `npm create solid@latest app -- --vanilla --ts --template basic`; angular `npx @angular/cli@21 new app --defaults --skip-git --package-manager=npm`; $mol `git clone --depth 1 https://github.com/hyoo-ru/mam.git app && npm install`.Soliddocs.solidjs.com/quick-start2026-08-13Sveltesvelte.dev/…/creating-a-project2026-08-13
무게와 로딩
Solid 1개 중 0개, Svelte 1개 중 1개 · Svelte 앞섬브라우저가 무엇을 내려받고, 페이지가 반응하기까지 얼마나 기다리는지.SolidSvelteTodoMVC bundle, gzip——집계 제외: Solid의 데이터가 없습니다What the browser actually downloads for a small but complete application, compressed the way a server would send it.Startup transfer150 KB146 KBSvelte가 Solid보다 2.4% 아래Bytes pulled over the network before the benchmark application is usable. Same application in every column, so the difference is the framework.Lighthouse total byte weight for the js-framework-benchmark application, reported as benchmark 34_startup-totalbytes. Transfer size, not gzip specifically.Solidnin-jin.github.io/…/table.html2022-02-05Sveltenin-jin.github.io/…/table.html2022-02-05
속도
Solid 7개 중 2개, Svelte 7개 중 4개 · Svelte 앞섬변경이 화면에 닿기까지 걸리는 시간과, 그동안 붙잡고 있는 메모리.SolidSvelteCreate 1,000 rows153 ms173 msSolid가 Svelte보다 12% 아래Time to put a thousand fresh rows on the screen. This is the wait after hitting a filter or opening a list.js-framework-benchmark 01_run1k, arithmetic mean of 10 runs.Solidnin-jin.github.io/…/table.html2022-02-05Sveltenin-jin.github.io/…/table.html2022-02-05Partial update992 ms977 msSvelte가 Solid보다 1.5% 아래Touching every tenth row of a thousand, sixteen times. This is where a framework either finds the changed rows or re-checks everything.js-framework-benchmark 03_update10th1k_x16, arithmetic mean of 10 runs.Solidnin-jin.github.io/…/table.html2022-02-05Sveltenin-jin.github.io/…/table.html2022-02-05Swap two rows181 ms173 msSvelte가 Solid보다 4.6% 아래Two rows trade places out of a thousand. The ideal answer is two DOM moves, and the gap here shows who gets close to it.js-framework-benchmark 05_swap1k, arithmetic mean of 10 runs.Solidnin-jin.github.io/…/table.html2022-02-05Sveltenin-jin.github.io/…/table.html2022-02-05Remove one row45.3 ms36.2 msSvelte가 Solid보다 20% 아래Deleting a single row out of a thousand. The smallest possible change, so it measures the fixed cost of reacting at all.js-framework-benchmark 06_remove-one-1k, arithmetic mean of 10 runs.Solidnin-jin.github.io/…/table.html2022-02-05Sveltenin-jin.github.io/…/table.html2022-02-05Memory after load1.22 MB1.22 MB양쪽이 같은 값을 보고합니다Heap the framework occupies with nothing on the page yet.js-framework-benchmark 21_ready-memory, single run.Solidnin-jin.github.io/…/table.html2022-02-05Sveltenin-jin.github.io/…/table.html2022-02-05Memory with 1,000 rows1.94 MB2.14 MBSolid가 Svelte보다 9.3% 아래Heap once a thousand rows are on screen. On a phone this is the difference between staying alive in the background and being killed.js-framework-benchmark 22_run-memory, single run.Solidnin-jin.github.io/…/table.html2022-02-05Sveltenin-jin.github.io/…/table.html2022-02-05Startup blocking time20.7 ms10.1 msSvelte가 Solid보다 51% 아래How long the main thread is busy during startup, so taps and scrolls do nothing.js-framework-benchmark 32_startup-bt (Lighthouse total blocking time), arithmetic mean of 4 runs.Solidnin-jin.github.io/…/table.html2022-02-05Sveltenin-jin.github.io/…/table.html2022-02-05
내장 기능
Solid 10개 중 0개, Svelte 10개 중 1개 · Svelte 앞섬프레임워크가 함께 제공하는지, 라이브러리를 가져와야 하는지.SolidSvelteRouter있음있음둘 다 있음Whether URLs and navigation come from the framework project itself, or you go pick a library and own that choice forever.Built in means the framework project ships it itself: its own package, or one the same team maintains and publishes as official. A library from anyone else counts as no, however popular or de-facto standard it has become, which is why routing is a yes for Angular and a no for React. The same cut is applied to all six frameworks, and every value links to the official page it was read from. Yes when that project publishes and documents a routing solution of its own. No when its own docs send you to a third-party project instead.Soliddocs.solidjs.com/solid-router2026-08-13Sveltesvelte.dev/…/routing2026-08-13Localization없음없음둘 다 없음Translating an application is rarely planned at the start and always arrives later.Built in means the framework project ships it itself: its own package, or one the same team maintains and publishes as official. A library from anyone else counts as no, however popular or de-facto standard it has become, which is why routing is a yes for Angular and a no for React. The same cut is applied to all six frameworks, and every value links to the official page it was read from. Yes when that project publishes and documents localization of its own. An official CLI add-on that wires up somebody else’s i18n library is a no, because the library is still somebody else’s.Soliddocs.solidjs.com2026-08-14Sveltesvelte.dev/…/paraglide2026-08-14Theming없음없음둘 다 없음Dark mode and brand colours without inventing your own CSS variable convention.Built in means the framework project ships it itself: its own package, or one the same team maintains and publishes as official. A library from anyone else counts as no, however popular or de-facto standard it has become, which is why routing is a yes for Angular and a no for React. The same cut is applied to all six frameworks, and every value links to the official page it was read from. Yes when that project publishes and documents a theming mechanism of its own. No when the word does not appear in its official API reference, which is the page linked, so the absence can be checked directly.Soliddocs.solidjs.com2026-08-13Sveltesvelte.dev/…/overview2026-08-13List virtualization없음없음둘 다 없음Long lists stay smooth because off-screen rows are never rendered. Without it, someone eventually bolts a library onto a list that already shipped.Built in means the framework project ships it itself: its own package, or one the same team maintains and publishes as official. A library from anyone else counts as no, however popular or de-facto standard it has become, which is why routing is a yes for Angular and a no for React. The same cut is applied to all six frameworks, and every value links to the official page it was read from. Yes when that project publishes and documents lazy or virtual rendering of long lists. No when no such component appears in its API reference.Soliddocs.solidjs.com2026-08-14Sveltesvelte.dev/…/overview2026-08-14Offline support없음있음Svelte 있음, Solid 없음A service worker set up by the framework rather than copied from a blog post.Built in means the framework project ships it itself: its own package, or one the same team maintains and publishes as official. A library from anyone else counts as no, however popular or de-facto standard it has become, which is why routing is a yes for Angular and a no for React. The same cut is applied to all six frameworks, and every value links to the official page it was read from. Yes when that project ships the service worker integration: a module it builds and registers for you. No when the docs only show where to drop your own sw.js and how to register it with the browser API, because that is the browser’s feature rather than the framework’s.Soliddocs.solidjs.com/…/service-workers2026-08-14Sveltesvelte.dev/…/service-workers2026-08-13Server rendering있음있음둘 다 있음Rendering to HTML on the server, for search engines and for the first paint.Built in means the framework project ships it itself: its own package, or one the same team maintains and publishes as official. A library from anyone else counts as no, however popular or de-facto standard it has become, which is why routing is a yes for Angular and a no for React. The same cut is applied to all six frameworks, and every value links to the official page it was read from. Yes when that project publishes and documents a server rendering API of its own. No when its published module list contains no such module.Soliddocs.solidjs.com/…/render-to-string2026-08-13Sveltesvelte.dev/…/page-options2026-08-13Tests without a DOM없음없음둘 다 없음Components testable as plain objects, with no browser and no jsdom to boot up first.Built in means the framework project ships it itself: its own package, or one the same team maintains and publishes as official. The same cut is applied to all six frameworks, and every value links to the official page it was read from. Yes when a component can be instantiated and asserted on with no document in play — the test never reaches for one. No when a DOM has to exist before a component can render at all, which is what every official testing guide here prescribes when it tells you to install jsdom, happy-dom or a browser. The question is whether a DOM is required, not whether the runtime happens to have one available: a runtime that provides a document nobody asks for does not make the test a DOM test.Soliddocs.solidjs.com/guides/testing2026-08-13Sveltesvelte.dev/…/testing2026-08-13Dependency injection있음있음둘 다 있음Swapping a real service for a fake one in a test without touching the component that uses it.Built in means the framework project ships it itself: its own package, or one the same team maintains and publishes as official. A library from anyone else counts as no, however popular or de-facto standard it has become, which is why routing is a yes for Angular and a no for React. The same cut is applied to all six frameworks, and every value links to the official page it was read from. Yes when that project documents a way to hand a component a value from outside it and replace that value later, in a test or in another host. Context APIs count: the bar is a documented mechanism, not a particular shape of container.Soliddocs.solidjs.com/…/create-context2026-08-14Sveltesvelte.dev/…/context2026-08-14Forms있음있음둘 다 있음Validation, dirty state and submission handled by the framework instead of a fourth form library per team.Built in means the framework project ships it itself: its own package, or one the same team maintains and publishes as official. A library from anyone else counts as no, however popular or de-facto standard it has become, which is why routing is a yes for Angular and a no for React. The same cut is applied to all six frameworks, and every value links to the official page it was read from. Yes when that project documents a form API that goes past binding one input to one variable, covering at least submission handling or validation state. Two-way binding on its own is a no.Soliddocs.solidjs.com/…/action2026-08-14Sveltesvelte.dev/…/form-actions2026-08-14Typed templates있음있음둘 다 있음A typo in a template is caught by the compiler, not by a user.Built in means the framework project ships it itself: its own package, or one the same team maintains and publishes as official. A library from anyone else counts as no, however popular or de-facto standard it has become, which is why routing is a yes for Angular and a no for React. The same cut is applied to all six frameworks, and every value links to the official page it was read from. Yes when the framework’s official TypeScript documentation covers type checking of its template or view layer.Soliddocs.solidjs.com/configuration/typescript2026-08-13Sveltesvelte.dev/…/typescript2026-08-13
생태계와 시장
Solid 4개 중 0개, Svelte 4개 중 4개 · Svelte 앞섬사람을 구하기, 검색해서 찾기, 만들어진 부품을 구하기가 얼마나 쉬운지.SolidSvelteGitHub stars35,81687,975Svelte는 Solid의 2.5×A popularity signal, and nothing more. It says how many people bookmarked the repository, not how many shipped with it.`stargazers_count` from the GitHub API for the repository that holds the framework's current source.Solidgithub.com/solidjs/solid2026-08-13Sveltegithub.com/sveltejs/svelte2026-08-13npm downloads3,456,458 per week5,273,631 per weekSvelte가 Solid보다 53% 위The closest thing to a usage count. Inflated by CI runs, but inflated the same way for everyone.npm registry downloads for the last full week, for the package you install to use the framework.Solidapi.npmjs.org/…/solid-js2026-08-13Svelteapi.npmjs.org/…/svelte2026-08-13Stack Overflow questions3236,281Svelte는 Solid의 19.4×How likely it is that your problem was already asked and answered by someone else.Question count of the framework's Stack Overflow tag, via the Stack Exchange API.Solidstackoverflow.com/…/solid-js2026-08-13Sveltestackoverflow.com/…/svelte2026-08-13npm maintainers13Svelte는 Solid의 3×How many people can publish a release. A low number is a bus factor.Length of the `maintainers` array in the npm registry metadata of the framework's primary package.Solidregistry.npmjs.org/solid-js2026-08-13Svelteregistry.npmjs.org/svelte2026-08-13
보유 비용
Solid 3개 중 2개, Svelte 3개 중 0개 · Solid 앞섬의존성 트리와 릴리스 이력이 여러 해에 걸쳐 요구하는 것.SolidSvelteAdvisories in shipped packages00양쪽이 같은 값을 보고합니다Known vulnerabilities in the packages that reach the browser. These execute on your users’ machines, which makes them a different class of risk from anything in the build toolchain.Each shipped package, at its installed version, queried against the OSV database. Counts packages carrying at least one advisory.Soliddocs.solidjs.com/quick-start2026-08-13Sveltesvelte.dev/…/creating-a-project2026-08-13Advisories in the dev tree03Solid는 없음, Svelte는 3Known vulnerabilities in the packages a fresh checkout installs. These run on developer and CI machines rather than in the browser, but somebody still has to triage every one.Total reported by `npm audit` on the starter project, straight after scaffolding it. Scaffolded on 2026-08-13 with each framework's own getting-started command: react `npm create vite@latest app -- --template react-ts`; vue `npm create vue@latest app -- --default`; svelte `npx sv create app --template minimal --types ts --no-add-ons --install npm`; solid `npm create solid@latest app -- --vanilla --ts --template basic`; angular `npx @angular/cli@21 new app --defaults --skip-git --package-manager=npm`; $mol `git clone --depth 1 https://github.com/hyoo-ru/mam.git app && npm install`.Soliddocs.solidjs.com/quick-start2026-08-13Sveltesvelte.dev/…/creating-a-project2026-08-13Breaking releases in 3 years01Solid는 없음, Svelte는 1Major versions shipped since 2023. Every one of them is a migration someone on the team pays for.Count of major semver versions of the framework's primary npm package first published in the last three years. Left blank for packages that do not use semver majors.Solidregistry.npmjs.org/solid-js2026-08-13Svelteregistry.npmjs.org/svelte2026-08-13
어떻게 측정하나
여기 있는 값은 모두 측정이나 외부 출처에서 왔고, 링크와 측정 날짜를 함께 달고 있습니다. 지표는 두 프레임워크가 모두 공개할 때만 카테고리 계산에 들어갑니다. 그러지 않으면 표가 더 채워진 쪽이 수치의 내용이 아니라 데이터의 양으로 이기게 됩니다. 아직 아무도 재지 않은 자리는, 추측하는 대신 그렇다고 적습니다.측정 방법과 출처는 GitHub에
프레임워크 제안하기
빠진 게 있나요? 이름을 적어 이슈를 열어 주세요. 프레임워크를 추가한다는 것은 측정값이 담긴 데이터 파일과, 라이브 테스트용 러너 페이지를 만든다는 뜻입니다. 둘 다 저장소에, 이미 있는 것들 옆에 놓여 있습니다.이슈 열기Type to search the documentation.
