Cách tốt nhất để sử dụng Twitter Bootstrap, tham khảo nó từ CDN hoặc tạo một bản sao cục bộ trên máy chủ của tôi?
Vì Bootstrap tiếp tục phát triển, tôi sợ nếu tôi tham khảo CDN, người dùng sẽ thấy các trang web khác nhau theo thời gian và một số thẻ thậm chí có thể bị hỏng. Lựa chọn nào của mọi người nhất?
Câu trả lời:
Tại sao không phải cả hai ¯ \ _ (ツ) _ / ¯? Scott Hanselman có một bài viết tuyệt vời về việc sử dụng CDN để tăng hiệu suất nhưng duyên dáng trở lại bản sao trong trường hợp CDN bị hỏng .
Cụ thể với bootstrap, bạn có thể thực hiện các thao tác sau để tải từ CDN với dự phòng cục bộ :
<head>
<!-- Bootstrap CSS CDN -->
<link rel="stylesheet" href="~https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css">
<!-- Bootstrap CSS local fallback -->
<script>
var test = document.createElement("div")
test.className = "hidden d-none"
document.head.appendChild(test)
var cssLoaded = window.getComputedStyle(test).display === "none"
document.head.removeChild(test)
if (!cssLoaded) {
var link = document.createElement("link");
link.type = "text/css";
link.rel = "stylesheet";
link.href = "lib/bootstrap.min.css";
document.head.appendChild(link);
}
</script>
</head>
<body>
<!-- APP CONTENT -->
<!-- jQuery CDN -->
<script src="~https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<!-- jQuery local fallback -->
<script>window.jQuery || document.write('<script src="lib/jquery.min.js"><\/script>')</script>
<!-- Bootstrap JS CDN -->
<script src="~https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
<!-- Bootstrap JS local fallback -->
<script>if(typeof($.fn.modal) === 'undefined') {document.write('<script src="lib/bootstrap.min.js"><\/script>')}</script>
</body>.visiblelớp thay vì kiểm trargb(51, 51, 51) .hiddenvà .d-nonecho Boostrap 3.x hoặc 4 Document.createElement(), áp dụng các lớp bootstrap, sử dụng Window.getComputedStyle()để kiểm tra display:nonevà sau đó chèn một cách có điều kiện một biểu định kiểu bằng js.Đối với câu hỏi của bạn về Thực tiễn Tốt nhất, có rất nhiều lý do rất tốt để sử dụng CDN trong môi trường sản xuất :
- Nó làm tăng tính song song có sẵn.
- Nó làm tăng khả năng sẽ có một lần nhấn cache .
- Nó đảm bảo rằng tải trọng sẽ càng nhỏ càng tốt .
- Nó làm giảm lượng băng thông được sử dụng bởi máy chủ của bạn.
- Nó đảm bảo rằng người dùng sẽ nhận được phản hồi gần về mặt địa lý .
Đối với mối quan tâm về phiên bản của bạn, bất kỳ CDN nào cũng có giá trị bằng muối cho phép bạn nhắm mục tiêu một phiên bản cụ thể của thư viện để bạn không vô tình đưa ra các thay đổi vi phạm với mỗi bản phát hành.
document.writeTheo md trên document.write
Lưu ý : khi
document.writeghi vào luồng tài liệu , gọidocument.writetrên tài liệu đã đóng (đã tải) sẽ tự động gọidocument.open, điều này sẽ xóa tài liệu .
Tuy nhiên, việc sử dụng ở đây là có chủ ý. Mã cần được thực thi trước khi DOM được tải đầy đủ và cũng theo đúng thứ tự. Nếu jQuery thất bại, chúng ta cần đưa nó vào trong tài liệu nội tuyến trước khi chúng ta thử tải bootstrap, dựa trên jQuery.
Đầu ra HTML sau khi tải :
Tuy nhiên, trong cả hai trường hợp này, chúng tôi đang gọi trong khi tài liệu vẫn đang mở để nó nội tuyến, thay vì thay thế toàn bộ tài liệu. Nếu bạn đang đợi cho đến khi kết thúc, bạn sẽ phải thay thế bằng document.body.appendChildcách chèn các nguồn động.
Ngoài ra : Trong MVC 6, bạn có thể làm điều này với các trình trợ giúp thẻ liên kết và tập lệnh
<body>yếu tố. Câu trả lời này thêm một số đánh dấu với một .hiddendiv và sau đó thực hiện một bài kiểm tra để xem nếu nó hiển thị : $('#bootstrapCssTest').is(':visible'). Lớp học đó có lẽ ít có khả năng có những thay đổi phá vỡ theo thời gian.
Phụ thuộc vào trang web cụ thể.
Bạn có nhiều người dùng không? Bạn có quan tâm đến việc sử dụng băng thông? Hiệu suất có phải là vấn đề không (CDN có thể tăng tốc độ phản hồi)?
Bạn có thể liên kết đến một phiên bản cụ thể:
//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css
Hoặc là
//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css
Bằng cách đó, bạn không phải lo lắng về việc cập nhật thư viện, đó là cách tốt hơn để tiếp tục cập nhật.
Tôi không chắc số liệu thống kê chính xác về lựa chọn của nhà phát triển là gì, nhưng bạn có thể xem tại đây và xem Hàng tỷ yêu cầu được gửi tới Bootstrap CDN, có nghĩa là nó rất mạnh mẽ và an toàn để sử dụng.
Tôi đã cố gắng chỉnh sửa câu trả lời của KyleMit nhưng diễn đàn đã đánh dấu là một mã thụt lề sai, thậm chí là không, vì vậy tôi đang thêm phần đóng góp của mình vào bên dưới:
Khi câu hỏi được gắn thẻ là twitter-bootstrap chủ đề (và không chỉ twitter-bootstrap-3 ), có thể hữu ích để cập nhật phản hồi cho phiên bản Bootstrap mới hơn.
Khi khung đã thêm một lớp mới để ẩn các phần tử trên phiên bản thứ tư của nó, chúng ta nên sử dụng .d-nonethay vì .hiddentrong trường hợp này.
Mọi thứ khác vẫn giữ nguyên trong trường hợp đó, ngoại trừ phiên bản lib (tất nhiên!)
Cảm ơn @KyleMit. Một cách khác để quay lại là sử dụng đối tượng 'window' như bên dưới -
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script>
window.jQuery || document.write("<script src='js/jquery.min.js'><\/script>");
</script>Nó hoạt động như thế này - Nếu liên kết CDN hoạt động, đối tượng 'window' sẽ có sẵn thuộc tính 'jQuery', phần thứ hai của tập lệnh tức là document.write sẽ được thực thi trỏ đến bản sao cục bộ.
Trả lời câu hỏi ban đầu - Có CDN có nhiều lợi ích như tải xuống nhanh chóng mà không ảnh hưởng đến máy chủ và băng thông của bạn. Có một bản sao địa phương có lợi ích riêng của nó (như một sự sắp xếp trở lại). Trên mạng nội bộ, do cài đặt proxy, chính sách bảo mật, liên kết CDN có thể không hoạt động hoặc nếu liên kết CDN không hoạt động, nó có thể không hoạt động. Câu trả lời thẳng là có cả hai.
Hầu như tất cả các CDN công cộng đều khá đáng tin cậy. Tuy nhiên, nếu bạn lo lắng về khoảng thời gian mà CDN có thể ngừng hoạt động, bạn có thể tải Bootstrap từ một CDN Bootstrap và chuyển sang CDN thay thế trong trường hợp CDN đầu tiên bị hỏng.
<html>
<head>
<!-- Bootstrap CSS CDN with Fallback -->
<link rel="stylesheet" href="https://pagecdn.io/lib/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha256-YLGeXaapI0/5IgZopewRJcFXomhRMlYYjugPLSyNjTY=" crossorigin="anonymous">
<script>
var test = document.createElement("div")
test.className = "hidden d-none"
document.head.appendChild(test)
var cssLoaded = window.getComputedStyle(test).display === "none"
document.head.removeChild(test)
if (!cssLoaded) {
var link = document.createElement("link");
link.type = "text/css";
link.rel = "stylesheet";
link.href = "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css";
document.head.appendChild(link);
}
</script>
</head>
<body>
<!-- APP CONTENT -->
<!-- jQuery CDN with Fallback -->
<script src="https://pagecdn.io/lib/jquery/3.2.1/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"><\/script>');</script>
<!-- Bootstrap JS CDN with Fallback -->
<script src="https://pagecdn.io/lib/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha256-CjSoeELFOcH0/uxWu6mC/Vlrc1AARqbm/jiiImDGV3s=" crossorigin="anonymous"></script>
<script>if(typeof($.fn.modal) === 'undefined') {document.write('<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"><\/script>')}</script>
</body>
</html>Về mối quan tâm thứ hai của bạn: Các liên kết trong bài đăng này là các phiên bản mã hóa cứng của bootstrap và jquery. Vì vậy, ngay cả khi các thư viện bootstrap và jquery liên tục được phát triển và có các tính năng mới, trang web của bạn sẽ giữ nguyên theo thời gian.
rgb(51, 51, 51)có vẻ rủi ro - điều gì sẽ xảy ra nếu ai đó thay đổi màu sắc và quên cập nhật nó? Có một tài sản ổn định hơn người ta có thể sử dụng?