Cùng tìm hiểu javascript - quá trình load page

[tan.nguyen]

TL;DR: Giống Life cycle (vòng đời) của một người - Sinh Lão Bệnh Tử.

---

MỤC LỤC

1. Quá trình load page.
2. Vậy làm gì nữa?
3. Túm cái váy lại.

1. QUÁ TRÌNH LOAD PAGE

Khi bạn load trang web, những gì diễn ra sau hậu trường gồm:

1. Sinh - DOMContentLoaded:
   • JS load xong file HTML và dựng xong DOM.
   • Chưa load xong external resources (style framework - Bootstrap, API…)
2. Lão - load: Giờ mới load xong hết

Khi bạn close trang web, tương tự:

3. Bệnh - beforeunload:
   • Giống tên gọi, chưa unload gì cả.
   • VD trong điền form: Alert “Bạn có chắc chắn rời trang? Thông tin sẽ bị mật”.
4. Tử - unload: unload hoàn toàn, có thể dùng để xử lý, gửi data.

2. VẬY LÀM GÌ NỮA?

Xài thôi… Xài cái nào thì viết y chang code như dưới nhé!

document.addEventListener('DOMContentLoaded',() => {
    // quậy phá tại đây
});

document.addEventListener('load',() => {
    // quậy phá tại đây
});

document.addEventListener('beforeunload',() => {
    // quậy phá tại đây
});

document.addEventListener('unload',() => {
    // quậy phá tại đây
});

3. DÒ BÀI CUỐI GIỜ!

1. Quá trình load page diễn ra như thế nào?

Nếu bạn thấy bài viết này bổ ích thì hãy tương tác để mình có thêm động lực viết tiếp nhé ^^.

Đọc thêm những bài viết khác tại: https://tannguyencse.wordpress.com/

[utherpally]

JS load xong file HTML và dựng xong DOM. Browser làm chứ nhỉ? Js vẫn là externail resources thôi.

Update: Và link (css) nó load cùng lượt với DOM luôn (CSSDOM) nên câu chưa load xong external resources nó chung chung quá.

[superthin (Vô Thin)]

@utherpally

Update: Và link (css) nó load cùng lượt với DOM luôn (CSSDOM) nên câu chưa load xong external resources nó chung chung quá.

Mình đoán là có 2 tình huống xảy ra trong thực tế:

1. JavaScript và/ hoặc CSS được nhúng inline trong file HTML, cái này ngày nay hiếm nhưng vẫn tồn tại với những trang web nhỏ hoặc áp dụng kỹ thuật tối ưu này nọ;
2. JavaScript và/ hoặc CSS được đặt ở các file .js, .css <= xem như external resource. Trường hợp này có lẽ là bạn chủ topic đề cập, load chưa xong là bình thường. Lâu lâu có vài người nghịch ngợm kiểu A gọi B, B gọi C, C lại gọi A => vòng lặp tròn dẫn đến trình duyệt load mãi

Hiện nay nếu server thiết lập giao thức http2 và hoặc đang thử nghiệm http3 thì cho phép trình duyệt được tải song song số lượng kha khá các file external resource dẫn đến việc load dường như nhanh hơn, bớt nghẽn cổ chai như http truyền thống.