CSS 로딩이 페이지 로딩 속도에 영향을 미치나요?-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

CSS 로딩이 페이지 로딩 속도에 영향을 미치나요?

王林

Feb 18, 2024 pm 09:52 PM

표현비동기 로딩차단하다CSS 로딩

CSS 로딩이 페이지 로딩 속도에 영향을 미치나요?

CSS 로딩이 페이지 렌더링을 차단할지 여부는 일반적인 질문입니다. 이 기사에서는 CSS 로딩이 페이지 렌더링에 미치는 영향을 자세히 살펴보고 데모용 특정 코드 예제를 제공합니다.

먼저 CSS 로딩이 페이지 렌더링에 어떤 영향을 미치는지 알아야 합니다. 브라우저가 HTML을 구문 분석할 때 외부 CSS 파일을 발견하면 브라우저는 HTML 구문 분석을 일시 중지한 다음 CSS 파일 다운로드를 시작합니다. 브라우저가 CSS 파일을 다운로드하고 구문 분석한 후에만 브라우저가 HTML 구문 분석을 계속합니다. 이는 CSS 로딩이 페이지 렌더링을 차단한다는 것을 의미합니다.

이를 보여주기 위해 외부 CSS 파일과 자리 표시자 요소가 포함된 간단한 HTML 파일을 만들 수 있습니다. CSS 파일에서 배경색을 정의하고 HTML의 자리 표시자 요소에 이 스타일을 적용하겠습니다. 그런 다음 개발자 도구를 사용하여 페이지의 렌더링 프로세스를 살펴보겠습니다.

HTML 코드는 다음과 같습니다.

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="placeholder"></div>
  <script>
    console.log("This is a placeholder element.");
  </script>
</body>
</html>

CSS 코드(styles.css로 저장됨)는 다음과 같습니다.

.placeholder {
  width: 200px;
  height: 200px;
  background-color: red;
}

HTML 파일을 열고 콘솔 출력을 보면 가 다음과 같습니다. 자리 표시자 요소입니다. code>는 CSS 파일이 로드된 후에만 출력됩니다. 이는 CSS 로딩이 페이지 렌더링을 차단한다는 것을 보여줍니다. <code>This is a placeholder element.会在CSS文件加载完成后才输出。这表明CSS加载确实会阻塞页面的渲染。

然而，有一种情况下CSS加载不会阻塞页面渲染。如果我们将CSS文件放在HTML的标签中，并且使用<link>标签的rel属性值设置为preload，CSS文件将会以异步方式进行加载，而不会阻塞页面的渲染。以下是修改后的HTML代码示例：

<!DOCTYPE html>
<html>
<body>
  <div class="placeholder"></div>
  <link rel="preload" href="styles.css" as="style">
  <link rel="stylesheet" href="styles.css">
  <script>
    console.log("This is a placeholder element.");
  </script>
</body>
</html>

在这个示例中，我们将CSS文件的链接放在了标签中，并使用了<link>标签的rel属性来异步加载CSS文件。如果我们再次打开这个HTML文件并查看控制台输出，我们会注意到This is a placeholder element.会在CSS文件加载之前输出。这意味着页面的渲染不会被CSS文件的加载阻塞。

总结起来，CSS加载会阻塞页面的渲染，除非我们使用异步加载的方法。异步加载CSS文件可以通过将<link>标签放在标签中，并使用rel属性的preload

그러나 CSS 로딩이 페이지 렌더링을 차단하지 않는 상황이 있습니다. HTML의 태그에 CSS 파일을 배치하고 <link> 태그의 rel 속성 값을 사용하면 미리 로드하려면 페이지 렌더링을 차단하지 않고 CSS 파일이 비동기적으로 로드됩니다. 다음은 수정된 HTML 코드의 예입니다.

rrreee

이 예에서는 CSS 파일에 대한 링크를 태그에 넣고

<link> code> 태그의 rel 속성을 사용하여 CSS 파일을 비동기적으로 로드합니다. HTML 파일을 다시 열고 콘솔 출력을 보면 This is a placeholder element.가 CSS 파일이 로드되기 전에 출력된다는 것을 알 수 있습니다. 이는 CSS 파일 로드로 인해 페이지 렌더링이 차단되지 않음을 의미합니다. 🎜🎜요약하자면, 비동기 로딩 방법을 사용하지 않는 한 CSS 로딩은 페이지 렌더링을 차단합니다. CSS 파일의 비동기 로딩은  태그 내에 <link> 태그를 배치하고 rel 속성을 사용하여 수행할 수 있습니다. 달성할  preload 값. 🎜🎜 따라서 웹페이지 성능을 최적화할 때 주요 CSS 코드를 HTML에 인라인하는 것을 고려할 수 있습니다. 이렇게 하면 CSS 로딩으로 인해 페이지 렌더링이 차단되는 것을 방지할 수 있습니다. 그런 다음 중요하지 않은 CSS를 비동기식으로 로드하여 페이지 렌더링 속도를 향상시킬 수 있습니다. 🎜

위 내용은 CSS 로딩이 페이지 로딩 속도에 영향을 미치나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명

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

관련 기사