Adakah pemuatan CSS menjejaskan kelajuan pemuatan halaman?-tutorial css-php.cn

Adakah pemuatan CSS menjejaskan kelajuan pemuatan halaman?

王林

Lepaskan： 2024-02-18 21:52:06

asal

940 orang telah melayarinya

Adakah pemuatan CSS menjejaskan kelajuan pemuatan halaman?

Sama ada pemuatan CSS akan menyekat pemaparan halaman ialah soalan biasa. Artikel ini akan meneroka secara terperinci kesan pemuatan CSS pada pemaparan halaman dan memberikan contoh kod khusus untuk demonstrasi.

Pertama, kita perlu tahu cara pemuatan CSS mempengaruhi pemaparan halaman. Apabila penyemak imbas menghuraikan HTML, jika ia menemui fail CSS luaran, penyemak imbas akan menjeda penghuraian HTML dan kemudian mula memuat turun fail CSS. Hanya selepas fail CSS dimuat turun dan dihuraikan oleh penyemak imbas, penyemak imbas akan terus menghuraikan HTML. Ini bermakna pemuatan CSS akan menyekat pemaparan halaman.

Untuk menunjukkan ini, kami boleh mencipta fail HTML ringkas yang mengandungi fail CSS luaran dan elemen pemegang tempat. Kami akan menentukan warna latar belakang dalam fail CSS dan menggunakan gaya ini pada elemen pemegang tempat dalam HTML. Kami kemudian akan menggunakan alat pembangun untuk melihat proses pemaparan halaman.

Kod HTML adalah seperti berikut:

<!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>

Salin selepas log masuk

Kod CSS (disimpan sebagai styles.css) adalah seperti berikut:

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

Salin selepas log masuk

Jika kami membuka fail HTML dan melihat output konsol, kami akan melihat bahawa Ini adalah elemen pemegang tempat.</ code> akan dikeluarkan hanya selepas fail CSS dimuatkan. Ini menunjukkan bahawa pemuatan CSS menyekat pemaparan halaman. <code>This is a placeholder element.会在CSS文件加载完成后才输出。这表明CSS加载确实会阻塞页面的渲染。

然而，有一种情况下CSS加载不会阻塞页面渲染。如果我们将CSS文件放在HTML的<body>标签中，并且使用<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>

Salin selepas log masuk

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

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

Walau bagaimanapun, terdapat situasi di mana pemuatan CSS tidak menyekat pemaparan halaman. Jika kami meletakkan fail CSS dalam teg HTML dan menggunakan nilai atribut rel bagi teg <link> menjadi pramuat, fail CSS akan dimuatkan secara tidak segerak tanpa menyekat pemaparan halaman. Berikut ialah contoh kod HTML yang diubah suai:

rrreee

Dalam contoh ini, kami meletakkan pautan ke fail CSS dalam teg dan menggunakan

<link> code> atribut rel untuk memuatkan fail CSS secara tidak segerak. Jika kami membuka fail HTML sekali lagi dan melihat output konsol, kami akan mendapati bahawa Ini ialah elemen ruang letak. adalah output sebelum fail CSS dimuatkan. Ini bermakna pemaparan halaman tidak akan disekat oleh pemuatan fail CSS. 🎜🎜Ringkasnya, pemuatan CSS akan menyekat pemaparan halaman melainkan kami menggunakan kaedah pemuatan tak segerak. Pemuatan tak segerak bagi fail CSS boleh dilakukan dengan meletakkan teg <link> dalam teg  dan menggunakan atribut rel bagi nilai  pramuat untuk dicapai. 🎜🎜 Oleh itu, apabila mengoptimumkan prestasi halaman web, kami boleh mempertimbangkan untuk menyelaraskan kod CSS utama ke dalam HTML, yang boleh mengelakkan pemaparan halaman menyekat pemuatan CSS. CSS tidak kritikal kemudiannya boleh dimuatkan secara tidak segerak untuk meningkatkan kelajuan pemaparan halaman. 🎜

Atas ialah kandungan terperinci Adakah pemuatan CSS menjejaskan kelajuan pemuatan halaman?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!