최근에 만든 웹 응용 프로그램의 모바일 버전을 만들고 있습니다. 최대한 빨리 응용 프로그램을 최적화하려고합니다. 모바일 버전에는 표시되지 않아야하는 애플리케이션 내부의 일부 요소가 있습니다.요소를 숨기거나 제거하여 모바일 웹 앱을 최적화 하시겠습니까?
이러한 요소를 어떻게 다루어야합니까?
DOM에서 요소를 완전히 제거하는 데 JavaScript를 사용합니까? CSS 미디어 쿼리를 사용하고 단순히 요소의 가시성을 숨김으로 변경합니까? 자바 스크립트를 사용하고 요소의 가시성을 숨김으로 변경합니까?
내 목표가 성능을 향상시키는 것이 가장 효율적인 방법을 찾고 있습니다 (아주 작은 차이 일지라도).
u가 성능에 맞게 최적화되어야한다고 말한 것입니다. 명심할 것은 올바른 크기의 이미지를 사용하는 것입니다. 이를 위해 CSS 배경 이미지를 일부 요소에 사용할 수 있으며 CSS 미디어 쿼리를 사용하여 적절한 크기의 배경 이미지를 선택할 수 있습니다.
예 : 정말 부피가 큰 HTML 경우 그냥 제거 할 수있는 요소()의 나머지
#banner{
background-image: big-image.jpg;
}
@media all and (max-width: 640px){
#banner{
background-image: small-image.jpg;
}
}
@media all and (max-width: 420px){
#banner{
background-image: tiny-image.jpg;
}
}
또는 매우 몇 줄의 경우 숨 깁니다.
휴대 기기에서 데스크톱 이미지를로드하지 않으려면 src 대신 이미지 태그에 데이터 속성을 추가하여 게으른로드를하는 것이 좋습니다.
<img data-lazy-load-event="immediately" data-lazy-load-for-media="desktop" data-lazy-load-src="image.jpg" />
속성.
로드 할 수없는 요소의 경우 JavaScript를 사용하여 DOM에서 해당 요소를 제거하십시오.
요소의 가시성을 숨기거나 변경해도 페이지 가중치가 감소하지 않습니다. 페이지 렌더링 시간을 단축 할 수 있지만 모바일 크기에서 DOM에서 제거 (또는 추가하지 않음)하는 것이 더 큰 가치가 있습니다. –