Tham khảo javascript bên ngoài so với lưu trữ bản sao của riêng tôi

Nói rằng tôi có một ứng dụng web sử dụng jQuery. Có phải là cách tốt hơn để lưu trữ các tệp javascript cần thiết trên các máy chủ của riêng tôi cùng với các tệp trang web của tôi hoặc để tham chiếu chúng trên CDN của jQuery (ví dụ: http://code.jquery.com/jquery-1.7.1.min.js ) ?

Tôi có thể thấy ưu điểm cho cả hai bên:

• Nếu nó trên máy chủ của tôi, đó là một sự phụ thuộc bên ngoài ít hơn; nếu jQuery đi xuống hoặc thay đổi cấu trúc lưu trữ của họ hoặc một cái gì đó tương tự, thì ứng dụng của tôi sẽ bị hỏng. Nhưng tôi cảm thấy điều đó sẽ không xảy ra thường xuyên; phải có nhiều trang web nhỏ làm việc này và nhóm jQuery sẽ muốn tránh phá vỡ chúng.
• Nếu trên máy chủ của tôi, đó là một tham chiếu bên ngoài ít hơn mà ai đó có thể gọi là vấn đề bảo mật
• Nếu nó được tham chiếu ra bên ngoài, thì tôi không phải lo lắng về băng thông để phục vụ các tệp (mặc dù tôi biết nó không nhiều).
• Nếu nó được tham chiếu ra bên ngoài và tôi đang triển khai trang web này tới nhiều máy chủ cần có bản sao của tất cả các tệp, thì đó là một tệp ít hơn tôi phải nhớ để sao chép / cập nhật.

Bạn nên làm cả hai:

Bắt đầu với việc lưu trữ từ CDN như của Google bởi vì nó có thể sẽ có thời gian hoạt động cao hơn trang web của chính bạn và sẽ được định cấu hình để có thời gian phản hồi nhanh nhất. Ngoài ra, bất kỳ ai đã truy cập một trang liên kết đến CDN đều sẽ sử dụng bản sao được lưu trong bộ nhớ cache của họ, vì vậy họ thậm chí sẽ không phải tải xuống lại một bản sao, khiến việc tải ban đầu thậm chí còn nhanh hơn.

Sau đó thêm một tham chiếu dự phòng vào máy chủ của riêng bạn trong trường hợp CDN không hoạt động (không có khả năng, nhưng an toàn là an toàn). Dự phòng tương đối dễ hiểu, nhưng cần được tùy chỉnh cho phù hợp với tập lệnh đang được sử dụng:

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script>
    if (!window.jQuery) document.write('<script src="/path/to/jquery-ver.sion.min.js"><\/script>');
</script>

Hãy chắc chắn rằng bạn không viết </script>bất cứ nơi nào trong một <script>phần tử, vì nó sẽ đóng phần tử HTML và khiến tập lệnh bị lỗi. Cách khắc phục đơn giản là sử dụng dấu gạch chéo ngược như một lối thoát : <\/script>.

_{Thêm một lý do để làm cả hai:}

Nếu bạn chọn một CDN phổ biến, rất có thể nó sẽ không có thời gian ngừng hoạt động, tuy nhiên trong tương lai xa (~ 18 tháng kể từ khi có luật Moore ) khi định dạng lưu trữ thay đổi hoặc địa chỉ được điều chỉnh hoặc mạng được đặt phía sau một tường, hoặc bất cứ điều gì khác, có thể là liên kết của bạn sẽ không còn hoạt động như hiện tại. Nếu bạn sử dụng dự phòng, thì nó sẽ cho bạn một chút thời gian để điều chỉnh bất kỳ định dạng mới nào để lưu trữ trước khi phải quay lại mọi trang web bạn đã tạo và thay đổi các liên kết CDN.

_{một lý do khác để làm cả hai:}

Gần đây tôi đã gặp phải một loạt các sự cố mất internet. Tôi đã có thể tiếp tục làm việc tại địa phương trong các dự án nơi tôi đã liên kết các bản sao tài nguyên tập lệnh cục bộ và tôi nhanh chóng nhận thấy rằng có một số dự án cần phải có các bản sao được liên kết.

Tôi đã có cùng một câu hỏi, sau đó tôi đọc bài viết này và tôi đã được bán với ý tưởng cho phép Google lưu trữ thư viện jQuery của tôi.

Bài viết nêu các lợi ích chính của việc cho phép các thư viện của bạn được lưu trữ bởi Mạng phân phối nội dung của Google (CDN):

• Độ trễ giảm - Người dùng không ở gần máy chủ của bạn sẽ có thể tải xuống jQuery nhanh hơn từ Google so với khi bạn buộc họ tải xuống từ máy chủ được đặt tùy ý của bạn.
• Tăng tính song song - Trình duyệt giới hạn số lượng kết nối có thể được thực hiện đồng thời. Tùy thuộc vào trình duyệt nào, giới hạn này có thể thấp bằng hai kết nối cho mỗi tên máy chủ. Sử dụng Thư viện AJAX của Google CDN sẽ loại bỏ một yêu cầu đến trang web của bạn, cho phép tải xuống nhiều nội dung cục bộ của bạn song song.
• Bộ nhớ đệm tốt hơn - Sử dụng Thư viện AJAX của Google, người dùng của bạn có thể không cần tải xuống jQuery. Mặt khác, nếu bạn đang lưu trữ jQuery cục bộ thì người dùng của bạn phải tải xuống ít nhất một lần. Mỗi người dùng của bạn có thể đã có hàng tá bản sao jQuery giống hệt nhau trong bộ đệm của trình duyệt của họ, nhưng những bản sao đó của jQuery bị bỏ qua khi họ truy cập trang web của bạn.

Đối với hai điểm nhấn mà bạn đã liệt kê là ưu điểm cho việc lưu trữ thư viện của riêng mình, hãy nhớ rằng Google lưu trữ phiên bản đám mây và Google biết họ đang làm gì và có thể tin tưởng được về tính khả dụng và bảo mật. Tuy nhiên, @zzzzBov đưa ra một điểm rất hay trong câu trả lời của mình cho câu hỏi này, trong đó ông khuyên bạn cũng nên lưu trữ một bản sao cục bộ của thư viện và mặc định rằng trong trường hợp không chắc là phiên bản CDN có thể được truy cập vì bất kỳ lý do nào.

Cá nhân, tôi lấy một gợi ý từ http://html5boilerplate.com/

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script>!window.jQuery && document.write(unescape('%3Cscript src="includes/js/libs/jquery-1.6.1.min.js"%3E%3C/script%3E'))</script>

Điều này kéo tệp jQuery chính từ Google, nhưng nếu nó không tải vì một số lý do, dòng tiếp theo sẽ tải nó từ máy chủ của riêng bạn.

Cách tốt hơn là sử dụng CDN và nếu CDN đó là Google, thì tốt hơn - như cả @CFL_Jeff và @Morons đã lưu ý.

Tôi đang thêm câu trả lời này để chỉ ra điều gì đó thường bị bỏ qua khi chỉ ra nơi khác, đó là tránh cảnh báo nội dung hỗn hợp . Cân nhắc sử dụng các URL không có giao thức, ví dụ:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js" type="text/javascript">
</script>

Vẫn còn một số vấn đề hỗ trợ trong việc sử dụng URL không có giao thức, do đó, hãy tham gia vào các câu trả lời trên Tôi có thể thay đổi tất cả các liên kết http: // của mình thành // không? trên SO, nhưng ít nhất hãy cố gắng xử lý các cảnh báo nội dung hỗn hợp tiềm năng theo một cách nào đó.

Bạn nên tham khảo nó với Thư viện API của Google ..

Lý do chính cho việc này là để tăng tốc độ tải trang của bạn . Nếu người dùng của bạn đã truy cập một trang web khác tham chiếu cùng thư viện thì nó sẽ được lưu trong bộ đệm của trình duyệt và nó sẽ không cần phải tải xuống .

Tôi có thể sai, nhưng thực hiện document.write sẽ ghi đè lên bất cứ thứ gì mà DOM có. Vì đó là cách tốt để đặt các tệp JavaScript ở cuối phần thân,

Tôi đề xuất phương pháp sau dựa trên các câu trả lời trước:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">

if(!window.jQuery)
{
    //Creates the script element
    var script = document.createElement('script'); 
    //Adds the type attribute with "text/javascript" value
        script.setAttribute('type', 'text/javascript'); 
    //Adds the source attribute and populates it
        script.setAttribute('src', 'Put_The_Relative_Path_To_Your_JavaScript_File_Here'); 
    //Adds it to the end of the body, as it is good practice, to prevent render-blocking.  
    document.body.appendChild(script);

}

//Note that there's no need for you to verify with an onload function, since all scripts
//must be loaded before going to the next one! 

</script>

Tôi muốn thêm rằng lưu trữ một bản sao cục bộ là một cách tốt nhất vì không có bất kỳ trạng thái nào ở trên liên quan đến một tư thế an toàn, theo đó Geo Location và Danh sách trắng nghiêm ngặt là bắt buộc. Không lưu trữ tệp đó giả định cục bộ để đẩy một tư thế bảo mật giảm xuống cho khách hàng của bạn.