Câu hỏi phỏng vấn CSS
Câu hỏi

`Progressive re...

Câu trả lời

Progressive rendering là một kỹ thuật sử dụng để cải thiện hiệu suất trang web (cụ thể là cải thiện thời gian tải web) để render nội dung cho hiển thị nhanh nhất có thể.

Ta có thể triển khai progressive rendering bằng cách lazy loading với hình ảnh. Ta sử dụng Intersection Observer API cho lazy load ảnh. API giúp đơn giản hoá việc phát hiện một phần tử đi vào viewport và thực hiện hành động khi phần tử đó thực hiện hành động. Khi image vào viewport, ta mới bắt đầu tải ảnh.

Ví dụ:

html Copy
<img class="lazy"
src="placeholder-image.jpg"
data-src="image-to-lazy-load-1x.jpg"
data-srcset="image-to-lazy-load-2x.jpg 2x, image-to-lazy-load-1x.jpg 1x"
alt="I'm an image!">
js Copy
document.add...
expert

expert

Gợi ý câu hỏi phỏng vấn

middle

Sự khác biệt giữa nth-child()nth-of-type() trong CSS là gì?

middle

:root pseudo-class trong CSS để làm gì?

junior

Có những các nào thêm CSS vào trang web?

Bình luận

Chưa có bình luận nào

Chưa có bình luận nào