Xác định truy vấn phương tiện CSS trong bộ chọn

Question

Có vấn đề gì (hiệu suất là mối quan tâm chính của tôi) nếu thay vì xác định bộ chọn css trong truy vấn phương tiện (ví dụ 1), bạn xác định truy vấn phương tiện trong bộ chọn css (ví dụ 2).

Ví dụ 1 - selectors css trong phương tiện truyền thông truy vấn

@media (min-width: 600px) { 
    .foo { ... } 
    .bar { ... } 
    .hello { ... } 
    .world{ ... } 
} 

@media (min-width: 1000px) { 
    .foo { ... } 
    .bar { ... } 
    .hello { ... } 
    .world{ ... } 
} 

@media (min-width: 1500px) { 
    .foo { ... } 
    .bar { ... } 
    .hello { ... } 
    .world{ ... } 
} 

Ví dụ 2 - truy vấn phương tiện truyền thông trong selectors css

.foo { 
    @media (min-width: 600px) { ... } 
    @media (min-width: 1000px) { ... } 
    @media (min-width: 1500px) { ... } 
} 

.bar { 
    @media (min-width: 600px) { ... } 
    @media (min-width: 1000px) { ... } 
    @media (min-width: 1500px) { ... } 
} 

.hello { 
    @media (min-width: 600px) { ... } 
    @media (min-width: 1000px) { ... } 
    @media (min-width: 1500px) { ... } 
} 

.world{ 
    @media (min-width: 600px) { ... } 
    @media (min-width: 1000px) { ... } 
    @media (min-width: 1500px) { ... } 
} 

Bạn có thể tự hỏi "tại sao làm như vậy?". Có một số hạn chế trong LESS xung quanh việc mở rộng các lớp trên các truy vấn phương tiện bên trong và cũng có các biến phạm vi.

Answer 1

Trả lời ngắn gọn, không. Không có vấn đề về hiệu suất trong việc xác định truy vấn phương tiện trong bộ chọn CSS.

Nhưng chúng ta hãy cùng tìm hiểu trong ...

Như đã trình bày trong Anselm Hannemann bài viết tuyệt vời Web Performance: One or Thousands of Media Queries không có mất mát hiệu suất từ ​​việc thêm các truy vấn phương tiện truyền thông theo cách mà bạn đang có.

Miễn là cùng một vài truy vấn phương tiện đang được sử dụng trong mỗi bộ chọn thì không có hiệu suất chính nào khác ngoài tệp CSS của bạn có thể lớn hơn một chút.

.foo { 
    @media (min-width: 600px) { ... } 
    @media (min-width: 1000px) { ... } 
    @media (min-width: 1500px) { ... } 
} 

.bar { 
    @media (min-width: 600px) { ... } 
    @media (min-width: 1000px) { ... } 
    @media (min-width: 1500px) { ... } 
} 

Tuy nhiên, nó không kể có bao nhiêu phương tiện truyền thông khác nhau truy vấn bạn sử dụng. Khác nhau là khác nhau min-widths, max-widths và như vậy.

Answer 2

Không nên có sự khác biệt về hiệu suất xem cách trình duyệt xử lý truy vấn phương tiện. Các công cụ trình duyệt thực hiện tuần tự hóa và loại bỏ các truy vấn truyền thông được sao chép sao cho chúng chỉ cần đánh giá từng truy vấn phương tiện một lần. Ngoài ra, họ lưu trữ các truy vấn để họ có thể sử dụng lại sau này. Việc bạn sử dụng một hoặc nhiều truy vấn phương tiện trong mã của mình không quan trọng nếu giả sử các giá trị của bạn hầu như giống nhau.

---

Một số các khả năng khi có thể có vấn đề hiệu suất

• Bạn sử dụng các truy vấn nhiều phương tiện truyền thông với các giá trị khác nhau và các cửa sổ trình duyệt được tái kích thước. Khi cửa sổ trình duyệt được kích thước lại, nhiều truy vấn phương tiện có thể là một chi phí lớn trên cpu.
• Khi bộ chọn CSS quá phức tạp. Bộ chọn CSS phức tạp có nhiều cản trở về hiệu năng so với nhiều truy vấn phương tiện. Vì vậy, có nhiều truy vấn phương tiện trong bộ chọn phức tạp có thể gây ra các vấn đề về hiệu suất