Typed Arrays

Typed Arrays: จัดการ Binary Data อย่างมีประสิทธิภาพใน JavaScript

ใน JavaScript การทำงานกับข้อมูลไบนารี (binary data) โดยทั่วไปจะทำผ่าน arrays ทั่วไป ซึ่งเก็บข้อมูลเป็นตัวเลขทศนิยม 64 บิต (double-precision floating-point numbers) ตามมาตรฐาน IEEE 754 แม้ว่าจะใช้งานได้ แต่ก็ไม่มีประสิทธิภาพเท่าที่ควรเมื่อต้องจัดการกับข้อมูลไบนารีขนาดใหญ่ เช่น ข้อมูลภาพ เสียง หรือวิดีโอ Typed Arrays ถูกออกแบบมาเพื่อแก้ไขปัญหานี้ โดยเป็นโครงสร้างข้อมูลที่ให้คุณเข้าถึงและจัดการข้อมูลไบนารีได้อย่างมีประสิทธิภาพมากขึ้น

เหตุผลเบื้องหลัง Typed Arrays

ก่อนที่จะเจาะลึกรายละเอียด เรามาพิจารณาเหตุผลเชิงออกแบบที่ทำให้ Typed Arrays มีความสำคัญ:

• ประสิทธิภาพ: Typed Arrays เก็บข้อมูลเป็นชนิดข้อมูลเฉพาะเจาะจง (เช่น integer 8 บิต, unsigned integer 16 บิต, float 32 บิต) ทำให้ประมวลผลได้เร็วกว่า arrays ทั่วไปที่เก็บข้อมูลเป็น double-precision floating-point numbers ทั้งหมด
• การเข้าถึงข้อมูลโดยตรง: Typed Arrays ให้คุณเข้าถึงข้อมูลไบนารีได้โดยตรงในรูปแบบที่กำหนดไว้ ซึ่งมีประโยชน์มากสำหรับการทำงานกับ APIs ที่ต้องการข้อมูลในรูปแบบเฉพาะ เช่น WebGL หรือ Web Audio API
• การจัดการหน่วยความจำ: Typed Arrays ช่วยให้คุณจัดการหน่วยความจำได้อย่างมีประสิทธิภาพมากขึ้น โดยคุณสามารถกำหนดขนาดของหน่วยความจำที่ต้องการล่วงหน้า และมั่นใจได้ว่าข้อมูลจะถูกเก็บไว้ในรูปแบบที่เหมาะสม

Trade-off ที่ต้องพิจารณาคือ Typed Arrays มีความยืดหยุ่นน้อยกว่า arrays ทั่วไป คุณต้องกำหนดชนิดข้อมูลและขนาดของ Typed Array ล่วงหน้า และไม่สามารถเพิ่มหรือลดขนาดของ Typed Array ได้หลังจากสร้างแล้ว

ArrayBuffer: พื้นฐานของ Typed Arrays

ArrayBuffer เป็นอ็อบเจ็กต์ที่แสดงถึงพื้นที่หน่วยความจำดิบ (raw memory buffer) ที่ใช้เก็บข้อมูลไบนารี คุณไม่สามารถเข้าถึงข้อมูลใน ArrayBuffer ได้โดยตรง แต่ต้องใช้ Typed Array view เพื่อตีความข้อมูลใน ArrayBuffer ในรูปแบบที่ต้องการ

// สร้าง ArrayBuffer ขนาด 16 ไบต์
const buffer = new ArrayBuffer(16);

console.log(buffer.byteLength); // Output: 16

ในตัวอย่างนี้ เราสร้าง ArrayBuffer ที่มีขนาด 16 ไบต์ พื้นที่หน่วยความจำนี้ยังว่างเปล่าและยังไม่ได้ถูกตีความในรูปแบบใดๆ

Typed Array Views: ตีความข้อมูลใน ArrayBuffer

Typed Array views เป็นอ็อบเจ็กต์ที่ให้คุณเข้าถึงและจัดการข้อมูลใน ArrayBuffer ในรูปแบบของชนิดข้อมูลเฉพาะเจาะจง JavaScript มี Typed Array views หลายประเภท แต่ละประเภทใช้สำหรับตีความข้อมูลใน ArrayBuffer ในรูปแบบที่แตกต่างกัน:

• Int8Array: Signed 8-bit integers
• Uint8Array: Unsigned 8-bit integers
• Uint8ClampedArray: Unsigned 8-bit integers clamped between 0 and 255
• Int16Array: Signed 16-bit integers
• Uint16Array: Unsigned 16-bit integers
• Int32Array: Signed 32-bit integers
• Uint32Array: Unsigned 32-bit integers
• Float32Array: 32-bit floating-point numbers
• Float64Array: 64-bit floating-point numbers
• BigInt64Array: Signed 64-bit integers (BigInt)
• BigUint64Array: Unsigned 64-bit integers (BigInt)

ในการสร้าง Typed Array view คุณต้องระบุ ArrayBuffer ที่ต้องการใช้ และอาจระบุ offset และ length เพื่อกำหนดส่วนของ ArrayBuffer ที่ Typed Array view จะเข้าถึง

// สร้าง ArrayBuffer ขนาด 8 ไบต์
const buffer = new ArrayBuffer(8);

// สร้าง Int32Array view ที่เข้าถึงข้อมูลทั้งหมดใน ArrayBuffer
const int32View = new Int32Array(buffer);

// กำหนดค่าให้กับองค์ประกอบแรกของ Int32Array
int32View[0] = 42;

console.log(int32View[0]); // Output: 42

// สร้าง Uint8Array view ที่เข้าถึงข้อมูลทั้งหมดใน ArrayBuffer
const uint8View = new Uint8Array(buffer);

console.log(uint8View[0]); // Output: 42 (แปลงจาก 32 บิต เป็น 8 บิต)

ในตัวอย่างนี้ เราสร้าง Int32Array view และ Uint8Array view ที่ใช้ ArrayBuffer เดียวกัน เมื่อเรากำหนดค่า 42 ให้กับองค์ประกอบแรกของ Int32Array view, Uint8Array view ก็จะเห็นค่า 42 ด้วย แต่ถูกตีความเป็น unsigned 8-bit integer

DataView: ควบคุมการเข้าถึงข้อมูลอย่างละเอียด

DataView เป็นอีกวิธีหนึ่งในการเข้าถึงและจัดการข้อมูลใน ArrayBuffer แต่แตกต่างจาก Typed Array views ตรงที่ DataView ให้คุณควบคุมชนิดข้อมูลและ endianness (ลำดับไบต์) ของข้อมูลที่อ่านและเขียนได้อย่างละเอียด

// สร้าง ArrayBuffer ขนาด 8 ไบต์
const buffer = new ArrayBuffer(8);

// สร้าง DataView ที่เข้าถึงข้อมูลทั้งหมดใน ArrayBuffer
const dataView = new DataView(buffer);

// เขียน signed 32-bit integer ที่ offset 0
dataView.setInt32(0, 42, true); // true คือ little-endian

// อ่าน signed 32-bit integer ที่ offset 0
const value = dataView.getInt32(0, true);

console.log(value); // Output: 42

ในตัวอย่างนี้ เราใช้ DataView เพื่อเขียน signed 32-bit integer (42) ลงใน ArrayBuffer ที่ offset 0 โดยระบุ endianness เป็น little-endian จากนั้นเราอ่านค่ากลับมาโดยใช้ getInt32() พร้อมระบุ endianness เป็น little-endian เช่นกัน

DataView มีประโยชน์มากเมื่อคุณต้องทำงานกับข้อมูลไบนารีที่มีโครงสร้างที่ซับซ้อน หรือเมื่อคุณต้องทำงานกับข้อมูลที่มาจากระบบที่มี endianness ที่แตกต่างกัน

แนวปฏิบัติที่ดีในการใช้งาน Typed Arrays

ต่อไปนี้เป็นแนวปฏิบัติที่ดีบางประการในการใช้งาน Typed Arrays:

• เลือกชนิดข้อมูลที่เหมาะสม: เลือกชนิดข้อมูลที่เหมาะสมกับประเภทของข้อมูลที่คุณกำลังทำงานด้วย ตัวอย่างเช่น หากคุณกำลังทำงานกับข้อมูลภาพ grayscale ให้ใช้ Uint8Array หากคุณกำลังทำงานกับข้อมูลเสียง ให้ใช้ Float32Array
• ใช้ Typed Arrays เมื่อจำเป็น: Typed Arrays มีประสิทธิภาพมากกว่า arrays ทั่วไปในการจัดการข้อมูลไบนารี แต่ก็มีความยืดหยุ่นน้อยกว่า ใช้ Typed Arrays เฉพาะเมื่อคุณต้องการประสิทธิภาพสูงสุด
• ระมัดระวังเรื่อง endianness: เมื่อใช้ DataView ให้ระมัดระวังเรื่อง endianness และตรวจสอบให้แน่ใจว่าคุณอ่านและเขียนข้อมูลด้วย endianness ที่ถูกต้อง
• จัดการหน่วยความจำอย่างระมัดระวัง: Typed Arrays ใช้หน่วยความจำโดยตรง ดังนั้นจึงเป็นสิ่งสำคัญที่จะต้องจัดการหน่วยความจำอย่างระมัดระวัง หลีกเลี่ยงการสร้าง Typed Arrays ขนาดใหญ่โดยไม่จำเป็น และปล่อยหน่วยความจำเมื่อไม่ใช้งานแล้ว

สรุป

Typed Arrays เป็นเครื่องมือที่มีประสิทธิภาพสำหรับการจัดการข้อมูลไบนารีใน JavaScript ด้วยการทำความเข้าใจ ArrayBuffer, Typed Array views และ DataView คุณสามารถเขียนโค้ดที่มีประสิทธิภาพมากขึ้นสำหรับการทำงานกับข้อมูลภาพ เสียง วิดีโอ และข้อมูลไบนารีอื่นๆ ในบทความถัดไป เราจะพูดถึง Atomics ซึ่งเป็นเครื่องมือสำหรับการจัดการ shared memory ในสภาพแวดล้อม multi-threaded