Tệp GWT Html với CSS

Question

Khi tôi tạo dự án mới với plugin GWT, nó tạo ra một dự án khung cho tôi. Trong tệp html có một nhận xét cho biết "Xem xét nội tuyến CSS để giảm số lượng tệp được yêu cầu" Tại sao tôi nên xem xét sử dụng css nội tuyến? Tôi khó có css trong tập tin riêng biệt không inline làm giảm kích thước của tập tin của tôi? có đúng không?

Answer 1

Câu trả lời nằm trong cách hoạt động của GWT. Vì GWT chỉ có một tải trang cho mỗi mô-đun tải bộ nhớ đệm nội tuyến không thực sự phát huy tác dụng.

Nếu bạn chỉ muốn câu trả lời: CSS nội tuyến sẽ giảm số lượng kết nối TCP/IP cần thiết để tải tất cả các tệp soạn dự án của bạn. Điều này có thể không tầm thường nếu bạn có thể có nhiều tệp CSS, độ trễ cao và các điều kiện mạng khác. Trong dòng công việc của tôi (chính phủ tiểu bang) bạn không phải lúc nào cũng được đảm bảo một "đường ống mỡ".

GWT (hoặc ít nhất là gwt-lồng ấp) có cơ chế kết hợp tối ưu hóa CSS nội tuyến với việc tách thông tin và bố cục.

Nhập ImmutableResources và StyleInjector. Hai điều này (kết hợp) dẫn đến một cách để nạp các tài nguyên không thay đổi (sau khi biên dịch).

Để sử dụng chúng, trước tiên hãy tải xuống gwt-lồng ấp. Sau đó, thêm các thư viện cần thiết để module.gwt.xml bạn

<!-- immutable resources and injecting styles --> 
<inherits name="com.google.gwt.libideas.ImmutableResources" /> 
<inherits name="com.google.gwt.libideas.StyleInjector" /> 

Khi đã xong, tạo các file CSS như đang nguồn lực.Tôi giữ cho tôi trong đường dẫn nguồn như "org.project.client.resources. *". Bạn có thể giữ chúng trong các phân đoạn riêng biệt như: header.css, body.css, table.css. Đi điên, thực sự giữ mọi thứ như riêng biệt như bạn muốn. Đường dẫn tệp của bạn sẽ trông giống như "/src/org/project/client/resources/header.css".

Bây giờ, để tạo giao diện CSS. Bây giờ, có một số điều khá đặc biệt bạn có thể làm với điều này look here. Nhưng tôi đã đi với cái cơ bản.

import com.google.gwt.libideas.resources.client.CssResource; 

public interface Css extends CssResource { 

} 

Bây giờ bạn có lớp CssResource (và bạn có thể có lớp khác) bạn cần tạo một gói tài nguyên không thay đổi bao bọc tất cả các tệp CSS của bạn.

import com.google.gwt.core.client.GWT; 
import com.google.gwt.libideas.resources.client.ImmutableResourceBundle; 

public interface ResourceBundle extends ImmutableResourceBundle { 

    public static final ResourceBundle INSTANCE = GWT.create(ResourceBundle.class); 

    /* 
    * ============================= 
    * CSS 
    * ============================= 
    */ 

     @Resource("org/project/client/resources/header.css") 
     public Css headerCss(); 

     @Resource("org/project/client/resources/body.css") 
     public Css bodyCss(); 
} 

Điều này, tại thời điểm biên dịch, tạo liên kết đến các tài nguyên CSS bất biến. Bây giờ chúng ta cần phải đặt (chèn) các tài nguyên CSS đó vào mô-đun bằng cách nào đó. Đây là nơi StyleInjector đến.

Tôi đặt mã tương tự như sau vào phương thức "onModuleLoad" của điểm nhập cảnh của tôi.

StyleInjector.injectStylesheet(ResourceBundle.INSTANCE.headerCss().getText()); 
StyleInjector.injectStylesheet(ResourceBundle.INSTANCE.bodyCss().getText()); 

Có thể có những cách khác để đạt được hiệu quả tương tự trong GWT nhưng sức mạnh của CssResource có thể được thừa hưởng cho những thứ nhiều hơn những gì tôi đã trải qua ở đây. Ví dụ: trong một trong các dự án của tôi, tôi cần một thay đổi nhỏ trong CSS để có được IE và Firefox để hiển thị những gì tôi cho là đúng. Tôi có hai phần cụ thể của trình duyệt nhỏ trong global.css của tôi như sau:

/* fix ie floating quirk */ 
@if user.agent ie6 ie7 ie8 { 
    #someElement { 
     top: -21px; 
     right: 5px; 
    } 
} 

/* fix firefox floating quirk */ 
@if user.agent ff gecko mozilla firefox Gecko Mozilla moz gecko1_8 { 
    #someElement { 
     top: -14px; 
    } 
} 

Có thể rời khỏi logic này khỏi JavaScript/Java của tôi. Ngoài ra còn có một tối ưu hóa nhỏ ở đây bởi vì GWT sẽ chỉ thực hiện việc tiêm cho các trình duyệt cần nó. (Ràng buộc hoãn lại dựa trên trình duyệt là cách nhiều thứ trong GWT hoạt động.)

Vì vậy, cơ chế cung cấp CSS nội tuyến cũng cung cấp các lợi ích khác trong khi vẫn duy trì việc tách CSS.

Không thích yêu?

Answer 2

Về cơ bản, cần có thời gian để mở kết nối TCP và yêu cầu tệp, do đó, có thể giảm lượng thời gian cần để tải tất cả các tệp cho một trang.

Ngoài ra, nếu bạn định tải tệp đó, cuối cùng, nó sẽ có cùng một lượng băng thông. Nó là tốt hơn để có một thời gian để chuyển giao hơn một giảm kích thước.

Answer 3

CSS nội tuyến có một số lợi ích, ở chỗ quy tắc này vượt quy tắc bảng định kiểu bên ngoài và luôn cần thiết - sử dụng các bản sửa đổi CSS mới nhất. Phía dưới là rõ ràng trang cụ thể (và do đó pha loãng ý định CSS để phân tách bản trình bày khỏi đánh dấu) và tăng kích thước của tệp trên tất cả (vì CSS không được lưu trong bộ nhớ cache và được tải lại mọi lúc và cho mỗi trang - không có gì thay đổi kể từ khi tôi đọc lần cuối về inline-css).

Biểu định kiểu bên ngoài có lợi ích khi được lưu vào bộ nhớ cache (và chỉ được tải khi cần để cập nhật hoặc thay đổi URI) và tăng lên thời gian tải xuống/kích thước tệp ban đầu, nhưng, sau đó không cần phải quay lại tải (trừ khi cần thiết).

Ngoài ra, tất nhiên, tất cả các trang khác tham chiếu biểu định kiểu sẽ không tải xuống tệp CSS nếu có bản sao cục bộ. (Tôi không nghĩ rằng điều đó quan trọng nếu các trang nằm trên một hoặc nhiều tên miền, miễn là URI liên tục đề cập đến cùng một tệp; nhưng tôi có thể sai.)

Answer 4

Tuy nhiên, hầu hết thời gian tốc độ này giảm sẽ khó nhận thấy, và đó là một thực hành tốt để tách HTML khỏi CSS. Vì vậy, chỉ làm điều này nếu nó là REALLY quan trọng để tối ưu hóa mọi phần của trang của bạn. Ngoài ra, hãy xem xét không trực tiếp nội tuyến CSS, nhưng thay vì sử dụng một số loại đối tượng/tương tự sẽ tạo ra nội tuyến CSS cho bạn. Bằng cách đó, bạn vẫn có thể giữ CSS trong một tệp riêng biệt và đưa nó vào nội tuyến trên các trang cần nó (hầu hết là không).