Tổng hợp 34 câu hỏi phỏng vấn Performance kèm đáp án chi tiết, song ngữ Việt–Anh — sắp xếp từ cơ bản đến nâng cao. Ôn luyện miễn phí, tự động lưu tiến độ.
Core Web Vitals là bộ ba chỉ số của Google đo trải nghiệm người dùng thực, là yếu tố SEO ranking từ 2021. - LCP (Largest Contentful Paint) — tốc độ loading: thời điểm render phần tử lớn nhất trong viewport. Good <2.5s, poor 4s.…
LCP đo thời điểm render phần tử lớn nhất trong viewport — thường là hero image, block text lớn hoặc video poster. Good <2.5s, poor 4s. Cách cải thiện: - Cải thiện TTFB trước — server response time, CDN, edge caching; TTFB là phần nền…
CLS đo mức layout shift ngoài ý muốn trong suốt vòng đời trang (không chỉ lúc loading). Good <0.1, poor 0.25. Cách tính (định nghĩa hiện tại, từ 6/2021): - Mỗi shift có điểm = impact fraction × distance fraction. - Các shift được gom…
Lazy loading trì hoãn tải resource đến khi thực sự cần — giảm initial load time và Time to Interactive. - Ảnh — <img loading='lazy' native: browser tự tải khi scroll gần đến; không dùng cho LCP image. - Component React — const HeavyChart =…
Code splitting chia bundle thành nhiều chunk nhỏ — initial load nhẹ hơn, phần còn lại tải on demand. Nền tảng là dynamic import(): trả về Promise, bundler tự tách chunk riêng. Các chiến lược: - Route-based — mỗi route một chunk (React Router +…
HTTP caching giảm bandwidth và latency bằng cách lưu response tại browser hoặc CDN, điều khiển qua header Cache-Control. Directives chính: - max-age=3600 — cache 1 giờ trước khi stale; no-cache — phải revalidate với server trước khi dùng (không phải 'không cache'); no-store —…
Tối ưu ảnh là một trong những cách hiệu quả nhất để giảm page weight và cải thiện LCP. - Format hiện đại — WebP nhỏ hơn JPEG 25–34%, AVIF ~50% (encode chậm hơn); dùng <picture với fallback cho browser chưa support. - Responsive images…
Lighthouse là công cụ của Google đánh giá website theo 4 tiêu chí: - Performance: lazy load images (loading='lazy'), code splitting với React.lazy, compress assets (gzip/brotli), preload fonts quan trọng. - Accessibility: mọi image có alt text, color contrast đủ ratio, dùng ARIA cho interactive…
LCP (Largest Contentful Paint) đo thời gian phần tử lớn nhất hiển thị trên màn hình, phản ánh tốc độ tải mà người dùng cảm nhận. INP (Interaction to Next Paint) đo thời gian phản hồi của tất cả tương tác trong suốt vòng đời…
Browser rendering pipeline gồm các bước: (1) parse HTML thành DOM tree, (2) parse CSS thành CSSOM tree, (3) kết hợp DOM và CSSOM thành render tree, (4) tính toán layout (vị trí, kích thước), (5) paint (vẽ pixel), (6) composite (ghép các layer). Critical…
Nguyên tắc: đo trước khi sửa — xác định chậm ở khâu nào (server, network hay render) rồi mới optimize. - Chạy Lighthouse / PageSpeed Insights — lấy tổng quan LCP/INP/CLS và danh sách opportunities; PageSpeed có cả field data từ user thật (CrUX). -…
Reflow (layout) là browser tính lại vị trí và kích thước phần tử — tốn kém; repaint chỉ vẽ lại pixel — rẻ hơn; layout thrashing là ép reflow đồng bộ lặp lại do xen kẽ đọc–ghi style. - Reflow trigger — thay đổi ảnh…
Có. Cả hai đều không miễn phí: mỗi hook thêm một entry vào bộ nhớ của component, thêm mảng dependency phải tạo và so sánh mỗi lần render, và giữ giá trị cũ trong bộ nhớ lâu hơn cần thiết. Ba kiểu dùng sai hay…
Nguyên nhân điển hình: state đặt quá cao. Ô input controlled giữ state ở component cha (hoặc ở App), nên mỗi ký tự gõ vào làm render lại toàn bộ cây con — kể cả bảng, biểu đồ, danh sách không liên quan. Hướng sửa…
Ảnh thường chiếm phần lớn dung lượng trang, và xử lý sai còn gây layout shift. Việc cần làm: - Lazy load ảnh dưới màn hình đầu: loading="lazy". Ảnh trong viewport đầu tiên (LCP) phải để loading="eager" kèm fetchpriority="high" — lazy load ảnh hero làm…
lazy biến một import tĩnh thành import() động, tạo chunk riêng chỉ tải khi component được render lần đầu. Ranh giới nên chọn: - Theo route — mặc định hợp lý nhất, người dùng chỉ tải code trang đang xem. - Component nặng, ít dùng…
Quy trình thực tế: 1. Bật "Highlight updates when components render" trong tab Components. Thao tác thử vài lần — viền nhấp nháy chỉ ngay những vùng render lại ngoài mong đợi (gõ một ký tự mà cả sidebar nháy là dấu hiệu rõ). 2.…
next/image là một <img được bọc thêm bốn thứ mà tự làm tay rất tốn công: - Chuyển định dạng và resize theo yêu cầu: server sinh ra bản WebP/AVIF đúng kích thước màn hình đang xem, thay vì bắt điện thoại tải ảnh 3000px.…
next/font xử lý ba vấn đề của web font: 1. Self-host tự động. File font Google được tải về lúc build và phục vụ từ chính domain của bạn. Không còn request sang fonts.googleapis.com → bớt một vòng DNS + TLS tới host lạ, và…
Đo trước, sửa sau. Bật bundle analyzer để biết chunk nào nặng: Bản đồ treemap cho thấy ngay thư viện nào chiếm chỗ. Bảng tổng kết của next build cũng liệt kê First Load JS từng route. Các cách cắt giảm, theo thứ tự hiệu…
Vì Lighthouse là lab data: một lần chạy, một thiết bị mô phỏng, mạng mô phỏng, không cache, không extension. Người dùng thật thì đủ loại máy, mạng 3G, tab chạy nền. Cái quyết định xếp hạng là field data — số liệu thu từ…
Reflow (layout) là khi trình duyệt phải tính lại hình học — vị trí, kích thước của box. Repaint chỉ vẽ lại pixel mà hình học không đổi. Reflow luôn kéo theo repaint; repaint thì không kéo theo reflow. Gây reflow: đổi width, height, padding,…
Cả bốn đều là resource hint, khác nhau ở thời điểm và mức độ công việc trình duyệt làm trước. - preload — tải ngay, ưu tiên cao một tài nguyên trang hiện tại chắc chắn cần nhưng trình duyệt phát hiện muộn (font trong…
Ba chỉ số Core Web Vitals đo ba trải nghiệm khác nhau: - LCP (Largest Contentful Paint) — thời điểm phần tử nội dung lớn nhất trong viewport hiển thị. Tốt: ≤ 2.5s. Thường là ảnh banner hoặc khối heading. Cải thiện: giảm TTFB, preload…
loading="lazy" bảo trình duyệt hoãn tải ảnh cho tới khi sắp lọt viewport, làm nhẹ đợt tải đầu. fetchpriority thì không đổi thứ tự phát hiện, chỉ chỉnh mức ưu tiên khi trình duyệt xếp hàng tải. Cách dùng đúng theo vị trí: Vì sao…
Với touchstart, touchmove, wheel, trình duyệt không biết trước handler có gọi preventDefault() để chặn cuộn hay không. Nếu listener không khai gì, trình duyệt phải chờ handler chạy xong rồi mới quyết định cuộn — mỗi lần chạm là một lần trễ, cuộn thấy…
Đo trước, cắt sau. Mở bundle analyzer để biết dung lượng đến từ đâu; thường 2–3 thư viện nặng chiếm phần lớn (thư viện biểu đồ, trình soạn thảo rich text, thư viện xử lý ngày tháng, bản đồ). Thứ tự xử lý theo mức…
Histogram không lưu từng giá trị mà đếm số quan sát rơi vào các bucket cộng dồn: le=0.1, le=0.5, le=1, le=+Inf. Mỗi bucket là một counter, cộng được giữa các instance. p99 được nội suy từ các bucket này (histogramquantile(0.99, ...) trong PromQL), nên độ…
