@import trong CSS có dẫn đến các yêu cầu http bổ sung không?

Question

Tôi có một trang web thương mại điện tử có khoảng 8 tệp CSS được liên kết từ tiêu đề - dẫn đến 8 yêu cầu http riêng biệt cho máy chủ. Tôi hợp nhất tất cả các tệp CSS thành 1 tệp lớn, tạo ra tệp 67kb (!) - để cắt giảm các yêu cầu http xuống 1 đối với các tệp css của chúng tôi.

Tôi đang tìm kích thước này một tệp CSS một chút không thể quản lý được trong thực tế tôi đang thực hiện cập nhật trên trang web liên tục. Mối quan tâm của tôi là người dùng của tôi có thể bắt tôi cập nhật và xem trang NON-style khi di chuyển từ trang này sang trang khác - 67kb vẫn mất 2-3 giây trước khi nó được đặt thành công trên máy chủ từ xa qua FTP .

Câu hỏi của tôi là: việc sử dụng @import trong tệp CSS lớn này để chia nhỏ tệp thành các kích thước nhỏ hơn (trong tệp CSS) đưa chúng ta trở lại 8 yêu cầu http gốc khi các trang được tải ? Hoặc là @imports trong CSS xử lý khác nhau bằng cách nào đó?

Answer 1

Vâng, bạn sẽ quay lại yêu cầu cho mỗi bản định kiểu trong khi sử dụng @import.

Đặt cược tốt nhất của bạn là rút gọn và hợp nhất css thành một tệp duy nhất để triển khai. Nhưng bạn vẫn có thể phát triển với các tệp riêng biệt.

Answer 2

Trình duyệt phải lấy dữ liệu bằng cách nào đó, vậy làm sao nó không thể sử dụng một yêu cầu http khác? ;-)

Cũng có thể, bạn sẽ được hưởng lợi từ bộ nhớ đệm của trình duyệt nếu bạn chỉ thay đổi một tệp và bảy tệp còn lại không thay đổi.

Bạn có thể thử đánh hơi một kết nối giữa máy khách và máy chủ và xem nó yêu cầu gì.

Answer 3

Có, yêu cầu riêng được phát hành cho mỗi câu lệnh @import.

Bạn có thể kiểm tra điều này bằng cách kiểm tra nhanh; viết một đoạn mã HTML, bao gồm tệp CSS nhập tệp CSS thứ hai. Xem kết quả trong một cái gì đó giống như bảng điều khiển mạng của Firebug cho thấy hai yêu cầu riêng biệt cho mỗi tệp CSS. Đó là bài kiểm tra tôi đã sử dụng để xác nhận câu trả lời này.

Answer 4

Nhập CSS không được xử lý khác với bất kỳ "bao gồm" nào khác trên trang, chẳng hạn như tham chiếu đến tập lệnh JavaScript bên ngoài. Tuy nhiên, bộ nhớ đệm của trình duyệt sẽ làm cho việc này không thành vấn đề ngoại trừ quyền truy cập đầu tiên vào trang web của bạn.

Answer 5

Nếu bạn có tệp CSS 67 Kb thì có gì đó lạ. Hãy nhớ rằng C trong CSS là dành cho CASCADING, và điều này có nghĩa là bạn không phải định nghĩa trong mỗi lớp tất cả các thuộc tính của mỗi một trong các thẻ có liên quan trong lớp.

Ví dụ, nếu bạn định nghĩa một < DIV id = "maincontainer" > như một container bạn có thể định nghĩa một lớp học để nó

#maincontainer {font-face:Arial,helvetica,sans;} 

Nó có nghĩa là nếu bạn tạo một sub-class của nó cho thẻ <P> như

#maincontainer P {color:darkgray;} 

Tất cả các <P> thẻ bên trong maincontainer DIV sẽ sử dụng phông chữ arial, helvetica, Sanz.

Cũng cố gắng tạo tệp CSS để chúng được sử dụng như thế nào trong các trang. Một tệp CSS duy nhất cho tất cả các trang web làm cho tải rất nhiều lớp học sẽ không được sử dụng trong một số trang. Phân chia và chinh phục.

Answer 6

Bạn có thể ngăn các yêu cầu thêm http bằng cách kết hợp các bảng định kiểu với .htaccess. Kỹ thuật này được giải thích trong HTML5 Boilerplate .htaccess. Nó hoạt động như thế này:

Trong .htaccess:

<FilesMatch "\.combined\.(js|css)$"> 
    Options +Includes 
    SetOutputFilter INCLUDES 
</FilesMatch> 

Trong style.combined.css:

<!--#include file="reset.css"--> 
<!--#include file="style.css"--> 

Bạn có thể sử dụng để kết hợp .js (hoặc bất kỳ phần mở rộng khác mà bạn đưa vào dấu ngoặc đơn.)

Tài liệu cho Tùy chọn + Bao gồm là here.