CodeQuiz EP.34 - Cache คืออะไร? ทำไมเปิดเว็บครั้งที่สองเร็วกว่าครั้งแรก

สาระสำคัญ

เคยสงสัยป่ะว่าทำไมเปิดเว็บครั้งแรกช้า แต่ครั้งที่สองโหลดวืดเลย คำตอบคือเพื่อนรักของ programmer ที่ชื่อ Cache คือที่เก็บของชั่วคราวที่เคยดึงมาแล้ว วันนี้จะอธิบายผ่านตู้เย็นในครัว ให้เห็นภาพแบบไม่ต้องเปิด textbook

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

Cache เป็นไอเดียที่ฝังอยู่ทั่วทุกที่ในคอม ตั้งแต่ CPU (สมองหลักของคอม) ไปจนถึง browser ไปจนถึงระบบหลังบ้านยักษ์ ๆ ของ Netflix เลยอะ วันนี้เราจะมาเล่าให้ฟังแบบไม่ต้องเรียนวิศวะก็เก็ทแน่นอน

TLDR

Cache คือที่เก็บของชั่วคราวที่อยู่ใกล้กว่าและเร็วกว่าของจริง ใช้เก็บผลลัพธ์ที่เคยดึงมาแล้วเอาไว้ก่อน ครั้งหน้าจะได้ไม่ต้องเดินทางไกลไปดึงใหม่

เทียบกับตู้เย็นที่บ้านก็ได้ ง่ายกว่ากันเยอะ

Cache คือตู้เย็นในครัว ไม่ใช่ห้างใหญ่ ๆ ที่อยู่ในเมือง

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

Cache ทำหน้าที่เหมือนตู้เย็นเป๊ะ ไฟล์หรือข้อมูลที่ใช้บ่อย เช่น โลโก้เว็บ รูปโปรไฟล์ CSS (ภาษาที่กำหนดหน้าตาเว็บ) จะถูกเก็บไว้ใกล้ ๆ ครั้งหน้าจะได้ไม่ต้องไปลากกลับมาจาก server ที่อยู่อีกซีกโลก

แล้วทำไมต้อง cache ในเมื่ออินเทอร์เน็ตก็เร็วอยู่แล้ว

เร็วของเรามันก็มีลิมิตของมันอยู่นะ การส่งข้อมูลข้ามทวีปยังไงก็มี latency (เวลาเดินทางของข้อมูลไปกลับ) อย่างน้อย 100 ms อะ ลองคูณกับไฟล์ทั้งเว็บเป็น 50 ไฟล์ดู ก็ปาเข้าไป 5 วินาทีแล้ว

Cache เลยมาช่วยลดเวลานี้แบบเทพ browser จะเช็กก่อนว่าไฟล์นี้เคยโหลดแล้วป่ะ ถ้าเคยและยังไม่หมดอายุ ก็หยิบจาก disk (พื้นที่เก็บข้อมูลถาวรในเครื่อง) ของเราเลย ใช้เวลาเป็นมิลลิวินาที ไม่ใช่วินาที

Cache จริง ๆ มีซ้อนกันเป็นชั้น ๆ เลย

ในคอมเครื่องเดียวกันก็มี cache หลายชั้นซ้อนกันอยู่อะ ลองนึกภาพหัวหอม

• L1 cache: อยู่ติดกับ CPU เลย เร็วโคตร แต่เล็กมาก หลัก KB เท่านั้น
• L2 กับ L3 cache: ใหญ่ขึ้นหน่อย อยู่ห่างจาก CPU ขึ้นนิด
• RAM (หน่วยความจำหลักของเครื่อง): เก็บเยอะกว่าแต่ช้ากว่า cache ใน CPU
• Disk cache: ที่ browser เก็บไฟล์เว็บไว้ใน SSD เครื่องเรา
• CDN (Content Delivery Network คือเครือข่าย server ที่กระจายอยู่ทั่วโลก): cache อยู่ที่เซิร์ฟเวอร์ใกล้บ้านผู้ใช้

ยิ่งใกล้ CPU ยิ่งเร็ว แต่ก็ยิ่งแพงและเล็ก เลยต้องเลือกเก็บแค่ของที่ใช้บ่อยจริง ๆ ที่เหลือก็ปล่อยให้นอนรออยู่ที่อื่น

แล้วถ้าของใน cache มันเก่าแล้วจะทำไง

นี่คือปัญหาคลาสสิกของ cache เลย เรียกกันว่า cache invalidation (การทำให้ของที่เก็บไว้หมดอายุ) ของในตู้เย็นยังบูดได้ ของใน cache ก็เหมือนกัน อยู่ ๆ ก็ outdate เฉย

วิธีแก้ที่นิยมก็มีไม่กี่แบบ

• TTL (Time To Live คือกำหนดวันหมดอายุของข้อมูล): บอกว่าเก็บได้กี่วินาที พ้นนั้นทิ้งทันที
• ETag: ป้ายเวอร์ชั่นของไฟล์ ถ้า server บอกว่ามีของใหม่กว่าค่อยโหลดใหม่ ถ้ายังเหมือนเดิมก็ใช้ของเดิม
• Hard refresh (กด Ctrl+Shift+R บน browser): สั่งให้ทิ้ง cache แล้วโหลดสด ๆ ทันที

ลองเขียน cache ง่าย ๆ ดูเอง

ใน JavaScript เราเขียน cache แบบมือเปล่าได้เลยด้วย Map (โครงสร้างเก็บข้อมูลแบบคู่ key กับ value)

1
2
3
4
5
6
7
8
9
10
const cache = new Map()

function getUser(id) {
  if (cache.has(id)) {
    return cache.get(id)
  }
  const user = fetchFromDatabase(id)
  cache.set(id, user)
  return user
}

ครั้งแรกที่เรียก getUser(7) จะวิ่งไปดึงจาก database (ฐานข้อมูลที่เก็บข้อมูลถาวร) ครั้งสองเป็นต้นไปคืน user จาก Map ในเครื่องเลย เร็วขึ้นเป็นสิบเท่าง่าย ๆ

Cool fact ก่อนปิดท้าย

Phil Karlton ผู้ใหญ่ในวงการเคยกล่าวไว้ว่า มีอยู่ 2 อย่างที่ยากที่สุดใน computer science นั่นคือ cache invalidation, naming things, และ off-by-one errors เก็ทมุกป่ะ มุกคือลิสต์เขียนว่ามี 2 อย่าง แต่ใส่มา 3 ใช่ป่ะ ฮา

สรุปแบบไม่ต้องจำ

• Cache คือที่พักของของที่ใช้บ่อย ใกล้กว่า เร็วกว่า แต่เล็กกว่า
• ใช้แลกพื้นที่กับเวลา เพื่อไม่ต้องดึงของจากที่ไกล ๆ ทุกครั้ง
• มีหลายชั้นตั้งแต่ใน CPU จนถึง CDN ที่กระจายทั่วโลก
• ปัญหาหลักคือของเก่าค้างอยู่ ต้องมี TTL หรือ ETag คอยล้างให้

ครั้งหน้าเปิดเว็บแล้วเร็วปังโดยไม่รู้สาเหตุ ก็ขอบคุณ Cache ที่แอบทำงานเงียบ ๆ ให้เราทุกวันนะ