ผู้ให้บริการเบราว์เซอร์และผู้เชี่ยวชาญด้านประสิทธิภาพเว็บต่างพูดกันมาตลอดทศวรรษที่ผ่านมาว่า localStorage ช้า และนักพัฒนาเว็บควรเลิกใช้
จริงๆ แล้วผู้ที่พูดเช่นนี้ไม่ได้ผิด localStorage เป็น API แบบซิงค์ที่บล็อกเธรดหลัก และทุกครั้งที่คุณเข้าถึง API นี้ ก็อาจทำให้หน้าเว็บของคุณไม่โต้ตอบได้
ปัญหาคือ localStorage API นั้นใช้งานง่ายมาก และทางเลือกแบบไม่พร้อมกันเพียงอย่างเดียวของ localStorage คือ IndexedDB ซึ่ง (ยอมรับกันตามตรง) ไม่ได้ขึ้นชื่อเรื่องความใช้งานง่ายหรือเป็น API ที่เข้าถึงได้ง่าย
ดังนั้น นักพัฒนาแอปจึงมีทางเลือกระหว่างสิ่งที่ใช้งานยากกับสิ่งที่ส่งผลเสียต่อประสิทธิภาพ แม้ว่าจะมีไลบรารีที่มีความเรียบง่ายของ localStorage API ขณะใช้ API พื้นที่เก็บข้อมูลแบบแอซิงโครนัสอยู่เบื้องหลัง แต่การรวมไลบรารีดังกล่าวไว้ในแอปก็อาจมีค่าใช้จ่ายด้านขนาดไฟล์และอาจกินงบประมาณด้านประสิทธิภาพ
แต่จะเกิดอะไรขึ้นหากคุณสามารถรับประสิทธิภาพของ API ที่เก็บข้อมูลแบบแอซิงโครนัสที่ใช้งานง่ายของ localStorage API ได้โดยไม่ต้องเสียค่าใช้จ่ายเกี่ยวกับขนาดไฟล์
เร็วๆ นี้อาจมี Chrome กำลังทดสอบฟีเจอร์ใหม่ที่เรียกว่าโมดูลในตัว และโมดูลแรกที่วางแผนจะเปิดตัวคือโมดูลพื้นที่เก็บข้อมูลคีย์/ค่าแบบแอซิงโครนัสที่เรียกว่า KV Storage
แต่ก่อนที่จะลงรายละเอียดเกี่ยวกับโมดูลพื้นที่เก็บข้อมูล KV เราขออธิบายความหมายของโมดูลในตัว
โมดูลในตัวคืออะไร
โมดูลในตัวทำงานเหมือนกับโมดูล JavaScript ทั่วไป ยกเว้นว่าไม่ต้องดาวน์โหลดเนื่องจากมาพร้อมกับเบราว์เซอร์
เช่นเดียวกับ Web API แบบดั้งเดิม โมดูลในตัวต้องผ่านกระบวนการมาตรฐาน โดยแต่ละโมดูลจะมีข้อกำหนดเฉพาะของตนเองที่ต้องมีการตรวจสอบการออกแบบและการสนับสนุนเชิงบวกจากทั้งนักพัฒนาเว็บและผู้ให้บริการเบราว์เซอร์รายอื่นๆ ก่อนจึงจะพร้อมใช้งาน (ใน Chrome โมดูลในตัวจะเป็นไปตามกระบวนการเปิดตัวเดียวกันกับที่เราใช้ติดตั้งใช้งานและเผยแพร่ API ใหม่ทั้งหมด)
โมดูลในตัวจะไม่แสดงในขอบเขตส่วนกลาง ซึ่งต่างจาก Web API แบบดั้งเดิม โดยจะใช้งานได้ผ่านการนําเข้าเท่านั้น
การไม่แสดงโมดูลในตัวทั่วโลกมีข้อดีหลายประการ เช่น จะไม่เพิ่มค่าใช้จ่ายในการเริ่มต้นบริบทรันไทม์ JavaScript ใหม่ (เช่น แท็บใหม่ เวิร์กเกอร์ หรือ Service Worker) และจะไม่ใช้หน่วยความจำหรือ CPU เว้นแต่จะมีการนําเข้าจริงๆ นอกจากนี้ ตัวแปรเหล่านี้จะไม่เสี่ยงที่จะเกิดชื่อซ้ำกับตัวแปรอื่นๆ ที่กําหนดไว้ในโค้ด
หากต้องการนําเข้าโมดูลในตัว ให้ใช้คํานําหน้า std: ตามด้วยตัวระบุของโมดูลในตัว ตัวอย่างเช่น ในเบราว์เซอร์ที่รองรับ คุณสามารถนําเข้าโมดูลพื้นที่เก็บข้อมูล KV ด้วยโค้ดต่อไปนี้ (ดูวิธีใช้ Polyfill ของพื้นที่เก็บข้อมูล KV ในเบราว์เซอร์ที่ไม่รองรับด้านล่าง)
import storage, {StorageArea} from 'std:kv-storage';
โมดูลพื้นที่เก็บข้อมูล KV
โมดูลพื้นที่เก็บข้อมูล KV มีความเรียบง่ายคล้ายกับ localStorage API แต่รูปแบบ API นั้นคล้ายกับ JavaScript Map มากกว่า
แทนที่จะเป็น getItem()
setItem()
และ removeItem()
จะมี get()
set()
และ delete()
นอกจากนี้ ยังมีเมธอดอื่นๆ ที่คล้ายกับแผนที่ซึ่ง localStorage ไม่สามารถใช้ได้ เช่น
keys(),
values() และ
entries()
และเช่นเดียวกับ Map คีย์ของเมธอดเหล่านี้ไม่จำเป็นต้องเป็นสตริง โดยอาจเป็นประเภทที่ซีเรียลไลซ์ได้แบบมีโครงสร้างก็ได้
ซึ่งต่างจาก Map ตรงที่เมธอดทั้งหมดของ KV Storage จะแสดงผลเป็น Promise หรือ ตัวจัดเรียงแบบไม่พร้อมกัน (เนื่องจากจุดประสงค์หลักของโมดูลนี้คือการทำงานแบบไม่พร้อมกัน ซึ่งต่างจาก localStorage) หากต้องการดูรายละเอียด API แบบเต็ม โปรดดูข้อกำหนด
ดังที่คุณอาจสังเกตได้จากตัวอย่างโค้ดด้านบน โมดูลพื้นที่เก็บข้อมูล KV มีการส่งออกเริ่มต้น 1 รายการ storage และการส่งออกที่มีชื่อ 1 รายการ StorageArea
storage คืออินสแตนซ์ของคลาส StorageArea ที่มีชื่อ 'default' และเป็นคลาดที่ผู้พัฒนาแอปจะใช้บ่อยที่สุดในโค้ดแอปพลิเคชัน คลาส StorageArea มีไว้สําหรับกรณีที่จําเป็นต้องมีการแยกเพิ่มเติม (เช่น ไลบรารีของบุคคลที่สามที่จัดเก็บข้อมูลและต้องไม่ให้เกิดข้อขัดแย้งกับข้อมูลที่จัดเก็บผ่านอินสแตนซ์ storage เริ่มต้น) ระบบจะจัดเก็บข้อมูล StorageArea ในฐานข้อมูล IndexedDB ที่มีชื่อ kv-storage:${name} โดยที่ชื่อคือชื่ออินสแตนซ์ StorageArea
ตัวอย่างวิธีใช้โมดูลพื้นที่เก็บข้อมูล KV ในโค้ดมีดังนี้
import storage from 'std:kv-storage';
const main = async () => {
const oldPreferences = await storage.get('preferences');
document.querySelector('form').addEventListener('submit', async () => {
const newPreferences = Object.assign({}, oldPreferences, {
// Updated preferences go here...
});
await storage.set('preferences', newPreferences);
});
};
main();
จะเกิดอะไรขึ้นหากเบราว์เซอร์ไม่รองรับโมดูลในตัว
หากคุณคุ้นเคยกับการใช้โมดูล JavaScript เดิมในเบราว์เซอร์ ก็น่าจะทราบว่า (อย่างน้อยก็จนถึงตอนนี้) การนําเข้าสิ่งอื่นที่ไม่ใช่ URL จะทำให้เกิดข้อผิดพลาด และ std:kv-storage ไม่ใช่ URL ที่ถูกต้อง
คำถามที่ตามมาคือ เราต้องรอจนกว่าเบราว์เซอร์ทั้งหมดจะรองรับโมดูลในตัวก่อนจึงจะใช้ในโค้ดได้ไหม โชคดีที่คำตอบคือไม่
คุณสามารถใช้โมดูลในตัวได้ทันทีที่เบราว์เซอร์อย่างน้อย 1 เบราว์เซอร์รองรับ เนื่องด้วยความช่วยเหลือของฟีเจอร์อื่นที่เรากำลังทดสอบอยู่ ซึ่งเรียกว่าการนําเข้าแผนที่
นำเข้าแผนที่
แผนที่การนําเข้าเป็นกลไกที่นักพัฒนาแอปสามารถใช้แทนที่ตัวระบุการนําเข้าด้วยตัวระบุอื่นอย่างน้อย 1 รายการ
ซึ่งมีประสิทธิภาพเนื่องจากช่วยให้คุณเปลี่ยนแปลง (ขณะรันไทม์) วิธีที่เบราว์เซอร์แก้ไขตัวระบุการนําเข้าที่เฉพาะเจาะจงในแอปพลิเคชันทั้งหมดได้
ในกรณีของโมดูลในตัว ตัวเลือกนี้จะอนุญาตให้คุณอ้างอิง polyfill ของโมดูลในโค้ดแอปพลิเคชัน แต่เบราว์เซอร์ที่รองรับโมดูลในตัวจะโหลดเวอร์ชันนั้นแทน
วิธีประกาศแผนที่การนําเข้าเพื่อให้ทํางานกับโมดูลพื้นที่เก็บข้อมูล KV มีดังนี้
<!-- The import map is inlined into your page -->
<script type="importmap">
{
"imports": {
"/path/to/kv-storage-polyfill.mjs": [
"std:kv-storage",
"/path/to/kv-storage-polyfill.mjs"
]
}
}
</script>
<!-- Then any module scripts with import statements use the above map -->
<script type="module">
import storage from '/path/to/kv-storage-polyfill.mjs';
// Use `storage` ...
</script>
ประเด็นสำคัญในโค้ดด้านบนคือ URL /path/to/kv-storage-polyfill.mjs ได้รับการแมปกับทรัพยากรที่แตกต่างกัน 2 รายการ ได้แก่ std:kv-storage และ URL เดิม /path/to/kv-storage-polyfill.mjs
ดังนั้นเมื่อเบราว์เซอร์พบคำสั่งการนําเข้าที่อ้างอิง URL นั้น (/path/to/kv-storage-polyfill.mjs) ระบบจะพยายามโหลด std:kv-storage ก่อน หากโหลดไม่ได้ ก็จะเปลี่ยนไปโหลด /path/to/kv-storage-polyfill.mjs
อีกครั้ง เคล็ดลับคือเบราว์เซอร์ไม่จําเป็นต้องรองรับแผนที่การนําเข้าหรือโมดูลในตัวเพื่อให้เทคนิคนี้ทํางานได้ เนื่องจาก URL ที่ส่งไปยังคำสั่งนําเข้าคือ URL ของ polyfill โพลีฟิลล์ไม่ใช่ทางเลือกสำรอง แต่เป็นค่าเริ่มต้น โมดูลในตัวเป็นการเพิ่มประสิทธิภาพแบบก้าวหน้า
แล้วเบราว์เซอร์ที่ไม่รองรับข้อบังคับนี้เลยล่ะ
หากต้องการใช้แผนที่การนําเข้าเพื่อโหลดโมดูลในตัวแบบมีเงื่อนไข คุณต้องใช้งานคำสั่ง import จริง ซึ่งหมายความว่าคุณต้องใช้สคริปต์โมดูลด้วย เช่น <script type="module">
ปัจจุบันเบราว์เซอร์มากกว่า 80% รองรับโมดูล ส่วนเบราว์เซอร์ที่ไม่รองรับ คุณสามารถใช้เทคนิค module/nomodule เพื่อแสดงกลุ่มเดิม โปรดทราบว่าเมื่อสร้างบิลด์ nomodule คุณจะต้องรวมโพลีไฟล์ทั้งหมดไว้ด้วย เนื่องจากคุณทราบดีว่าเบราว์เซอร์ที่ไม่รองรับโมดูลจะไม่รองรับโมดูลในตัวอย่างแน่นอน
การสาธิตพื้นที่เก็บข้อมูล KV
เราได้จัดทำตัวอย่างที่รวมเทคนิคทั้งหมดที่อธิบายไว้ข้างต้นและทำงานได้ในเบราว์เซอร์ทั้งหมดในปัจจุบัน เพื่อแสดงให้เห็นว่าคุณสามารถใช้งานโมดูลในตัวได้ในขณะที่ยังคงรองรับเบราว์เซอร์รุ่นเก่า
- เบราว์เซอร์ที่รองรับโมดูล แผนที่การนําเข้า และโมดูลในตัวจะไม่โหลดโค้ดที่ไม่จําเป็น
- เบราว์เซอร์ที่รองรับโมดูลและแผนที่การนําเข้า แต่ไม่รองรับโมดูลในตัวจะโหลด Polyfill ของพื้นที่เก็บข้อมูล KV (ผ่านโปรแกรมโหลดโมดูลของเบราว์เซอร์)
- เบราว์เซอร์ที่รองรับโมดูลแต่ไม่รองรับแผนที่การนําเข้าจะโหลดโพลีไฟล์ KV Storage ด้วย (ผ่านโปรแกรมโหลดโมดูลของเบราว์เซอร์)
- เบราว์เซอร์ที่ไม่รองรับโมดูลเลยจะได้รับ Polyfill ของพื้นที่เก็บข้อมูล KV ในแพ็กเกจเดิม (โหลดผ่าน
<script nomodule>)
เดโมนี้โฮสต์อยู่บน Glitch คุณจึงดูซอร์สโค้ดได้ นอกจากนี้ เรายังมีคำอธิบายโดยละเอียดเกี่ยวกับการติดตั้งใช้งานในREADME โปรดดูหากอยากรู้ว่าเราสร้างแอปนี้ขึ้นมาได้อย่างไร
หากต้องการดูการทำงานของโมดูลในตัวจริง คุณต้องโหลดการสาธิตใน Chrome เวอร์ชัน 74 ขึ้นไปโดยเปิดใช้ Flag ฟีเจอร์แพลตฟอร์มเว็บเวอร์ชันทดลอง (chrome://flags/#enable-experimental-web-platform-features)
คุณสามารถยืนยันว่าระบบกําลังโหลดโมดูลในตัวอยู่เนื่องจากคุณไม่เห็นสคริปต์ polyfill ในแผงแหล่งที่มาในเครื่องมือสําหรับนักพัฒนาซอฟต์แวร์ แต่จะเห็นเวอร์ชันโมดูลในตัวแทน (ข้อเท็จจริงที่น่าสนใจ: คุณตรวจสอบโค้ดต้นทางของโมดูลหรือวางจุดหยุดพักในโค้ดนั้นได้)
โปรดแสดงความคิดเห็น
ข้อมูลเบื้องต้นนี้น่าจะช่วยให้คุณเห็นภาพว่าโมดูลในตัวอาจทําสิ่งใดได้บ้าง เราหวังว่าคุณจะตื่นเต้นกับข่าวนี้ เราอยากให้นักพัฒนาซอฟต์แวร์ลองใช้โมดูลพื้นที่เก็บข้อมูล KV (รวมถึงฟีเจอร์ใหม่ทั้งหมดที่พูดถึงที่นี่) และแสดงความคิดเห็นให้เราทราบ
ต่อไปนี้คือลิงก์ GitHub ที่คุณใช้ส่งความคิดเห็นเกี่ยวกับฟีเจอร์แต่ละรายการที่กล่าวถึงในบทความนี้ได้
หากปัจจุบันเว็บไซต์ของคุณใช้ localStorage คุณควรลองเปลี่ยนไปใช้ KV Storage API เพื่อดูว่า API ดังกล่าวตรงกับความต้องการทั้งหมดของคุณหรือไม่ และหากลงชื่อสมัครใช้ช่วงทดลองใช้ต้นทางของ KV Storage คุณจะใช้งานฟีเจอร์เหล่านี้ได้จริงในวันนี้ ผู้ใช้ทุกคนจะได้รับประโยชน์จากประสิทธิภาพพื้นที่เก็บข้อมูลที่ดียิ่งขึ้น และผู้ใช้ Chrome 74 ขึ้นไปจะไม่ต้องเสียค่าใช้จ่ายเพิ่มเติมสำหรับการดาวน์โหลด