Cách tốt nhất để bao gồm Javascript là gì?

Question

Nhiều người chơi lớn đề xuất các kỹ thuật hơi khác nhau. Chủ yếu là trên vị trí mới <script>.

Google Anayltics:

(function() { 
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; 
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; 
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); 
})(); 

Facebook:

(function() { 
    var e = document.createElement('script'); e.async = true; 
    e.src = document.location.protocol + 
    '//connect.facebook.net/en_US/all.js'; 
    document.getElementById('fb-root').appendChild(e); 
}());: 

Disqus:

(function() { 
    var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true; 
    dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js'; 
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq); 
})(); 

(bài người khác và tôi sẽ thêm chúng)

Có vần điệu hay lý do nào cho những lựa chọn này hay không quan trọng?

Answer 1

Đây là tất cả những cách tiếp cận tương tự về mặt tinh thần. Ý tưởng là trì hoãn các tập lệnh để chúng không chặn lẫn nhau hoặc hoàn thành tài liệu.

Thực tiễn phổ biến là tải thêm tài nguyên bên ngoài sau nội dung trang web của bạn. Khi làm như vậy, bạn muốn cả hai a) ngăn chặn việc chặn sự kiện onload để trang của bạn được "hoàn thành" nhanh hơn và b) nạp tài nguyên song song, mà ở trên làm.

Steve Souders tuyên bố rằng "nâng cao tiến bộ" là khái niệm quan trọng nhất cho hiệu suất trang web hiện nay. Khái niệm này cho thấy rằng bạn phân phối trang cơ sở của mình nhanh nhất có thể và sau đó cung cấp nội dung/dịch vụ bổ sung khi cần thiết, hoặc trên sự kiện tải hoặc khi người dùng yêu cầu.

Hiện có các khung công tác trợ giúp. Xem http://headjs.com/

Answer 2

Tôi nghĩ đây không phải là cách bạn thêm tập lệnh vào trang của bạn, nhưng tập lệnh truy xuất nội dung từ một miền khác chỉ có thể được thêm theo cách này i-e tự động viết thẻ tập lệnh và thêm nó vào tài liệu của bạn. Tất cả các kịch bản trên đều làm tương tự theo cách riêng của chúng, vì vậy bạn có thể thực hiện theo ý muốn.

Answer 3

Có một vài lý do khác nhau để thực hiện việc này ... trước tiên, một số trình duyệt sẽ tải xuống thẻ tập lệnh được thêm động một cách không đồng bộ. Thứ hai, tập lệnh có thể xử lý khi trang đích là http so với https để tránh lỗi nội dung.

Như joe đã đề cập head.js là hữu ích ... s là tách miền của tập lệnh của riêng bạn. Đối với tài nguyên tập lệnh của riêng bạn, tốt nhất bạn nên thiết kế trang web của mình càng ít càng tốt ở đầu trang (html5shiv và trình duyệt/js gắn thẻ cho css) ... sau đó có số js của bạn trong các thẻ src = ""> cũ thời lỗi thời src = ""> ngay trước phần tử cơ thể đóng.

Trình duyệt sẽ tải xuống nội dung cần thiết của trang trước và sau này .. điều này sẽ cho tải nhanh nhất nhận thức theo cách không bị chặn. Modularizing kịch bản của bạn cho một dòng công việc với nhau và khởi tạo trong trang chỉ những gì cần phải chạy cho phép sử dụng bộ nhớ đệm tốt hơn.

Giữ nguyên tập lệnh của bạn ở hoặc dưới 6 tệp js. và gần với cùng kích thước với nhau như hợp lý.

Sách của Souder "Ngay cả các trang web nhanh hơn" là một bài đọc tuyệt vời về điều này.