동일한 테이블을 두 번 렌더링 할 때 단점이있을 수 있습니다 (모바일 용과 데스크톱 용).

Question

테이블을 디자인하여 모바일 및 데스크탑 장치에서 잘 보이도록 응용 프로그램을 만들고 있습니다.

동일한 내용이지만 구조가 두 개인 테이블을 렌더링 할 때 단점이 있다면 제 질문은 무엇입니까? 데이터베이스에서 쿼리를 두 번 결과를 렌더링에서입니다 내가 유일한 성능 오버 헤드를 추측하고있어 한 번만 실행되기 때문에

단순화 된 예는이

<!-- Show on desktops --> 
<table class='visible-on-desktop'> 
    <!-- Desktop table specific rows --> 
</table> 

<!-- Show on mobile, tables --> 
<table class='visible-on-mobile'> 
    <!-- Mobile, tablet table specific rows --> 
</table> 

같은 것입니다. 또한 모바일 버전 용으로 데스크톱 양식을 스타일링하기 위해 CSS를 사용하는 것이 아닌 이유는 데스크톱 형식이 상당히 복잡하고 모바일 용으로 좋은 디자인으로 만드는 것이 어렵 기 때문입니다.

Answer 1

네트워크를 통해 전송하는 콘텐츠가 두 배로 늘었습니다 (느리고 계량 된 연결의 경우 특히 중요 함).

CSS로드가 실패한 경우 (페이지를로드하는 중 신호가 손실 될 수있는 모바일 연결에서만 가능) 콘텐츠가 사용자에게 두 번 표시됩니다.

Answer 2

가능한 단점은 다음과 같습니다

• 복잡한 HTML 구조 (열심히 이해하기)
• 더 많은 데이터는
• 느린 DOM (페이지 이상의 요소)

(무시) ​​네트워크를 통해 전송 상대적으로 작은 페이지를 만들고 최소 데이터 사용량이 중요하지 않다면 괜찮다고 말하고 그렇지 않으면 CSS 미디어 쿼리를 사용하십시오.