CSS는 HTML에서 항상 JavaScript보다 우선해야 합니까?

CSS가 항상 JavaScript보다 우선해야 합니까?

통상적인 지혜:

다음과 같은 이유로 오랫동안 JavaScript보다 CSS를 배치하는 것이 일반적인 권장 사항이었습니다.

• 렌더링 스레드에는 다음이 필요합니다. 페이지의 모든 스타일 정보를 렌더링합니다.
• 이전에 JavaScript가 포함된 경우 JavaScript 엔진은 다음 리소스 세트를 계속 진행하기 전에 모든 것을 구문 분석해야 합니다.
• 이는 렌더링 스레드에 필요한 모든 스타일이 없기 때문에 페이지를 완전히 표시할 수 없음을 의미합니다.

실제 테스트:

그러나 실제 테스트에서는 매우 다른 결과가 나타났습니다.

• JavaScript가 실행되지 않습니다. CSS가 다운로드됩니다.
• 따라서 자바스크립트 스레드를 더 오래 실행할 수 있기 때문에 자바스크립트를 앞에 포함시키는 것이 더 효율적인 것 같습니다.

결론:

• 데스크톱 브라우저의 경우: 최신 브라우저에서는 JavaScript 앞에 CSS를 두세요 성능 개선을 가져옵니다. 어떤 경우에는 성능 저하를 초래할 수도 있습니다(예: CSS가 지연되는 경우). 따라서 JavaScript** 뒤에 외부 스타일시트 **를 연결해야 합니다.
• 모바일 브라우저의 경우: 증거에 따르면 일부 모바일 브라우저(예: Android용 WebKit)는 여전히 예측 구문 분석을 수행하지 않습니다. 이러한 브라우저에서는 CSS 앞에 스크립트를 배치하면 성능이 저하될 수 있습니다.

기술적 설명:

• 기존 브라우저는 <script> 태그를 발견하면 HTML 구문 분석을 중단하고 스크립트를 다운로드하여 실행합니다. <link>를 만나면 CSS 파일을 가져오는 동안 HTML을 계속 구문 분석합니다. </script>
• 최신 브라우저는 브라우저가 HTML을 "예측"하고 스크립트를 포함한 리소스를 미리 다운로드하는 예측 구문 분석을 구현합니다.

브라우저 지원:

• 대부분의 최신 데스크톱 및 모바일 브라우저(약 85%)는 예측 로딩을 지원합니다.

참고:

• 이전 브라우저에서 성능이 문제가 되지 않는다면 데스크톱 브라우저에서는 CSS 뒤에 스크립트를 배치하는 것이 현명한 선택입니다.
• 모바일 브라우저에서 모범 사례는 기기 및 운영 체제에 따라 다를 수 있습니다.

위 내용은 CSS는 HTML에서 항상 JavaScript보다 우선해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!