display none Liệu nó có giảm thời gian tải hay các mục vẫn được tải nhưng không được hiển thị

Question

Tôi đang xây dựng trang web đáp ứng bằng cách sử dụng truy vấn phương tiện. Tôi cần phải chuyển sang một phương pháp điều hướng khác cho màn hình rất nhỏ.

Đối với màn hình máy tính để bàn/máy tính bảng, tôi đang sử dụng phương pháp danh sách UL/LI dựa trên sprite. Đối với màn hình điện thoại thông minh nhỏ, tôi sẽ có văn bản liên kết đơn giản.

Nếu tôi sử dụng, Hiển thị: không; để ẩn điều hướng dựa trên sprite cho điện thoại thông minh, hình ảnh sprite sẽ vẫn được tải, nhưng không được hiển thị? Tôi có cần phân tích cú pháp tham chiếu hình ảnh trong truy vấn phương tiện css của mình cho điện thoại thông minh không? Hoặc tôi nên để nguyên tham chiếu hình ảnh ra khỏi css ban đầu hoàn toàn vì tôi thiết kế nhỏ đến lớn (tức là css mặc định dành cho màn hình nhỏ, sau đó truy vấn phương tiện thay đổi mọi thứ khi màn hình trở nên lớn hơn).

Answer 1

Để trả lời câu hỏi của bạn, display: none hiện không giảm thời gian tải. Nó vẫn tải nội dung/lớp/mã được đề cập, nhưng trình duyệt không hiển thị/hiển thị chúng.

Có vẻ như bạn đang sử dụng một cách tiếp cận điện thoại di động đầu tiên, vì vậy bạn có thể một trong hai:

1. tải toàn bộ tài sản/classes/script không phụ thuộc/tablet/lớp máy tính để bàn di động bạn đang nhắm đến và điều chỉnh bố cục bằng truy vấn phương tiện của bạn.

   • Điều này có nghĩa là tất cả nội dung (sprites et al) sẽ được tải theo mặc định ngay cả khi chúng không được sử dụng bởi một số loại thiết bị nhất định.
   • Nội dung/bố cục sẽ được hiển thị hoặc ẩn dựa trên các quy tắc truy vấn phương tiện.
     
     

2. tải nội dung cần thiết/classes/script như và chỉ khi các bang truyền thông truy vấn thay đổi. Ưu điểm của việc này là kinh nghiệm sẽ là tương đối nhiều các thiết bị loại trong câu hỏi:

   • Nhiều phản ứng kinh nghiệm/kịp thời và tải các chức năng
   • có khả năng ít băng thông
   • Một kinh nghiệm thiết kế chặt chẽ hơn đối với mỗi thiết bị loại
   • Một số tài sản (images/nền vv) có thể được nạp một cách chọn lọc

Nếu bạn xem xét lựa chọn 2, thì có rất nhiều trình nạp tài sản mã nguồn mở cho phép bạn tải mã CSS và Javascript dựa trên các thay đổi trạng thái truy vấn phương tiện. [Lưu ý: Cần có thêm nỗ lực/thiết kế để sử dụng kỹ thuật này].

Một ví dụ đơn giản này sử dụng enquire.js (có những người khác bộ tải tài sản) sẽ cho phép bạn làm như sau:

<script type="text/javascript"> 

    // MQ Mobile 
    enquire.register("screen and (max-width: 500px)", { 
     match : function() { 
      // Load a mobile JS file 
      loadJS('mobile.js'); 
      // Load a mobile CSS file 
      loadCSS('mobile.css'); 
     } 
    }).listen(); 

    // MQ Desktop 
    enquire.register("screen and (min-width: 501px)", { 
     match : function() { 
      // Load a desktop JS file 
      loadJS('desktop.js'); 
      // Load a desktop CSS file 
      loadCSS('desktop.css'); 

     } 
    }).listen(); 

</script> 

Vì vậy, nếu một trình duyệt là 501px trở lên trong chiều rộng, sau đó cả hai desktop.js và desktop.css sẽ tải - bật các tính năng/nội dung không có sẵn dưới 501px và không bắt buộc.

Answer 2

Tất cả các mục sẽ được tải nhưng không được hiển thị cho người dùng cuối.