브라우저는 성능 저하 이전에 얼마나 많은 요소 ID를 안전하게 처리 할 수 ​​있습니까?

Question

요소 ID를 사용하는 것은 javascript가 요소를 '가져 오는'가장 빠른 방법입니다. 브라우저 성능이 저하되기 시작하기 전에 얼마나 많은 ID를 사용해야하는지 엄지 손가락이나 우수 사례 가이드 라인이 있습니까?

Answer 1

ID는 그 자체로 속성 값입니다. 유일한 '성능'문제는 브라우저가 다운로드해야하는 여분의 비트와 바이트입니다. 자바 스크립트 POV에서 DOM의 요소가 많을수록 DOM을 통과하는 데 더 오래 걸릴 수 있지만 사용하는 ID 수와 직접적인 관련이 없습니다.

편집 :

<div id="div1"> 
    <div id="div2"> 
    ... 
     <div id="div999"> 
     <div id="myDiv"> 

또는이 :

당신의 HTML이 보이는 경우

document.getElementById("myID") 

는 중요하지 않습니다 당신의 JS이 경우

명확히하려면

<div> 
    <div> 
    ... 
     <div> 
     <div id="myDiv"> 

JS가 실행되어야 함 두 예 모두 동일합니다.

Answer 2

복잡한 페이지는 다운로드하는 데 더 많은 바이트를 의미하며 JavaScript에서 느린 DOM 액세스를 의미합니다. 예를 들어 이벤트 핸들러를 추가하려는 경우 페이지에서 500 또는 5000 개의 DOM 요소를 반복하면 차이가 있습니다.

많은 수의 DOM 요소는 콘텐츠를 반드시 삭제하지 않고도 페이지 마크 업으로 개선해야하는 현상이 될 수 있습니다. 레이아웃 목적으로 중첩 테이블을 사용하고 있습니까? 레이아웃 문제를 해결하기 위해 더 많은 것을 던지고 있습니까? 어쩌면 마크 업을보다 정확하고 의미 상으로 정확하게 할 수 있습니다.

레이아웃에 대한 큰 도움은 YUI CSS 유틸리티입니다 : grids.css가 전체 레이아웃을 도울 수 있으므로 fonts.css 및 reset.css는 브라우저의 기본 서식을 제거하는 데 도움이 될 수 있습니다. 이것은 새로 시작하고 마크 업을 생각할 수있는 기회입니다. 예를 들어 의미가있는 경우에만 s를 사용하고 새 행을 렌더링하기 때문에가 아닙니다. .

DOM 요소의 수는, 테스트 단지 방화범의 콘솔에 입력하기 쉽습니다 : document.getElementsByTagName 우리는 1,000 개 이상의 필드 양식을 가지고

Answer 3

('*')의 길이 (묻지 않는다), 클라이언트 측 유효성 검사를 위해 jQuery Validate를 사용합니다. 여기에는 필요한 필드의 유효성 확인, 각 필드의 데이터 유형 확인, 특정 기준에 따라 필드 그룹 표시/숨기기, 데이터 입력시 여러 필드에 대한 계산 실행이 포함됩니다.

MSIE만이이 비율로 속도가 느려집니다. Firefox와 Chrome은 즉시 "검증"을 실행합니다. MSIE는 결국 "장기 실행 스크립트"대화 상자를 보여줍니다. 지난 밤에 추가 필드가 필요하다는 사실을 통보 받았습니다.