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

senior

Làm sao để biết trình duyệt có hỗ trợ một thuộc tính CSS hay không?

middle

* { box-sizing: border-box } trong CSS để làm gì?

entry

CSS là gì?

Bình luận

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

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