Javascript로 작성된 3D 엔진을 유지 관리 중이므로 매우 궁금합니다.자바 스크립트 성능 질문
parseInt(el.style.width) 또는 el.offsetWidth?parseInt(el.offsetWidth)을 써야합니까?getElementById() 또는 childNodes[]?new Image() 또는 appendChild('img')?감사합니다 훌륭한 자바 스크립트 성능 가이드에 대한 링크를 제발 줘!
에
http://home.earthlink.net/~kendrasg/info/js_opt/jsOptMain.html
참조는 현재 혼란 꽤 있어요.
당신에게 마크 업에서 자바 스크립트 나 스타일의 속성에 의해 설정 폭을 제공합니다.1빠른 인으로 parseInt (el.style.width) 또는 el.offsetWidth?
el.style.width
offsetWidth은 요소의 현재 너비 (테두리 포함)를 제공합니다.
2
parseInt(el.offsetWidth)를 작성해야?
아니요, offsetWidth은 숫자를 반환합니다. 그러나 parseInt을 사용할 때마다 기수를 지정해야합니다!
3. 빠른 ,
getElementById()또는
childNodes[]? 당신이 부모가 childNodes을 사용 얻었다합니다. ID가 있으면 byId를 사용할 수 있습니다. 성능은 브라우저 (test)에 따라 다릅니다.
4.어떤 빠르고,
new Image()또는appendChild('img')입니까?
브라우저에서 리소스를 다운로드하려면 강제로 new Image()을 사용하십시오. 추가 할 경우 레이아웃에 이미지는 차라리이 링크와 함께 당신을 떠날 훌륭한 자바 스크립트 성능 가이드
에 대한 링크를 제발 부여 appendChild(IMAGE_ELEMENT)
5.사용 : http://jsperf.com/ , A/B 테스트를하게하십시오.
A/B/C/D/E ... 테스트 중입니까? – Hello71
@ Hello71 - A/B 테스트는 두 가지 대안과 단일 변수가있을 때 마케팅 결정을 내리기위한 실험적 접근 방법입니다. 이 문맥에서 이것은 성능 측면에서 두 가지 코드 사이를 결정하는 방법론을 의미합니다. – galambalazs
좋은 답변 +1. IE와'... ById()'에 흥미 롭습니다. 요소를 찾기 위해 실제로 DOM을 통과하는지 알 수 있습니까? 복잡한 HTML 구조에서의 성능에 대해 궁금 할 것입니다. 나는 항상 그것이 빠른 것이라고 생각했습니다. 나중에 테스트 할 것입니다. – user113716
다음은 Javascript 환경과 관련된 몇 가지 사이트입니다.
정말 오래된 사이트이지만 약간의 통찰력을 제공합니다. 책
내 제안 : 스스로 벤치마킹 해보세요. 직관적으로, 필자는 el.offsetWidth가 더 빠릅니다 (el.style.width와 같은 전체 CSS 규칙 집합을 탐색 할 필요가 없기 때문에), childNodes []가 더 빠릅니다 (전체를 통과 할 필요가 없으므로) DOM처럼 getElementbyId 않습니다). 그러나 나는 정말로 모르겠다. 그래서 나는 이것을 답이 아니라 주석으로 싣고있다. –
@Ben - getElementbyId는 DOM을 탐색하지 않습니다. 그것은 요소의 메모리 조회입니다. 따라서 매우 빠릅니다. – user113716
Ben과 합의한 벤치 마크. AFAIK el.offsetWidth는 런타임에 계산 될 수 있습니다. 아마도 일부 메모리를 교환하고 모든 결과를 캐시해야합니다. 또한, 나는 천천히 그리고 배고픈 기억 때문에 캔버스를 사용하는 것이 좋습니다. – c0rnh0li0