Cách tốt nhất để tải Javascript vào một trang để tối ưu hóa hiệu suất là gì?

Có cách nào để tải JavaScript của tôi vào một trang sẽ giúp nó tải nhanh hơn không?

Có một vài điều bạn có thể làm:

1. Tải HTML và CSS trước javascript. Điều này cung cấp cho trình duyệt mọi thứ nó cần để bố trí trang và hiển thị nó. Điều này mang lại cho người dùng ấn tượng rằng trang này rất linh hoạt. Đặt các thẻ script hoặc các khối càng gần thẻ body đóng càng tốt.

2. Cân nhắc sử dụng CDN. Nếu bạn đang sử dụng bất kỳ thư viện phổ biến nào như JQuery, nhiều công ty (ví dụ google, yahoo) vận hành CDN miễn phí mà bạn có thể sử dụng để tải các thư viện.

3. Tải mã từ một tệp bên ngoài thay vì tập lệnh nhúng. Điều này cung cấp cho trình duyệt cơ hội để lưu trữ nội dung JS và không phải tải nó. Tải trang liên tiếp sẽ nhanh hơn.

4. Bật nén zip trên máy chủ web.

Yahoo có một trang tuyệt vời về các đề xuất có thể giúp giảm thời gian tải trang.

Bên cạnh việc chơi trò chơi, gziping và CDNing (từ mới?). Bạn nên xem xét tải chậm. Về cơ bản những gì nó làm là thêm các tập lệnh động và ngăn chặn, cho phép tải xuống song song.

Có nhiều cách để làm điều đó, đây là cách tôi thích

<script type="text/javascript">
    function AttachScript(src) {
        window._sf_endpt=(new Date()).getTime();
        var script = document.createElement("script");
        document.getElementsByTagName("body")[0].appendChild(script);
        script.src = src;
    }
    AttachScript("/js/scripts.js");
    AttachScript("http://www.google-analytics.com/ga.js");
</script>

Đặt cái này ngay trước thẻ body đóng và sử dụng AttachScript để tải mọi tệp js.
Một số thông tin khác ở đây http://www.stevesouders.com/blog/2009/04/27/loading-scripts-without-blocking/

Bạn cũng có thể muốn xem cách Google tải Analytics:

<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-xxxxxxx-x']);
  _gaq.push(['_trackPageview']);

  (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);
  })();

</script>

Vì nó được coi là một loại kịch bản "thực tiễn tốt nhất":
http://www.stevesouders.com/blog/2009/12/01/google-analytics-goes-async/

Một vài người của Google đã công bố một dự án nguồn mở mới tại Velocity 2010 có tên là Diffable . Diffable thực hiện một số phép thuật để chỉ xuất bản tăng dần các phần của JS, HTML và CSS đã thay đổi kể từ phiên bản được lưu trong bộ đệm của người dùng, thay vì gửi toàn bộ tệp mới khi phát hành phiên bản mới.

Kỹ thuật này cực kỳ hay và hiện tại hiệu quả nhất (và đáng nỗ lực) trên các trang web nơi bạn đang sử dụng cơ sở mã JavaScript lớn với các thay đổi mã nhỏ thường xuyên. Điều này đặc biệt áp dụng tốt cho các ứng dụng như Google Maps, trải qua ít nhất một bản phát hành vào mỗi thứ ba và trung bình khoảng 100 bản phát hành mới mỗi năm. Nó cũng có nhiều ý nghĩa nói chung khi lưu trữ cục bộ HTML5 trở nên phổ biến hơn.

BTW, nếu bạn chưa thấy Michael Jones của Google nói về sự thay đổi (trong bối cảnh không gian địa lý) thì đáng để xem toàn bộ bài phát biểu của anh ấy tại GeoWeb 2009 .

Để đưa ra một bản cập nhật cho câu hỏi này. Tôi nghĩ rằng trong thời hiện đại, cách tải không chặn không còn cần thiết nữa, trình duyệt sẽ làm điều đó cho bạn.

Tôi đã thêm một câu hỏi vào StackOverflow, tôi sẽ thêm nội dung vào đây.

Sự khác biệt duy nhất là sự kiện tải sẽ được kích hoạt sớm hơn một chút, nhưng việc tải các tệp vẫn giữ nguyên. Tôi cũng muốn thêm rằng ngay cả khi onload thậm chí kích hoạt sớm hơn với tập lệnh không chặn, điều này không có nghĩa là các tệp JS được kích hoạt sớm hơn. Trong trường hợp của tôi, thiết lập bình thường xuất hiện tốt nhất

Bây giờ đầu tiên các kịch bản, chúng trông như thế này:

<script>
(function () {
    var styles = JSON.parse(myObject.styles);
    for( name in styles ){
        var link  = document.createElement('link');
        link.setAttribute('rel', 'stylesheet');
        link.setAttribute('type', 'text/css');
        link.setAttribute('href', styles[name]);
        document.getElementsByTagName('head')[0].appendChild(link);
    }

    var scripts = JSON.parse(myObject.scripts);
    for( name in scripts ){
        var e = document.createElement('script');
        e.src = scripts[name];
        e.async = true;
        document.getElementsByTagName('head')[0].appendChild(e);
    }
}());
</script>

myObject.styles ở đây chỉ là một đối tượng chứa tất cả các url cho tất cả các tệp.

Tôi đã chạy thử nghiệm 3, đây là kết quả:

Thiết lập bình thường

Đây chỉ là thiết lập bình thường, chúng tôi có 4 tệp css trong đầu và 3 tệp css ở cuối trang.

Bây giờ tôi không thấy bất cứ điều gì chặn. Những gì tôi thấy rằng mọi thứ đang tải cùng một lúc.

Mã không chặn

Bây giờ để thực hiện điều này một chút nữa, tôi đã CHỈ làm cho các tệp js không bị chặn. Điều này với kịch bản ở trên. Tôi đột nhiên thấy rằng các tập tin css của tôi đang chặn tải. Điều này là lạ, bởi vì nó không chặn bất cứ điều gì trong ví dụ đầu tiên. Tại sao css đột nhiên chặn tải?

Mọi thứ không chặn

Cuối cùng tôi đã thực hiện một thử nghiệm trong đó tất cả các tệp bên ngoài được tải theo cách không chặn. Bây giờ tôi không thấy bất kỳ sự khác biệt với phương pháp đầu tiên của chúng tôi. Họ chỉ trông giống nhau.

Phần kết luận

Kết luận của tôi là các tệp đã được tải theo cách không chặn, tôi không thấy cần phải thêm tập lệnh đặc biệt.

Hay tôi đang thiếu một cái gì đó ở đây?

Hơn:

• Bài viết: http://www.yuiblog.com/blog/2008/07/22/non-blocking-scripts/
• Câu hỏi: /programming/6828271/javascript-non-blocking-scripts-why-dont-simply-put-all-scripts-b Before -body
• Câu hỏi: /programming/5765113/do-modern-browsers-still-limit-abul-doads
• Mã: http://calWiki.perfplanet.com/2010/the-truth-about-non-blocking-javascript/
• Mã: http://blog.fedecarg.com/2011/07/12/javascript-asynyncous-script-loading-and-lazy-loading/