Tại sao các tập lệnh nội tuyến chặn hiển thị khi đặt ở cuối trang?

Question

Tôi đọc High Performance Web Sites: Essential Knowledge for Front-End Engineers và trong đó tác giả đề nghị rằng tất cả mã JavaScript phải được đặt ở bên ngoài và đặt ở cuối trang thay vì đặt nó vào đầu.

Điều này được minh họa trong this example. Các mã bên ngoài chặn tập lệnh cả hai tải xuống và hiển thị tiến trình của một trang, do đó, giải pháp là đặt nó ở cuối trang.

Tuy nhiên, trong cuốn sách thứ hai của mình Even Faster Web Sites: Performance Best Practices for Web Developers anh ấy nói về Inline Thẻ JavaScript.

Tập lệnh nội tuyến cũng chặn tải xuống và hiển thị trang, do đó, anh đề xuất chuyển chúng cũng xuống cuối trang. Tuy nhiên, các hành vi này vẫn chặn hoàn toàn việc hiển thị trang như minh họa trong this example

Tại sao các tập lệnh bên ngoài di chuyển xuống cuối trang cho phép trang hiển thị hoàn toàn cho đến khi tập lệnh được thực thi?

---

PS:

Câu hỏi đặt ra không phải là về việc tại sao thêm hoạt Javascript để dưới cùng của trang thay vì đặt chúng trong đầu. Đó là lý do tại sao các tập lệnh nội tuyến phía dưới chặn hiển thị trong khi các tập lệnh bên ngoài phía dưới thì không.

Answer 1

Trong tập lệnh nội tuyến, thời gian được thực hiện khi chạy tập lệnh, điều này có thể thay đổi DOM. Cố gắng làm cho DOM trong khi nó đang biến đổi là một công thức cho một mớ hỗn độn. Vì vậy, việc hiển thị chỉ xảy ra tại các điểm khi JS bị ngừng hoạt động và do đó DOM ổn định.

Trong khi chờ đợi tập lệnh bên ngoài tải xuống, việc chạy tập lệnh bị ngừng hoạt động, vì vậy DOM có thể được hiển thị an toàn. JS đã tải xuống sẽ không chạy cho đến khi quá trình kết xuất hoàn tất.