페이지에 넣을 요소 ID의 최대 수는 얼마입니까?

Question

검색하는 데 문제가 있습니다. 지금까지 내가 발견 한 유일한 것은 맵핑 API와 관련이 있었는데, (맵 마커의 경우) 자바 스크립트가 약 500 개의 ID를 잘못 잡아 먹었습니다. 나는 그것이 확실히 일반적인 규칙이 아니라 사용중인 특정 스크립트와 관련이 있다고 확신한다.

나는 복잡한 목록이있는 페이지가 있습니다. 목록의 각 항목에는 약 10 개의 ID가 있으며 여러 개의 자바 스크립트 스크립트가 있습니다. 목록은 페이지 매김으로 표시되며 사용자는 페이지 당 표시 할 항목 수를 선택할 수 있습니다. 목록의 각 항목에 ~ 10 개의 ID가 있다고 가정 할 때 페이지 당 최대 항목 수 (사용자가 페이지에서 한 번에 볼 수있는 총 레코드 수)를 설정해야하는 이유가 궁금합니다.

- 원시 레코드 수를 기반으로로드 시간이 늘어나는 것을 제외하고는 제한 수 위나 CSS/JavaScript 성능이 급격히 떨어지기 시작하는 알려진 수의 ID가 있습니까?

편집 : Pardon, 각 'item'은 3 개의 div가있는 작은 명함이있는 복잡한 명함입니다. 각 항목 (레코드)에 약 10 개의 ID가 있습니다.

Answer 1

궁극적으로 사용자의 브라우저와 개인 시스템에 따라 달라질 것입니다.

의도 한 사용자 기반, 브라우저 및 사용 가능한 램에 대한 조사를하는 것이 가장 바람직합니다. 로컬 환경에서 응용 프로그램을 프로파일 링 할 수 있습니다 (이미 that 만 수행에 대한 토론이있었습니다). 그러면 사용중인 시스템 자원의 양과 사용 가능한 시스템 자원의 양을 알 수 있습니다.

하지만 HTML5 등으로 진행되는 고도의 그래픽 자바 스크립트의 양을 감안할 때, 자바 스크립트 성능이 가장 까다로운 점으로 표시되는 엄청난 양의 데이터가 필요합니다. 가장 최신의 브라우저에서는 IE6과 같은 것을 지원해야한다면 모든 베팅은 꺼져 있습니다.

는 윌리주는 죄송 괄호를, 폐

Answer 2

당신은 내 의견을 대답하지 않았다 당신이 이미 대답을 허용했지만, 내가 가지고 있기 때문에 나는 어쨌든 답을주지 당신이 가지고있는 모든 신분증이 필요하지 않을 수도 있다는 느낌.

의이 예제 코드 다음 보자 : 여기

<div id="card-1" onclick="doSomethingWithCard('card-1')"> 
    <h2 id="card-1-name">John Doe</h2> 
</div> 

두 ID를 불필요 할 수있다. 많은 사람들은 ID를 이벤트 핸들러에 전달하고 getElementById를 사용하여 이벤트를 트리거 한 요소에 대한 참조를 얻으려고합니다. 대신 this 이미 참조 포함

<div onclick="doSomethingWithCard(this)"> 
    ... 
</div> 

그리고 당신이 참조가되면, 당신은 대신 내부의 구성 요소에 액세스 할 수 getElementsbyTagName (일반적으로 jQuery를 같은 자바 스크립트 프레임 워크/라이브러리 포함) CSS 선택기 또는 XPath를 사용하여 자신의 ID를 분리하십시오. 이것은 모든 요소가 적절한 요소 (h2, h3, ul, form 등) 및 클래스를 사용하여 동일한 내부 구조체를 갖는 경우에 가장 효과적입니다.

의 jQuery 예 :

function doSomethingWithCard(card) { 
    alert($(card).find("h2").text()); 
}