최적의 웹 페이지 렌더링 성능을 위해 JavaScript가 CSS보다 우선해야 합니까?-CSS 튜토리얼-php.cn

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

결론

집

웹 프론트엔드

CSS 튜토리얼

최적의 웹 페이지 렌더링 성능을 위해 JavaScript가 CSS보다 우선해야 합니까?

Mary-Kate Olsen

Nov 29, 2024 pm 04:14 PM

Should JavaScript Precede CSS for Optimal Web Page Rendering Performance?

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

웹 페이지의. 이는 렌더링 스레드가 페이지를 렌더링하는 데 필요한 모든 스타일 정보를 갖게 되며 JavaScript 엔진은 계속하기 전에 포함된 모든 JavaScript를 구문 분석해야 하므로 페이지 렌더링이 지연된다는 추론에 의해 뒷받침됩니다.

그러나 실제 테스트에서는 다른 결과가 나타났습니다. JavaScript 인터프리터는 시작하기 전에 모든 CSS가 다운로드될 때까지 기다리는 것처럼 보입니다. 즉, JavaScript를 먼저 포함하면 JavaScript 스레드 시간을 보다 효율적으로 사용할 수 있습니다.

이에 대해 자세히 알아보려면 구체적인 예를 살펴보겠습니다. 다음 페이지 구조를 고려하세요.

<!DOCTYPE html>
<html>
  <head>
    <title>test</title>
    <script type='text/javascript'>
      var startTime = new Date();
    </script>
    <link href="http://10.0.0.50:8081/test.css?delay=500" type="text/css" rel="stylesheet">
    <script type="text/javascript" src="http://10.0.0.50:8081/test2.js?delay=400&jsdelay=1000"></script>
  </head>
  <body>
    <p>
      Elapsed time is:
      <script type='text/javascript'>
        document.write(new Date() - startTime);
      </script>
    </p>
  </body>
</html>

로그인 후 복사

CSS가 먼저 포함되면 페이지를 렌더링하는 데 1.5초가 걸립니다. JavaScript가 먼저 포함되면 페이지를 렌더링하는 데 1.4초가 걸립니다. 이 실험은 JavaScript의 우선순위를 지정하면 페이지 렌더링 속도가 더 빨라질 수 있음을 보여줍니다.

결론

실제 테스트에 따르면 CSS 포함을 JavaScript 포함 앞에 배치하는 것이 최신 브라우저의 성능에 적합하지 않을 수 있습니다. JavaScript를 먼저 포함하면 JavaScript 스레드가 작동하는 데 더 많은 시간을 제공하여 효율성이 향상되는 것으로 보입니다. 이는 문서의

위 내용은 최적의 웹 페이지 렌더링 성능을 위해 JavaScript가 CSS보다 우선해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.