Tôi đang thêm một số thẻ <script> động vào phần tử đầu sau khi tải trang. Tôi hiểu rằng các tập lệnh được tải không đồng bộ, nhưng tôi có thể mong đợi chúng được phân tích cú pháp theo thứ tự chúng được thêm vào không?Việc thêm tập lệnh động nên được đặt hàng?
Tôi thấy hoạt động dự kiến trong Firefox, nhưng không phải trong Safari hoặc Chrome. Nhìn vào các tài liệu trong các công cụ nhà phát triển Chrome và Firebug, cả hai hiển thị như sau -
<html>
<head>
...
<script type="text/javascript" src="A.js"></script>
<script type="text/javascript" src="B.js"></script>
</head>
...
</html>
Tuy nhiên nhìn vào xem tải tài nguyên, chrome dường như để phân tích nào được trả về đầu tiên từ máy chủ, trong khi con đom đóm luôn tải chúng trong thứ tự các thẻ script đã được thêm vào, ngay cả khi B được trả về đầu tiên từ máy chủ.
Tôi có nên mong Chrome/Safari phân tích cú pháp các tệp theo thứ tự được chỉ định không? Sử dụng Chrome 5.0.375.29 beta trên OS X 10.6.3
EDIT (10/5/10): Khi tôi nói phân tích cú pháp, ý tôi là thực hiện - có thể thấy nhiều lợi ích của việc phân tích cú pháp tích cực - thx rikh
EDIT (11/5/10): Ok vì vậy tôi đã cùng nhau thử nghiệm các dòng đó bằng juandopazo bên dưới. Tuy nhiên tôi đã thêm một sự kết hợp của mọi thứ, bao gồm
- Thêm phần tử tập lệnh vào phần đầu trực tiếp bằng javascript. (Kiểm tra A -> D)
- Thêm phần tử tập lệnh vào đầu bằng cách sử dụng phương thức append() của jquery. (Kiểm tra E -> H)
- 'Tải' tập lệnh bằng phương thức getScript() của jquery. (Bài kiểm tra I -> L)
Tôi cũng đã thử tất cả kết hợp thuộc tính 'async' và 'trì hoãn' trên thẻ tập lệnh.
Bạn có thể truy cập vào thử nghiệm tại đây - http://dyn-script-load.appspot.com/ và xem nguồn để xem cách hoạt động. Các kịch bản được nạp đơn giản gọi hàm update(). Điều đầu tiên cần lưu ý, đó là chỉ có các phương pháp thứ nhất và thứ 3 ở trên hoạt động song song - lần thứ hai thực hiện các yêu cầu tuần tự. Bạn có thể thấy một đồ thị này ở đây -
Hình 1 - Biểu đồ Yêu cầu Vòng đời
Request lifecycle Graph http://dyn-script-load.appspot.com/images/dynScriptGraph.png
Nó cũng thú vị mà các append jquery() Phương pháp này cũng khối getScript() gọi - bạn có thể thấy rằng không ai trong số chúng thực hiện cho đến khi tất cả các cuộc gọi append() hoàn tất, và sau đó tất cả chúng chạy song song. Lưu ý cuối cùng về điều này là phương thức append() của jQuery dường như loại bỏ các thẻ script khỏi đầu tài liệu khi chúng đã thực thi. Chỉ có phương pháp đầu tiên để lại các thẻ script trong tài liệu.
Chrome Kết quả
Kết quả là rằng Chrome luôn thực thi kịch bản đầu tiên để trở về, không phụ thuộc vào kiểm tra. Điều này có nghĩa là tất cả các thử nghiệm 'thất bại', ngoại trừ phương thức append jQuery().
Hình ảnh 2 - Chrome 5.0.375.29 beta kết quả
Chrome Results http://dyn-script-load.appspot.com/images/chromeDynScript.png
Firefox Kết quả
Mở firefox, tuy nhiên, có vẻ như nếu phương pháp đầu tiên được sử dụng, và async là sai (tức là không xác định), sau đó kịch bản sẽ đáng tin cậy thực hiện trong gọi món.
Hình 3 - FF 3.6.3 Kết quả
FF Results http://dyn-script-load.appspot.com/images/ffDynScript.png
Lưu ý rằng Safari dường như để cho kết quả khác nhau theo cách tương tự như Chrome, có ý nghĩa.
Ngoài ra, tôi chỉ có độ trễ 500ms đối với tập lệnh chậm, chỉ để giữ cho thời gian bắt đầu- kết thúc giảm. Bạn có thể phải làm mới một vài lần để xem Chrome và Safari thất bại trên mọi thứ. Có vẻ như với tôi rằng không có một phương pháp để làm điều này, chúng tôi không tận dụng khả năng truy xuất dữ liệu song song, và không có lý do tại sao chúng ta không nên (như firefox cho thấy).
Tôi đã nêu lỗi này như một lỗi trong đăng ký vấn đề về chrome - http://code.google.com/p/chromium/issues/detail? id = 46109 – hawkett