Chủ đề
- #Tải tài nguyên
- #Tối ưu hóa trình duyệt
- #Tải trang
Trình duyệt thường thực hiện quá trình rendering theo thứ tự sau.
- Phân tích cú pháp HTML (từ trên xuống dưới, head -> body):
1. Phân tích cú pháp HTML và tạo DOM
2. Tải và áp dụng file CSS (chặn rendering)
3. Tải và thực thi script (chặn rendering)
4. Rendering nội dung của phần <body> (ảnh, văn bản, v.v.)
Điều khiển thứ tự ưu tiên tài nguyên của trình duyệt giúp tối ưu hóa tốc độ tải trang.
Tôi muốn ghi lại các thuộc tính chính dưới đây có thể cải thiện thứ tự rendering như bên dưới.
- JavaScript: async, defer, module
- CSS: preload, media
- Hình ảnh: loading="lazy", srcset, sizes
- Khác: prefetch, preconnect, dns-prefetch
JavaScript
async : Được tải xuống song song với việc phân tích cú pháp HTML và được thực thi ngay sau khi tải xuống. Nếu bất kỳ tài nguyên nào trên trang liên quan đến js này, tốt hơn hết là nên bỏ thuộc tính async.
defer : Được tải xuống song song với việc phân tích cú pháp HTML và được thực thi sau khi quá trình phân tích cú pháp HTML hoàn tất. = Thứ tự được đảm bảo. Nếu cần thực thi sau khi tất cả HTML được rendering, tốt hơn hết là nên thêm thuộc tính defer.
Theo mặc định, trình duyệt tải HTML trước, nhưng nếu có nguồn script trong thẻ head, quá trình rendering sẽ bị chặn. Thêm hai thuộc tính trên giúp ngăn chặn việc chặn rendering HTML.
CSS
styleshee : Là giá trị mặc định. Đây là yếu tố chặn rendering, được sử dụng khi bắt buộc phải tải CSS.
preload : Tải xuống trước mà không chặn rendering. Được thay đổi thành stylesheet khi sự kiện onload xảy ra và kiểu dáng được áp dụng.
media: Rendering khi đáp ứng điều kiện kích thước màn hình.
Hình ảnh
loading="lazy" : Tải hình ảnh khi hình ảnh xuất hiện trên màn hình. (Khi vị trí cuộn ở gần phần tử chứa hình ảnh)
srcset : Chọn hình ảnh tối ưu nhất phù hợp với kích thước màn hình. (Tối ưu hóa dung lượng hình ảnh)
sizes : Cung cấp gợi ý cho trình duyệt để chọn hình ảnh phù hợp dựa trên kích thước viewport.
Đối với thẻ img cuối cùng, nếu có hình ảnh rộng 480px và 1024px, thuộc tính size sẽ hiển thị hình ảnh 480px nếu max-width là 600px, nếu không thì sẽ hiển thị hình ảnh 1024px.
* Trong thương mại điện tử, một trang có thể chứa hàng chục hình ảnh, vì vậy việc giảm dung lượng hình ảnh sẽ rất hiệu quả.
Ví dụ: màn hình kết quả tìm kiếm có ít nhất 20 hình ảnh trở lên và tìm kiếm được thực hiện 100.000 lần mỗi ngày...
Khác
rel="prefetch": Tải xuống tài nguyên trước khi chuyển trang để cải thiện tốc độ tải trên trang tiếp theo.
rel="preconnect": Thiết lập kết nối mạng trước cho một liên kết cụ thể. (Video, phông chữ lớn, v.v.)
rel="dns-prefetch": Tra cứu DNS của tài nguyên bên ngoài để tải tài nguyên nhanh hơn. (Chủ yếu là CDN bên ngoài)
* preconnect so với dns-prefetch
preconnect là kết nối TCP (DNS - bắt tay TCP - bắt tay TLS), vì vậy đây là một hoạt động nặng chiếm tài nguyên trình duyệt. Được sử dụng khi cần tải tài nguyên bên ngoài nhanh chóng. (Tài nguyên rất quan trọng và việc rendering nhanh tài nguyên này là quan trọng)
dns-prefetch chỉ tra cứu DNS, vì vậy đây là một hoạt động nhẹ hơn. Phù hợp với các tài nguyên không quan trọng và được gọi sau này.
Bình luận0