it-swarm-korea.com

JS를 사용하지 않으면 서 속도 향상

현재 표준 img 태그를 사용하여 이미지를로드하는 이미지 갤러리가 있으며 큰 이미지가 많기 때문에 상당히 느리게로드됩니다.

페이지가로드 된 후 갤러리 스크립트가 이미지를 동적으로로드하도록하여 속도를 높일 수 있습니다. 이것을 테스트했으며 성능이 크게 향상되었습니다. 문제는 사용자가 JS를 비활성화 한 경우 그림이로드되지 않는 것과 같이 이렇게하는 것입니다.

문제는 JS가 비활성화 된 경우 페이지가 작동하지 않는 대신 성능을 얻는 것이 합리적입니까?

이 특정 경우에는 noscript 태그를 사용한다고 생각하지만 html 출력을 제어 할 수없는 경우 (예 : CMS에서) 어떻게해야합니까?.

2
Sruly

몇 가지 빠른 생각 :

  • N 개 이상의 이미지를로드 할 필요가 없도록 UI를 다시 디자인하십시오. 예를 들어 페이지 매김을 도입하십시오.
  • 많은 브라우저는 사용자에게 보이는 이미지 만 렌더링합니다. 다른 이미지를 화면 밖으로 이동하거나 오버플로가있는 div로 숨겨서 숨길 수 있습니다.
  • 페이지로드에 첫 번째 N 이미지를로드 한 다음 나머지 이미지를로드하십시오. 나머지 이미지를로드하려면 자바 스크립트가 필요하며 JS를 활성화하지 않은 소수의 사용자를 위해 페이지 매김을 추가하는 noscript 태그를 추가 할 수 있습니다.
  • 처리하는 이미지의 종류에 따라 이미지를 Sprite 시트에 결합하고 CSS의 배경 위치를 사용하여 이미지를 모두 배경 이미지로로드하여 올바른 부분 만 표시하십시오. 초기로드 시간은 무겁지만 캐시 가능합니다.

궁극적으로 나는 청중이 무엇인지 모르기 때문에 JS가 꺼져 있는지 여부는 가치있는 트레이드 오프인지 대답 할 수 없습니다. 더 많은 정보가 필요합니다. 대부분의 경우 내가 작업 한 웹 사이트의 경우 점진적으로 향상되는 경향이 있습니다. 내 목록의 세 번째 예는 내가 갈 것입니다.

4
Rahul

이미지로드 속도를 높이기 위해 JS를 요구하는 대신 갤러리를 보려고 할 때 이미지가 이미로드되도록 다른 페이지의 끝에 이미지를로드합니다. 이미지가 중요한 모든 내용 뒤에 있는지 확인하고 동일한 이름을 사용하여 캐시 할 수 있도록하려고합니다.

JS로 로딩을 고수하고 싶다면 JS를 먼저 확인하고 JS를 지원하면 동적로드를 사용하고 JS가없는 경우 표준으로 돌아가는 것이 좋습니다.

1
LoganGoesPlaces

점진적으로이 작업을 수행 할 수 있습니다. 즉, 초기 HTML은 IMG 태그를 출력합니다. 그러나로드시 즉시 jQuery가 실행되고 IMG 태그를 사용자 정의 로더로 동적으로 대체합니다. 두 세계의 최고.

1
Chase Seibert

대기업조차도 자바 스크립트를 요구하기 시작했습니다. 예를 들어 IE에서 자바 스크립트를 사용 중지 한 경우 Chrome을 다운로드 할 수 없다는 것을 알고 있습니까? Accept and Install 버튼이 작동하지 않습니다. 화면 상단에 다음과 같은 텍스트를 표시합니다.

이 소프트웨어를 다운로드하려면 JavaScript 가능 브라우저가 필요합니다. 자세한 내용은 여기를 클릭하십시오 브라우저에서 JavaScript를 활성화하는 방법에 대해 설명합니다.

개인적으로 Javascript 요구 사항은이 시나리오에서 실수라고 생각하지만 난처합니다.

물론 그것은 청중에 달려 있지만 지난 몇 년 동안 나는 자바 스크립트가 작동 해야하는 꽤 많은 웹 인터페이스를 구축해 왔습니다.

남아있는 관심사 중 하나는 SEO입니다. 갤러리의 이미지를 Google에서 색인화하려면 HTML에 이미지가 표시되어야합니다.

1
Steve Wortham

"자바 스크립트를 끈 경우 어떻게해야합니까?"라는 질문은 그 자체로 살아야하는 질문입니다. JS를 끈 상태에서 앱/사이트를 계속 사용할 수 있는지 확인해야하지만 잠재 고객이 누구인지 생각해야합니다. 솔직히-2010 년이며 웹 개발자는이 문제에 대해 생각할 필요조차 없습니다 (더 이상은 아닙니다).

분석 기능을 사용하여 사용자가 JS를 사용/사용 중지했는지 확인합니다. 사용자의 5 % 미만이면 해결 방법에 시간을 낭비하지 않아도됩니다.

1
abrudtkuhl