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

Làm cách nào để tự động đánh số giá trị heading của section hay category bằng CSS?

junior

Trong CSS, làm sao để căn giữa một thẻ div trong một thẻ div khác?

middle

Opacity được quy định như thế nào trong CSS3?

Bình luận

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

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