현대식을 책임감있게 사용하는 방법

책임감있는 Modernizr 사용 : 웹 사이트 성능을 향상시키기위한 전략 modernizr, 브라우저가 특정 기능을 지원하는지 여부를 감지 할 수있는 JavaScript 라이브러리입니다. 그러나 웹 사이트 속도를 늦추지 않으려면주의해서 사용해야합니다. 이 기사는 Modernizr을 책임감있게 사용하는 방법과 JQuery와 같은 다른 유사한 라이브러리를 탐구합니다.

왜 Modernizr가 어떻게로드되는지에주의를 기울입니까?

<:> 주요 질문 : 웹 페이지에 액세스하기 위해 몇 초 동안 기다리시겠습니까? 대답이 '아니오'라면 방문자도 마찬가지입니다. 긴 로딩 시간은 사용자 경험에 직접적인 영향을 미치고 방문자의 상실로 이어집니다. 따라서 멋진 기능을 추구하더라도 웹 사이트의 성능을 고려해야합니다.

키는로드하는 방법입니다. 페이지가로드 된 후 많은 JavaScript 파일이 실행되며 에 넣는 것은 의미가 없으며 페이지 렌더링을 차단합니다. 대규모 스크립트는 에 배치되며 방문자는 페이지 내용을보기 전에 스크립트가로드 될 때까지 기다려야합니다.

modernizr은 CSS 전환 및 변환과 같은 현대적인 특징을 감지하는 데 사용됩니다. 특별한 상황을 제외하고 이러한 특성은 페이지 컨텐츠를 표시 할 필요가 없습니다. 대부분의 경우, Modernizr은 대신

의 끝에로드 될 수 있습니다.

최적화는 단일 리소스 에만 해당되는 것이 아닙니다

modernizr을 사용하는 웹 페이지가 천천히로드되는 경우, 단순히 라이브러리를 책임감있게로드하는 것만으로는 성능 문제를 해결하기에 충분하지 않을 수 있습니다. 책임있는 접근 방식은 JavaScript 파일 또는 기타 큰 리소스를 포함 할 때마다 신중한 고려를 의미합니다. 단일 리소스를 최적화하는 것은 분명하지 않을 수 있지만 모든 리소스를 최적화하면 성능을 크게 향상시킬 수 있습니다. 요구 사항을 명확히하십시오 modernizr을 사용하기 전에 요구 사항을 명확히하십시오. Modernizr는 많은 테스트를 제공하지만 모든 테스트가 프로젝트에 유용한 것은 아닙니다. Modernizr 공식 웹 사이트는 사용자 정의 빌드 도구를 제공하므로 더 작은 사용자 정의 버전을 생성하는 데 필요한 테스트 만 선택하여 다운로드 시간을 줄일 수 있습니다.

프로젝트 개발 단계에서 Modernizr의 정식 버전을 사용하고 출시 될 때 사용자 정의 버전을 재생하는 것이 좋습니다. 더 나은 접근 방식은 CSS 및 JavaScript 파일을 스캔하고 사용 된 모든 기능을 찾고 해당 사용자 정의 ModernIzr 빌드를 생성하는 Grunt-Modernizr와 같은 자동화 도구를 사용하는 것입니다. 모든 테스트가 필요한 것은 아닙니다

예를 들어, Modernizr은 브라우저가 CSS 속성을 지원하는지 여부를 테스트 할 수 있습니다. 지원되지 않으면이 속성은 무시되며 웹 사이트가 충돌하지 않습니다. 따라서 가 웹 사이트에 중요하지 않은 한 (예를 들어 텍스트 가독성을 향상시키기 위해) 테스트가 필요하지 않을 수 있습니다.

폴백 체계가 필요한 상황에서는 여전히 테스트해야하지만 모든 폴백 체계에 ModernIzr이 필요한 것은 아닙니다. 일부 CSS 폴백 체계는 스스로 테스트 할 필요가 없습니다.

이전 버전의 Internet Explorer에서 HTML5 요소를 지원하는 데 사용됩니다. Modernizr에는 포함 할 수 있지만 구형 IE와 호환되지 않으면 필요하지 않습니다. html5shiv를 사용하는 것이 좋습니다. 그러나 modernizr을 통해로드 할 필요는 없습니다. html5shiv

일부 함수는

로드를 지연시킬 수 있습니다 대부분의 modernizr 기능은 페이지 하단에로드를 지연시킬 수 있습니다. 이렇게하면 사용자가 페이지 컨텐츠를 보지 못하도록 방해하지 않고 대신 기본 콘텐츠를 먼저 표시 한 다음 향상된 경험을로드합니다. 그러나 그러나 와 같은 특정 기능은 html5 요소를 렌더링하기 전에로드 되려면

에 배치해야합니다. 그러나 조건부 의견 또는 인라인 스크립트를 통해로드하는 방법을 최적화하여 HTTP 요청을 줄일 수 있습니다.

modernizr를 에 배치할지 여부를 결정하는 것은 페이지 구조와 기능에 따라 다릅니다. 테스트 결과가 페이지 레이아웃에 영향을 미치지 않으면로드가 지연 될 수 있습니다.

효율 고려 사항 html5shiv Paul Irish는 페이지 하단에 ModernIzr을 넣는 동안 로딩 시간을 향상시킬 수 있지만 많은 Modernizr 테스트 (특히 CSS 테스트)가 리플 로우를 유발하여 브라우저가 스타일을 다시 계산시켜 로딩의 지연 이점을 상쇄 할 수 있다고 지적합니다. . 는 Dom 트리의 복잡성에 따라 다릅니다. 더 간단한 DOM 트리의 경우 테스트 실행이 더 빠릅니다. 다른 브라우저 및 버전에서 실행 시간을 평가하기 위해 테스트를 수행하는 것이 좋습니다. 맞춤형 빌드는 불필요한 테스트를 줄이고 효율성을 더욱 향상시킬 수 있습니다.

요약

이 기사는 현대식을 책임감있게 사용하는 방법과 다른 상황에서 올바른 로딩 위치를 선택하는 방법을 탐구합니다. 어떤 방법을 선택하든 불필요한 리소스 다운로드를 최소화하여 사용자에게 특히 네트워크 연결이 느려질 때 좋은 경험을 제공해야합니다. 이 책임있는 개발 접근법은 Modernizr뿐만 아니라 jQuery와 같은 다른 라이브러리를위한 것입니다. 쓸모없는 데이터 다운로드를 피하는 것은 모든 개발자가 따라야하는 원칙입니다.

위 내용은 현대식을 책임감있게 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!