Câu hỏi phỏng vấn CSS
Câu hỏi

Trong CSS, tại sao nên sử dụng import trên đầu tập tin?

Câu trả lời

Sử dụng @import ở đầu tập tin CSS có thể không phải là lựa chọn tốt nhất về mặt hiệu suất. Mặc dù @import có thể được sử dụng để nhập các tập tin CSS khác và có thể hữu ích trong một số trường hợp như sử dụng các media queries để áp dụng các style khác nhau cho các thiết bị khác nhau, hoặc khi nhập các font từ Google Fonts, nhưng nó cũng có thể gây ra một số vấn đề về hiệu suất.

Khi sử dụng @import, các tập tin CSS được nhập sẽ được tải một cách tuần tự, không phải song song, điều này có thể làm chậm quá trình tải trang. Điều này đặc biệt quan trọng khi các tập tin CSS được nhập chứa các nguồn lực quan trọng cho việc hiển thị trang, vì chúng có thể trở thành các nguồn lực chặn việc render, làm chậm thời điểm bắt đầu render của trang.

Một số nguồn khuyến nghị tránh sử dụng @import vì lý do hiệu suất và thay vào đó sử dụng thẻ <link> trong HTML để tải các tập tin CSS. Thẻ <link> cho phép trình duyệt tải các tập tin CSS một cách song song, giảm thiểu thời gian chờ và cải thiện thời gian tải trang.

Nếu bạn không thể chỉnh sửa tập tin CSS chứa @import, bạn có thể sử dụng thẻ <link rel="preload"> để giúp trình duyệt phát hiện (và tải) nguồn lực được nhập sớm hơn.

Tóm lại, việc sử dụng @import có thể chậm hơn so với việc sử dụng thẻ <link> vì nó tạo ra các yêu cầu HTTP tuần tự thay vì song song. Điều này có thể làm tăng thời gian tải trang và ảnh hưởng đến trải nghiệm người dùng. Do đó, nếu mục tiêu là tối ưu hóa hiệu suất, bạn nên cân nhắc sử dụng thẻ <link> hoặc các phương pháp khác để nhập CSS.

middle

middle

Gợi ý câu hỏi phỏng vấn

junior

Kể tên bốn loại thuộc tính @media?

senior

Sự khác biệt của biến CSS và biến preprocessor (SASS, LESS, Stylus) là gì?

middle

CSS framework là gì?

Bình luận

Chưa có bình luận nào

Chưa có bình luận nào