Các tệp JavaScript được tải và thực thi như thế nào?

Question

Tôi không thường xuyên nói chuyện hoặc nghiên cứu về thứ tự tải/thực thi tệp JavaScript. Tôi quan tâm đến các trang web giải thích cách JavaScript đang được xử lý. Cụ thể, nếu tôi có

<script src="a.js"></script> 
<script src="b.js"></script> 
<script src="c.js"></script> 

Tôi giả định a.js được tải xuống trước, sau đó b.js và cuối cùng là c.js hoặc chúng được tải xuống đồng thời không? Điều gì về thực hiện? Các tập lệnh trong tiêu đề có được ưu tiên hơn các tập lệnh trong phần thân không?

Lý do chính khiến tôi quan tâm đến chủ đề này là vì tôi đang viết một phần mềm JavaScript sử dụng tải động các tập lệnh này và đôi khi tôi gặp lỗi như x chưa được xác định (nó chưa được tải trước khi khác script), nhưng thường những lỗi đó sẽ không xảy ra. Tôi không hiểu tại sao.

Answer 1

Các tập lệnh được tải xuống song song, nhưng được phân tích cú pháp và thực thi theo thứ tự chúng xuất hiện trong HTML, chặn các hành động khác trên trang (bao gồm cả hiển thị) cho đến khi chúng được thực thi. Có thể cho các tập lệnh không bị chặn, nếu chúng được thêm bởi mã JavaScript qua DOM chẳng hạn, hoặc nếu async attribute có trong các phiên bản mới nhất của Firefox.

Answer 2

Điều gì kiểm soát tải xuống JavaScript chủ yếu là trình duyệt của bạn. Nếu bạn tải tất cả chúng từ cùng một tên miền, giống như bạn đang làm ở trên, chúng sẽ được tải một cái khác, do đó được tải theo thứ tự bạn chỉ định.

Là một thử nghiệm đơn giản, bạn có thể chỉ cần thử chỉ định các hàm trên từng tệp và cố gọi chúng từ tệp tiếp theo trong danh sách, để bạn có thể xem thứ tự chúng tải.

Liên quan đến ưu tiên tải, hầu hết các sách tối ưu hóa trang web sẽ cho bạn tải tệp js của bạn ở dưới cùng, vì điều này sẽ làm cho trang của bạn tải nhanh hơn và js fIle sẽ được tải làm tài nguyên cuối cùng cần thiết . Điều này cần được thực hiện cẩn thận, nếu các trang của bạn dựa vào JavaScript trực tiếp khi tải, bạn có thể kết thúc với các lỗi js vô tận.

Các thư viện như jquery sẽ giúp ích rất nhiều, vì chúng sẽ chỉ cho phép hành động js xảy ra, khi DOM có sẵn, do đó không có lỗi js khi js được tải ở dưới cùng của HTML.

Một điều thú vị khác là đảm bảo bạn giữ các tệp js của mình được thu nhỏ một cách chính xác và gắn vào tối thiểu các tệp, khi làm như vậy, bạn chỉ thực hiện một vài yêu cầu máy chủ và tôi sẽ có JavaScript của bạn có sẵn trong thời gian ít hơn.

Hy vọng điều này sẽ giúp bạn.