การสัมภาษณ์การออกแบบระบบฟรอนต์เอนด์

การสัมภาษณ์นักพัฒนาส่วนหน้าระดับอาวุโสมักขอให้คุณออกแบบฟีเจอร์ส่วนติดต่อผู้ใช้ที่ไม่ธรรมดาแบบครบวงจร เช่น ฟีดข่าว การเติมข้อความอัตโนมัติ แกลเลอรีรูปภาพ หรือแดชบอร์ดที่เลื่อนดูไม่สิ้นสุด ผู้สัมภาษณ์ประเมินสถาปัตยกรรม ความเข้าใจข้อแลกเปลี่ยน สัญชาตญาณด้านประสิทธิภาพ และการสื่อสาร ไม่ใช่ความรู้ปลีกย่อยเกี่ยวกับเฟรมเวิร์ก

การสัมภาษณ์ส่วนใหญ่ที่ใช้เวลา 45–60 นาทีดำเนินตามลำดับนี้: 1) ชี้แจงข้อกำหนด (5 นาที) 2) ร่างสถาปัตยกรรมระดับสูง (10 นาที) 3) แยกส่วนประกอบ (10 นาที) 4) การดึงข้อมูลและสถานะ (10 นาที) 5) ประสิทธิภาพและการเข้าถึง (10 นาที) 6) เจาะลึกหนึ่งด้านตามที่ผู้สัมภาษณ์เลือก

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

วาดกล่องต่าง ๆ ได้แก่ ไคลเอนต์ (SPA หรือ SSR), เกตเวย์ API, บริการ, แคช และ CDN ระบุการกระทำของผู้ใช้และการไหลของข้อมูล กล่าวถึงกรณีขอบตั้งแต่เนิ่น ๆ เพราะแสดงให้เห็นว่าคุณเคยสร้างระบบจริง

ร่างลำดับชั้นของคอมโพเนนต์ NewsFeed → Header, Story[], Composer ส่วน Story → Avatar, Content, Actions, Comments ระบุว่าคอมโพเนนต์ใดนำกลับมาใช้ซ้ำได้ และคอมโพเนนต์ใดเฉพาะกับฟีเจอร์

สถานะแต่ละส่วนควรอยู่ที่ใด เป็นสถานะในเครื่อง (useState), URL (เราเตอร์), สถานะฝั่งเซิร์ฟเวอร์ (React Query) หรือสถานะฝั่งไคลเอนต์ (Zustand) อภิปรายกลยุทธ์การดึงข้อมูล เช่น SSR เริ่มต้น การเลื่อนดูไม่สิ้นสุด การอัปเดตแบบเรียลไทม์ผ่าน WebSocket และส่วนติดต่อผู้ใช้แบบมองโลกในแง่ดี

แบ่งโค้ดตามขอบเขตเส้นทาง ใช้รายการเสมือนสำหรับฟีดที่ยาว ปรับแต่งรูปภาพ (โหลดแบบชะลอ + AVIF/WebP) หลีกเลี่ยงการบล็อกเธรดหลัก กำหนดงบประมาณบันเดิล ใช้ SW แบบให้แคชมาก่อนสำหรับการเข้าชมซ้ำ

ใช้ HTML เชิงความหมาย การนำทางด้วยแป้นพิมพ์ บทบาท ARIA และพื้นที่แบบไลฟ์ คอนทราสต์สี การทดสอบด้วยโปรแกรมอ่านหน้าจอ คะแนนพิเศษ: กล่าวถึงการจัดการโฟกัสเมื่อเส้นทางเปลี่ยน

อภิปรายเรื่อง: การเลื่อนดูไม่สิ้นสุดด้วย IntersectionObserver การใช้รายการเสมือนเพื่อประหยัดหน่วยความจำ การกดถูกใจแบบมองโลกในแง่ดี ตัวบ่งชี้โพสต์ใหม่แบบเรียลไทม์ การโหลดรูปภาพแบบชะลอพร้อมตัวอย่างเบลอ SSR เพื่อ SEO และการแคชแบบ ISR/เอดจ์สำหรับไทม์ไลน์ที่มีการใช้งานสูง

อภิปรายเรื่อง: อินพุตแบบหน่วงเวลา AbortController เพื่อยกเลิกคำขอที่เก่าแล้ว การขจัดคำขอซ้ำ การแคชการตอบกลับ (LRU) การนำทางด้วยแป้นพิมพ์ (ขึ้น/ลง/Enter/Escape) บทบาท ARIA ของคอมโบบ็อกซ์ และการจัดการแป้นพิมพ์เสมือนบนอุปกรณ์เคลื่อนที่

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

สำหรับทุกตัวเลือก ให้กล่าวถึงทางเลือกอื่นและเหตุผลที่เลือกตัวเลือกนั้น เช่น 'ฉันจะใช้ IntersectionObserver สำหรับการโหลดแบบชะลอ เพราะเป็นความสามารถในตัวและมีประสิทธิภาพ ทางเลือกคือ ตัวรับฟังเหตุการณ์การเลื่อนพร้อมการจำกัดความถี่ — เรียบง่ายกว่า แต่กระตุกมากกว่าบน CPU ที่ช้า' นี่คือสิ่งที่ผู้สัมภาษณ์ระดับอาวุโสให้ความสำคัญ

1) เริ่มเขียนโค้ดก่อนชี้แจง 2) ละเลยการเข้าถึง 3) ลืมสถานะข้อผิดพลาด (เครือข่ายขัดข้อง ผลลัพธ์ว่างเปล่า) 4) ไม่คำนึงถึงสถานะกำลังโหลด 5) คำตอบคลุมเครือ ('ฉันจะใช้ React' — ใช้สถาปัตยกรรมใด)

คุณได้รับโจทย์ให้ออกแบบกล่องค้นหาแบบเติมข้อความอัตโนมัติในการสัมภาษณ์ออกแบบระบบ สิ่งแรกที่ควรทำคืออะไร

ชี้แจงขอบเขตก่อน สถาปัตยกรรมระดับสูง (ไคลเอนต์, API, แคช, CDN) ลำดับชั้นคอมโพเนนต์ ตำแหน่งของสถานะ (ในเครื่อง, URL, แคชฝั่งเซิร์ฟเวอร์, ส่วนกลาง) กลยุทธ์การดึงข้อมูล ประสิทธิภาพ (แบ่งโค้ด, ใช้รายการเสมือน, ปรับแต่งรูปภาพ) การเข้าถึง (แป้นพิมพ์, ARIA, คอนทราสต์) สื่อสารข้อแลกเปลี่ยน หลีกเลี่ยงการกระโดดไปเขียนโค้ด ฝึกใช้รูปแบบคลาสสิก: ฟีด, การเติมข้อความอัตโนมัติ, แกลเลอรี และแดชบอร์ด