40 คำถามและคำตอบสัมภาษณ์งานตำแหน่งนักพัฒนา Front-End ยอดนิยม (ปี 2026)
เฮนรี คูเปอร์
การเตรียมตัวสำหรับการสัมภาษณ์งานตำแหน่งนักพัฒนา Front-end หมายถึงการคาดการณ์ถึงความท้าทายและแสดงให้เห็นถึงทักษะเชิงปฏิบัติ คำถามสัมภาษณ์งานตำแหน่งนักพัฒนา Front-end เน้นย้ำถึงวิจารณญาณทางเทคนิค การคิดเชิงออกแบบ และวุฒิภาวะในการแก้ปัญหาสำหรับทีมงานในยุคปัจจุบัน
โครงการนี้เปิดเส้นทางสู่ระบบนิเวศเว็บที่กำลังเติบโต ซึ่งประสบการณ์จริง ความรู้เฉพาะด้าน และการวิเคราะห์จะแปรเปลี่ยนเป็นผลกระทบ ตั้งแต่ผู้เริ่มต้นจนถึงผู้เชี่ยวชาญระดับสูง โครงการจริงจะช่วยพัฒนาทักษะ สนับสนุนทีมงาน ให้คำแนะนำแก่ผู้จัดการ และช่วยให้ผู้สมัครสามารถตอบคำถามสัมภาษณ์พื้นฐาน ขั้นสูง และทางเทคนิคได้อย่างมั่นใจ ด้วยประสบการณ์การทำงานในสาขานี้มาหลายปีทั่วโลก อ่านเพิ่มเติม ...
👉 ดาวน์โหลด PDF ฟรี: คำถามและคำตอบสัมภาษณ์งานตำแหน่งนักพัฒนา Front-End
คำถามและคำตอบสัมภาษณ์งานยอดนิยมสำหรับตำแหน่งนักพัฒนา Front-End
1) บทบาทและหน้าที่หลักของนักพัฒนา Front-End คืออะไร?
นักพัฒนาส่วนหน้า (Front-end developer) มีหน้าที่รับผิดชอบดังต่อไปนี้: การนำส่วนที่เป็นภาพและส่วนโต้ตอบมาใช้งาน ของเว็บไซต์หรือแอปพลิเคชันบนเว็บที่ผู้ใช้โต้ตอบโดยตรง พวกเขาเชื่อมโยงตรรกะระหว่างการออกแบบและการทำงานจริงโดยการเขียนโค้ดที่สะอาดและมีประสิทธิภาพโดยใช้ HTML, CSS และ Javaทีมเขียนสคริปต์มีหน้าที่ตรวจสอบให้แน่ใจว่าหน้าเว็บตอบสนองต่อทุกอุปกรณ์ เข้าถึงได้ง่าย เข้ากันได้กับเบราว์เซอร์ต่างๆ และได้รับการปรับแต่งเพื่อประสิทธิภาพสูงสุด นอกจากนี้ยังทำงานร่วมกับนักออกแบบ นักพัฒนาแบ็กเอนด์ และทีม UX เพื่อมอบประสบการณ์การใช้งานที่ราบรื่น
ความรับผิดชอบหลัก ได้แก่ :
- การสร้างอินเทอร์เฟซผู้ใช้ที่ตอบสนองต่อการใช้งาน
- การนำคุณสมบัติเชิงโต้ตอบมาใช้โดยใช้ Javaต้นฉบับ
- เพิ่มประสิทธิภาพความเร็วในการโหลดและประสิทธิภาพการทำงาน
- รักษาความเข้ากันได้กับเบราว์เซอร์ต่างๆ
- เขียนโค้ดที่สามารถทดสอบและบำรุงรักษาได้
ตัวอย่าง: การสร้างแบบฟอร์มที่ตรวจสอบความถูกต้องของข้อมูลที่ผู้ใช้ป้อนแบบเรียลไทม์และแสดงข้อผิดพลาดโดยไม่ต้องรีเฟรชหน้าเว็บ แสดงให้เห็นถึงทั้งสองด้าน Javaทักษะการเขียนสคริปต์และการมุ่งเน้นด้าน UX
2) อธิบายความแตกต่างระหว่าง HTML, CSS และ Javaต้นฉบับ
HTML, CSS และ Javaสคริปต์คือ องค์ประกอบพื้นฐานของการพัฒนาส่วนหน้า (Front-end development)โดยแต่ละส่วนมีจุดประสงค์ที่แตกต่างกันในการสร้างเว็บเพจ
- HTML (HyperText Markup Language): มันกำหนด โครงสร้างและเนื้อหา ของหน้าเว็บ แท็กเช่น
<header>,<p>,<ul>จัดระเบียบข้อความ รูปภาพ ลิงก์ และส่วนต่างๆ - CSS (Cascading Style Sheets): มันอธิบาย การนำเสนอและรูปแบบ — ลักษณะที่องค์ประกอบต่างๆ ควรปรากฏ รวมถึงสี แบบอักษร ระยะห่าง และตำแหน่งการจัดวาง
- Javaสคริปต์: มันเป็น ภาษาโปรแกรม ซึ่งเพิ่มพฤติกรรมและการโต้ตอบให้กับหน้าเว็บ โดยจัดการกับการอัปเดตแบบไดนามิก เหตุการณ์ และการดำเนินการแบบอะซิงโครนัส
ตัวอย่างความแตกต่างในการปฏิบัติ:
| เทคโนโลยี | จุดมุ่งหมาย | การใช้งานทั่วไป |
|---|---|---|
| HTML | โครงสร้าง | หัวข้อหน้า, ข้อความ, รายการ |
| CSS | สไตล์ | การจัดวาง, สี, ระยะห่าง |
| Javaต้นฉบับ | พฤติกรรม | ตัวเลื่อน, การตรวจสอบความถูกต้องของแบบฟอร์ม |
3) CSS คืออะไร Box แบบจำลองและเหตุใดจึงสำคัญ?
การขอ CSS Box รุ่น อธิบายถึงวิธีการกำหนดขนาดและระยะห่างขององค์ประกอบต่างๆ ภายในหน้าเว็บ ซึ่งเป็นพื้นฐานสำคัญของการออกแบบเลย์เอาต์ และประกอบด้วยองค์ประกอบสี่ส่วน: เนื้อหา, การขยายความ, ชายแดนและ ขอบ.
- เนื้อหา: พื้นที่หลักที่แสดงข้อความและรูปภาพ
- การขยายความ: ช่องว่างระหว่างเนื้อหาและขอบเขตของเนื้อหา
- ชายแดน: ขอบรอบๆ ช่องว่างและเนื้อหา
- margin: ชั้นนอกสุดที่แยกองค์ประกอบต่างๆ ออกจากกัน
โมเดลนี้มีความสำคัญเพราะส่งผลต่อวิธีการที่องค์ประกอบต่างๆ ใช้พื้นที่และโต้ตอบกัน การเข้าใจโมเดลนี้จะช่วยสร้างเลย์เอาต์ที่แม่นยำและหลีกเลี่ยงปัญหาการจัดวาง เช่น เนื้อหาล้นหรือระยะห่างระหว่างองค์ประกอบที่ไม่ถูกต้อง
4) การออกแบบเว็บไซต์แบบ Responsive ทำงานอย่างไร? จงยกตัวอย่างเทคนิคต่างๆ
การออกแบบเว็บแบบ Responsive ช่วยให้เว็บเพจปรับเปลี่ยนได้อย่างราบรื่นบนขนาดหน้าจอต่างๆ ตั้งแต่โทรศัพท์มือถือไปจนถึงคอมพิวเตอร์ตั้งโต๊ะ โดยใช้การออกแบบที่เหมาะสมกับหน้าจอ (Responsive web design) เลย์เอาต์ที่ยืดหยุ่น รูปภาพที่ปรับเปลี่ยนได้ และการค้นหาสื่อ.
เทคนิคต่างๆ ได้แก่:
- CSS Media Queries: ใช้สไตล์ตามความกว้างของหน้าจอ
- หน่วยที่ยืดหยุ่น: การใช้
em,rem,%แทนที่จะใช้พิกเซลคงที่ - ภาพตอบสนอง: ใช้
<picture>และsrcsetสำหรับความละเอียดหน้าจอที่แตกต่างกัน
ตัวอย่าง: แถบนำทางที่ยุบตัวเป็นเมนูแฮมเบอร์เกอร์บนหน้าจอขนาดเล็ก ใช้ Media Queries ในการเปลี่ยนเค้าโครงและซ่อน/แสดงองค์ประกอบต่างๆ
5) อธิบายความแตกต่างระหว่างองค์ประกอบแบบบล็อก แบบอินไลน์ และแบบอินไลน์บล็อกใน HTML/CSS
ลักษณะการแสดงผลเหล่านี้ควบคุมลำดับการจัดวางองค์ประกอบ
| ประเภท | ขึ้นบรรทัดใหม่ | ความกว้างความสูง | ตัวอย่างทั่วไป |
|---|---|---|---|
| ปิดกั้น | ใช่ | รับค่าความกว้าง/ความสูง | <div>, <p> |
| อินไลน์ | ไม่ | ไม่สนใจความกว้าง/ความสูง | <span>, <a> |
| อินไลน์บล็อค | ไม่ | ความกว้าง/ความสูงที่ยอมรับได้ | <img>, <input> |
คำอธิบาย: องค์ประกอบแบบบล็อกจะเรียงซ้อนกันในแนวตั้ง องค์ประกอบแบบอินไลน์จะไหลในแนวนอน องค์ประกอบแบบอินไลน์-บล็อกจะคงการไหลแบบอินไลน์ไว้ แต่สามารถควบคุมระยะห่างได้
6) HTML เชิงความหมายคืออะไร และทำไมจึงสำคัญ?
HTML เชิงความหมายใช้ส่วนประกอบ HTML ที่ สื่อความหมาย และโครงสร้าง ทำให้เนื้อหาเข้าใจง่ายขึ้นสำหรับผู้ใช้ เครื่องมือค้นหา และเทคโนโลยีช่วยเหลือ ตัวอย่างเช่น <header>, <article>, <nav>และ <footer>.
ประโยชน์ที่ได้รับ:
- ปรับปรุง การเข้าถึง และรองรับโปรแกรมอ่านหน้าจอ
- กระตุ้น SEO (Search Engine Optimization) โดยการชี้แจงโครงสร้างของหน้าเว็บให้ชัดเจนยิ่งขึ้น
- ช่วยเพิ่มประสิทธิภาพในการบำรุงรักษาและความชัดเจนสำหรับนักพัฒนา
ตัวอย่าง: การใช้ <nav> การใช้ลิงก์นำทางแบบทั่วไปมีความหมายมากกว่า <div> แท็กต่างๆ โปรแกรมอ่านหน้าจอจะตีความได้อย่างถูกต้อง
7) ความแตกต่างระหว่าง == และ === คืออะไร Javaสคริปต์?
In Javaสคริปต์ == ดำเนินการ การบังคับประเภทโดยการแปลงค่าก่อนทำการเปรียบเทียบ ในขณะที่ === การตรวจสอบ ความเท่าเทียมกันอย่างเคร่งครัด โดยปราศจากการบังคับขู่เข็ญ
==ตัวอย่าง:"5" == 5รับคืนtrueเพราะ Javaสคริปต์จะแปลงสตริงเป็นตัวเลข===ตัวอย่าง:"5" === 5รับคืนfalseเนื่องจากประเภทแตกต่างกัน
ความเท่าเทียมกันอย่างเคร่งครัด โดยทั่วไปแล้ว วิธีนี้เป็นที่นิยมใช้ในการสัมภาษณ์งานและการเขียนโค้ดระดับมืออาชีพ เนื่องจากช่วยหลีกเลี่ยงการแปลงประเภทข้อมูลที่ไม่สามารถคาดเดาได้
8) CSS Preprocessors คืออะไร และทำไมต้องใช้?
ตัวประมวลผล CSS เช่น สส or น้อย เพิ่มฟีเจอร์ต่างๆ ให้กับ CSS พื้นฐาน เช่น ตัวแปร การซ้อน มิกซ์อิน และฟังก์ชันทำให้สามารถสร้างสไตล์ชีตที่มีความยืดหยุ่นและบำรุงรักษาได้ง่ายขึ้น
ประโยชน์ที่ได้รับรวมถึง:
- ส่วนประกอบสไตล์ที่นำกลับมาใช้ใหม่ได้ (มิกซิน)
- เขียนโค้ดให้สะอาดตาขึ้นด้วยการใช้ตัวแปร (เช่น จานสี)
- ดูแลรักษาง่ายขึ้นสำหรับไฟล์สไตล์ชีตขนาดใหญ่
ตัวอย่าง: การใช้ตัวแปร SASS ช่วยลดการทำงานซ้ำซ้อน — หากสีหลักของแบรนด์เปลี่ยนไป ก็จะต้องอัปเดตเพียงตัวแปรเดียวเท่านั้น
9) อธิบายความเฉพาะเจาะจงของ CSS และลำดับความสำคัญ
ความเฉพาะเจาะจงของ CSS เป็นตัวกำหนด กฎใดที่ใช้บังคับ เมื่อมีกฎหลายข้อที่กำหนดเป้าหมายไปยังองค์ประกอบเดียวกัน การให้คะแนนความเฉพาะเจาะจงจะขึ้นอยู่กับตัวเลือก:
- ตัวเลือก ID (
#id) มีน้ำหนักมากกว่า - ตัวเลือกคลาส (
.class) มาต่อกันเลย - ตัวเลือกองค์ประกอบ (
div,h1) แบกรับน้อยที่สุด สไตล์แบบอินไลน์จะแทนที่ค่าเหล่านี้ ยกเว้นในกรณี!importantถูกนำมาใช้ (ใช้แต่พอประมาณ)
ตัวอย่าง: กฎที่มี #header .nav a จะแทนที่ nav a เนื่องจากรหัสประจำตัวช่วยเพิ่มความเฉพาะเจาะจง
10) localStorage, sessionStorage และ cookies แตกต่างกันอย่างไร?
นี่คือกลไกการจัดเก็บข้อมูลของเบราว์เซอร์ที่มีขอบเขตและอายุการใช้งานแตกต่างกัน
| ประเภทพื้นที่เก็บข้อมูล | ตลอดชีวิต | จำกัด ขนาด | เข้าถึงได้โดย |
|---|---|---|---|
| คุกกี้ | วันหมดอายุที่ตั้งค่าได้ | ~4กิโลไบต์ | เซิร์ฟเวอร์และไคลเอ็นต์ |
| ที่จัดเก็บในเครื่อง | หมั่น | ~5MB+ | ลูกค้าเท่านั้น |
| พื้นที่เก็บข้อมูลเซสชัน | เฉพาะเซสชันแท็บเท่านั้น | ~5MB | ลูกค้าเท่านั้น |
ตัวอย่างกรณีการใช้งาน:
- คุกกี้: โทเค็นการตรวจสอบสิทธิ์เซสชัน
- พื้นที่จัดเก็บข้อมูลภายในเครื่อง: บันทึกการตั้งค่าของผู้ใช้
- พื้นที่จัดเก็บเซสชัน: ข้อมูลที่เกี่ยวข้องจะมีเฉพาะขณะที่แท็บนี้เปิดอยู่เท่านั้น
11) Document Object Model (DOM) คืออะไร และทำงานอย่างไร?
การขอ โมเดลวัตถุเอกสาร (DOM) เป็นอินเทอร์เฟซการเขียนโปรแกรมที่แสดงหน้าเว็บในรูปแบบของ โครงสร้างต้นไม้ โดยแต่ละโหนดจะสอดคล้องกับองค์ประกอบ คุณลักษณะ หรือโหนดข้อความ Javaสคริปต์จะโต้ตอบกับ DOM เพื่ออัปเดตเนื้อหา สไตล์ และโครงสร้างแบบไดนามิกโดยไม่ต้องโหลดหน้าเว็บใหม่
ตัวอย่างเช่น เมื่อผู้ใช้คลิกปุ่ม Javaสคริปต์สามารถแก้ไข DOM เพื่อแสดงป๊อปอัพหรือเปลี่ยนข้อความได้ DOM ช่วยให้นักพัฒนาสามารถสร้าง ลบ หรือแก้ไของค์ประกอบต่างๆ ได้แบบเรียลไทม์
ตัวอย่าง:
document.getElementById("title").textContent = "Hello, World!";
คำสั่งนี้จะแทนที่เนื้อหาขององค์ประกอบที่มี ID เป็น “title”
Takeaway ที่สำคัญ: การจัดการ DOM ช่วยเพิ่มปฏิสัมพันธ์ในแอปพลิเคชันเว็บสมัยใหม่
12) อธิบายเรื่อง event bubbling และ event capturing ใน Javaต้นฉบับ
Javaสคริปต์จะจัดการการกระทำของผู้ใช้โดยใช้ แบบจำลองการแพร่กระจายเหตุการณ์ซึ่งเป็นตัวกำหนดวิธีการที่เหตุการณ์ต่างๆ เดินทางผ่าน DOM โดยมีสองขั้นตอน:
- ขั้นตอนการบันทึกภาพ: กิจกรรมนี้จัดขึ้นในหลายสถานที่ จากรากไปยังองค์ประกอบเป้าหมาย
- Bubblระยะ ing: ฟองอากาศของกิจกรรม ขึ้นไปจากเป้าหมายกลับไปยังราก
โดยค่าเริ่มต้น เหตุการณ์จะถูกส่งต่อไปยังกลุ่มอื่นเว้นแต่... capture: true มีการใช้งาน นักพัฒนาสามารถควบคุมการแพร่กระจายได้ด้วย event.stopPropagation() or event.stopImmediatePropagation().
ตัวอย่าง:
document.querySelector("button").addEventListener("click", handleClick, true);
สิ่งนี้จะฟังระหว่าง ขั้นตอนการจับภาพ.
เคล็ดลับ: การเข้าใจลำดับการทำงานของเหตุการณ์มีความสำคัญอย่างยิ่งต่อการแก้ไขข้อผิดพลาดของตัวจัดการเหตุการณ์แบบซ้อนกัน และการเพิ่มประสิทธิภาพการโต้ตอบกับส่วนติดต่อผู้ใช้
13) การปิดใน... คืออะไร Javaสคริปต์? อธิบายพร้อมยกตัวอย่างประกอบ
A การปิด Closure คือฟังก์ชันที่ยังคงเข้าถึงตัวแปรในขอบเขตภายนอกได้ แม้หลังจากขอบเขตนั้นทำงานเสร็จสิ้นแล้ว Closure ช่วยให้สามารถรักษาความเป็นส่วนตัวของข้อมูลและสร้างฟังก์ชันที่มีสถานะได้
ตัวอย่าง:
function counter() {
let count = 0;
return function() {
count++;
return count;
};
}
const increment = counter();
console.log(increment()); // 1
console.log(increment()); // 2
ที่นี่ increment รักษาการเข้าถึง count แม้หลังจาก counter() ได้คืน
ฝาปิดมีการใช้งานอย่างแพร่หลายใน โมดูล, ตัวจัดการเหตุการณ์ และฮุกของ React (useState) เพื่อรักษาสถานะระหว่างการดำเนินการ
14) จงอธิบายความแตกต่างระหว่าง var, let และ const Javaต้นฉบับ
| ลักษณะ | var |
let |
const |
|---|---|---|---|
| ขอบเขต | ฟังก์ชัน | ปิดกั้น | ปิดกั้น |
| การประกาศซ้ำ | ได้รับอนุญาต | ไม่ได้รับอนุญาต | ไม่ได้รับอนุญาต |
| การมอบหมายใหม่ | ได้รับอนุญาต | ได้รับอนุญาต | ไม่ได้รับอนุญาต |
| hoisting | ใช่ (ไม่ระบุ) | ใช่ (TDZ) | ใช่ (TDZ) |
var เป็นฟังก์ชันที่มีขอบเขตการทำงานเฉพาะและถูกยกขึ้นด้วยค่าที่ไม่กำหนด ในขณะที่ let และ const เป็น ขอบเขตบล็อก และอาศัยอยู่ใน เขตไร้อารมณ์ชั่วคราว (TDZ) จนกว่าจะมีการเริ่มต้นระบบ
การใช้ let และ const เป็นวิธีที่เหมาะสมกว่าสำหรับการเขียนโค้ดที่สะอาดและปลอดภัยกว่า โดยเฉพาะอย่างยิ่งในไวยากรณ์ ES6+ สมัยใหม่
15) Promises คืออะไร และแตกต่างจาก Callback อย่างไร?
A คำมั่นสัญญา แสดงถึงค่าที่อาจมีอยู่ตอนนี้ ในอนาคต หรืออาจไม่มีเลยก็ได้ ช่วยลดความซับซ้อนของการทำงานแบบอะซิงโครนัสและช่วยหลีกเลี่ยงปัญหา “callback hell”
รัฐที่ให้คำมั่นสัญญา:
Pending→ การดำเนินการไม่เสร็จสมบูรณ์Fulfilled→ การดำเนินการสำเร็จRejected→ การดำเนินการล้มเหลว
ตัวอย่าง:
fetch('/data.json')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));
ต่างจาก Callback ตรงที่ Promise มีไวยากรณ์ที่สะอาดกว่าและจัดการข้อผิดพลาดได้ดีกว่า .catch()นอกจากนี้พวกเขายังบูรณาการกับ async/awaitซึ่งช่วยให้เวิร์กโฟลว์แบบอะซิงโครนัสมีความง่ายยิ่งขึ้น
16) async/await ช่วยปรับปรุงการเขียนโปรแกรมแบบอะซิงโครนัสได้อย่างไร?
async/await เป็นไวยากรณ์ที่ช่วยให้เขียนโค้ดแบบอะซิงโครนัสได้ง่ายขึ้น โดยสร้างขึ้นจาก Promises ทำให้โค้ดแบบอะซิงโครนัสมีลักษณะและการทำงานเหมือนโค้ดแบบซิงโครนัส ช่วยเพิ่มความอ่านง่ายและปรับปรุงการจัดการข้อผิดพลาด
ตัวอย่าง:
async function getUser() {
try {
const response = await fetch('/api/user');
const user = await response.json();
console.log(user);
} catch (error) {
console.error(error);
}
}
ข้อดี:
- เรียงลำดับอย่างเป็นระบบ อ่านง่าย
- การจัดการข้อผิดพลาดแบบง่ายโดยใช้
try...catch. - ลดจำนวนชั้นซ้อนกัน
.then()โซ่.
ในการให้สัมภาษณ์ มีการกล่าวถึง async/await ช่วยปรับปรุงการดีบัgและลดการซ้อนของ callback ได้อย่างไร แสดงให้เห็นถึงความเข้าใจอย่างลึกซึ้งในเรื่องสมัยใหม่ Javaต้นฉบับ
17) อธิบายความแตกต่างระหว่างซิงโครนัสและอะซิงโครนัส Javaต้นฉบับ
| ประเภท | Descriptไอออน | ตัวอย่าง |
|---|---|---|
| Syncมีเกียรติ | โค้ดจะทำงานทีละบรรทัด โดยงานถัดไปจะรอให้งานก่อนหน้าเสร็จสิ้น | การวนลูปผ่านข้อมูล |
| ไม่ตรงกัน | โค้ดทำงานอย่างอิสระ ไม่ปิดกั้นการทำงาน | ดึงข้อมูล API, ตั้งค่าหมดเวลา |
คำอธิบาย: Javaสคริปต์ทำงานแบบเธรดเดียว ดังนั้นการดำเนินการแบบอะซิงโครนัส (เช่น การเรียกใช้ API) จะถูกจัดการโดยใช้เธรดเดียว วงจรเหตุการณ์ และ คิวโทรกลับ เพื่อป้องกันการบล็อกเธรดหลัก
ตัวอย่างเช่น ในขณะที่รอข้อมูลจาก API งาน UI อื่นๆ (เช่น แอนิเมชัน) จะยังคงทำงานได้อย่างราบรื่น
18) แอปพลิเคชันหน้าเดียว (Single Page Application หรือ SPA) คืออะไร? จงอธิบายข้อดีและข้อเสียของ SPA
SPA โหลด หน้า HTML เดียว และอัปเดตเนื้อหาแบบไดนามิกขณะที่ผู้ใช้โต้ตอบ โดยไม่ต้องโหลดหน้าเว็บใหม่ เฟรมเวิร์กเช่น React, Angular และ Vue โดยทั่วไปมักใช้ในการสร้าง SPA (Single Page Application)
ข้อดี:
- การนำทางที่รวดเร็วขึ้นและประสบการณ์ผู้ใช้ที่ดีขึ้น
- ลดภาระการทำงานของเซิร์ฟเวอร์
- การเปลี่ยนฉากและการกำหนดเส้นทางที่ราบรื่น
ข้อเสีย:
- SEO ไม่ดี (หรืออาจจะแย่กว่านั้นคือ SSR)
- เวลาในการโหลดครั้งแรกอาจนาน
- การจัดการประวัติการเข้าชมเว็บไซต์ที่ซับซ้อน
| แง่มุม | ประโยชน์ | ข้อเสียเปรียบ |
|---|---|---|
| SEO (Search Engine Optimization) | ต้องใช้ SSR | การจัดทำดัชนีที่ยากขึ้น |
| ประสิทธิภาพ | โหลดเสร็จเร็ว | การโหลดครั้งแรกช้าลง |
| ความซับซ้อน | Modular | ยากต่อการแก้ไข |
19) เว็บคอมโพเนนต์คืออะไร และเหตุใดจึงมีความสำคัญ?
Web Components คือองค์ประกอบที่สามารถนำกลับมาใช้ซ้ำได้และถูกห่อหุ้มไว้ภายใน ซึ่งสามารถนำไปใช้ในโครงการและเฟรมเวิร์กต่างๆ ได้ โดยมีพื้นฐานมาจาก ข้อกำหนดหลักสี่ประการ:
- องค์ประกอบที่กำหนดเอง – กำหนดองค์ประกอบ HTML ใหม่
- เงา DOM – แยกสไตล์และมาร์กอัปของส่วนประกอบต่างๆ ออกจากกัน
- เทมเพลต HTML – ส่วนประกอบเนื้อหาที่สามารถนำกลับมาใช้ซ้ำได้
- โมดูล ES – นำเข้า/ส่งออก Javaตรรกะของสคริปต์
ตัวอย่าง:
class MyButton extends HTMLElement {
connectedCallback() {
this.innerHTML = `<button>Click Me</button>`;
}
}
customElements.define('my-button', MyButton);
Web Components ส่งเสริมความเป็นโมดูลาร์และลดการพึ่งพาคอมponent เฉพาะเฟรมเวิร์ก ทำให้สามารถปรับขนาดได้ในระยะยาว
20) คุณจะเพิ่มประสิทธิภาพการทำงานของแอปพลิเคชันส่วนหน้าได้อย่างไร?
การเพิ่มประสิทธิภาพการทำงานช่วยให้โหลดหน้าเว็บได้รวดเร็ว ตอบสนองฉับไว และมอบประสบการณ์การใช้งานที่ราบรื่น ซึ่งรวมถึงการลดทรัพยากรที่ทำให้การแสดงผลหยุดชะงัก การปรับปรุงโค้ด และการใช้ประโยชน์จากแคช
ปฏิบัติที่ดีที่สุด:
- Minify ซีเอสเอสและ Javaไฟล์สคริปต์
- โหลดแบบขี้เกียจ รูปภาพและทรัพย์สิน
- ใช้ การแยกโค้ด และ ต้นไม้สั่น.
- Implement แคชเบราว์เซอร์ และ การจัดส่ง CDN.
- เพิ่มประสิทธิภาพ การจัดเรียง DOM ใหม่ และ ทาสีใหม่.
ตัวอย่าง: ใน React การใช้งาน React.memo or useCallback ช่วยป้องกันการเรนเดอร์ซ้ำโดยไม่จำเป็น ซึ่งช่วยปรับปรุงประสิทธิภาพได้อย่างมาก
21) React คืออะไร และเหตุใดจึงถูกนำมาใช้กันอย่างแพร่หลายในการพัฒนาฝั่ง front-end?
เกิดปฏิกิริยา เป็นภาษาเชิงประกาศที่ใช้ส่วนประกอบเป็นพื้นฐาน Javaไลบรารีสคริปต์ที่พัฒนาโดย Facebook สำหรับสร้างส่วนติดต่อผู้ใช้ โดยเฉพาะแอปพลิเคชันหน้าเดียว (SPA) ความนิยมของมันเกิดจากความเรียบง่าย ประสิทธิภาพ และความสามารถในการนำกลับมาใช้ซ้ำได้
ข้อดีที่สำคัญ:
- DOM เสมือน: อัปเดตเฉพาะส่วนของ UI ที่เปลี่ยนแปลงอย่างมีประสิทธิภาพ
- สถาปัตยกรรมแบบส่วนประกอบ: ส่งเสริมการเขียนโค้ดที่สามารถนำกลับมาใช้ใหม่ได้และเป็นแบบโมดูลาร์
- การผูกข้อมูลแบบทางเดียว: ช่วยให้การไหลของข้อมูลเป็นไปอย่างคาดการณ์ได้
- ระบบนิเวศ: มีการสนับสนุนจากชุมชนที่แข็งแกร่งและมีไลบรารีต่างๆ (เช่น Redux, React Router)
ตัวอย่าง: ฟอร์มล็อกอินใน React สามารถแบ่งออกเป็นคอมponent ต่างๆ ได้ เช่น <InputField>, <Button>และ <Form>ซึ่งช่วยให้สามารถบำรุงรักษาและนำกลับมาใช้ซ้ำได้ในหน้าเว็บต่างๆ
22) Virtual DOM และ Real DOM แตกต่างกันอย่างไร?
| ลักษณะ | DOM เสมือน | DOM จริง |
|---|---|---|
| ธรรมชาติ | มีน้ำหนักเบา Javaการแสดงผลสคริปต์ | DOM ของเบราว์เซอร์จริง |
| อัปเดตความเร็ว | รวดเร็ว (แสดงผลใหม่เฉพาะส่วนที่ต้องการ) | ช้าลง (แสดงผลต้นไม้ทั้งหมดใหม่) |
| อย่างมีประสิทธิภาพ | ใช้ขั้นตอนวิธีเปรียบเทียบความแตกต่าง | การจัดการโดยตรง |
| ตัวอย่าง | รีแอคท์, วี | HTML ธรรมดา, JavaScript |
คำอธิบาย: Virtual DOM ช่วยเพิ่มประสิทธิภาพโดยลดการจัดการ DOM โดยตรงให้น้อยที่สุด เมื่อสถานะเปลี่ยนแปลง React จะสร้างสำเนาเสมือน เปรียบเทียบ (diffing) และอัปเดตเฉพาะองค์ประกอบที่เปลี่ยนแปลงใน DOM จริงเท่านั้น
ตัวอย่าง: การอัปเดตข้อมูลในช่องป้อนข้อมูลเพียงช่องเดียวในแบบฟอร์มขนาดใหญ่ จะทำการแสดงผลช่องป้อนข้อมูลนั้นใหม่เท่านั้น ไม่ใช่ทั้งหน้าเว็บ ซึ่งช่วยเพิ่มประสิทธิภาพได้อย่างมาก
23) อธิบายเมธอดวงจรชีวิตในคอมโพเนนต์ของ React
คอมponent ของ React (โดยเฉพาะแบบคลาส) มีลักษณะเฉพาะที่แตกต่างกัน ระยะต่างๆ ของวงจรชีวิต:
- การติด: ส่วนประกอบถูกสร้างขึ้น (
constructor,componentDidMount). - กำลังอัปเดต: ทำงานเมื่อมีการเปลี่ยนแปลงสถานะ/คุณสมบัติ (
componentDidUpdate). - การถอดประกอบ: ทำความสะอาดก่อนการถอดออก (
componentWillUnmount).
ในส่วนประกอบเชิงฟังก์ชันนั้น useEffect hook จำลองวงจรชีวิตเหล่านี้:
useEffect(() => {
console.log('Mounted');
return () => console.log('Unmounted');
}, []);
การเข้าใจสิ่งเหล่านี้จะช่วยให้นักพัฒนาสามารถจัดการกับการเรียกใช้ API การล้างข้อมูล และการเพิ่มประสิทธิภาพการทำงานได้อย่างมีประสิทธิภาพ
24) ใน React ความแตกต่างระหว่าง state และ props คืออะไร?
| ลักษณะ | สถานะ | อุปกรณ์ประกอบฉาก |
|---|---|---|
| กรรมสิทธิ์ | จัดการภายในโดยส่วนประกอบ | ส่งผ่านจากคอมโพเนนต์หลัก |
| การกลายพันธุ์ | ไม่แน่นอน | แก้ไขเปลี่ยนแปลงและหยุดระบบไม่ได้ |
| จุดมุ่งหมาย | จัดการข้อมูลที่เปลี่ยนแปลง | กำหนดค่าส่วนประกอบย่อย |
| ตัวอย่าง | useState() |
<Button label="Submit" /> |
คำอธิบาย: Props (ย่อมาจาก “properties”) คือแอตทริบิวต์แบบอ่านอย่างเดียวที่ใช้ในการส่งผ่านข้อมูลลงไปตามโครงสร้างของคอมโพเนนต์ ในขณะที่ state ทำหน้าที่จัดการข้อมูลแบบไดนามิกภายใน ตัวอย่างเช่น <Counter> คอมponent ใช้สถานะเพื่อติดตามจำนวน แต่รับค่าเข้ามา initialValue ใช้เป็นอุปกรณ์ประกอบฉาก
การเข้าใจความแตกต่างนี้เป็นสิ่งสำคัญสำหรับการจัดการการไหลของข้อมูลและการตอบสนอง
25) React Hooks คืออะไร และทำไมจึงมีการนำมาใช้?
ตะขอ เป็นฟังก์ชันพิเศษที่ช่วยให้นักพัฒนาสามารถใช้คุณสมบัติสถานะและวงจรชีวิตได้ ส่วนประกอบที่ใช้งานได้. ฟีเจอร์นี้ถูกนำมาใช้ใน React 16.8 ช่วยลดความซับซ้อนของโค้ดและลดการพึ่งพาคลาสคอมโพเนนต์
ตะขอทั่วไป:
useState→ จัดการสถานะของส่วนประกอบuseEffect→ ผลข้างเคียง (การเรียกใช้ API, การสมัครรับข้อมูล)useContext→ การแบ่งปันสถานะทั่วโลกuseMemo/useCallback→ การเพิ่มประสิทธิภาพการทำงาน
ตัวอย่าง:
const [count, setCount] = useState(0);
useEffect(() => console.log('Count changed:', count), [count]);
Hooks ช่วยให้เขียนโค้ดได้สะอาดตาขึ้น มีโครงสร้างที่ดีขึ้น และบำรุงรักษาได้ง่ายขึ้น
26) ใน React คอมponent ที่ควบคุมได้และคอมponent ที่ควบคุมไม่ได้คืออะไร?
ใน React, ส่วนประกอบที่ควบคุมได้ ให้ข้อมูลแบบฟอร์มของพวกเขาถูกจัดการโดยรัฐ ในขณะที่ ส่วนประกอบที่ควบคุมไม่ได้ อาศัย DOM โดยตรง
| ประเภท | แหล่งข้อมูล | ตัวอย่าง |
|---|---|---|
| ควบคุม | สถานะการตอบสนอง | value={inputValue} สีสดสวย onChange |
| ไม่มีการควบคุม | DOM | ref สำหรับการเข้าถึงค่าอินพุต |
ตัวอย่าง:
const [name, setName] = useState('');
<input value={name} onChange={e => setName(e.target.value)} />
ส่วนประกอบที่ควบคุมได้นั้นเหมาะสำหรับการจัดการสถานะที่คาดการณ์ได้ ในขณะที่ส่วนประกอบที่ควบคุมไม่ได้นั้นเหมาะกับรูปแบบที่เรียบง่ายและไม่เปลี่ยนแปลง
27) คุณจัดการกับฟอร์มและการตรวจสอบความถูกต้องใน React อย่างไร?
การจัดการแบบฟอร์มเกี่ยวข้องกับการรับข้อมูลจากผู้ใช้ การตรวจสอบความถูกต้องของข้อมูล และการจัดการข้อผิดพลาด ซึ่งสามารถทำได้ด้วยตนเองหรือใช้ไลบรารีต่างๆ เช่น ฟอร์มิก, ตอบสนองตะขอแบบฟอร์มหรือ ได้.
ตัวอย่าง (การตรวจสอบด้วยตนเอง):
if (!email.includes('@')) setError('Invalid email');
ขั้นตอน:
- สร้างฟิลด์แบบฟอร์มที่มีการควบคุมโดยใช้สถานะ
- ตรวจสอบความถูกต้องของข้อมูลที่ป้อนเมื่อมีการเปลี่ยนแปลงหรือส่งข้อมูล
- แสดงข้อผิดพลาดแบบมีเงื่อนไข
- รีเซ็ตแบบฟอร์มหลังจากส่งข้อมูลสำเร็จแล้ว
เคล็ดลับ: ใช้การตรวจสอบความถูกต้องแบบหน่วงเวลาหรือการตรวจสอบความถูกต้องตามโครงสร้างข้อมูลเพื่อประสิทธิภาพและความสามารถในการบำรุงรักษา
28) เฟรมเวิร์ก CSS คืออะไร และช่วยปรับปรุงการพัฒนาส่วนหน้า (front-end development) ได้อย่างไร?
เฟรมเวิร์ก CSS ให้ รูปแบบ เลย์เอาต์ และส่วนประกอบที่กำหนดไว้ล่วงหน้า ที่ช่วยเร่งการพัฒนา UI เฟรมเวิร์กยอดนิยม ได้แก่ Bootstrap, Tailwind CSSและ UI วัสดุ.
| กรอบ | คุณลักษณะที่สำคัญ | ใช้กรณี |
|---|---|---|
| Bootstrap | ระบบกริด | การสร้างต้นแบบอย่างรวดเร็ว |
| Tailwind CSS | คลาสที่เน้นประโยชน์ใช้สอยเป็นหลัก | UI ที่กำหนดเอง |
| UI วัสดุ | ส่วนประกอบทำปฏิกิริยา | ส่วนติดต่อผู้ใช้ที่ทันสมัยและใช้งานง่าย |
ข้อดี:
- ใช้ภาษาการออกแบบที่สอดคล้องกัน
- ลดระยะเวลาในการพัฒนา
- โดยค่าเริ่มต้นจะแสดงผลแบบ Responsive
การใช้เฟรมเวิร์กช่วยให้นักพัฒนาสามารถมุ่งเน้นไปที่ฟังก์ชันการทำงาน ในขณะที่ยังคงรักษาความสอดคล้องของการออกแบบในโครงการต่างๆ ได้
29) คุณจะดีบักแอปพลิเคชันฝั่ง front-end อย่างมีประสิทธิภาพได้อย่างไร?
การดีบักเกี่ยวข้องกับการระบุและแก้ไขปัญหาในโค้ดผ่านการตรวจสอบอย่างเป็นระบบ
เทคนิคการดีบักทั่วไป:
- ใช้ เครื่องมือสำหรับนักพัฒนาเบราว์เซอร์ (แท็บ Elements, Network, Console)
- เพิ่ม
console.log()วางแผนเชิงกลยุทธ์เพื่อการติดตามตัวแปร - จ้าง จุดพัก และ ดูสีหน้าท่าทาง.
- วิเคราะห์ คำขอเครือข่าย สำหรับ API ที่ล้มเหลว
- ตรวจสอบ ตัวเลือก CSS และจัดวางเลย์เอาต์โดยใช้เครื่องมือ "ตรวจสอบ" (Inspect)
ตัวอย่าง: ใน Chrome DevTools การเลือก “หยุดการทำงานเมื่อมีข้อผิดพลาด” จะช่วยตรวจจับข้อผิดพลาดขณะรันไทม์ได้ตั้งแต่เนิ่นๆ
เครื่องมือที่ชอบ React DevTools และ Redux DevTools นอกจากนี้ยังช่วยให้เห็นภาพการเปลี่ยนแปลงสถานะได้อย่างมีประสิทธิภาพ
30) การเข้าถึงได้ (Accessibility หรือ a11y) ในการพัฒนาเว็บไซต์คืออะไร และเหตุใดจึงมีความสำคัญ?
การเข้าถึง (a11y) เพื่อให้มั่นใจว่าเว็บไซต์สามารถใช้งานได้โดยผู้พิการ รวมถึงผู้ที่ใช้โปรแกรมอ่านหน้าจอหรืออุปกรณ์ป้อนข้อมูลทางเลือกอื่นๆ
ปฏิบัติที่ดีที่สุด:
- ใช้ HTML ที่มีความหมาย (
<nav>,<main>,<header>). - ให้
altข้อความสำหรับรูปภาพ - ตรวจสอบให้แน่ใจว่าการนำทางด้วยแป้นพิมพ์เป็นไปอย่างราบรื่น
tabindex. - ใช้แอตทริบิวต์ ARIA (
role,aria-label). - รักษาระดับความแตกต่างของสีให้เพียงพอ
ตัวอย่าง: การใช้ <button aria-label="Submit Form"> เพื่อให้โปรแกรมอ่านหน้าจอเข้าใจฟังก์ชันของปุ่ม
การเข้าถึงได้ง่ายช่วยเพิ่มประสิทธิภาพการใช้งาน การปรับแต่งเว็บไซต์ให้ติดอันดับในเครื่องมือค้นหา (SEO) และความครอบคลุม ซึ่งเป็นสิ่งสำคัญอย่างยิ่งสำหรับแอปพลิเคชันเว็บขององค์กรในยุคปัจจุบัน
31) เส้นทางการเรนเดอร์ที่สำคัญคืออะไร และเราจะเพิ่มประสิทธิภาพเส้นทางเหล่านั้นได้อย่างไร?
การขอ เส้นทางการเรนเดอร์ที่สำคัญ (CRP) คือลำดับขั้นตอนที่เบราว์เซอร์ใช้ในการแปลง HTML, CSS และ Javaแปลงสคริปต์เป็นพิกเซลบนหน้าจอ การปรับให้เหมาะสมจะช่วยลดขนาดสคริปต์ให้เล็กลง เวลาในการเรนเดอร์ครั้งแรก และช่วยปรับปรุงประสิทธิภาพการทำงานที่รับรู้ได้
เทคนิคการเพิ่มประสิทธิภาพ:
- ลดทรัพยากรที่สำคัญให้น้อยที่สุด — CSS แบบอินไลน์ที่แสดงผลเมื่อเปิดหน้าจอ
- เลื่อนหรืออะซิงโครนัส Javaต้นฉบับ เพื่อหลีกเลี่ยงการบล็อกการแสดงผล
- ใช้คำแนะนำแหล่งข้อมูล (
<link rel="preload">,<link rel="dns-prefetch">). - บีบอัดทรัพย์สิน (Gzip/Brotli)
- โหลดรูปภาพและวิดีโอแบบ Lazy Load.
ตัวอย่าง: การวาง <script src="app.js" defer> ช่วยให้ DOM โหลดเสร็จก่อนที่ JavaScript จะทำงาน ซึ่งจะช่วยปรับปรุงตัวชี้วัดการโต้ตอบของหน้าเว็บ เช่น FCP (First Contentful Paint)
32) ตัวชี้วัดประสิทธิภาพเว็บ เช่น LCP, FID และ CLS คืออะไร?
การวัดผลการปฏิบัติงานสมัยใหม่มุ่งเน้นไปที่... Core Web Vitals — ตัวชี้วัดสำคัญที่ขับเคลื่อนด้วยประสบการณ์ผู้ใช้ (UX) ซึ่งกำหนดโดย Google:
| เมตริก | แบบเต็ม | เกณฑ์เป้าหมาย | มันวัดอะไร |
|---|---|---|---|
| LCP | สีที่พึงพอใจที่สุด | ≤ 2.5 วินาที | ประสิทธิภาพการโหลด |
| เอฟไอดี | หน่วงเวลาอินพุตแรก | ≤ 100 มิลลิวินาที | การติดต่อสื่อสาร |
| CLS | เค้าโครงสะสม Shift | ≤ 0.1 | ความมั่นคงทางการมองเห็น |
ตัวอย่าง: ปุ่ม "ซื้อเลย" ที่เปลี่ยนตำแหน่งไปมาจะเพิ่มโอกาสในการขาย (CLS) และทำให้ผู้ใช้รู้สึกหงุดหงิด
การปรับปรุง LCP ผ่านการเพิ่มประสิทธิภาพรูปภาพหรือการโหลดแบบ Lazy Loading ช่วยเพิ่มประสิทธิภาพ SEO และการรักษาฐานผู้ใช้โดยตรง
33) คุณจะมั่นใจได้อย่างไรว่าการพัฒนาส่วนหน้า (front-end development) มีความปลอดภัย?
ความปลอดภัยเป็นสิ่งสำคัญอย่างยิ่ง เนื่องจากโค้ดฝั่งไคลเอนต์สามารถมองเห็นได้ นักพัฒนาจึงต้องนำแนวปฏิบัติที่ดีที่สุดมาใช้เพื่อความปลอดภัย ป้องกันการโจมตีแบบ Injection, Cross-site และ Data exposing.
แนวทางปฏิบัติที่สำคัญ:
- ตรวจสอบและยืนยันข้อมูลที่ผู้ใช้ป้อน (ป้องกัน XSS)
- ใช้ นโยบายการรักษาความปลอดภัยของเนื้อหา (CSP) ส่วนหัว
- หลีกเลี่ยงการจัดเก็บโทเค็นที่มีข้อมูลสำคัญไว้ใน localStorage
- ใช้งาน HTTPS และใช้คุกกี้ที่ปลอดภัย
- หลีกเลี่ยงการแสดงผล HTML แบบไดนามิก
ตัวอย่าง:
element.textContent = userInput; // Safe element.innerHTML = userInput; // Unsafe (may run scripts)
เคล็ดลับ: การอธิบายตัวอย่างการแก้ไขปัญหาที่เกิดขึ้นจริง (เช่น React ทำการหลีกเลี่ยงอักขारेพิเศษใน JSX โดยอัตโนมัติ) จะสร้างความประทับใจให้กับผู้สัมภาษณ์
34) Service worker คืออะไร และช่วยปรับปรุงเว็บแอปพลิเคชันได้อย่างไร?
พนักงานบริการ เป็นสคริปต์ที่ทำงานอยู่เบื้องหลังซึ่งดักจับคำขอเครือข่าย ทำให้สามารถ... ความสามารถออฟไลน์, แคชและ ผลักดันการแจ้งเตือน — จำเป็นสำหรับ Progressive Web Apps (PWA).
วงจรชีวิต:
- สมัครสมาชิก – เบราว์เซอร์ดาวน์โหลด Service Worker
- การติดตั้ง – แคชทรัพยากรแบบคงที่
- กระตุ้น – ควบคุมเหตุการณ์การดึงข้อมูล
ตัวอย่าง:
self.addEventListener('fetch', e => {
e.respondWith(caches.match(e.request) || fetch(e.request));
});
ข้อดี ได้แก่ การโหลดที่เร็วขึ้นและการใช้งานแบบออฟไลน์ ในขณะที่การกำหนดเวอร์ชันช่วยให้การอัปเดตเป็นไปอย่างมีระบบ
35) เฟรมเวิร์กสำหรับการทดสอบที่ใช้ในงานพัฒนาส่วนหน้า (front-end development) มีอะไรบ้าง?
การทดสอบช่วยให้มั่นใจได้ถึงเสถียรภาพและป้องกันข้อผิดพลาด ระดับการทดสอบที่แตกต่างกันมีเป้าหมายเพื่อตอบสนองความต้องการเฉพาะด้าน:
| ประเภท | จุดมุ่งหมาย | เครื่องมือ |
|---|---|---|
| Unit | ทดสอบฟังก์ชัน/ส่วนประกอบแต่ละส่วน | เจสต์ โมคา |
| บูรณาการ | ปฏิสัมพันธ์ของโมดูลทดสอบ | ไลบรารีการทดสอบ React |
| จากต้นทางถึงปลายทาง (E2E) | จำลองขั้นตอนการทำงานของผู้ใช้ | Cypressนักเขียนบทละคร |
| การแสดงผล/ส่วนติดต่อผู้ใช้ | ติดตามเทรนด์การออกแบบ | เพอร์ซี่ โครมาติก |
ตัวอย่าง: การใช้งาน Jest ร่วมกับ React Testing Library:
test('renders heading', () => {
render(<Header />); expect(screen.getByText(/welcome/i)).toBeInTheDocument();
});
การสัมภาษณ์สมัยใหม่มักเน้นความครอบคลุมของการทดสอบและการบูรณาการ CI
36) คุณใช้ Git ในขั้นตอนการทำงานฝั่ง front-end อย่างไร?
ไป เป็นระบบควบคุมเวอร์ชันแบบกระจายศูนย์ที่ใช้สำหรับการทำงานร่วมกันและการติดตามการเปลี่ยนแปลง
คำสั่งหลัก:
git clone→ คัดลอกที่เก็บข้อมูลgit branch/checkout -b→ สร้าง feature branch ใหม่git commit/push→ บันทึกและแชร์การเปลี่ยนแปลงgit merge/rebase→ ผสานรวมคุณสมบัติต่างๆgit pull request→ ทำงานร่วมกันและตรวจสอบ
ตัวอย่าง: กำลังติดตาม การไหลของ Git (develop, feature/*, release/*, hotfix/*) ช่วยให้มั่นใจได้ถึงการกำหนดเวอร์ชันอย่างเป็นระบบในโครงการที่มีนักพัฒนาหลายคน
ความรู้เกี่ยวกับ การกระทำของ GitHub or ท่อ CI / CD เพิ่มคะแนนโบนัส
37) บทบาทของเครื่องมือสร้างโปรแกรม เช่น Webpack, Vite และ Babel คืออะไร?
เครื่องมือสร้างโปรแกรมจะทำการรวมไฟล์ แปลงโค้ด และเพิ่มประสิทธิภาพโค้ดโดยอัตโนมัติ
| เครื่องมือ | ฟังก์ชัน |
|---|---|
| webpack | รวมไฟล์ JS/CSS/รูปภาพ พร้อมตัวโหลดและปลั๊กอิน |
| ที่จอแจอึกทึก | แปลงโค้ด ES6+ เป็น ES5 สำหรับเบราว์เซอร์รุ่นเก่า |
| ชีวิต | เครื่องมือสร้างโปรแกรมที่ทันสมัย พร้อมเซิร์ฟเวอร์สำหรับการพัฒนาที่รวดเร็วทันใจ |
| ESLint | การตรวจสอบคุณภาพโค้ดด้วย Linting |
ตัวอย่าง: Webpack จะรวมโมดูลหลายๆ โมดูลเข้าเป็นไฟล์เดียวที่ได้รับการปรับแต่งให้เหมาะสมที่สุด
Vite ใช้ประโยชน์จาก ES Modules ดั้งเดิมเพื่อการโหลดหน้าเว็บใหม่ที่รวดเร็วเกือบจะในทันที เหมาะอย่างยิ่งสำหรับแอปพลิเคชัน React และ Vue สมัยใหม่
เครื่องมือเหล่านี้ช่วยให้มั่นใจได้ว่าการใช้งานจริงจะมีประสิทธิภาพและพร้อมใช้งาน
38) คุณจัดการกับปัญหาความเข้ากันได้ของเบราว์เซอร์อย่างไร?
ความไม่สอดคล้องกันระหว่างเบราว์เซอร์ต่างๆ เกิดจากวิธีการใช้งานมาตรฐานเว็บที่แตกต่างกัน
ปฏิบัติที่ดีที่สุด:
- ใช้ คำนำหน้าอัตโนมัติ สำหรับคำนำหน้าของผู้จำหน่าย
- ทดสอบบนเบราว์เซอร์หลักๆ ผ่านทาง BrowserStack or SauceLabs.
- ติดตาม การเพิ่มประสิทธิภาพแบบก้าวหน้า: เน้นฟังก์ชันหลักก่อน ตามด้วยฟังก์ชันขั้นสูงในบางกรณี
- ใช้ การตรวจจับคุณสมบัติ (
Modernizr) แทนที่จะใช้การตรวจสอบเบราว์เซอร์ - สมัครสมาชิก โพลีฟิล สำหรับ API ที่ขาดหายไป
ตัวอย่าง: fetch() ไม่รองรับใน IE11 — ให้ใช้ polyfill หรือใช้ตัวเลือกสำรอง XMLHttpRequest.
การแสดงผลที่สม่ำเสมอในทุกเบราว์เซอร์แสดงให้เห็นถึงความเชี่ยวชาญด้านวิศวกรรมส่วนหน้า (front-end engineering)
39) อธิบายสถานการณ์ที่คุณได้ปรับปรุงประสิทธิภาพหรือความสามารถในการใช้งานของเว็บแอปพลิเคชัน
ตัวอย่างคำตอบเชิงพฤติกรรม:
ในโปรเจ็กต์ก่อนหน้านี้ แดชบอร์ดของเราทำงานได้ไม่ดีบนมือถือ หลังจากตรวจสอบด้วย Chrome Lighthouse ผมพบว่ารูปภาพไม่ได้รับการปรับแต่งและมีการเรนเดอร์ซ้ำมากเกินไปใน React ผมจึงได้นำวิธีการแก้ไขมาใช้ ขี้เกียจโหลด, การบันทึกและ การแยกรหัสเวลาในการโหลดหน้าเว็บดีขึ้นจาก 6 วินาที เหลือ 1.8 วินาที และคะแนนประสิทธิภาพ Lighthouse ของเราเพิ่มขึ้นจาก 52 เป็น 92
นอกจากนี้ การนำป้ายกำกับ ARIA มาใช้ยังช่วยเพิ่มความสอดคล้องกับมาตรฐานการเข้าถึง (WCAG 2.1) การปรับปรุงแบบองค์รวมนี้ช่วยปรับปรุงประสบการณ์ผู้ใช้และลดอัตราการออกจากเว็บไซต์ลง 25%
ผู้สัมภาษณ์ชื่นชอบตัวชี้วัดที่เป็นรูปธรรมและการสาธิตการแก้ปัญหา
40) ทักษะด้านมนุษยสัมพันธ์ใดบ้างที่สำคัญสำหรับนักพัฒนา front-end?
แม้ว่าความเชี่ยวชาญทางเทคนิคจะเป็นสิ่งสำคัญ แต่ผู้จ้างงานก็ให้ความสำคัญกับทักษะด้านมนุษยสัมพันธ์และการจัดการองค์กรไม่แพ้กัน
ทักษะด้านมนุษยสัมพันธ์ที่จำเป็น:
- ทำงานร่วมกัน: ทำงานร่วมกับทีมออกแบบ ทีม QA และทีมแบ็กเอนด์
- การสื่อสาร: การแปลภาษาทางเทคนิคให้ผู้ที่ไม่ใช่ผู้เชี่ยวชาญด้านเทคนิคเข้าใจได้ง่าย
- ใส่ใจในรายละเอียด: การออกแบบที่สมบูรณ์แบบทุกพิกเซลและการคำนึงถึงการเข้าถึงได้ง่าย
- ปรับตัว: เรียนรู้การพัฒนาของเฟรมเวิร์กต่างๆ (React → Next.js → Solid)
- การจัดการเวลา: สร้างสมดุลระหว่างการสร้างต้นแบบอย่างรวดเร็วกับความเสถียรในการผลิต
- วิธีคิดในการแก้ปัญหา: แก้ไขปัญหา UI หรือ API ที่ซับซ้อนได้อย่างมีประสิทธิภาพ
ตัวอย่าง: นักพัฒนา front-end ที่สามารถอธิบายข้อดีข้อเสียระหว่างการออกแบบ UX และความเป็นไปได้ทางเทคนิคได้อย่างชัดเจน จะช่วยเพิ่มประสิทธิภาพของทีมและสร้างความไว้วางใจให้กับผู้มีส่วนได้ส่วนเสีย
🔍 คำถามสัมภาษณ์ยอดนิยมสำหรับตำแหน่งนักพัฒนา Front-End พร้อมสถานการณ์จริงและคำตอบเชิงกลยุทธ์
1) คุณมั่นใจได้อย่างไรว่าเว็บแอปพลิเคชันของคุณสามารถแสดงผลได้อย่างเหมาะสมบนอุปกรณ์และขนาดหน้าจอที่แตกต่างกัน?
สิ่งที่คาดหวังจากผู้สมัคร: ผู้สัมภาษณ์ต้องการประเมินความเข้าใจของคุณเกี่ยวกับหลักการออกแบบที่ตอบสนองต่ออุปกรณ์ต่างๆ และความสามารถในการมอบประสบการณ์การใช้งานที่สม่ำเสมอในทุกอุปกรณ์
ตัวอย่างคำตอบ: “ในบทบาทก่อนหน้านี้ ฉันดูแลเรื่องการตอบสนองของเว็บไซต์โดยใช้แนวทาง mobile-first, CSS media queries และระบบกริดที่ยืดหยุ่น ฉันทดสอบเลย์เอาต์บนอุปกรณ์ต่างๆ และเครื่องมือสำหรับนักพัฒนาเบราว์เซอร์เป็นประจำ เพื่อยืนยันพฤติกรรมและความสามารถในการใช้งานที่สม่ำเสมอ”
2) คุณช่วยอธิบายความแตกต่างระหว่าง HTML เชิงความหมายและ HTML ที่ไม่ใช่เชิงความหมาย และเหตุใดจึงมีความสำคัญได้ไหม?
สิ่งที่คาดหวังจากผู้สมัคร: ผู้สัมภาษณ์กำลังประเมินความรู้พื้นฐานของคุณเกี่ยวกับมาตรฐานเว็บและแนวปฏิบัติที่ดีที่สุดด้านการเข้าถึงเว็บไซต์
ตัวอย่างคำตอบ: “HTML เชิงความหมายใช้แท็กที่มีความหมาย เช่น header, article และ footer เพื่ออธิบายโครงสร้างของเนื้อหา ในขณะที่ HTML ที่ไม่เชิงความหมายจะใช้แท็กทั่วไป เช่น div และ span HTML เชิงความหมายช่วยปรับปรุงการเข้าถึง SEO และการบำรุงรักษา ทำให้แอปพลิเคชันเข้าใจง่ายขึ้นสำหรับผู้ใช้และนักพัฒนา”
3) อธิบายสถานการณ์ที่คุณต้องทำงานร่วมกับนักออกแบบหรือนักพัฒนาแบ็กเอนด์อย่างใกล้ชิด
สิ่งที่คาดหวังจากผู้สมัคร: ผู้สัมภาษณ์ต้องการทำความเข้าใจทักษะการสื่อสารและความสามารถในการทำงานร่วมกับฝ่ายต่างๆ ของคุณ
ตัวอย่างคำตอบ: “ในตำแหน่งงานก่อนหน้านี้ ฉันทำงานอย่างใกล้ชิดกับนักออกแบบและนักพัฒนาแบ็กเอนด์ระหว่างการวางแผนสปรินต์และการประชุมประจำวัน ฉันชี้แจงเจตนาในการออกแบบตั้งแต่เนิ่นๆ และให้ข้อเสนอแนะเกี่ยวกับความเป็นไปได้ ซึ่งช่วยให้เราลดการทำงานซ้ำและส่งมอบฟีเจอร์ได้อย่างมีประสิทธิภาพมากขึ้น”
4) คุณจะปรับปรุงประสิทธิภาพการทำงานของส่วนหน้า (front-end) ในแอปพลิเคชันที่ใช้งานจริงได้อย่างไร?
สิ่งที่คาดหวังจากผู้สมัคร: ผู้สัมภาษณ์ต้องการทดสอบความรู้ของคุณเกี่ยวกับการเพิ่มประสิทธิภาพการทำงานและผลกระทบต่อประสบการณ์ของผู้ใช้
ตัวอย่างคำตอบ: “ผมเน้นการลดขนาดไฟล์ภาพให้เหลือน้อยที่สุด โดยใช้เทคนิคการแบ่งโค้ด การปรับแต่งภาพ และการโหลดแบบ Lazy Loading นอกจากนี้ ผมยังลดการเรนเดอร์ซ้ำที่ไม่จำเป็น และใช้ประโยชน์จากการแคชของเบราว์เซอร์เพื่อให้โหลดได้เร็วขึ้นและใช้งานได้อย่างราบรื่นยิ่งขึ้น”
5) เล่าให้ฟังเกี่ยวกับข้อผิดพลาดที่ท้าทายที่คุณพบเจอในส่วนหน้าเว็บไซต์ และวิธีการที่คุณแก้ไขมัน
สิ่งที่คาดหวังจากผู้สมัคร: ผู้สัมภาษณ์ต้องการประเมินวิธีการแก้ปัญหาและความมุ่งมั่นของคุณ
ตัวอย่างคำตอบ: “ในงานก่อนหน้านี้ ผมเจอปัญหาการจัดวางเลย์เอาต์ที่ไม่สม่ำเสมอ ซึ่งเกิดจากความขัดแย้งของค่าเฉพาะเจาะจงของ CSS ผมจึงใช้เครื่องมือตรวจสอบของเบราว์เซอร์เพื่อแยกแ1ยะปัญหา ปรับปรุงสไตล์ให้ชัดเจนยิ่งขึ้น และเพิ่มเอกสารประกอบเพื่อป้องกันปัญหาที่คล้ายกันในอนาคต”
6) คุณมั่นใจได้อย่างไรว่าแอปพลิเคชันที่คุณสร้างนั้นสามารถเข้าถึงได้ง่าย?
สิ่งที่คาดหวังจากผู้สมัคร: ผู้สัมภาษณ์ต้องการทราบถึงความเข้าใจในเรื่องการออกแบบที่ครอบคลุมและการปฏิบัติตามมาตรฐานการเข้าถึงได้ง่าย
ตัวอย่างคำตอบ: “ฉันตรวจสอบให้แน่ใจว่าแอปพลิเคชันสามารถเข้าถึงได้โดยใช้ HTML ที่มีความหมายเหมาะสม คุณสมบัติ ARIA ที่ถูกต้อง และความแตกต่างของสีที่เพียงพอ นอกจากนี้ ฉันยังทดสอบด้วยการนำทางด้วยแป้นพิมพ์และโปรแกรมอ่านหน้าจอเพื่อยืนยันว่าผู้ใช้ทุกคนสามารถใช้งานแอปพลิเคชันได้อย่างมีประสิทธิภาพ”
7) คุณรับมือกับการได้รับคำติชมเชิงวิจารณ์เกี่ยวกับโค้ดของคุณอย่างไร?
สิ่งที่คาดหวังจากผู้สมัคร: ผู้สัมภาษณ์ต้องการเข้าใจว่าคุณเปิดรับคำติชมและมีทัศนคติที่มุ่งมั่นพัฒนาตนเอง
ตัวอย่างคำตอบ: “ผมมองว่าคำติชมเชิงวิจารณ์เป็นโอกาสในการพัฒนาตนเอง ผมตั้งใจฟัง ถามคำถามเพิ่มเติมหากจำเป็น และนำข้อเสนอแนะไปปรับใช้ให้รอบคอบ เพื่อเพิ่มคุณภาพของโค้ดและให้สอดคล้องกับมาตรฐานของทีม”
8) อธิบายสถานการณ์ที่คุณต้องทำงานให้เสร็จตามกำหนดเวลาที่กระชั้นชิดโดยไม่ลดทอนคุณภาพ
สิ่งที่คาดหวังจากผู้สมัคร: ผู้สัมภาษณ์กำลังประเมินทักษะการบริหารเวลาและการจัดลำดับความสำคัญของคุณ
ตัวอย่างคำตอบ: “ในบทบาทล่าสุดของฉัน ฉันให้ความสำคัญกับฟังก์ชันการทำงานหลักก่อน และเลื่อนการปรับปรุงที่ไม่จำเป็นออกไป ฉันสื่อสารความคืบหน้าอย่างโปร่งใสกับผู้มีส่วนได้ส่วนเสีย และมุ่งเน้นไปที่การเขียนโค้ดที่สะอาดและดูแลรักษาง่าย เพื่อให้ทันกำหนดเวลาโดยไม่ลดทอนคุณภาพ”
9) คุณติดตามเทรนด์และแนวปฏิบัติที่ดีที่สุดด้านการพัฒนา front-end อย่างไร?
สิ่งที่คาดหวังจากผู้สมัคร: ผู้สัมภาษณ์ต้องการประเมินความมุ่งมั่นของคุณในการเรียนรู้อย่างต่อเนื่อง
ตัวอย่างคำตอบ: “ผมติดตามความรู้ใหม่ๆ โดยการอ่านบล็อกด้านเทคนิค ติดตามผู้นำในอุตสาหกรรม และทดลองใช้เครื่องมือใหม่ๆ ในโครงการส่วนตัว การเรียนรู้อย่างต่อเนื่องนี้ช่วยให้ผมนำเสนอโซลูชันที่ทันสมัยและมีประสิทธิภาพมาใช้ในงานของผมได้”
10) คุณจะใช้วิธีใดในการสร้างฟีเจอร์ใหม่เมื่อข้อกำหนดไม่ชัดเจนหรือมีการเปลี่ยนแปลงอยู่ตลอดเวลา?
สิ่งที่คาดหวังจากผู้สมัคร: ผู้สัมภาษณ์กำลังทดสอบความสามารถในการปรับตัวและการตัดสินใจของคุณในสถานการณ์ที่ไม่ชัดเจน
ตัวอย่างคำตอบ: “ผมเริ่มต้นด้วยการชี้แจงข้อสมมติฐานกับผู้มีส่วนได้ส่วนเสีย และแบ่งฟีเจอร์ออกเป็นส่วนประกอบย่อยๆ ที่ยืดหยุ่นได้ ผมปรับปรุงแก้ไขตามคำติชมและปรับตัวอยู่เสมอ เพื่อให้มั่นใจว่าโซลูชันจะพัฒนาไปพร้อมกับความต้องการที่เปลี่ยนแปลงไป”
