Điều gì xảy ra khi trình duyệt không thể tải javascript?

Mặc dù mã này có vẻ vô thưởng vô phạt, nhưng nó thực sự có một vấn đề nghiêm trọng về hiệu năng. có ba tệp JavaScript đang được tải trong. Vì mỗi

Mã này đại diện cho vị trí được đề xuất cho

Mã này có một

Một

Khái niệm về một lượng nhỏ mã ban đầu trên trang, sau đó tải xuống chức năng bổ sung là cốt lõi của thiết kế YUI 3. Để sử dụng YUI 3 trên trang của bạn, hãy bắt đầu bằng cách bao gồm tệp hạt giống YUI

Tệp gốc có dung lượng khoảng 10 KB [6 KB được nén] và bao gồm đủ chức năng để tải xuống bất kỳ thành phần YUI nào khác từ Yahoo. CDN. Ví dụ: nếu bạn muốn sử dụng tiện ích DOM, bạn chỉ định tên của tiện ích đó [

YUI[].use["dom", function[Y]{
    Y.DOM.addClass[docment.body, "loaded"];
}];

YUI[].use["dom", function[Y]{
    Y.DOM.addClass[docment.body, "loaded"];
}];

Ví dụ này tạo một thể hiện mới của đối tượng

YUI[].use["dom", function[Y]{
    Y.DOM.addClass[docment.body, "loaded"];
}];

YUI[].use["dom", function[Y]{
    Y.DOM.addClass[docment.body, "loaded"];
}];

YUI[].use["dom", function[Y]{
    Y.DOM.addClass[docment.body, "loaded"];
}];

Đối với một công cụ có mục đích chung hơn, Ryan Grove của Yahoo. Tìm kiếm đã tạo thư viện LazyLoad [có tại http. //github. com/rgrove/lazyload/]. LazyLoad là phiên bản mạnh mẽ hơn của hàm

YUI[].use["dom", function[Y]{
    Y.DOM.addClass[docment.body, "loaded"];
}];

LazyLoad cũng có khả năng tải xuống nhiều tệp JavaScript và đảm bảo rằng chúng được thực thi theo đúng thứ tự trong tất cả các trình duyệt. Để tải nhiều tệp JavaScript, chỉ cần chuyển một mảng URL tới phương thức

YUI[].use["dom", function[Y]{
    Y.DOM.addClass[docment.body, "loaded"];
}];

Mặc dù các tệp được tải xuống theo kiểu không chặn bằng cách sử dụng tính năng tải tập lệnh động, bạn nên có càng ít tệp càng tốt. Mỗi lần tải xuống vẫn là một yêu cầu HTTP riêng biệt và chức năng gọi lại sẽ không thực thi cho đến khi tất cả các tệp đã được tải xuống và thực thi

Ghi chú

LazyLoad cũng có khả năng tải các tệp CSS động. Điều này thường ít xảy ra sự cố hơn vì quá trình tải xuống tệp CSS luôn được thực hiện song song và không chặn các hoạt động khác của trang

Một cách khác để tải JavaScript không chặn là LABjs [http. // phòng thí nghiệm. com/], một thư viện mã nguồn mở do Kyle Simpson viết với đầu vào từ Steve Souders. Thư viện này cung cấp khả năng kiểm soát chi tiết hơn đối với quá trình tải và cố tải xuống song song càng nhiều mã càng tốt. LABjs cũng khá nhỏ, 4. 5 KB [được rút gọn, không được nén] và do đó có dung lượng trang tối thiểu. Ví dụ sử dụng

Phương thức

YUI[].use["dom", function[Y]{
    Y.DOM.addClass[docment.body, "loaded"];
}];

YUI[].use["dom", function[Y]{
    Y.DOM.addClass[docment.body, "loaded"];
}];

YUI[].use["dom", function[Y]{
    Y.DOM.addClass[docment.body, "loaded"];
}];

YUI[].use["dom", function[Y]{
    Y.DOM.addClass[docment.body, "loaded"];
}];

Tại sao JavaScript không hoạt động trên trình duyệt của tôi?

Tại sao JavaScript không tải trong Chrome?

Làm cách nào để giải quyết các vấn đề về khả năng tương thích của trình duyệt trong JavaScript?

Vấn đề với JavaScript là gì?