Hướng dẫn javascript load css after page load - javascript tải css sau khi tải trang

1. 02 tháng 9 năm 2015
2. Nhà
3. Mẹo & Thủ thuật
4. Mã
5. SEO

Thời gian tải trang là một trong những điều quan trọng cho khách truy cập của bạn và không kém phần quan trọng đối với các công cụ tìm kiếm. Khi bao gồm nhiều tệp JavaScript và CSS, trình duyệt phải đợi cho đến khi tất cả các tệp đó đã được tải xuống để hiển thị trang.

Tùy thuộc vào tốc độ kết nối, có thể mất vài giây để tải đầy đủ tất cả các tài nguyên và khách truy cập phải ngồi IDLE cho đến thời điểm đó.

Kỹ thuật chúng tôi đang thảo luận ở đây sẽ cho phép trình duyệt hiển thị trang HTML ban đầu mà không có bất kỳ phong cách nào, vì vậy khách truy cập ít nhất có thể bắt đầu đọc nội dung. Ngay khi trang được tải, Kiểu sẽ được tải và áp dụng mà không chặn luồng chính. Nó tương tự như các nút truyền thông xã hội tải trì hoãn.

Bạn có thể nghĩ tại sao người ta nên phơi bày giao diện xấu xí của trang mà không cần tải kiểu! Điều đó đúng, thậm chí điều đó sẽ tạo ấn tượng xấu. Vì vậy, cách tiếp cận tốt nhất có thể là bao gồm mã CSS quan trọng cần thiết để tạo kiểu cho nội dung đã gấp trong chính trang HTML (trong phần đầu của trang web) và tải các tệp không quan trọng hoặc lớn bằng cách sử dụng phương thức dưới đây.

Tải CSS ASYNC

Chúng ta có thể sử dụng chức năng JavaScript đơn giản để giải quyết mục đích của chúng ta. Dưới đây là một ví dụ để tải bảng kiểu đơn sau khi trang được tải.

Tải nhiều bảng kiểu

Để làm cho nó dễ dàng, chúng tôi sẽ tham số hóa chức năng LoadCSS để chấp nhận đường dẫn tệp. Và sau đó, chúng tôi sẽ xác định chức năng chính của chúng tôi sẽ gọi hàm trên lặp đi lặp lại cho mỗi tệp.loadCss function to accept file path. And then, we will define our master function that will call above function repetitively for every single file.

Trước và sau khi áp dụng tinh chỉnh này, so sánh điểm tốc độ trang của bạn. Có những dịch vụ tự động chăm sóc các tối ưu hóa này để tăng điểm trang của bạn lên tới 100 và giảm thời gian tải xuống chỉ vài mili giây bằng cách tối ưu hóa CSS, JS, hình ảnh, phông chữ, v.v.

Nếu bạn phải đối mặt với bất kỳ vấn đề nào trong việc thực hiện điều này, hãy đăng bài bình luận. Tôi sẽ cố gắng trả lời.