2000개의 입력 체크박스 목록이 있습니다. 한 번에 모두 선택하면 눈에 띄게 약 2초 정도 지연이 발생합니다(브라우저가 정지됨). 이는 Vue 및 React의 경우인 것 같지만 Svelte, jQuery 또는 바닐라에서는 그렇지 않습니다.
5,000개 이상의 체크박스를 사용하면 매우 짜증나는 3~5초 차단기가 됩니다...
다시 렌더링하는 데 왜 이렇게 오래 걸리나요?
Vue.js를 사용하여 이 업데이트 지연을 어떻게 극복할 수 있나요?
(페이지 매김 또는 지연 로딩 솔루션은 문제를 실제로 해결하지 못하고 문제를 피할 뿐입니다.)
아래는 Vue의 코드이고 Svelte의 동일한 예가 이어집니다.
으아아아Vue SFC 링크
슬림:
으아아아Svelte REPL 링크
P粉2708426882024-03-27 00:23:51
<强>1. 변화가 느린 이유
으아아아선택한 v-model을 사용하는데 선택한 것이 배열이고, 2000개 값의 전체 배열을 각 2000개의 입력 v-model에 넣기 때문에 너무 많아서 브라우저가 기다립니다
<强>2. 해결
입력에 사용할 수 있습니다
으아아아그리고 스크립트에서 selectAll 기능을 변경할 수도 있습니다
으아아아