การป้องกันแคชผ่านพารามิเตอร์

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

<link rel="stylesheet" href="base_url.com/file.css?v=1.123"/>

คำถามสองข้อ: สิ่งนี้จะทำลายแคชได้อย่างมีประสิทธิภาพหรือไม่? พารามิเตอร์จะทำให้เบราว์เซอร์ไม่แคชการตอบสนองจาก url นั้นเนื่องจากพารามิเตอร์ระบุว่านี่เป็นเนื้อหาแบบไดนามิกหรือไม่

พระรามบ่งชี้สตริงแบบสอบถามและเบราว์เซอร์จึงจะคิดว่ามันเป็นเส้นทางใหม่จากการพูด?v=1.123 ?v=1.0จึงทำให้โหลดจากไฟล์ไม่ใช่จากแคช ตามที่เธอต้องการ.

และเบราว์เซอร์จะถือว่าแหล่งที่มาจะยังคงเหมือนเดิมในครั้งต่อไปที่คุณโทร?v=1.123และควรแคชด้วยสตริงนั้น ดังนั้นมันจะคงอยู่จนกว่า แต่เซิร์ฟเวอร์ของคุณมีการตั้งค่าจนกว่าคุณจะย้ายไป?v=1.124หรืออื่น ๆ

คำถามสองข้อ: สิ่งนี้จะทำลายแคชได้อย่างมีประสิทธิภาพหรือไม่?

ใช่. แม้แต่ Stack Overflow ก็ใช้วิธีนี้แม้ว่าฉันจะจำได้ว่าพวกเขา (มีผู้เยี่ยมชมหลายล้านคนต่อวันและ zillions ของไคลเอนต์และเวอร์ชันและการกำหนดค่าพร็อกซีที่แตกต่างกัน) ก็มีบางกรณีที่แปลกประหลาดซึ่งแม้จะไม่เพียงพอที่จะทำลายแคช แต่ข้อสันนิษฐานทั่วไปคือวิธีนี้ใช้ได้ผลและเป็นวิธีที่เหมาะสมในการทำลายแคชบนไคลเอนต์

พารามิเตอร์จะทำให้เบราว์เซอร์ไม่แคชการตอบสนองจาก url นั้นเนื่องจากพารามิเตอร์ระบุว่านี่เป็นเนื้อหาแบบไดนามิกหรือไม่

ไม่พารามิเตอร์จะไม่เปลี่ยนนโยบายการแคช ส่วนหัวแคชที่เซิร์ฟเวอร์ส่งยังคงมีผลและหากไม่ส่งใด ๆ จะเป็นค่าเริ่มต้นของเบราว์เซอร์

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

หมายเหตุหนึ่งในการปรับใช้เวอร์ชันที่ใหญ่ที่สุดที่ใดก็ได้บนอินเทอร์เน็ต jQuery ใช้หมายเลขเวอร์ชันในชื่อไฟล์จริงและอนุญาตให้หลายเวอร์ชันอยู่ร่วมกันได้อย่างปลอดภัยโดยไม่ต้องใช้ตรรกะพิเศษทางฝั่งเซิร์ฟเวอร์ (แต่ละเวอร์ชันเป็นเพียงไฟล์ที่แตกต่างกัน)

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

ดังที่คนอื่น ๆ กล่าวไว้การป้องกันแคชด้วยพารามิเตอร์การค้นหามักถือเป็นความคิดที่ไม่ดี (tm) และมีมานานแล้ว แสดงเวอร์ชันในชื่อไฟล์จะดีกว่า Html5 Boilerplate ไม่แนะนำให้ใช้สตริงเคียวรีและอื่น ๆ

ที่กล่าวว่าจากคำแนะนำที่ฉันได้เห็นซึ่งอ้างถึงแหล่งที่มาทั้งหมดดูเหมือนจะใช้ภูมิปัญญาของพวกเขาจากบทความปี 2008ของ Steve Souders ข้อสรุปของเขาขึ้นอยู่กับพฤติกรรมของผู้รับมอบฉันทะในเวลานั้นและอาจเกี่ยวข้องหรือไม่เกี่ยวข้องในปัจจุบัน แต่ในกรณีที่ไม่มีข้อมูลที่เป็นปัจจุบันมากขึ้นการเปลี่ยนชื่อไฟล์เป็นตัวเลือกที่ปลอดภัย

แคชจะหยุดการทำงานหนึ่งครั้งหลังจากที่ไคลเอนต์ดาวน์โหลดทรัพยากรแล้วการตอบกลับอื่น ๆ ทั้งหมดจะได้รับจากแคชไคลเอนต์เว้นแต่:

1. พารามิเตอร์ v ถูกอัพเดต
2. ไคลเอนต์ล้างแคช

โดยทั่วไปสิ่งนี้ควรจะใช้ได้ แต่เป็นไปได้ที่สิ่งนี้จะไม่ทำงานหากมีแคชกลาง (พร็อกซี) ที่กำหนดค่าให้ละเว้นพารามิเตอร์คำขอ

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

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

พบการเปรียบเทียบ 2 เทคนิค (สตริงการสืบค้นเทียบกับชื่อไฟล์) ที่นี่ :

เวอร์ชันเป็นสตริงการสืบค้นมีปัญหาสองประการ

ประการแรกอาจไม่ใช่เบราว์เซอร์ที่ใช้แคชที่เราจำเป็นต้องหยุดเสมอไป มีการกล่าวกันว่าพร็อกซีบางตัว (อาจเก่ากว่า) ไม่สนใจข้อความค้นหาที่เกี่ยวกับพฤติกรรมการแคช

ประการที่สองในสถานการณ์การปรับใช้ที่ซับซ้อนมากขึ้นซึ่งคุณมีหลายส่วนหน้าและ / หรือเซิร์ฟเวอร์แบ็กเอนด์หลายตัวการอัปเกรดเป็นอะไรก็ได้ แต่จะเกิดขึ้นทันที คุณต้องสามารถให้บริการทั้งเวอร์ชันเก่าและเวอร์ชันใหม่ได้ในเวลาเดียวกัน ดูตัวอย่างว่าสิ่งนี้ส่งผลต่อคุณอย่างไรเมื่อใช้ Google App Engine

อีกวิธีหนึ่งที่คล้ายกันคือการใช้htaccess mod_rewriteเพื่อละเว้นบางส่วนของเส้นทางเมื่อให้บริการไฟล์ หน้าดัชนีที่ไม่เคยแคชของคุณอ้างอิงเส้นทางล่าสุดไปยังไฟล์

จากมุมมองของการพัฒนามันง่ายพอ ๆ กับการใช้ params สำหรับหมายเลขเวอร์ชัน แต่ก็แข็งแกร่งพอ ๆ กับวิธีการตั้งชื่อไฟล์

ใช้ส่วนที่ละเว้นของพา ธ สำหรับหมายเลขเวอร์ชันและเซิร์ฟเวอร์จะละเว้นมันและให้บริการไฟล์ที่ไม่ได้แคช

1.2.3/css/styles.cssทำหน้าที่ไฟล์เดียวกันcss/styles.cssเนื่องจากไดเร็กทอรีแรกถูกตัดและละเว้นโดยไฟล์ htaccess

รวมถึงไฟล์เวอร์ชัน

<?php
  $version = "1.2.3";
?>

<html>
  <head>
    <meta http-equiv="cache-control" content="max-age=0" />
    <meta http-equiv="cache-control" content="no-cache" />
    <meta http-equiv="expires" content="0" />
    <meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
    <meta http-equiv="pragma" content="no-cache" />
    <link rel="stylesheet" type="text/css" href="<?php echo $version ?>/css/styles.css">
  </head>
  <body>
    <script src="<?php echo $version ?>/js/main.js"></script>
  </body>
</html>

โปรดทราบว่าวิธีนี้หมายความว่าคุณต้องปิดการใช้งานการแคชของหน้าดัชนี - การใช้แท็ก <meta> เพื่อปิดการแคชในเบราว์เซอร์ทั้งหมดหรือไม่?

ไฟล์. htaccess

RewriteEngine On

# if you're requesting a file that exists, do nothing
RewriteCond %{REQUEST_FILENAME} !-f 
# likewise if a directory that exists, do nothing
RewriteCond %{REQUEST_FILENAME} !-d 

# otherwise, rewrite foo/bar/baz to bar/baz - ignore the first directory
RewriteRule ^[^/]+/(.+)$ $1 [L] 

คุณสามารถใช้แนวทางเดียวกันนี้บนแพลตฟอร์มเซิร์ฟเวอร์ใดก็ได้ที่อนุญาตให้เขียน URL ใหม่ได้

(เงื่อนไขการเขียนใหม่ที่ดัดแปลงมาจากmod_rewrite - เขียนไดเร็กทอรีใหม่เป็นสตริงการสืบค้นยกเว้น / #! / )

... และหากคุณต้องการการป้องกันแคชสำหรับหน้าดัชนี / จุดเข้าไซต์ของคุณคุณสามารถใช้ JavaSriptเพื่อรีเฟรชได้ตลอดเวลา

<script type="text/javascript">
// front end cache bust

var cacheBust = ['js/StrUtil.js', 'js/protos.common.js', 'js/conf.js', 'bootstrap_ECP/js/init.js'];   
for (i=0; i < cacheBust.length; i++){
     var el = document.createElement('script');
     el.src = cacheBust[i]+"?v=" + Math.random();
     document.getElementsByTagName('head')[0].appendChild(el);
}
</script> 

 <script>
    var storedSrcElements = [
         "js/exampleFile.js",
         "js/sampleFile.js",
         "css/style.css"
          ];

    var head= document.getElementsByTagName('head')[0];
    var script;
    var link;
    var versionNumberNew = 4.6;

    for(i=0;i<storedSrcElements.length;i++){
     script= document.createElement('script');
     script.type= 'text/javascript';
     script.src= storedSrcElements[i] + "?" + versionNumberNew;
     head.appendChild(script);
    }     


     </script> 


       ### Change the version number  (versionNumberNew) when you want the new files to be loaded  ###

หวังว่านี่จะช่วยให้คุณฉีดไฟล์ JS ภายนอกได้

<script type="text/javascript"> 
var cachebuster = Math.round(new Date().getTime() / 1000); 
document.write('<scr'+'ipt type="text/javascript" src="external.js?cb=' +cachebuster+'"></scr' + 'ipt>');
</script>

ที่มา - รหัสแคชบัสเตอร์ใน JavaScript