🔴 Phần 5: JavaScript trong Thực tế (Browser & Optimization)

Dưới đây là đáp án chi tiết cho phần 🔴 Phần 5: JavaScript trong Thực tế (Browser & Optimization) – rất phù hợp cho lập trình viên muốn ứng dụng JS hiệu quả trong sản phẩm thực tế:

---

1. LocalStorage, SessionStorage và Cookies khác nhau như thế nào?

Tính năng	LocalStorage	SessionStorage	Cookies
Dung lượng	~5MB	~5MB	~4KB
Thời gian lưu	Vĩnh viễn	Trong session/tab	Có thể đặt thời gian hết hạn
Truy cập từ server	❌ Không	❌ Không	✅ Có (gửi theo HTTP request)
Ứng dụng phổ biến	Lưu user settings	Lưu data tab tạm thời	Lưu token login, tracking

---

2. AJAX là gì? So sánh với Fetch API

• AJAX (Asynchronous JavaScript and XML): kỹ thuật giao tiếp server mà không cần reload trang.

So sánh: XMLHttpRequest vs Fetch API

Tiêu chí	XMLHttpRequest	Fetch API
Cú pháp	Phức tạp, dài dòng	Gọn gàng, dựa trên Promise
Hỗ trợ Promise	❌ Không	✅ Có
Xử lý JSON	Cần parse tay (JSON.parse)	.json() method

📌 Ví dụ với Fetch:

fetch('/api/data')
  .then(res => res.json())
  .then(data => console.log(data))
  .catch(err => console.error(err));

---

3. CORS là gì? Khi nào gặp lỗi CORS?

• CORS (Cross-Origin Resource Sharing): cơ chế bảo mật cho phép/không cho phép truy cập tài nguyên từ domain khác.

📌 Gặp lỗi CORS khi:

• Gửi request từ frontend (origin A) đến backend khác (origin B) mà server B không cho phép A truy cập.

✅ Cách khắc phục:

• Cấu hình header Access-Control-Allow-Origin ở backend.

---

4. Service Worker là gì? Ứng dụng trong PWA?

• Service Worker là một script chạy ở background (không phụ thuộc UI), dùng để:

  • Cache nội dung offline

  • Push Notification

  • Background sync

📱 Ứng dụng trong PWA (Progressive Web App):

• Cho phép ứng dụng web hoạt động offline như app gốc.

• Tăng tốc độ tải nhờ cache thông minh.

---

5. Các kỹ thuật tối ưu hiệu suất JS trên trình duyệt:

• Lazy loading: tải nội dung/ảnh chỉ khi cần (scroll tới).

• Code splitting: chia nhỏ bundle để tải từng phần khi cần (webpack, vite).

• Tree shaking: loại bỏ code không dùng đến.

• Debounce/throttle: giới hạn tần suất gọi hàm.

• Minify JS: dùng terser hoặc build tools để rút gọn mã.

---

6. Làm sao để debug hiệu quả trong JavaScript?

• Console log: console.log(), console.error(), console.table()

• Chrome DevTools:

  • Breakpoint trong tab Sources

  • Tab Network để kiểm tra API

  • Tab Performance để phân tích hiệu năng

• Debugger statement:

function test() {
  debugger; // Tạm dừng khi mở DevTools
}

---

7. Làm sao để bảo vệ mã JavaScript khỏi bị xem source?

• Không thể hoàn toàn bảo vệ vì JS chạy phía client.

✅ Các kỹ thuật làm khó:

• Obfuscation: làm rối mã (javascript-obfuscator, uglifyjs)

• Minification: rút gọn tên biến, xoá khoảng trắng

• Tách logic nhạy cảm sang backend (server-side)

📌 Gợi ý: Không nên đặt business logic, token, key bí mật trong frontend vì người dùng luôn có thể xem source.

---