ฉันควรใช้ Bootstrap จาก CDN หรือทำสำเนาบนเซิร์ฟเวอร์ของฉัน?

Question 1

แนวทางปฏิบัติที่ดีที่สุดในการใช้ Twitter Bootstrap คืออะไรอ้างอิงจาก CDN หรือทำสำเนาในเครื่องบนเซิร์ฟเวอร์ของฉัน

เนื่องจาก Bootstrap มีการพัฒนาอย่างต่อเนื่องฉันจึงกลัวว่าหากอ้างถึง CDN ผู้ใช้จะเห็นหน้าเว็บที่แตกต่างกันเมื่อเวลาผ่านไปและแท็กบางรายการอาจเสีย คนส่วนใหญ่เลือกอะไร?

Question 2

ทำไมไม่ทั้งสอง¯ \ _ (ツ) _ / ¯? สกอตต์ Hanselman มีบทความดี ๆ เกี่ยวกับการใช้ CDN สำหรับเพิ่มประสิทธิภาพการทำงานได้อย่างสง่างาม แต่กลับไปสำเนาในกรณีที่ลดลง CDN ลง

เฉพาะสำหรับ bootstrap คุณสามารถทำสิ่งต่อไปนี้เพื่อโหลดจาก CDN ด้วยทางเลือกในเครื่อง :

Working Demo ใน Plunker

<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>

อัปเดต

คุณยังสามารถทำการทดสอบเดียวกันโดยใช้ YepNope หรือ fallback.js
ตามความคิดเห็นของ Flashและโซลูชันนี้คำตอบที่อัปเดตเพื่อตรวจสอบ.visibleชั้นเรียนแทนที่จะทดสอบrgb(51, 51, 51)
ต่อความคิดเห็นของ Desteอัปเดตเพื่อใช้งาน.hiddenและ.d-noneสำหรับ Boostrap 3.x หรือ 4
เมื่อทดสอบว่ามีการโหลดสไตล์ชีตหรือไม่คุณต้องหาสไตล์ที่จะนำไปใช้สร้างองค์ประกอบและดูว่ามีการนำไปใช้หรือไม่
อัปเดตสไตล์ชีตเพื่อโหลดในส่วนหัวทันทีโดยใช้ vanilla js คุณต้องสร้างองค์ประกอบทดสอบโดยใช้Document.createElement()ใช้คลาส bootstrap ใช้Window.getComputedStyle()เพื่อทดสอบdisplay:noneแล้วแทรกสไตล์ชีตตามเงื่อนไขโดยใช้ js

ปฏิบัติที่ดีที่สุด

สำหรับคำถามของคุณเกี่ยวกับแนวทางปฏิบัติที่ดีที่สุดมีเหตุผลที่ดีมากมายในการใช้ CDNในสภาพแวดล้อมการผลิต :

มันเพิ่มความขนานที่มีอยู่

จะเพิ่มโอกาสที่จะมีการโจมตีด้วยแคช

ทำให้มั่นใจได้ว่าน้ำหนักบรรทุกจะเป็นขนาดเล็กที่สุด

ช่วยลดจำนวนแบนด์วิดท์ที่เซิร์ฟเวอร์ของคุณใช้

เพื่อให้แน่ใจว่าผู้ใช้จะได้รับการตอบสนองอย่างใกล้ชิดทางภูมิศาสตร์

สำหรับข้อกังวลเกี่ยวกับการกำหนดเวอร์ชันของคุณ CDN ใด ๆ ที่มีค่าน้ำหนักเป็นเกลือช่วยให้คุณกำหนดเป้าหมายเวอร์ชันเฉพาะของไลบรารีได้ดังนั้นคุณจะไม่แนะนำการเปลี่ยนแปลงที่ไม่สมบูรณ์ในแต่ละรุ่น

การใช้ `document.write`

ตาม mdn บน document.write

หมายเหตุ : เป็นdocument.writeเขียนเอกสารกระแสเรียกdocument.writeบนปิด (โหลด) เอกสารเรียกโดยอัตโนมัติdocument.open, ซึ่งจะล้างเอกสาร

อย่างไรก็ตามการใช้งานที่นี่เป็นความตั้งใจ รหัสจะต้องดำเนินการก่อนที่ DOM จะโหลดเต็มที่และเรียงตามลำดับที่ถูกต้องด้วย หาก jQuery ล้มเหลวเราจำเป็นต้องฉีดลงในเอกสารแบบอินไลน์ก่อนที่เราจะพยายามโหลด bootstrap ซึ่งอาศัย jQuery

เอาต์พุต HTML หลังจากโหลด :

ในทั้งสองกรณีนี้เรากำลังโทรหาในขณะที่เอกสารยังคงเปิดอยู่ดังนั้นจึงควรแทรกเนื้อหาในบรรทัดแทนที่จะแทนที่ทั้งเอกสาร หากคุณรอจนจบคุณจะต้องแทนที่ด้วยdocument.body.appendChildเพื่อแทรกแหล่งที่มาแบบไดนามิก

นอกเหนือจาก : ใน MVC 6 คุณสามารถทำได้ด้วยตัวช่วยลิงก์และแท็กสคริปต์

Question 3

ขึ้นอยู่กับไซต์เฉพาะ

คุณมีผู้ใช้หลายคนหรือไม่? คุณสนใจเกี่ยวกับการใช้แบนด์วิดท์หรือไม่? ประสิทธิภาพเป็นปัญหาหรือไม่ (CDN สามารถเร่งการตอบสนองได้)

คุณสามารถเชื่อมโยงไปยังเวอร์ชันเฉพาะ:

//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css

หรือ

//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css

ด้วยวิธีนี้คุณจะไม่ต้องกังวลกับการอัปเดตไลบรารีซึ่งเป็นแนวทางปฏิบัติที่ดีกว่าในการอัปเดตอยู่เสมอ

ฉันไม่แน่ใจว่าสถิติที่แน่นอนเกี่ยวกับตัวเลือกของนักพัฒนาคืออะไร แต่คุณสามารถดูได้ที่นี่และดูว่ามีการส่งคำขอหลายพันล้านรายการไปยัง Bootstrap CDN ซึ่งหมายความว่ามีประสิทธิภาพและปลอดภัยในการใช้งาน

Question 4

ฉันพยายามแก้ไขคำตอบของ KyleMitแต่ฟอรัมกำลังทำเครื่องหมายว่าเป็นรหัสที่เยื้องผิดแม้ว่าจะไม่ใช่ก็ตามดังนั้นฉันจึงเพิ่มการสนับสนุนของฉันที่ถูกต้อง:

เนื่องจากคำถามถูกแท็กเป็นไฟล์ twitter-bootstrap หัวข้อ (และไม่เพียง twitter-bootstrap-3 ) อาจเป็นประโยชน์ในการอัปเดตการตอบสนองสำหรับ Bootstrap เวอร์ชันใหม่กว่า

เนื่องจากเฟรมเวิร์กได้เพิ่มคลาสใหม่สำหรับการซ่อนองค์ประกอบในเวอร์ชันที่สี่เราควรใช้.d-noneแทน.hiddenในกรณีนี้

ทุกอย่างยังคงเหมือนเดิมในกรณีนั้นยกเว้นเวอร์ชัน lib (แน่นอน!)

Question 5

ขอบคุณ @KyleMit อีกวิธีหนึ่งในการถอยกลับคือการใช้วัตถุ 'หน้าต่าง' ตาม -

<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>

ขยายข้อมูลโค้ด

การทำงานเช่นนี้ - หากลิงก์ CDN ทำงานออบเจ็กต์ 'window' จะมีคุณสมบัติ 'jQuery' อื่น ๆ ส่วนที่สองของสคริปต์เช่น document.write จะได้รับการดำเนินการซึ่งชี้ไปที่สำเนาภายในเครื่อง

คำตอบสำหรับคำถามเดิม - การมี CDN มีประโยชน์มากมายเช่นการดาวน์โหลดอย่างรวดเร็วโดยไม่ส่งผลกระทบต่อเซิร์ฟเวอร์และแบนด์วิดท์ของคุณ การมีสำเนาในเครื่องมีประโยชน์ในตัวเอง (เป็นการจัดเตรียมการสำรอง) บนอินทราเน็ตเนื่องจากการตั้งค่าพร็อกซีนโยบายความปลอดภัยลิงก์ CDN อาจไม่ทำงานหรือหากลิงก์ CDN ไม่ทำงานก็อาจไม่ทำงาน คำตอบตรงๆคือต้องมีทั้งสองอย่าง

Question 6

CDN สาธารณะเกือบทั้งหมดค่อนข้างเชื่อถือได้ อย่างไรก็ตามหากคุณกังวลเกี่ยวกับช่วงเวลาที่ CDN อาจหยุดทำงานคุณสามารถโหลด Bootstrap จากBootstrap CDNหนึ่งรายการและเปลี่ยนกลับไปใช้ CDN ทางเลือกในกรณีที่อันแรกไม่ทำงาน

<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>

เกี่ยวกับข้อกังวลประการที่สองของคุณ: ลิงก์ในโพสต์นี้เป็นเวอร์ชัน bootstrap และ jquery แบบฮาร์ดโค้ด ดังนั้นแม้ว่าไลบรารี bootstrap และ jquery จะได้รับการพัฒนาอย่างต่อเนื่องและได้รับคุณสมบัติใหม่ ๆ ไซต์ของคุณก็จะยังคงเหมือนเดิมตลอดเวลา

ฉันควรใช้ Bootstrap จาก CDN หรือทำสำเนาบนเซิร์ฟเวอร์ของฉัน?

Working Demo ใน Plunker

อัปเดต

ปฏิบัติที่ดีที่สุด

การใช้ document.write

การใช้ `document.write`