Progressive rendering là gì?

{{FormatNumbertoThousand(model.total_like)}} lượt thích
341 lượt xem
Html/CSS senior

Progressive rendering là tên các kỹ thuật được sử dụng để cải thiện hiệu suất của trang web (đặc biệt là cải thiện tốc độ load trang mà người dùng cảm nhận được) để hiển thị nội dung nhanh nhất có thể. Nó từng phổ biến hơn nhiều trước khi có internet băng thông rộng nhưng nó vẫn được sử dụng trong ngày nay khi mobile web ngày càng trở nên phổ biến.

Một số kỹ thuật ví dụ:

  • Lazy loading of images - Hình ảnh trên trang không được tải cùng một lúc. JavaScript sẽ được sử dụng để tải hình ảnh khi người dùng cuộn vào phần của trang hiển thị hình ảnh.
  • Ưu tiên nội dung hiển thị (hoặc hiển thị trong màn hình đầu tiên) - Chỉ bao gồm CSS / html / scripts cần thiết tối thiểu để hiển thị trong trình duyệt của người dùng trước tiên (mục đích là để hiển thị đủ và nhanh nhất có thể), sau đó bạn có thể sử dụng defer scripts hoặc các sự kiện lắng nghe DOMContentLoaded / load để tải các tài nguyên và nội dung khác.
  • Các đoạn HTML không đồng bộ (Async HTML fragments) - Chuyển việc tải các phần HTML chưa cần hiển thị liền lúc ban đầu sang lúc cuối trang.
{{login.error}}