Sự khác biệt nào khi sử dụng một số khối tập lệnh trên trang web?

Question

Chỉnh sửa: Như Andrew Moore chỉ ra câu hỏi này là một bản sao của Two separate script tags for Google Analytics? Vì vậy, câu hỏi này nên được xóa để tránh lộn xộn Stack Overflow, trừ khi có một điểm trong việc giữ này, vì nó có thể sẽ hiển thị trong tìm kiếm hơi khác nhau.

Điều gì tạo nên sự khác biệt khi sử dụng nhiều khối tập lệnh trên một trang web? Tôi đã dán mã tiêu chuẩn để bao gồm Google Analytics làm ví dụ và tôi đã thấy cùng một mẫu được sử dụng ở những nơi khác. Tại sao mã này được tách thành hai khối tập lệnh riêng biệt thay vì chỉ sử dụng một khối duy nhất?

<script type="text/javascript"> 
    var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); 
    document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E")); 
</script> 
<script type="text/javascript"> 
    try{ 
     var pageTracker = _gat._getTracker("UA-xxxxxx-x"); 
     pageTracker._trackPageview(); 
    } catch(err) {} 
</script> 

Answer 1

Thứ hai <script> chứa mã phụ thuộc vào google-analytics.com/ga.js tải.

Tập lệnh không được hoãn lại được thực hiện theo thứ tự chúng tồn tại trong DOM.

Các <script> đầu tiên tiêm mới <script> sau khi bản thân (với src trỏ đến ga.js google) mà ngay lập tức tải và thực thi - chỉ sau đó không thứ hai <script> được thực thi.

Answer 2

Trong ví dụ của bạn, khối kịch bản đầu tiên sử dụng document.write để viết một yếu tố kịch bản, mà tải một kịch bản bên ngoài, và sau đó là yếu tố kịch bản thứ hai sử dụng điều quy định tại rằng kịch bản bên ngoài. Tôi khá chắc chắn rằng việc chia nó thành hai khối tập lệnh là cần thiết để nó hoạt động.

Nếu bạn không sử dụng thủ thuật kỳ quặc như vậy, việc đặt nhiều khối tập lệnh liên tiếp thường sẽ không làm gì đặc biệt. Có chúng trong các phần khác nhau của trang là hữu ích là khi bạn muốn các tập lệnh chạy trong khi tài liệu đang tải. Nếu trang của bạn rất dài, bạn có thể muốn một số tập lệnh chạy trong khi nó vẫn đang tải, để khởi tạo mọi thứ càng sớm càng tốt. Thay thế các yếu tố với các vật dụng nên được thực hiện càng sớm càng tốt để tránh những thứ nhảy xung quanh khi trang cuối cùng kết thúc tải.

Answer 3

Nếu mã trong các khối đầu tiên kết thúc bằng ngoại lệ, phần thứ hai cũng sẽ hoạt động.

Answer 4

<script> thẻ được thực hiện theo trình tự. Một khối <script> không thể thực thi nếu khối trước đó không được thực thi.

Thẻ <script> đầu tiên chịu trách nhiệm tạo thẻ Google <script> sẽ tải các thẻ j bên ngoài. Sau khi <script> đầu tiên được hoàn tất thi công, DOM trông giống như sau:

<script></script> <!-- First Script Tag --> 
<script></script> <!-- Google Injected Script --> 
<script></script> <!-- Second Script Tag --> 

Điều này đảm bảo rằng thứ hai <script> thẻ sẽ không thực hiện cho đến khi .js được thực hiện tải. Nếu <script> đầu tiên và thứ hai sẽ được kết hợp, điều này sẽ gây ra biến số _gat không được xác định (do tập lệnh được chèn của Google sẽ không bắt đầu tải cho đến khi tập lệnh đầu tiên được thực hiện xong).