나는 ajax 호출을 통해 얻은 json을 기반으로 페이지의 일부를 업데이트하기 위해 클라이언트 측 템플릿을 사용하는 웹 페이지를 가지고있다.DOM 삽입 : DOM에 삽입 할 때 일부 태그 유형이 빠릅니까?
현재 각 Li의 내부에 제품에 대한 정보를 표시하는 마크 업이있는 정렬되지 않은 목록을 사용하고 있습니다.
다른 사람들보다 DOM에 삽입 할 때 몇 가지 태그가 더 빠르다는 것을 알고 싶습니다. 즉, 내 ul을 다른 태그로 변경하거나 Li의 태그를 변경해야합니까?
감사
B
가장 빠른 방법은 텍스트로 HTML을 구성하고 한 번 innerHTML 속성을 설정하는 것입니다.
또 다른 방법은 document fragment을 만들어서 DOM에 넣는 것입니다.
하나의 태그 또는 다른 태그의 삽입 속도에는 차이가있을 수 있지만 브라우저 간에는 약간의 차이가있을 수 있습니다.
DOM을 만지는 것은 매우 비용이 많이 드는 작업입니다. 속도가 당신이하는 일이면 최소화하십시오.
Stoyan Stefanov's performance tips을 살펴보십시오.
처음에는 브라우저에 완전히 의존합니다. 즉, 다른 태그의 렌더링 시간의 차이는 무시할 수 있어야합니다. 가장 의미 론적 의미가있는 태그를 사용하십시오. 다른 태그의 렌더링 시간에 대해 걱정하지 마십시오.
당신이 만드는 태그 삽입 지점은 흥미 롭습니다. 그리고 나는 그 대답이 무엇이라고 생각했습니다. 그러나 내가 묻는 이유는이 레이아웃을 테이블을 사용하도록 바꾸는 제안을 한 동료가 있기 때문입니다. 그의 이론은이 게시물을 기반으로합니다 : http://blogs.nitobi.com/dave/2007/01/30/html-rendering-pains/ 놀랍고 의심 스럽지만이 테이블을 사용하면 회의적입니다. 지난 몇 년간 레이아웃을 배웠던 모든 것에 대해 의견? 다시 한 번 감사합니다. – benwebdev
이 중 일부는 정확할 수도 있지만 속도를 높이기 위해 테이블에는 가지 않을 것입니다. 예, 3ms 빨라질 수도 있지만 대기 시간과 같이 300ms가 소요되는 다른 것들이 있습니다. 퍼포먼스에 관해 마지막으로 추가 한 링크를 살펴보십시오. 아주 좋은 소식입니다. –
어떤 대기 시간을 의미합니까? 이 레이턴시가 CSS 렌더링입니까? 이걸 파헤쳐서 미안해. 지금 당장 동료와상의했습니다. – benwebdev