CSS @import là gì và tại sao nó có thể làm chậm trang web? 31/01/2023

CSS @import là gì?

Cách phổ biến nhất để tải tệp CSS là sử dụng thẻ liên kết:

<link rel="stylesheet" type="text/css" href="link.css" />

Một phương pháp khác là tham chiếu một stylesheets bên trong một stylesheets khác, bằng cách sử dụng @import "url"trong CSS:

@import "imported.css";

/*contents of link.css */

Bằng cách này, trình duyệt sẽ bắt đầu một yêu cầu tải stylesheets khác sau khi tải tệp CSS ban đầu.

Tại sao CSS @import làm chậm trang web của bạn?

Hầu hết các tệp CSS là tài nguyên chặn hiển thị, có nghĩa là trình duyệt phải tải chúng xuống trước khi có thể hiển thị bất kỳ nội dung nào cho người dùng.

Khi nhiều stylesheets thêm mà không có @import(thay vào đó bằng cách sử dụng các thẻ liên kết trong HTML), trình duyệt có thể tải chúng xuống song song.

Ngược lại, sử dụng @importđể tham chiếu một tệp CSS bên trong một tệp khác có nghĩa là chúng được tải xuống tuần tự, mất nhiều thời gian hơn. Kết quả là trang web tải chậm hơn.

Ví dụ: điều này thường xảy ra khi nhập Google Fonts trong tệp CSS.

Ví dụ này cho thấy cách @import tạo ra sự phụ thuộc tuần tự, làm chậm trang web. CSS phông chữ của Google chỉ bắt đầu tải sau khi style.css đã được tải xuống.

Cách tránh sử dụng @import

Sử dụng thẻ liên kết stylesheets tiêu chuẩn thay vì @import

Nếu bạn có thể chỉnh sửa tệp CSS nguồn, hãy xóa @import và thay vào đó, hãy tham chiếu tệp CSS phụ trong tài liệu HTML bằng cách sử dụng <link>thẻ.

Thay vì thực hiện việc này trong tệp CSS:

Sử dụng cái này trong HTML của bạn:

<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Press+Start+2P"/>

Nếu không thể chỉnh sửa tệp CSS, bạn có thể sử dụng gợi ý tài nguyên tải trước để giúp trình duyệt khám phá (và tải xuống) tài nguyên @import sớm hơn.

<!-- This is the CSS file that contained the original @import statement -->

<link rel="stylesheet" href="parentCSS.css"/>

<!-- This tells the browser to download the imported resource right away -->

<link rel="preload" href="//fonts.googleapis.com/css?family=Press+Start+2P" as= "font"/>

CSS @import trong các thẻ

Về lý thuyết, việc sử dụng @importbên trong thẻ style trong HTML sẽ cho phép trình duyệt khám phá kiểu biểu định ngay lập tức và bắt đầu tải xuống sớm.

<style>

@import url(file.css);

</style>

Tuy nhiên, không phải lúc nào các trình duyệt cũng hỗ trợ tốt điều này . Mặc dù một số vấn đề trong bài đăng đó đã được giải quyết nhưng vẫn còn một số vấn đề với @import.

@import trong HTML rất dễ tránh, thay vào đó chỉ cần sử dụng linkthẻ biểu định kiểu.

<link rel="stylesheet" href="file.css" />

Kết luận: Nhập CSS so với liên kết

Cố gắng sử dụng các thẻ liên kết thay vì CSS @import bất cứ khi nào có thể để trang web của bạn hiển thị nhanh nhất có thể.

Khi link không thể sử dụng thẻ, hãy xem xét tải trước các biểu định kiểu được tải bằng @import.