เป็นจริงหรือไม่ที่จะใช้ประโยชน์จากที่จัดเก็บในตัว HTML5 เพื่อจัดเก็บ CSS และ JavaScript

แนวคิดคือการใช้ประโยชน์จากที่จัดเก็บในตัว HTML5 เพื่อจัดเก็บ CSS และ JavaScript ที่เข้าถึงบ่อย

ตัวอย่างเช่น (หลอกรหัส):

var load_from_cdn = true;
ถ้า (ตรวจจับที่จัดเก็บในตัวเครื่อง)  
{
  ถ้า (แคชของ css พบ js)
  {
     โหลดแคชหน่วยเก็บข้อมูลภายใน
     load_from_cdn = false;
  }
}
ถ้า (load_from_cdn)
{
   document.write ( '<script> ...');
}

เป็นไปได้หรือเป็นจริง?

ฉันรู้แคชของเบราว์เซอร์จะยังคงมีการตรวจสอบการเข้าถึงส่วนหัวบางอย่าง
ฉันสมมติว่าไม่มีการเข้าถึง HTTP จะดีกว่า (ในความคิดของฉัน)

PS: ดูเหมือนว่าที่จัดเก็บในตัวเครื่องรองรับเฉพาะคู่ค่าคีย์บางคนสามารถพิสูจน์ได้หรือไม่
(ดีที่สุดกับตัวอย่างบางส่วน)

เป็นเรื่องปกติที่จะใช้หน่วยความจำภายในเพื่อจัดเก็บ JS และ CSS อย่างไรก็ตามที่จัดเก็บในตัวเครื่องมี 5M ต่อการ จำกัด โดเมน คุณอาจต้องทบทวนกลยุทธ์นี้อีกครั้ง

สำหรับเว็บเดสก์ท็อปคุณสามารถใช้แคชเบราว์เซอร์เริ่มต้นเพื่อทำเคล็ดลับ เพียงตั้งค่าการตอบสนอง JS & CSS HTTP ให้เป็นแคช มันง่ายและสะดวก

สำหรับเว็บบนมือถือเวลาในการตอบสนองสูง ดังนั้นการลดคำขอ HTTP จึงเป็นสิ่งสำคัญ ดังนั้นการมี JS & CSS ใน URL ภายนอกนั้นเหมาะสมที่สุด มันจะดีกว่ามากถ้ามี JS & CSS แบบอินไลน์ วิธีนี้จะลดคำขอ HTTP แต่ทำให้เนื้อหา HTML พอง แล้วไง? อย่างที่คุณพูดให้ใช้ที่เก็บข้อมูลในตัวเครื่อง!

เมื่อเบราว์เซอร์เดียวเข้าชมไซต์เป็นครั้งแรก JS & CSS จะถูกแทรกไว้ JS ยังมีงานอีกสองงาน: 1) จัดเก็บ JS & CSS ในที่จัดเก็บในตัวเครื่อง 2) ตั้งค่าคุกกี้เพื่อตั้งค่าสถานะว่า JS & CSS อยู่ในที่จัดเก็บในตัวเครื่อง

เมื่อเบราว์เซอร์เข้าถึงไซต์เป็นครั้งที่สองเซิร์ฟเวอร์จะได้รับคุกกี้และรู้ว่าเบราว์เซอร์นั้นมี JS & CSS ที่เกี่ยวข้องอยู่แล้ว ดังนั้นการแสดงผล HTML มี inline JS เพื่ออ่าน JS & CSS จากที่จัดเก็บในตัวเครื่องและแทรกลงในแผนผัง DOM

นี่เป็นแนวคิดพื้นฐานว่าการสร้างรุ่นมือถือของ bing.com เป็นอย่างไร คุณอาจต้องพิจารณาการควบคุมเวอร์ชัน JS & CSS เมื่อนำไปใช้ในการผลิต

ขอบคุณ

เบราว์เซอร์ไม่ได้ทำสิ่งนี้ให้คุณแล้วหรืออาจจะดีกว่า

ประเด็นคืออะไร?

มีเทคนิคที่ได้รับการยอมรับดีอยู่แล้วซึ่งเรียกว่าการแคชฝั่งไคลเอ็นต์ ที่เก็บข้อมูลในตัว HTML5 ทำให้อะไรในกรณีนี้แคชอะไรหายไป?

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

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

ในการตอบกลับการแก้ไขครั้งแรกของคุณ (การแก้ไขครั้งที่สองของคุณอยู่นอกหัวข้อ):

ฉันรู้แคชเบราว์เซอร์จะยังคงมีการตรวจสอบการเข้าถึงส่วนหัว

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

เมื่อให้ข้อมูลบางอย่างผ่าน HTTP คุณสามารถระบุส่วนหัวบางส่วนที่เกี่ยวข้องกับแคช:

• Last-Modified ระบุเมื่อเนื้อหามีการเปลี่ยนแปลง
• Expiresระบุเมื่อเบราว์เซอร์ต้องถามไปยังเซิร์ฟเวอร์หากเนื้อหาที่มีการเปลี่ยนแปลง

ส่วนหัวสองส่วนนั้นอนุญาตให้เบราว์เซอร์:

• หลีกเลี่ยงการดาวน์โหลดเนื้อหาซ้ำแล้วซ้ำอีก หากLast-Modifiedตั้งค่าเป็นเดือนที่แล้วและมีการดาวน์โหลดเนื้อหาวันนี้ไม่กี่ชั่วโมงก่อนหน้านี้ไม่จำเป็นต้องดาวน์โหลดอีกครั้ง
• หลีกเลี่ยงการสอบถามวันที่ไฟล์ถูกแก้ไขครั้งล่าสุด ถ้าExpiresของกิจการแคชเป็น 5 พฤษภาคม^TH 2014 คุณจะได้ไม่ต้องออก GET คำขอใด ๆ ทั้งในปี 2011 หรือในปี 2012 หรือปี 2013 นับตั้งแต่ที่คุณรู้ว่าแคชจะขึ้นไปวันที่

อันที่สองเป็นสิ่งจำเป็นสำหรับ CDNs เมื่อ Google ให้บริการJQueryแก่ผู้เยี่ยมชม Stack Overflow หรือcdn.sstatic.netให้บริการรูปภาพหรือสไตล์ชีตที่ใช้โดย Stack Overflow พวกเขาไม่ต้องการให้เบราว์เซอร์ค้นหารุ่นใหม่ทุกครั้ง แต่พวกเขากำลังให้บริการไฟล์เหล่านั้นเพียงครั้งเดียวตั้งวันที่หมดอายุให้นานพอและนั่นคือทั้งหมด

ต่อไปนี้เป็นตัวอย่างภาพหน้าจอของสิ่งที่เกิดขึ้นเมื่อฉันมาที่หน้าแรกของ Stack Overflow:

มี 15 ไฟล์ให้บริการ แต่304 Not Modifiedคำตอบทั้งหมดนั้นอยู่ที่ไหน คุณมีคำขอเนื้อหาที่เปลี่ยนแปลงสามครั้งเท่านั้น สำหรับทุกสิ่งทุกอย่างเบราว์เซอร์ที่ใช้ในรุ่นที่เก็บไว้โดยไม่มีการร้องขอใด ๆ ไปยังเซิร์ฟเวอร์ใด

สรุปคุณจริงๆต้องคิดอย่างรอบคอบก่อนที่จะใช้กลไกแคชของคุณเองและโดยเฉพาะอย่างยิ่งพบว่าสถานการณ์ดีที่นี้จะมีประโยชน์ ที่ผมกล่าวว่าที่จุดเริ่มต้นของคำตอบของฉันที่ฉันสามารถหาเพียงหนึ่งเดียวที่คุณจะให้บริการ chunks ของ JavaScript เพื่อใช้พวกเขาผ่าน, eval()OMG, แต่ในกรณีนี้ฉันค่อนข้างมั่นใจว่ามีวิธีที่ดีกว่าซึ่งก็คือ:

• มีประสิทธิภาพมากขึ้นโดยใช้เทคนิคแคชมาตรฐานหรือ
• บำรุงรักษาง่ายกว่า

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

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

นอกจากนี้คุณต้องใช้รหัสในหน้าต่อไปเพื่อโหลดจากที่จัดเก็บในตัว HTML5 ดังนั้นเพียงวาง JS ทั้งหมดของคุณไว้ในไฟล์ JS ภายนอกที่สามารถเข้าถึงได้

แทนที่จะใช้ล้อหมุนใหม่ให้ใช้ฟังก์ชันการทำงานออฟไลน์ HTML5: http://www.whatwg.org/specs/web-apps/current-work/multipage/offline.html

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

คุณสามารถเปรียบเทียบเบราว์เซอร์มาตรฐานเปรียบเทียบกับโซลูชัน HTML5 ที่ทำด้วยมือ แต่เดิมพันของฉันคือการแคชพื้นเมืองจะเอาชนะกางเกงออก

การใช้ localStorage นั้นรวดเร็ว (er)! การทดสอบของฉันแสดงให้เห็น

• กำลังโหลด jQuery จาก CDN: Chrome 268ms , FireFox: 200ms
• กำลังโหลด jQuery จาก localStorage: Chrome 47ms , FireFox 14ms

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

หากคุณต้องการทดสอบผลลัพธ์ของฉันฉันสร้างห้องสมุดขนาดเล็กที่เก็บสคริปต์ใน localStorage ลองดูที่ Github https://github.com/webpgr/cached-webpgr.jsหรือเพียงแค่คัดลอกจากตัวอย่างด้านล่าง

ห้องสมุดที่สมบูรณ์:

function _cacheScript(c,d,e){var a=new XMLHttpRequest;a.onreadystatechange=function(){4==a.readyState&&(200==a.status?localStorage.setItem(c,JSON.stringify({content:a.responseText,version:d})):console.warn("error loading "+e))};a.open("GET",e,!0);a.send()}function _loadScript(c,d,e,a){var b=document.createElement("script");b.readyState?b.onreadystatechange=function(){if("loaded"==b.readyState||"complete"==b.readyState)b.onreadystatechange=null,_cacheScript(d,e,c),a&&a()}:b.onload=function(){_cacheScript(d,e,c);a&&a()};b.setAttribute("src",c);document.getElementsByTagName("head")[0].appendChild(b)}function _injectScript(c,d,e,a){var b=document.createElement("script");b.type="text/javascript";c=JSON.parse(c);var f=document.createTextNode(c.content);b.appendChild(f);document.getElementsByTagName("head")[0].appendChild(b);c.version!=e&&localStorage.removeItem(d);a&&a()}function requireScript(c,d,e,a){var b=localStorage.getItem(c);null==b?_loadScript(e,c,d,a):_injectScript(b,c,d,a)};

กำลังเรียกไลบรารี

requireScript('jquery', '1.11.2', 'http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js', function(){
    requireScript('examplejs', '0.0.3', 'example.js');
});