Trình duyệt hành vi hiển thị khác nhau với vị trí khác nhau của tập lệnh và thẻ liên kết

Question

Tôi đang cố gắng hiểu chính xác khi nào HTML được hiển thị trên màn hình trong trình duyệt.

tôi đọc this S.O. câu trả lời và thử một số trường hợp sử dụng và tôi quan sát thấy một cái gì đó không phù hợp với mô hình chia sẻ trong liên kết,
còn tôi có thể không có vẻ để tìm một tâm-mô hình phù hợp cho việc quan sát.

Trình tự hiển thị trình duyệt phù hợp với các trường hợp được thảo luận là gì?

---

Trường hợp A:ảnh-A

1. Khi HTML parser đạt M1, M1 sẽ được hiển thị.
2. Sau đó trình phân tích cú pháp tiếp cận thẻ tập lệnh, nó chờ tệp js tải xuống và phân tích cú pháp.
3. Sau đó trình phân tích cú pháp đạt M3, M3 được hiển thị.

Trường hợp A khớp với thứ tự được mô tả trên hầu hết các câu trả lời. Huray !!! Tiếp tục nào.

Trường hợp B:Image-B

1. HTML parser đạt M1, M1 không được hiển thị như trong trường hợp một
2. HTML parser đạt liên kết thẻ, nó chờ đợi cho css để tải xuống và phân tích cú pháp.
3. M1 và M2 được hiển thị, do đó, nó chờ biểu định kiểu để tải xuống trước khi hiển thị M1.
4. Sau đó trình phân tích cú pháp tiếp cận thẻ tập lệnh, nó chờ tệp js tải xuống và phân tích cú pháp.
5. Sau đó trình phân tích cú pháp đạt M3, M3 được hiển thị.

Vì vậy Case-B cho thấy rằng nó không hiển thị M1, nó đợi CSS tải xuống trước khi hiển thị. Vì vậy, có thể trình kết xuất cần biết CSS trước khi hiển thị.

Trường hợp: CHình ảnh C

Vì vậy, từ trường hợp B, chúng tôi cho rằng có thể render-er cần biết CSS.
Hãy xem xét trường hợp C:

1. Trình phân tích cú pháp HTML đạt M1, M1 được hiển thị. Nó không nên được hiển thị vì như chúng ta đã thấy trong trường hợp B nó phải đợi cho css tải.
2. Hiện tại, trình phân tích cú pháp đạt đến tập lệnh, nó đợi js tải xuống và phân tích cú pháp.
3. M2, M3 được hiển thị

---

Edit: đề xuất tâm-mô hình này giải thích các hành vi trên .. (nhưng đòi hỏi phải xem xét/tinh)

1. Script không phải là một thẻ chặn trình kết xuất đồ họa
2. link là thẻ chặn trình kết xuất
3. Xem xét rằng trình kết xuất và Trình phân tích cú pháp HTML là hai chuỗi.
4. Trình phân tích cú pháp HTML có thể gửi nội dung tới trình kết xuất để hiển thị.
5. Trình phân tích cú pháp HTML có thể gửi tín hiệu chặn đến trình kết xuất ... để chặn trình kết xuất hiển thị mọi html không được hiển thị ít nhất một lần.
6. Trình phân tích cú pháp HTML có thể gửi tín hiệu bỏ chặn đến trình kết xuất ... để bỏ chặn trình kết xuất khỏi hiển thị bất kỳ html nào chưa được hiển thị một lần.

Với mô hình trên chúng ta có thể giải thích TRƯỜNG HỢP B và CASE C:
TRƯỜNG HỢP B Giải thích:

1. HTML parser đạt M1, M1 là gửi để renderer.
2. Trình phân tích cú pháp HTML tiếp cận thẻ Liên kết, trình phân tích cú pháp gửi tín hiệu chặn đến trình kết xuất đồ họa.
3. Trình kết xuất trước khi nó có thể hiển thị M1, nó có tín hiệu chặn và do đó M1 không hiển thị.
4. Phân tích cú pháp thẻ liên kết hoàn chỉnh của trình phân tích cú pháp HTML (tải xuống) và gửi tín hiệu bỏ chặn tới trình kết xuất, khi nhận được tín hiệu bỏ chặn, nó hiển thị M1.
5. Trình phân tích cú pháp HTML đạt M2, M2 được gửi tới trình kết xuất đồ họa.
6. Trình phân tích cú pháp HTML tiếp cận thẻ Tập lệnh, vì thẻ tập lệnh không phải là thẻ chặn trình kết xuất đồ họa, trình kết xuất đồ họa được tự do hiển thị html.
7. Trình phân tích cú pháp HTML hoàn thành việc phân tích cú pháp thẻ tập lệnh (tải xuống).
8. Trình phân tích cú pháp HTML đạt M3, M3 được gửi tới trình kết xuất đồ họa.

Tương tự, chúng tôi có thể chạy khô CASE C và phù hợp với mô hình trên.

Mô hình của tôi có đúng hay sai?

Answer 1

Bạn gần như đúng. Ngoại trừ việc nó đơn giản hơn - trình kết xuất thụ động và không nhận được "tín hiệu chặn". Nó không hiển thị (cập nhật hiển thị để phản ánh cây dom) cho đến khi ai đó yêu cầu.

1. HTML của bạn không hợp lệ - bạn không được đặt <link rel=...> trong nội dung.(Sống HTML 4.2.4)

2. như bạn hình dung, stylesheet là một nguồn lực render-blocking - nó sẽ ngăn chặn nội dung không bị trả lại, trái ngược với kịch bản mà sẽ tạm dừng và đưa ra nội dung phân tích cú pháp.

Sau đây là cách tôi sẽ giải thích nó:

Trường hợp B: M1 - stylesheet - M2 - script - M3

1. trình duyệt được HTML. M1 vào cây DOM. M1 chưa được hiển thị, trình kết xuất chưa được yêu cầu làm việc.
2. tải biểu định kiểu. (có hiệu lực nó ngăn M1 hiển thị)
3. bản định kiểu được thực hiện. M1 vẫn là không hiển thị. (hai bước nữa)
4. M2 vào cây DOM. M1 và M2 chưa được hiển thị.
5. tập lệnh kích hoạt hiển thị, do đó hiển thị M1 và M2, sau đó tải.
6. hoàn thành tập lệnh. Không có gì thay đổi (như fas như trường hợp này là có liên quan).
7. M3 vào cây DOM, chưa được hiển thị.
8. Tài liệu được thực hiện, trang được hiển thị, do đó M3 bị loại bỏ.

Những hành vi này là cố ý. Ngày xửa ngày xưa, js chậm và kịch bản mất nhiều thời gian để chạy, trong khi bảng định kiểu (và vẫn là) quan trọng để ẩn các phần tử theo mặc định. Thời gian có thể đã thay đổi, nhưng những hành vi này không có khả năng thay đổi.

Trường hợp C: M1 - script - M2 - link - M3

1. trình duyệt được HTML. M1 vào cây DOM. M1 chưa được hiển thị.
2. tập lệnh kích hoạt hiển thị, do đó hiển thị M1 và sau đó tải.
3. hoàn thành tập lệnh. Không có gì thay đổi.
4. M2 vào cây DOM. Nó chưa được hiển thị.
5. tải biểu định kiểu, có hiệu lực chặn M2.
6. biểu định kiểu được thực hiện. M2 vẫn không được hiển thị.
7. M3 vào cây DOM, chưa được hiển thị.
8. Tài liệu được thực hiện, trang được hiển thị, M2 và M3 bị bỏ qua.

Quá trình hiển thị thực tế, trong nhiệm kỳ của chủ đề, là verycomplicated, và trong một số cảm giác rất varies bởi trình duyệt. Ví dụ: DOM là notthreadsafe. Hãy suy nghĩ về điều đó có nghĩa là gì.

Để đơn giản, bạn có thể tưởng tượng quá trình xử lý trình duyệt là dữ liệu và sự kiện diễn ra giữa các mô-đun khác nhau. Dưới đây là một số hệ thống con Firefox render: