IE에서 빠른 렌더링을 위해 HTML 코드를 작성하는 방법

Question

HTML이 충분히 복잡하면 HTML 컨텐트를 레이아웃하고 렌더링하는 데 다소 시간이 걸릴 수 있습니다. 레이아웃 엔진 (특히 IE)을 돕기 위해 HTML을 코딩하는 방법에 대한 모범 사례를 찾을 수 없어서 페이지 다시 그리기가 빨라졌습니다. 그런 모범 사례가 존재합니까?

내 현재의 특정 문제는 페이지를 너무 느리게 그리며 DOM 업데이트 (마우스 오버 효과) 및 애니메이션을 매우 느리게 만드는 내 테이블 데이터입니다 (테이블 요소에서). JavaScript 성능이 아니라고 확신합니다. dynaTrace AJAX를 사용하여 페이지를 확인했습니다. 마우스를 요소 위로 가져 가면 CPU가 너무 바빠 지지만 JS가 실행되지 않습니다. 그리고 TR 요소에 클래스를 추가/제거하여 호버링을 구현합니다. 나는 또한 Firefox에서 YSlow를 시도했지만 특별한 문제는 보이지 않습니다. 네트워크와 관련이 없습니다. (파이어 폭스는 페이지를 빠르게 배치하지만, JS 엔진이 빠르기 때문에 그렇지 않다.)

IE에서 드로잉과 레이아웃을 프로파일 링하는 도구가있어서 문제가 어디서 발생했는지 알 수있다. 그리고 드로잉이 너무 느려서 HTML 코드에서 피할 수있는 것은 무엇입니까?

Answer 1

Internet Explorer는 큰 HTML 테이블을 렌더링 할 때 속도가 느린 것으로 알려져 있습니다.

은 MSDN에 좋은 문서를 참조하십시오 Building High Performance HTML Pages 특히 테이블에 대한 단원 : 테이블에 고정에

• 설정 테이블 레이아웃 CSS 속성을.
• 각 열에 대해 col 개체를 명시 적으로 정의하십시오.
• 각 열에 WIDTH 속성을 설정하십시오. Table Rendering :

은 다음 또한 테이블 렌더링에 대한 ieblog에 좋은 블로그 게시물이 있습니다.

다음과 같은 경우가 있습니다. 표의 내용을 덜 복잡하게 만드는 것, 즉 고정 폭을 설정하고 너무 많은 동적 렌더링 작업을 수행하지 마십시오. IE는 먼저 내용을로드 한 다음 내용의 올바른 너비를 계산해야합니다. == 느린 경우.