브라우저에서 더 빨리 렌더링하려면 어떻게이 HTML을 최적화 할 수 있습니까?

큰 항목 목록에 대해 html을 생성하는 앱을 상속 받았습니다. 범주로 그룹화 된 약 2500 개의 항목이 있으므로 거대한 2500+ 행 테이블이 만들어집니다.브라우저에서 더 빨리 렌더링하려면 어떻게이 HTML을 최적화 할 수 있습니까?

<tr id='ev_2075_321' class='datagridRow1'> 
     <td align='left'> 
     <div style='margin-left: 20px;'> 
      <table cellspacing='0' cellpadding='0' style= 
      'cursor: pointer; width: 100%;'> 
      <tr> 
       <td style='width: 10px;'> 
       <img src='images/RewardsGreen.gif'> 
       </td> 
       <td valign='middle' align='left' style='cursor: default;' 
       ondblclick='doNothing;' onclick= 
       'listOnClick(5,"WHI.E_2075");' 
       onmouseover= 
       'highlightListItem("ev_2075_321", true); showInfoBubble(5,"WHI.E_2075","ev_2075_321","ev_cond_eventsContainer");' 
       onmouseout= 
       'highlightListItem("ev_2075_321", false, 1); hideInfoBubble();'> 
       <span style='margin-left: 3px;'>Card Registration</span> 
       </td> 
      </tr> 
      </table> 
     </div> 
     </td> 
    </tr>

, 시간이 향상됩니다 렌더링 나는이 배경 이미지와 함께 하나의리스트 항목으로 줄일 경우에 당신이 생각하십니까 : 여기에 하나의 행에 대해 렌더링 코드는? 현재 Firefox와 IE에서는 충돌이 발생합니다. 이벤트 처리기를 주석 처리하고 30 %의 속도 향상을 보았습니다. 클래스 기반으로 만들고 jQuery 선택기를 통해 핸들러를 바인딩하려고합니다. 이 모든 다른 방법으로 속도를 낼 수 있습니까? 아니면 페이징이 필요하다고 생각하니?

출처

2011-03-09 Shawn

초기로드가 더 빨리 옵션으로 표시되도록 나머지 목록을 페이징하거나 동적으로 가져 오는 것입니까? 또한이 HTML 클라이언트 측을 모두 생성하기 위해 jQuery 클라이언트 측 템플리트 사용을 고려할 수 있습니다 (JS를 사용하여이 많은 HTML을 생성하는 것이 직선 렌더링보다 더 빠를 것이라고는 상상할 수 없지만). – R0MANARMY

당신이 친구 가자 : – Mattis

가장 좋은 방법은 페이징을 소개하는 것입니다. 한 번에 전체 데이터의 1/20을 차지하므로 페이지로드 시간이 줄어 듭니다 (페이지 당 100 개 항목으로 가정). 콘텐츠의 가독성도 크게 향상됩니다.

출처

2011-03-09 00:26:28

페이지 매김이 최고의 성능을 보입니다.
인라인 CSS를 외부로 이동 - 모든 행에 대해 해당 부분을 다운로드해야하는 이유는 무엇입니까?
이벤트 처리기를 외부로 이동합니다. 다시 일부 바이트를 저장합니다.

출처

2011-03-09 00:28:41 alex

페이지 매김 또는 일부 진보적 인 로딩 :) – Dimitry

2500 행이 많습니다. 이것을 단순화하고 페이지의 DOM 양을 제한하기 위해 페이징 옵션을 고려할 수 있습니다. 일부는 원유를 페이징하는 것을 고려하지만 구현하기가 상대적으로 쉽습니다.

또 다른 옵션은 현재 표시된 내용을 렌더링하는 사용자 정의 테이블 js 코드와 양쪽에 버퍼를 작성하는 것입니다. 그것은 매우 복잡합니다.

세 번째 옵션은 타사 그리드를 사용하는 것입니다. 그게 내가 뭘 할거야.

브라우저가 innerHTML을 대체 할 때 정말 훌륭하다는 것을 기억하십시오. 따라서 개별적으로 2500 개의 행을 추가하는 경우 내부 HTML 작업을 일괄 처리하여 속도를 높일 수 있습니다.

출처

2011-03-09 00:29:59 hvgotcodes

2500 개의 항목이 실제로 많이 있지만, 브라우저 충돌 (Firefox의 경우)을 보증하기에 충분하지 않다고 생각합니다. (물론 나보다 다른 사람에 의해 언급 된 바와 같이)

는 다음과 같은 최적화를 시도해보십시오

당신이
인라인 이벤트 핸들러는 일반적으로 더 빨리 (내 경험)입니다이 HTML 마크 업의 양을 줄이기보다는보다 jQuery와 바인딩. 어쨌든 그들을 꺼내어 타이머를 만들어 대신 이벤트를 바인딩하십시오 (타이머는 UI에 대한 별도의 스레드에서 실행 됨). 추가 작업이 필요하다면 사용자가 페이지 간을 스크롤 할 때 페이지 매김을 만들고 클릭 핸들러 만 바인딩 할 수도 있습니다.
인라인 이미지를 제거하십시오. 그것들은 항상 페이지로드를 더 느리게 만듭니다. CSS 클래스가 빠릅니다. 페이지 매김 또는 소개
1. ; 궁극적으로

, 그러나 당신을위한 가장 좋은 방법은에있다

"끝나지 않는 스크롤"유형 기능 (예 :Google 리더처럼)

출처

2011-03-09 00:42:00

페이지 매김의 대안은 지연로드 또는 주문형 로딩입니다. 먼저 테이블의 작은 부분을로드하고 사용자가 페이지 맨 아래로 스크롤 할 때 다른 작은 부분을로드하는 등의 작업 만 수행하면됩니다.

또한 valign/align/style과 같은 인라인 속성을 제거하고 모든 내용을 외부 CSS로 오프로드하십시오.

출처

2011-03-09 00:45:08 glomad

SlickGrid –은 거대한 데이터 세트를 처리하도록 특별히 설계되었습니다. 나는 그것을 수십만 개에 달하는 레코드와 함께 사용했습니다. SlickGrid는 실제로보고있는 행에 대해서만 DOM 요소를 렌더링하여이 수준의 성능을 얻습니다. 아래로 스크롤하면 이전 행이 새로운 행이 만들어 짐에 따라 파손되므로 주어진 시간에 DOM에 최소한의 요소 수 이상을 가지지 않습니다. Demos here.

는 는

(경고 :. 당신은 그리드의 요소에 이벤트 처리기를 바인딩하는 경우주의 슬릭은 jQuery를 무시하고 jQuery를 통해 결합 어떤 핸들러를 누출하는, 그 자체 innerHTML을 설정합니다.)

을 UX에서 관점, 나는 SlickGrid의 접근법 (가상 스크롤)을 선호한다. I 싫어하는 것 페이지가 매겨진 데이터를 다루고 있습니다.

출처

2011-03-09 00:45:57 josh3736

매김 당신이 시도해야하는 옵션이 아닌 경우 :

이벤트 위임 (http://davidwalsh.name/event-delegate). 이렇게하면 이벤트 유형별로 하나의 수신기를 등록 할 수 있습니다.
테이블 스타일 (http://www.w3schools.com/css/pr_tab_table-layout.asp)에서 'table-layout : fixed'. 이것은 거대한 테이블의 렌더링 시간을 획기적으로 향상시킬 수 있습니다.

출처

2011-03-09 00:51:01 tilleryj

브라우저에서 더 빨리 렌더링하려면 어떻게이 HTML을 최적화 할 수 있습니까?

답변

관련 문제