หน้าแรก>แหล่งข้อมูลการสร้างเว็บไซต์>ข้อมูลเว็บไซต์
ดาวน์โหลด

แบบทดสอบการพัฒนาเว็บขั้นสูง

repo นี้เกี่ยวข้องกับหลักสูตร Frontendmasters ของฉัน
คุณจะพบคำถามและแหล่งข้อมูลเพิ่มเติมเพื่อทำความเข้าใจแนวคิดที่ดีขึ้น

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

ขอให้สนุกและหวังว่าคุณจะได้เรียนรู้สิ่งใหม่ ๆ ในวันนี้! ขอให้โชคดี! -

repo นี้ ไม่มีคำตอบ (!) เฉพาะคำถามและแหล่งข้อมูลที่เป็นประโยชน์ในหัวข้อของคำถาม!
หากต้องการดูคำตอบและดูคำอธิบายที่มองเห็นได้สำหรับแต่ละคำถาม โปรดดูหลักสูตร Frontendmasters!

ภาพรวม

  • คำถามที่ 1: คำสั่งการดำเนินการ async และ defer
  • คำถามที่ 2: การแสดงผลและการแต่งเพลง
  • คำถามที่ 3: การแก้ไขคำขอโดเมน
  • คำถามที่ 4: Call Stack & Event Loop
  • คำถามที่ 5: คำแนะนำทรัพยากร
  • Quesiton 6: การอ้างอิงและการทำลายวัตถุ
  • คำถามที่ 7: PerformanceNavigationTiming
  • คำถามที่ 8: คำสั่งแคช
  • คำถามที่ 9: คอลเลกชันขยะ
  • คำถามที่ 10: ค่าอนิเมชั่น
  • คำถามที่ 11: การเผยแพร่เหตุการณ์
  • คำถามที่ 12: ความจำเพาะของ CSS
  • คำถามที่ 13: WeakMap
  • คำถามที่ 14: Web Vitals
  • คำถามที่ 15: นโยบายความปลอดภัยของเนื้อหา
  • คำถามที่ 16: นโยบายผู้อ้างอิง
  • คำถามที่ 17: เครื่องกำเนิดไฟฟ้า
  • คำถามที่ 18: วิธีการสัญญา
  • คำถามที่ 19: แคชไปข้างหน้า
  • คำถามที่ 20: XSS, MITM, CSRF, ClickJacking
  • คำถามที่ 21: กลยุทธ์ตัวอักษร
  • คำถามที่ 22: คุกกี้
  • คำถามที่ 23: ตัวเลือก Pseudo CSS
  • คำถามที่ 24: Strict-Transport-Security
  • คำถามที่ 25: เรนเดอร์เลเยอร์
  • คำถามที่ 26: รูปแบบภาพ
  • คำถามที่ 27: คอร์ส
  • คำถามที่ 28: Event Loop
  • คำถามที่ 29: http/1, http/2, http/3
  • คำถามที่ 30: คำหลัก this

ทุกคำถาม

1. ใส่สคริปต์ตามลำดับการดำเนินการที่ถูกต้อง

  • A. <script defer src="defer1.js" /> (โหลดใน 300ms )
  • B. <script defer src="defer2.js" /> (โหลดเป็น 200ms )
  • C. <script async src="async1.js" /> (โหลดใน 300ms )
  • D. <script async src="async2.js" /> (โหลดเป็น 50ms )
  • E. <script async defer src="asyncdefer1.js" /> (โหลดใน 60ms )
ทรัพยากร

คำตอบ:

  • ดูคำตอบและคำอธิบาย

การอ่านเพิ่มเติม:

  • https://html.spec.whatwg.org/multipage/scripting.html#attr-script-async
  • https://javascript.info/script-async-defer
  • https://developer.mozilla.org/en-us/docs/web/html/element/script

2. ข้อความใดเป็นจริง

  • A. ต้นไม้เรนเดอร์มีองค์ประกอบทั้งหมดจาก DOM และ CSSOM รวมกัน
  • B. การรวบรวมเป็นกระบวนการของการแยกเลเยอร์ตามดัชนี z ซึ่งจะถูกรวมเข้าด้วยกันเพื่อสร้างภาพสุดท้ายที่แสดงบนหน้าจอ
  • C. กระบวนการเลย์เอาต์กำหนดสีและรูปภาพให้กับองค์ประกอบภาพในทรีเรนเดอร์
  • D. กระบวนการทำปุ๋ยหมักเกิดขึ้นบนเธรดคอมโพสิต
  • E. องค์ประกอบที่ไม่สามารถมองเห็นได้ในหน้าเช่น display: hidden ไม่ใช่ส่วนหนึ่งของทรี DOM
ทรัพยากร

คำตอบ:

  • ดูคำตอบและคำอธิบาย

การอ่านเพิ่มเติม:

  • https://www.chromium.org/developers/design-documents/graphics-and-skia/
  • https://www.chromium.org/developers/design-documents/gpu-accelerated-compositing-in-chrome/
  • https://chromium.googleource.com/chromium/src/+/master/docs/how_cc_works.md
  • https://docs.google.com/presentation/d/1bopxbgnrtu0ddsc144rcxayga_wf53k96imrh8mp34y
  • https://developer.chrome.com/blog/inside-browser-part4/
  • https://www.chromium.org/blink/

3. เติมช่องว่าง 

 - Browser sends request to [A]
- [A] queries [B]
- [B] responds with [C] IP address
- [A] queries [C]
- [C] responds with [D] IP address
- [A] queries [D]
- [D] responds with website's [E]
  1. Recursive DNS Resolver
  2. เซิร์ฟเวอร์ชื่อรูท
  3. ที่อยู่ IP
  4. เซิร์ฟเวอร์ชื่อโดเมนระดับบนสุด
  5. เซิร์ฟเวอร์ชื่ออัตโนมัติ
ทรัพยากร

คำตอบ:

  • ดูคำตอบและคำอธิบาย

การอ่านเพิ่มเติม:

  • https://datatracker.ietf.org/doc/html/rfc1035
  • https://www.liquidweb.com/kb/how-to-demystify-the-dns-process/
  • https://www.cloudflare.com/learning/dns/what-is-dns/
  • https://www.cloudflare.com/learning/dns/what-is-recursive-dns/

4. อะไรถูกบันทึก? 

 setTimeout ( ( ) => console . log ( 1 ) ) ;
Promise . resolve ( ) . then ( ( ) => console . log ( 2 ) ) ;
Promise . resolve ( ) . then ( ( ) => setTimeout ( ( ) => console . log ( 3 ) ) ;
new Promise ( ( ) => console . log ( 4 ) ) ;
setTimeout ( ( ) => console . log ( 5 ) ) ;
  • A. 1 2 3 4 5
  • B. 1 5 2 4 3
  • C. 3 2 4 1 5
  • D. 4 2 1 5 3
  • E. 2 4 3 1 5
ทรัพยากร

คำตอบ:

  • ดูคำตอบและคำอธิบาย

การอ่านเพิ่มเติม:

  • https://tc39.es/ecma262/#sec-promise-objects
  • https://dev.to/lydiahallie/javascript-visualized-promises-async-await-5gke
  • https://developer.mozilla.org/en-us/docs/web/javascript/reference/global_objects/promise
  • https://web.dev/promises/
  • https://javascript.info/promise-basics
  • https://javascript.info/microtask-queue

5. จับคู่คำแนะนำทรัพยากรกับคำจำกัดความของพวกเขา

  • A. dns-prefetch
  • B. preconnect
  • C. prefetch
  • D. preload
  1. จัดลำดับความสำคัญการดึงทรัพยากรที่สำคัญที่จำเป็นสำหรับการนำทางในปัจจุบัน
  2. ดำเนินการความละเอียดของชื่อโดเมนในพื้นหลัง
  3. ดำเนินการในเชิงรุกดำเนินการ DNS Resolution และ Handshake TCP/TLS
  4. ขอทรัพยากรที่ไม่สำคัญในพื้นหลัง
ทรัพยากร

คำตอบ:

  • ดูคำตอบและคำอธิบาย

การอ่านเพิ่มเติม:

  • https://html.spec.whatwg.org/#linktypes
  • https://www.chromium.org/developers/design-documents/dns-prefetching/
  • https://www.smashingmagazine.com/2019/04/optimization-performance-resource-hints/
  • https://web.dev/preconnect-and-dns-prefetch/
  • https://csswizardry.com/2019/01/bandwidth-or-latency-when-to-ptimise-hich/
  • https://www.splunk.com/en_us/blog/learn/preconnect-resource-hints.html

6. ผลลัพธ์คืออะไร? 

 const member = { 
  name : "Jane" , 
  address : { street : "101 Main St" }
} ;
const member2 = { ... member } ;
member . address . street = "102 Main St" ;
member . name = "Sarah" ;

console . log ( member2 ) ;
  • A. { name: "Jane", address: { street: "101 Main St" }}
  • B. { name: "Jane", address: { street: "102 Main St" }}
  • C. { name: "Sarah", address: { street: "101 Main St" }}
  • D. { name: "Sarah", address: { street: "102 Main St" }}
ทรัพยากร

คำตอบ:

  • ดูคำตอบและคำอธิบาย

การอ่านเพิ่มเติม:

  • https://developer.mozilla.org/en-us/docs/glossary/shallow_copy
  • https://developer.mozilla.org/en-us/docs/web/javascript/reference/operators/spread_syntax

7. ใส่ PerformanceNavigationTimings ตามลำดับที่ถูกต้อง

  • A. loadEventStart
  • B. domComplete
  • C. domContentLoadedEventStart
  • D. fetchStart
  • E. connectEnd
  • F. domInteractive
ทรัพยากร

คำตอบ:

  • ดูคำตอบและคำอธิบาย

การอ่านเพิ่มเติม:

  • https://www.w3.org/tr/navigation-timing-2/
  • https://developer.mozilla.org/en-us/docs/web/performance/navigation_and_resource_timings
  • https://web.dev/navigation-and-resource-timing/

8. จับคู่คำสั่งแคชกับคำจำกัดความของพวกเขา

  • A. no-cache
  • B. must-revalidate
  • C. no-store
  • D. private
  • E. stale-while-revalidate
  1. ตรวจสอบการตอบสนองเก่า ๆ กับเซิร์ฟเวอร์ Origin ก่อนใช้งาน
  2. ให้บริการเนื้อหาเก่า ๆ ในขณะที่ตรวจสอบการตอบสนองที่แคชด้วยเซิร์ฟเวอร์ Origin
  3. ไม่แคชส่วนใดส่วนหนึ่งของคำขอหรือการตอบกลับ
  4. ตรวจสอบการตอบสนองที่แคชกับเซิร์ฟเวอร์ Origin ก่อนที่จะใช้แม้ว่ามันจะยังสดอยู่
  5. ป้องกันการแคชบนแคชที่ใช้ร่วมกัน
ทรัพยากร

คำตอบ:

  • ดูคำตอบและคำอธิบาย

การอ่านเพิ่มเติม:

  • https://www.rfc-editor.org/rfc/rfc9111
  • https://www.keycdn.com/blog/http-cache-headers
  • https://www.cloudflare.com/learning/cdn/glossary/what-is-cache-control/

9. ข้อความใดที่เป็นจริงเกี่ยวกับบล็อกรหัสนี้? 

 function addMember ( name ) {
  return { name , createdAt : Date . now ( ) }
}

let obj1 = addMember ( "John" ) ;
let obj2 = addMember ( "Sarah" ) ;

obj1 . friend = obj2 ;
obj2 . friend = obj1 ;

obj1 = null ;
obj2 = null ;
  • A. obj1 และ obj2 ไม่สามารถเก็บขยะได้นำไปสู่การรั่วไหลของหน่วยความจำ
  • B. obj1 และ obj2 จะถูกเก็บรวบรวมทันทีหลังจากตั้งค่าให้เป็น null
  • C. obj1 และ obj2 จะถูกเก็บรวบรวมหลังจากปิดแท็บเบราว์เซอร์เท่านั้น
  • D. obj1 และ obj2 สามารถเก็บขยะได้ในระหว่างรอบการรวบรวมขยะครั้งต่อไป
ทรัพยากร

คำตอบ:

  • ดูคำตอบและคำอธิบาย

การอ่านเพิ่มเติม:

  • https://developer.mozilla.org/en-us/docs/web/javascript/memory_management
  • https://javascript.info/garbage-collection
  • https://github.com/thlorenz/v8-perf/blob/master/gc.md
  • https://medium.com/@mmoshikoo/garbage-collector-in-v8-engine-1c582399837

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

  • A. width : เลย์เอาต์, สี, คอมโพสิต
  • B. opacity : สีคอมโพสิต
  • C. background-image : คอมโพสิต
  • D. left : เลย์เอาต์, สี, คอมโพสิต
  • E. transform : สีคอมโพสิต
ทรัพยากร

คำตอบ:

  • ดูคำตอบและคำอธิบาย

การอ่านเพิ่มเติม:

  • https://www.chromium.org/developers/design-documents/gpu-accelerated-compositing-in-chrome/
  • https://developer.chrome.com/blog/inside-browser-part3/
  • https://www.smashingmagazine.com/2016/12/gpu-animation-doing-it-right/
  • https://web.dev/avoid-large-complex-layoutes-and-layout-hrashing/
  • https://developer.chrome.com/blog/hardware-accelerated-animations/

11. มีอะไรเข้าสู่ระบบเมื่อคลิกปุ่ม? 

 < div class = "outer" >
  < div class = "inner" >
    < button > Click me! </ button >
  </ div >
</ div > 
 outer . addEventListener ( "click" , ( ) => log ( "A" ) , true ) ;
outer . addEventListener ( "click" , ( ) => log ( "B" ) ) ;
inner . addEventListener ( "click" , ( ) => log ( "C" ) , true ) ;
inner . addEventListener ( "click" , ( e ) => {
   log ( "D" ) ;
   e . stopPropagation ( ) ;
   log ( "E" ) ;
} ) ;
button . addEventListener ( "click" , ( ) => log ( "F" ) ) ;
button . addEventListener ( "click" , ( ) => log ( "G" ) , true ) ;
  • A. A B C D E F G
  • B. A C G F D
  • C. B D E F G C A
  • D. A C G F
  • E. A C G F D E
ทรัพยากร

คำตอบ:

  • ดูคำตอบและคำอธิบาย

การอ่านเพิ่มเติม:

  • https://www.w3.org/tr/dom-level-2-events/events.html#events-flow
  • https://javascript.info/bubbling-and-capturing
  • https://developer.mozilla.org/en-us/docs/web/api/eventtarget/addeventListener

12. สั่งตัวเลือก CSS โดยความเฉพาะเจาะจงจากน้อยไปมาก

  • A. div h1.large-text::before
  • B. div h1:first-child
  • C. h1:not(.small-text)
  • D. .large-text:nth-child(1)
  • E. h1.large-text[id="title"]
  • F. h1.large-text#title
ทรัพยากร

คำตอบ:

  • ดูคำตอบและคำอธิบาย

การอ่านเพิ่มเติม:

  • https://www.w3.org/tr/2018/rec-selectors-3-20181106/#specificity
  • https://developer.mozilla.org/en-us/docs/web/css/specificity
  • https://specificity.keegan.st/

13. ข้อความใดเป็นจริง? 

 const userTokenMap = new WeakMap ( ) ;

let user = { 
  name : "Jane Doe" , 
  age : 24 
} ;

userTokenMap . set ( user , "secret_token" ) ;
  • A. userTokenMap ใช้โปรโตคอลตัววนซ้ำ
  • B. เมื่อตั้งค่า user เป็น null userTokenMap จะส่งคืน 0
  • C. หากวัตถุผู้ใช้ถูกตั้งค่าเป็น null รายการ userTokenMap สามารถรวบรวมขยะได้
  • D. [...userTokenMap] ส่งคืนรายการ userTokenMap ที่หลากหลาย
ทรัพยากร

คำตอบ:

  • ดูคำตอบและคำอธิบาย

การอ่านเพิ่มเติม:

  • https://read262.netlify.app/keyed-collections/weakmap-objects/
  • https://javascript.info/weakmap-weakset
  • https://developer.mozilla.org/en-us/docs/web/javascript/reference/global_objects/weakmap

14. จับคู่เว็บ Vitals กับคำอธิบายที่ถูกต้อง

  • A. ttfb
  • B. FID
  • C. TTI
  • D. TBT
  • E. CLS
  • F. inp
  1. เวลาที่ใช้สำหรับหน้าเว็บเพื่อตอบสนองต่อการโต้ตอบครั้งแรกของผู้ใช้
  2. เวลาที่เธรดหลักถูกบล็อกจากการตอบสนองต่อการป้อนข้อมูลของผู้ใช้
  3. เวลาเฉลี่ยที่ใช้สำหรับหน้าเว็บเพื่ออัปเดตภาพหลังจากผู้ใช้โต้ตอบกับมัน
  4. เวลาที่เซิร์ฟเวอร์ใช้ในการตอบกลับคำขอและเริ่มส่งข้อมูลกลับไปยังไคลเอนต์
  5. เวลาที่ใช้ในการโหลดเว็บเพจและตอบสนองต่อการป้อนข้อมูลของผู้ใช้อย่างเต็มที่
  6. ความเสถียรของเค้าโครงของหน้าเว็บหรือเลย์เอาต์ที่ไม่คาดคิดที่เกิดขึ้นบนหน้าเว็บขณะที่โหลด
ทรัพยากร

คำตอบ:

  • ดูคำตอบและคำอธิบาย

การอ่านเพิ่มเติม:

  • https://web.dev/metrics/

15. ทรัพยากรใดที่จะได้รับอนุญาตด้วยส่วนหัว CSP ต่อไปนี้ 

 default - src "none" ; script - src "self" ; img - src "self" example . com ; style - src fonts . googleapis . com ; font - src fonts . gstatic . com ;
  • A. <script src="/js/app.js"></script>
  • B. fetch("https://api.website.com/data")
  • C. @font-face { url("fonts/my-font.woff") }
  • D. <img src="data:image/svg+xml;..." />
  • E. <style>body { font-family: 'Roboto' }</style>
  • F. <iframe src="https://embed.example.com"></iframe>
  • G. <link rel="stylesheet" href="https://fonts.googleapis.com..>
  • H. <video src="https://videos.example.com/..."></video>
ทรัพยากร

คำตอบ:

  • ดูคำตอบและคำอธิบาย

การอ่านเพิ่มเติม:

  • https://content-security-policy.com/
  • https://developer.mozilla.org/en-us/docs/web/http/csp
  • https://web.dev/csp/

16. ข้อความใดเป็นจริง

  • A. rel="noopener" ใช้เพื่อป้องกันไม่ให้หน้าต้นฉบับเข้าถึงวัตถุ window ของหน้าเปิดใหม่
  • B. rel="noreferrer" สามารถใช้เพื่อป้องกันไม่ให้หน้าเปิดใหม่ไม่สามารถเข้าถึงวัตถุ window ของหน้าดั้งเดิม
  • C. rel="noopener" และ rel="noreferrer" สามารถใช้กับ https ได้เท่านั้น
  • D. rel="noopener" สามารถใช้เพื่อป้องกัน tabnabbing
  • E. Referrer-Policy เริ่มต้น no-referrer-when-downgrade
ทรัพยากร

คำตอบ:

  • ดูคำตอบและคำอธิบาย

การอ่านเพิ่มเติม:

  • https://www.w3.org/tr/referrer-policy/
  • https://html.spec.whatwg.org/multipage/links.html#link-type-noopener
  • https://html.spec.whatwg.org/multipage/links.html#link-type-noreferrer
  • https://web.dev/referrer-best-practices/

17. เมื่อไหร่ "In log: My input!" เข้าสู่ระบบ? 

 function * generatorFunc ( ) {
  const result = yield "My input!" ;
  console . log ( "In log:" , result ) ;
  return "All done!"
} ;

const it = generatorFunc ( ) ;
  • A. it.next()
  • B. it.next("My input!") it.next()
  • C. it.next() it.next("My input!")
  • D. it.next() it.next()
ทรัพยากร

คำตอบ:

  • ดูคำตอบและคำอธิบาย

การอ่านเพิ่มเติม:

  • https://developer.mozilla.org/en-us/docs/web/javascript/guide/iterators_and_generators
  • https://javascript.info/generators
  • https://exploringjs.com/es6/ch_iteration.html
  • https://developer.mozilla.org/en-us/docs/web/javascript/reference/global_objects/generator
  • https://blog.logrocket.com/javascript-iteratores-and-generators-a-pomplete-guide/

18. เชื่อมต่อวิธีการสัญญากับเอาต์พุตขวา 

 const promises = [
   new Promise ( res => setTimeout ( ( ) => res ( 1 ) , 200 ) ,
   new Promise ( res => setTimeout ( ( ) => res ( 2 ) , 100 ) ,
   new Promise ( ( _ , rej ) => setTimeout ( ( ) => rej ( 3 ) , 100 ) ,
   new Promise ( res => setTimeout ( ( ) => res ( 4 ) , 300 )
] ;

Promise [ ❓ ]
   . then ( res => console . log ( "Result: " , res ) )
   . catch ( err => console . log ( "Error: " , err )
  • A. all
  • B. any
  • ค. race
  • D. allSettled
  1. Result: 2
  2. Error: 3
  3. Result: [{}, {}, {}, {}]
  4. Result: 2
ทรัพยากร

คำตอบ:

  • ดูคำตอบและคำอธิบาย

การอ่านเพิ่มเติม:

  • https://javascript.info/promise-basics
  • https://developer.mozilla.org/en-us/docs/web/javascript/reference/global_objects/promise

19. ค่าใดต่อไปนี้ที่จะทำให้หน้าเว็บของคุณไม่มีสิทธิ์ได้รับ bfcache

  • A. unload
  • B. pagehide
  • C. onbeforeunload
  • D. pageshow
  • E. ทั้งหมดข้างต้น
  • F. ไม่มีข้อใดข้างต้น
ทรัพยากร

คำตอบ:

  • ดูคำตอบและคำอธิบาย

การอ่านเพิ่มเติม:

  • https://web.dev/bfcache/
  • https://www.smashingmagazine.com/2022/05/performance-game-changer-back-forward-cache/
  • https://nitropack.io/blog/post/back-forward-cache

20. เชื่อมต่อคำศัพท์กับคำจำกัดความของพวกเขา

  • A. XSS
  • B. CSRF
  • C. ui แก้ไข
  • D. MITM
  1. อนุญาตให้ผู้โจมตีฉีดสคริปต์ที่เป็นอันตรายลงในหน้าเว็บที่ผู้อื่นดู
  2. กลอุบายให้ผู้ใช้มีปฏิสัมพันธ์กับองค์ประกอบที่ปลอมตัวหรือซ่อนเร้น
  3. เคล็ดลับให้ผู้ใช้ดำเนินการกระทำที่ไม่พึงประสงค์โดยใช้ประโยชน์จากเซสชันที่ได้รับการรับรองความถูกต้อง
  4. ช่วยให้ผู้โจมตีสกัดกั้นและแก้ไขการสื่อสารระหว่างสองฝ่ายโดยไม่ต้องมีความรู้
ทรัพยากร

คำตอบ:

  • ดูคำตอบและคำอธิบาย

การอ่านเพิ่มเติม:

  • https://owasp.org/www-community/attacks/xss/
  • https://owasp.org/www-community/attacks/csrf
  • https://owasp.org/www-community/attacks/clickjacking
  • https://www.imperva.com/learn/application-security/man-in-the-middle-attack-mitm/
  • https://cheatsheetseries.owasp.org/cheatsheets/cross-site_request_forgery_prevention_cheat_sheet.html
  • https://cheatsheetseries.owasp.org/cheatsheets/cross_site_scripting_prevention_cheat_sheet.html

21. เชื่อมต่อกลยุทธ์ตัวอักษรกับคำจำกัดความของพวกเขา

  • A. font-display: block
  • B. font-display: swap
  • C. font-display: fallback
  • D. font-display: optional
  • E. font-display: auto
  1. แสดงตัวอักษรที่มองไม่เห็นชั่วคราวจนกว่าจะดาวน์โหลดแบบอักษรที่กำหนดเอง
  2. ใช้ตัวอักษรทางเลือกในขณะที่ตัวอักษรที่กำหนดเองกำลังดาวน์โหลดเปลี่ยนเป็นตัวอักษรที่กำหนดเองเมื่อพร้อมใช้งาน
  3. ใช้แบบอักษรที่กำหนดเองเฉพาะในกรณีที่มีมิฉะนั้นใช้แบบอักษรทางเลือก
  4. อนุญาตให้เบราว์เซอร์กำหนดพฤติกรรมที่เหมาะสมที่สุดสำหรับการโหลดแบบอักษร
  5. ใช้แบบอักษรที่กำหนดเองหากพร้อมใช้งานให้ใช้แบบอักษรทางเลือกหากไม่มีแบบอักษรที่กำหนดเอง
ทรัพยากร

คำตอบ:

  • ดูคำตอบและคำอธิบาย

การอ่านเพิ่มเติม:

  • https://developer.mozilla.org/en-us/docs/web/css/@font-face/font-display
  • https://css-tricks.com/almanac/properties/f/font-display/

22. ข้อความใดที่เป็นจริงเกี่ยวกับส่วนหัวคุกกี้ต่อไปนี้? 

 Set - Cookie : my - cookie = "value" ; Domain = "website.com" ; Secure ; HttpOnly ;
  • A. คุกกี้นี้สามารถเข้าถึงได้จาก www.website.com แต่ไม่ได้มาจาก blog.website.com
  • B. คุกกี้นี้สามารถตั้งค่าฝั่งไคลเอ็นต์ได้ในโดเมน website.com
  • C. คุกกี้นี้ได้รับการปฏิบัติเหมือนคุกกี้เซสชัน
  • D. คุกกี้นี้จะถูกส่งเมื่อนำทางจากเว็บไซต์อื่นไปยัง www.website.com
ทรัพยากร

คำตอบ:

  • ดูคำตอบและคำอธิบาย

การอ่านเพิ่มเติม:

  • https://httpwg.org/http-extensions/draft-ietf-httpbis-rfc6265bis.html#name-overview
  • https://resources.infosecinstitute.com/topic/securing-cookies-httponly-secure-flags/
  • https://developer.mozilla.org/en-us/docs/web/http/cookies
  • https://developer.mozilla.org/en-us/docs/web/http/headers/set-cookie

23. ตัวเลือก CSS (pseudo) ใดที่เราสามารถใช้เพื่อกำหนดเป้าหมายเฉพาะรายการรายการแรก <li>One</li> ? 

 < div >
  < ul >
    < li > One </ li >
    < ul >
      < li > Two </ li >
      < li > Three </ li >
    </ ul >
  </ ul >
  < ul >
    < li > Four </ li >
  </ ul >
</ div >
  • A. ul:first-child > li
  • B. ul:first-child + li
  • C. ul:first-child > li:first-child
  • D. ul:first-of-type > li:first-of-type
  • E. ul:first-child + li:first-child
ทรัพยากร

คำตอบ:

  • ดูคำตอบและคำอธิบาย

การอ่านเพิ่มเติม:

  • https://developer.mozilla.org/en-us/docs/web/css/css_selectors
  • https://developer.mozilla.org/en-us/docs/web/css/pseudo-classes
  • https://www.w3.org/tr/selectors-4/#pseudo-classes

24. อะไรคือความจริงเกี่ยวกับส่วนหัวต่อไปนี้? 

 Strict - Transport - Security : max - age = 31536000 ; includeSubdomains ;
  • A. ส่วนหัวบังคับใช้ HTTPS เป็นเวลาหนึ่งปีในโดเมนและโดเมนย่อยของมัน
  • B. เมื่อ max-age หมดอายุเบราว์เซอร์จะเริ่มต้นเป็น http
  • C. max-age จะได้รับการรีเฟรชทุกครั้งที่เบราว์เซอร์อ่านส่วนหัว
  • D. อนุญาตให้มีคำขอไม่ปลอดภัยต่อโดเมนย่อย
ทรัพยากร

คำตอบ:

  • ดูคำตอบและคำอธิบาย

การอ่านเพิ่มเติม:

  • https://cheatsheetseries.owasp.org/cheatsheets/http_strict_transport_security_cheat_sheet.html
  • https://developer.mozilla.org/en-us/docs/web/http/headers/strict-transport-security

25. คุณสมบัติใดต่อไปนี้ทำให้องค์ประกอบได้รับการเลื่อนตำแหน่งให้เป็นเครื่องเรนเดอร์ของตัวเอง

  • A. z-index: 1
  • B. translate3d: (0, 0, 0)
  • C. will-change: transform
  • D. transform: rotate(45deg)
  • E. position: fixed
  • F. position: absolute
ทรัพยากร

คำตอบ:

  • ดูคำตอบและคำอธิบาย

การอ่านเพิ่มเติม:

  • https://www.chromium.org/developers/design-documents/gpu-accelerated-compositing-in-chrome/
  • https://surma.dev/things/forcing-layers/
  • https://web.dev/speed-layers/
  • https://www.chromium.org/developers/design-documents/graphics-and-skia/

26. จับคู่รูปแบบรูปภาพกับคำอธิบาย

  • A. JPEG
  • B. PNG
  • C. webp
  • D. avif
  1. ทั้งการสูญเสียและการบีบอัดที่ไม่สูญเสียรองรับ HDR และ WCG รองรับความโปร่งใส
  2. ทั้งการสูญเสียและการบีบอัดที่ไม่สูญเสียรองรับความโปร่งใสรองรับการแสดงผลแบบก้าวหน้า
  3. การบีบอัดแบบไม่สูญเสียคุณภาพสูงรองรับความโปร่งใสขนาดไฟล์ที่ใหญ่ขึ้น
  4. การบีบอัดที่สูญเสียรองรับการแสดงผลแบบก้าวหน้า
ทรัพยากร

คำตอบ:

  • ดูคำตอบและคำอธิบาย

การอ่านเพิ่มเติม:

  • https://developer.mozilla.org/en-us/docs/web/media/formats/image_types
  • https://www.smashingmagazine.com/2021/09/modern-image-formats-avif-webp/

27. อะไรคือความจริงเกี่ยวกับการกำหนดค่า CORS ต่อไปนี้? 

 Access - Control - Allow - Origin : https : / / www . website . com
Access - Control - Allow - Headers : Content - Type
Access - Control - Allow - Methods : *
Access - Control - Expose - Headers : X - Custom - Header
Access - Control - Max - Age : 600
  • A. จำเป็นต้องมีคำขอ preflight
  • B. อนุญาตเฉพาะคำขอจาก https://www.website.com
  • C. อนุญาตให้มีการร้องขอคุกกี้
  • D. การตอบสนองที่แท้จริงถูกแคชเป็นเวลา 600ms
  • E. X-Custom-Header จะเป็นส่วนหัวการตอบกลับที่รวมอยู่เพียงอย่างเดียว
  • F. GET POST PATCH และวิธี PUT แต่ไม่ DELETE
ทรัพยากร

คำตอบ:

  • ดูคำตอบและคำอธิบาย

การอ่านเพิ่มเติม:

  • https://www.w3.org/tr/2020/spsd-cors-20200602/
  • https://fetch.spec.whatwg.org/#http-cors-protocol
  • https://developer.mozilla.org/en-us/docs/web/http/cors

28. อะไรถูกบันทึกไว้? 

 setTimeout ( ( ) => console . log ( 1 ) ) ;

( async ( ) => {
  console . log ( 2 ) ;
  await Promise . resolve ( ) ;
  console . log ( 3 ) ;
} ) ( )

Promise . resolve ( ) . then ( ( ) => Promise . resolve ( ) . then ( ( ) => console . log ( 4 ) ) )
  • A. 1 2 3 4
  • B. 2 4 3 1
  • C. 2 3 4 1
  • D. 2 3 1 4
ทรัพยากร

คำตอบ:

  • ดูคำตอบและคำอธิบาย

การอ่านเพิ่มเติม:

  • https://tc39.es/ecma262/#sec-promise-objects
  • https://dev.to/lydiahallie/javascript-visualized-promises-async-await-5gke
  • https://developer.mozilla.org/en-us/docs/web/javascript/reference/global_objects/promise
  • https://web.dev/promises/
  • https://javascript.info/promise-basics
  • https://javascript.info/microtask-queue

29. ข้อความใดที่ถูกต้อง?

  • A. HTTP/2 อนุญาตให้มีการร้องขอและการตอบกลับหลายรายการพร้อมกันผ่านการเชื่อมต่อ TCP เดียว
  • B. http/3 สามารถใช้กับ https เท่านั้น
  • C. HTTP/2 เข้ากันได้กับ http/1.1
  • D. HTTP/1.1 ต้องการการเชื่อมต่อ TCP หลายครั้งเพื่อดำเนินการหลายคำขอพร้อมกัน
ทรัพยากร

คำตอบ:

  • ดูคำตอบและคำอธิบาย

การอ่านเพิ่มเติม:

  • https://www.section.io/engineering-education/http3-vs-http2/
  • https://www.cloudflare.com/learning/performance/http2-vs-http1.1/
  • https://www.cloudflare.com/learning/performance/what-is-http3/

30. อะไรถูกบันทึก? 

 const objA = { 
  type : "A" ,
  foo ( ) { 
    console . log ( this . type ) 
  }
}

const objB = { 
  type : "B" ,
  foo : objA . foo ,
  bar : ( ) => objA . foo ( ) ,
  baz ( ) { objA . foo ( ) }
}

objB . foo ( ) ;
objB . bar ( ) ;
objB . baz ( ) ;
  • A. A B B
  • B. B A A
  • C. A A A
  • D. A undefined A
  • E. B undefined B
ทรัพยากร

คำตอบ:

  • ดูคำตอบและคำอธิบาย

การอ่านเพิ่มเติม:

  • https://tc39.es/ecma262/#sec-function-environment-records-getthisbinding
  • https://developer.mozilla.org/en-us/docs/web/javascript/reference/operators/this
  • https://javascript.info/object-methods
ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด