2011-01-08 53 views
12

Trong bài đăng này, asynchronous .js file loading syntax, ai đó đã nói, "Nếu thuộc tính async có mặt, thì tập lệnh sẽ được thực thi không đồng bộ, ngay khi có sẵn."javascript không đồng bộ tải/thực hiện

(function() { 
    var d=document, 
    h=d.getElementsByTagName('head')[0], 
    s=d.createElement('script'); 
    s.type='text/javascript'; 
    s.async=true; 
    s.src='/js/myfile.js'; 
    h.appendChild(s); 
}()); /* note ending parenthesis and curly brace */ 

Câu hỏi của tôi là, "tập lệnh sẽ được thực hiện không đồng bộ" nghĩa là gì? Tập lệnh này có được thực hiện trong một luồng khác với các javascripts khác trong trang không? Nếu có, chúng ta có nên lo lắng về vấn đề đồng bộ hóa trong hai chủ đề?

Cảm ơn.

+0

Kịch bản này được thực hiện ngay sau khi nó được phân tách, vì vậy tôi không chắc chắn có bất kỳ sự khác biệt chỉ với việc sử dụng ''

23

Thông thường, khi bạn thêm tập lệnh ngoài vào tài liệu HTML, tập lệnh sẽ cần được tải xuống và thực thi trước khi có thể thực hiện bất kỳ điều gì khác trên trang. Nói cách khác, tập lệnh chặn. Điều này có thể mất rất nhiều thời gian nếu có một số tập lệnh để tải xuống.

Nhưng khi bạn tải tập lệnh không đồng bộ, nó sẽ không chặn. Phần còn lại của trang có thể được tải và các tập lệnh khác có thể được thực hiện trong khi tập lệnh async được tải xuống. Điều này làm cho các trang tải nhanh hơn, nhưng điều này cũng có nghĩa là bạn không thể chắc chắn khi nào tập lệnh async sẽ được thực thi. Vì vậy, bạn không thể chỉ bắt đầu sử dụng các hàm và đối tượng từ tập lệnh async. Bạn phải đợi và kiểm tra tập lệnh async để tải.

Ví dụ:

script1.js

var foo = "bar"; 

script2.js

alert(foo); 

doc1.html

<script type="text/javascript" src="script1.js"></script> 
<script type="text/javascript" src="script2.js"></script> 

Kết quả: "bar"

doc2.html

<script type="text/javascript" src="script1.js" async="true"></script> 
<script type="text/javascript" src="script2.js"></script> 

Kết quả: "bar" hoặc không xác định, tuỳ thuộc vào việc hay không script1.js đã nạp được nêu ra.

Không có chủ đề nào phải lo lắng. Một kịch bản thực hiện sau khi tập lệnh khác, nhưng không bao giờ cả hai cùng một lúc. Nó chỉ là thứ tự thực hiện mà không thể đoán trước được.

+7

Bạn có thể sử dụng từ khóa 'trì hoãn 'thay vì' async' để đảm bảo thứ tự được duy trì miễn là tập lệnh của bạn không sửa đổi DOM – stephenmurdoch

2

Đã tải xuống không đồng bộ, không được thực thi không đồng bộ. Ngoài ra, nó không nhất thiết phải thực hiện khi tải xuống hoàn tất.

+4

Bạn có thể mở rộng thêm từ khóa đó không? Tại sao nó sẽ thực hiện hoặc không thực hiện khi nó kết thúc? Bạn có nghĩa là nó sẽ bị trì hoãn? – jlafay

1
(function(doc, script) { 
    var js, 
     fjs = doc.getElementsByTagName(script)[0], 
     add = function(url, id) { 
      if (doc.getElementById(id)) {return;} 
      js = doc.createElement(script); 
      js.src = url; 
      id && (js.id = id); 
      fjs.parentNode.insertBefore(js, fjs); 
     }; 

    // Google Analytics 
    add(('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js', 'ga'); 
    // Google+ button 
    add('https://apis.google.com/js/plusone.js'); 
    // Facebook SDK 
    add('//connect.facebook.net/en_US/all.js', 'facebook-jssdk'); 
    // Twitter SDK 
    add('//platform.twitter.com/widgets.js', 'twitter-wjs'); 
}(document, 'script')); 

nguồn: https://css-tricks.com/thinking-async/

Các vấn đề liên quan