Thời gian tải trang (page load time) bị ảnh hưởng bởi file và code JavaScript. Nếu không tối ưu JS, load time sẽ tăng - điều không mong muốn.
Giải pháp tối ưu
- Minify JavaScript: Loại bỏ whitespace, comment, rút gọn tên biến → giảm kích thước file.
- Cache JavaScript file: Cấu hình HTTP caching headers (Cache-Control, ETag) để browser cache file tĩnh.
- Sử dụng đúng Inline vs External JS: External cho code dùng chung nhiều trang, Inline cho critical rendering path nhỏ.
External Scripts (File JS ngoài)
- Browser tải file JS external lần đầu → lưu vào cache.
- Lần truy cập sau, nếu cache valid → không tải lại, giảm download time và bandwidth.
- Khuyến khích cho code dùng lại (shared libraries, components).
Inline Scripts (JS nhúng trong HTML)
- Thực thi ngay lập tức (không chờ download file riêng).
- Không tạo thêm HTTP request.
- Hữu ích cho: server-side rendering (SSR), critical inline CSS/JS (above-the-fold), config data nhỏ (JSON injected).
- Nhược điểm: Không cache được riêng biệt, tăng kích thước HTML, khó maintain.
Best Practices hiện đại
<script src="..." defer>: Tải song song, thực thi sau HTML parsed (giữ thứ tự).<script src="..." async>: Tải song song, thực thi ngay khi xong (thứ tự không đảm bảo).<script type="module">: ES Modules, defer mặc định.- Code splitting, lazy load (dynamic import) cho bundle lớn.
- Tree shaking loại bỏ dead code.
- Service Worker cache cho offline/performance.