성능을 위해 사용되지 않는 DOM 요소를 제거합니다.

Question

단일 페이지 응용 프로그램을 작성하고 있습니다. 페이지가 처음 제공 될 때 페이지에 삽입되는 json 문자열을 포함하는 많은 DOM 요소를 포함합니다.

페이지가 클라이언트에로드 될 때 가장 먼저 일어나는 일은 이러한 DOM 요소가 json에서 javascript 객체로 파싱 된 다음 다시 사용되지 않는다는 것입니다.

DOM에서 삭제하고 크기를 줄이는 것이 성능상의 이점이 있습니까? 나는이 측면에 관한 어떤 결정적인 데이터도 찾지 못했다. 정보의 경우이 요소의 크기는 약 500K입니다.

의견을 보내 주셔서 감사합니다.

Answer 1

독립, 당신은 당신의 JSON 개체를 포함하여이 방법을 고려해 볼 수 있습니다 :

<script type='text/json' id='whatever'> 
    { "some": "json" } 
</script> 

완전히 포함 된 문자열에 대한 과정을 제외하고 그 스크립트의 내용을 (무시

브라우저가 모양이 </script> 인 것처럼 보입니다. JSON 시리얼 라이저가 어떻게 든 대처하기를 원할 수도 있기 때문에 제게는 앰퍼샌드 및 사물로 프로 플램을 실행할 위험이 없습니다. 아마도 그 자체로 성능이 향상 될 것입니다. 브라우저는 실제 콘텐츠라고 생각하는 것보다 <script> 블록의 끝을 찾는 것이 더 쉬운 시간 일 것입니다. 내용을 축 어적으로 .innerHTML으로 가져올 수 있습니다.

Answer 2

DOM 에서 크기를 줄이는 것이 성능상의 이점이 있습니까?

DOM의 성능 측면에서 일반적으로 DOM과 상호 작용하는 것이 적을수록 좋습니다.

셀렉터가 dom을 탐색하므로 비효율적 인 선택기를 사용하면 성능이 저하되지만 가능한 경우 클래스 나 특성보다는 ID로 요소를 선택하면 좋은 성능을 얻을 수 있습니다 관련없는 마크 업 항목을 삭제했는지 여부에 관계없이

페이지가 처음 제공됩니다

, 그것은 내가 정보를 들어 .... 페이지에 주입하고 있습니다 JSON 문자열을 포함하는 많은 DOM 요소를 포함, 이 elemnts은 약 500K의 크기이다.

페이지로드 측면에서 이미 모든 데이터를 전송해야하므로 성능에 문제가 있습니다. json 만 전송할 수있는 방법을 찾으면 도움이됩니다. 사실 이후에 삭제하면이 특정 문제를 해결할 수 없습니다. 당신이 DOM에서 JSON을 끌어 여부