proto.lib

srcset/sizes: Trình duyệt tự chọn ảnh đúng độ phân giải

srcset và sizes cho phép trình duyệt chọn ứng viên ảnh phù hợp dựa trên độ rộng layout và device pixel ratio trước khi layout hoàn tất, thẻ picture chọn định dạng hiện đại (AVIF/WebP) kèm fallback, còn loading=lazy + decoding=async giữ ảnh ngoài khung nhìn không chặn critical path; CDN sinh và cache từng biến thể ảnh theo yêu cầu.

ApplicationTrung bình2026-08-24
srcset/sizes: Trình duyệt tự chọn ảnh đúng độ phân giải

Tags

#srcset#sizes#picture#responsive-images#lazy-loading#cdn-image-transform

Tài liệu tham khảo

Mở rộng

Animation gốc là một file HTML tự chứa, có thể nhúng lại ở bất kỳ trang nào khác. Mở file gốc

Liên quan

ApplicationCơ bản

IntersectionObserver: tải/mount theo tầm nhìn

IntersectionObserver theo dõi khi phần tử giao với viewport để tải hoặc mount nội dung đúng lúc — rootMargin nạp trước khi tới nơi, threshold chọn tỉ lệ hiện ra để kích hoạt, unobserve sau khi tải xong; dùng cho ảnh, danh sách dài và đo impression thay vì gắn scroll listener tốn hiệu năng.

#intersectionobserver#lazy-loading#viewport#impression-tracking
ApplicationTrung bình

App Shell + Route Code Splitting

Bundle được chia theo route: chỉ shell và route đầu tiên tải ngay, các route khác được split thành chunk riêng và chỉ fetch khi người dùng điều hướng tới (hoặc prefetch khi có ý định), giúp giảm chi phí parse/execute JS lúc tải trang lần đầu.

#code-splitting#bundling#lazy-loading#prefetch
ApplicationTrung bình

Web Locks API: nhiều tab phối hợp không tranh việc

Web Locks API cho phép nhiều tab của cùng một app xin cùng một khoá tên; chỉ một tab giữ được lock chạy việc như sync dữ liệu hay refresh token, các tab khác chờ hoặc bỏ qua tuỳ chế độ, và lock tự động nhả khi tab đóng hay reload — khác cờ localStorage vốn không tự dọn khi tab crash.

#web-locks#navigator-locks#multi-tab#token-refresh