많은 수의 요소에 많은 수의 자식을 추가하는 동안 JavaScript 성능

Question

페이지 (96 또는 384)에 많은 선택 입력이 있습니다. 각각의 옵션 목록은 약 1000 개입니다. 결과적으로 페이지 크기는 4-8MB (1-4MB 압축)입니다. 옵션 목록을 한 번만 입력하여 페이지를 더 빠르게로드 한 다음 JavaScript로 각 입력에 추가하기로 결정했습니다.

불행히도 브라우저는 작업을 완료하는 데 많은 시간이 필요하거나 FF 10에서 3 분이 걸리거나 Chrome 17이 멈 춥니 다. 나는 jQuery와 pure JS로 작업을 수행하려고 시도했다. 전혀 차이가 없다.

과제가 실행 가능합니까? 빠르고 효율적인 JavaScript를 작성하려면 무엇을 알아야합니까?

편집 : 나는 하나의 문자열로 모든 옵션을 넣어 선택 입력에 넣어 innerHTML을 사용합니다. 이렇게 빠른 응답을 보내 주셔서 감사합니다.

편집 2 : 나는 Diodeus에서 제안한 방식으로 요소를 생성합니다. 그러나 select 요소에 포커스가있을 때 옵션을로드합니다 (thanks rlemon). 나는 모든 대답이 매우 도움이되며 비슷한 문제가있는 사람들에게 가치 있다고 생각합니다. 다들 감사 해요.

Answer 1

HTML을 문자열 또는 단일 개체로 구성하여 한 번에 그 페이지에 모두 삽입하십시오. 각 삽입에 대해 문서 재 흐름을 계산해야하기 때문에 DOM 재 작성이 느립니다.

Answer 2

왜 아이들을 별도로 추가해야합니까? 전체 목록을 다른 요소의 옵션으로 감싸고 해당 요소를 추가하기 만하면됩니다. 이것은 단지 1000 대신 하나의 연산이 될 것이기 때문에 훨씬 빨라야합니다.

Answer 3

아약스 사용을 제안합니다. 타사 콤보 상자로 표준 입력 선택 바꾸기 예 : Jquery UI Combobox 먼저 모든 빈 콤보 박스를로드합니다. 항목을 클릭하면 드롭 다운 목록이 열리는 즉시로드됩니다.

jquery 및 jquery UI를 사용하면 매우 쉽게 작업을 수행 할 수 있습니다.

Answer 4

JS를 사용하여 수천 개의 요소를 추가하는 것보다 HTML에 기본적으로 모든 것을로드하는 것이 더 빠릅니다.

귀하의 서버는 귀하에게 귀하의 컴퓨터가 제공하지 않는 품질/속도의 보장을 귀하에게 제공합니다.