Unduh advanced web dev quiz - Unduh Kode Sumber advanced web dev quiz

advanced web dev quiz

Data situs web

1.0.0

Unduh

Kuis Dev Lanjutan

Repo ini terkait dengan kursus FrontendMasters saya.
Anda akan menemukan pertanyaan dan sumber daya tambahan untuk mendapatkan pemahaman yang lebih baik tentang konsep.

Kuis Web Dev yang canggih ini mencakup berbagai hal yang dapat dihadapi oleh para pengembang web setiap hari. Tujuannya adalah untuk (kembali) memperkenalkan Anda pada konsep -konsep tertentu yang mungkin Anda lupakan selama bertahun -tahun atau tidak sering terpapar?

Bersenang -senanglah, dan semoga Anda akan belajar sesuatu yang baru hari ini! Semoga beruntung! ?

️ Repo ini tidak mengandung jawaban (!) , Hanya pertanyaan dan sumber daya yang berguna pada topik pertanyaan! Untuk melihat jawaban dan menonton penjelasan yang divisualisasikan untuk setiap pertanyaan, silakan tonton kursus FrontendMasters!

Ringkasan

Pertanyaan 1: Perintah eksekusi async dan defer
Pertanyaan 2: Rendering pipa dan komposit
Pertanyaan 3: Menyelesaikan permintaan domain
Pertanyaan 4: Hubungi Stack & Event Loop
Pertanyaan 5: Petunjuk Sumber Daya
Quesiton 6: Referensi & Destruktasi Objek
Pertanyaan 7: PerformanceNavigationTiming
Pertanyaan 8: Arahan cache
Pertanyaan 9: Koleksi Sampah
Pertanyaan 10: Biaya Animasi
Pertanyaan 11: Perbanyakan acara
Pertanyaan 12: Spesifisitas CSS
Pertanyaan 13: WeakMap
Pertanyaan 14: Vital Web
Pertanyaan 15: Kebijakan Keamanan Konten
Pertanyaan 16: Kebijakan Referrer
Pertanyaan 17: Generator
Pertanyaan 18: Metode Janji
Pertanyaan 19: cache back-forward
Pertanyaan 20: XSS, MITM, CSRF, Clickjacking
Pertanyaan 21: Strategi Font
Pertanyaan 22: Cookie
Pertanyaan 23: Pemilih semu CSS
PERTANYAAN 24: Strict-Transport-Security
Pertanyaan 25: Lapisan Render
Pertanyaan 26: Format gambar
Pertanyaan 27: CORS
Pertanyaan 28: Loop Acara
Pertanyaan 29: http/1, http/2, http/3
Pertanyaan 30: Kata kunci this

Semua pertanyaan

1. Letakkan skrip dalam urutan eksekusi yang benar

A. <script defer src="defer1.js" /> (memuat dalam 300ms )
B. <script defer src="defer2.js" /> (memuat dalam 200ms )
C. <script async src="async1.js" /> (memuat dalam 300ms )
D. <script async src="async2.js" /> (memuat dalam 50ms )
E. <script async defer src="asyncdefer1.js" /> (memuat dalam 60ms )

Sumber daya

Menjawab:

Tonton Jawab & Penjelasan

Bacaan lebih lanjut:

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

2. Pernyataan mana yang benar?

A. Pohon render berisi semua elemen dari gabungan DOM dan CSSOM
B. Pengkomposisi adalah proses pemisahan lapisan berdasarkan Z-index, yang kemudian digabungkan untuk membentuk gambar akhir yang ditampilkan di layar
C. Proses tata letak memberikan warna dan gambar ke elemen visual di pohon render
D. Proses pengomposan terjadi pada utas kompositor
E. Elemen yang tidak terlihat pada halaman, misalnya display: hidden , bukan bagian dari pohon DOM

Sumber daya

Menjawab:

Tonton Jawab & Penjelasan

Bacaan lebih lanjut:

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

3. Isi celah

 - 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]

Resolver DNS Rekursif
Server nama root
Alamat IP
Server nama domain tingkat atas
Server Nama Autoritatif

Sumber daya

Menjawab:

Tonton Jawab & Penjelasan

Bacaan lebih lanjut:

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

4. Apa yang dicatat?

 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

Sumber daya

Menjawab:

Tonton Jawab & Penjelasan

Bacaan lebih lanjut:

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. Cocokkan petunjuk sumber daya dengan definisi mereka

A. dns-prefetch
B. preconnect
C. prefetch
D. preload

memprioritaskan pengambilan sumber daya kritis yang diperlukan untuk navigasi saat ini
melakukan resolusi nama domain di latar belakang
secara proaktif melakukan resolusi DNS dan jabat tangan TCP/TLS
meminta sumber daya non-kritis di latar belakang

Sumber daya

Menjawab:

Tonton Jawab & Penjelasan

Bacaan lebih lanjut:

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-optimise-which/
https://www.splunk.com/en_us/blog/learn/preconnect-resource-hints.html

6. Berapakah outputnya?

 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" }}

Sumber daya

Menjawab:

Tonton Jawab & Penjelasan

Bacaan lebih lanjut:

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

7. Letakkan `PerformanceNavigationTimings` di urutan yang benar

A. loadEventStart
B. domComplete
C. domContentLoadedEventStart
D. fetchStart
E. connectEnd
F. domInteractive

Sumber daya

Menjawab:

Tonton Jawab & Penjelasan

Bacaan lebih lanjut:

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. Cocokkan arahan caching dengan definisi mereka

A. no-cache
B. must-revalidate
C. no-store
D. private
E. stale-while-revalidate

memvalidasi respons basi dengan server asal sebelum menggunakannya
Melayani konten basi saat memvalidasi respons yang di -cache dengan server asal
tidak menyimpan bagian dari permintaan atau tanggapan apa pun
memvalidasi respons cache dengan server asal sebelum menggunakannya, bahkan jika masih segar
Mencegah cache pada cache bersama

Sumber daya

Menjawab:

Tonton Jawab & Penjelasan

Bacaan lebih lanjut:

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. Pernyataan apa yang benar tentang blok kode ini?

 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 dan obj2 tidak bisa dikumpulkan sampah, yang menyebabkan kebocoran memori
B. obj1 dan obj2 akan dikumpulkan segera setelah mengaturnya ke null
C. obj1 dan obj2 hanya akan dikumpulkan setelah menutup tab browser
D. obj1 dan obj2 dapat dikumpulkan selama siklus pengumpulan sampah berikutnya

Sumber daya

Menjawab:

Tonton Jawab & Penjelasan

Bacaan lebih lanjut:

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. Saat menjiwai properti berikut, yang memiliki biaya rendering yang terdaftar dengan benar?

A. width : tata letak, cat, gabungan
B. opacity : cat, gabungan
C. background-image : Komposit
D. left : tata letak, cat, gabungan
E. transform : Cat, Komposit

Sumber daya

Menjawab:

Tonton Jawab & Penjelasan

Bacaan lebih lanjut:

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

11. Apa yang dicatat saat mengklik tombol?

 < 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

Sumber daya

Menjawab:

Tonton Jawab & Penjelasan

Bacaan lebih lanjut:

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. Pesan selektor CSS dengan menaikkan spesifisitas

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

Sumber daya

Menjawab:

Tonton Jawab & Penjelasan

Bacaan lebih lanjut:

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. Pernyataan apa yang benar?

 const userTokenMap = new WeakMap ( ) ;

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

userTokenMap . set ( user , "secret_token" ) ;

A. userTokenMap mengimplementasikan protokol iterator
B. Saat mengatur user ke null , userTokenMap mengembalikan 0
C. Jika objek pengguna diatur ke null , entri userTokenMap -nya dapat dikumpulkan.
D. [...userTokenMap] Mengembalikan serangkaian entri userTokenMap

Sumber daya

Menjawab:

Tonton Jawab & Penjelasan

Bacaan lebih lanjut:

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. Cocokkan vital web dengan deskripsi yang benar

A. ttfb
B. Fid
C. tti
D. TBT
E. Cls
F. INP

Waktu yang dibutuhkan halaman web untuk menanggapi interaksi pertama pengguna.
Waktu utas utama diblokir dari menanggapi input pengguna.
Waktu rata -rata yang dibutuhkan halaman web untuk memperbarui visualnya setelah pengguna berinteraksi dengannya.
waktu yang dibutuhkan server untuk menanggapi permintaan dan mulai mengirim data kembali ke klien
Waktu yang dibutuhkan untuk halaman web untuk sepenuhnya dimuat dan responsif terhadap input pengguna.
Stabilitas tata letak halaman web, atau tata letak yang tidak terduga yang terjadi pada halaman web saat dimuat.

Sumber daya

Menjawab:

Tonton Jawab & Penjelasan

Bacaan lebih lanjut:

https://web.dev/metrics/

15. Sumber daya mana yang akan diizinkan dengan header CSP berikut?

 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>

Sumber daya

Menjawab:

Tonton Jawab & Penjelasan

Bacaan lebih lanjut:

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

16. Pernyataan mana yang benar?

A. rel="noopener" digunakan untuk mencegah halaman asli mengakses objek window halaman yang baru dibuka
B. rel="noreferrer" dapat digunakan untuk mencegah halaman yang baru dibuka mengakses objek window dari halaman asli
C. rel="noopener" dan rel="noreferrer" hanya dapat digunakan dengan https
D. rel="noopener" dapat digunakan untuk mencegah tabnabbing
E. Referrer-Policy default adalah no-referrer-when-downgrade

Sumber daya

Menjawab:

Tonton Jawab & Penjelasan

Bacaan lebih lanjut:

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. Kapan `"In log: My input!"` DAPATKAN?

 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()

Sumber daya

Menjawab:

Tonton Jawab & Penjelasan

Bacaan lebih lanjut:

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-iterators-and-generators-a-completet-guide/

18. Hubungkan metode janji ke output yang tepat

 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
C. race
D. allSettled

Result: 2
Error: 3
Result: [{}, {}, {}, {}]
Result: 2

Sumber daya

Menjawab:

Tonton Jawab & Penjelasan

Bacaan lebih lanjut:

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

19. Manakah dari nilai -nilai berikut yang akan selalu membuat halaman Anda tidak memenuhi syarat untuk bfcache?

A. unload
B. pagehide
C. onbeforeunload
D. pageshow
E. Semua hal di atas
F. Tidak ada yang di atas

Sumber daya

Menjawab:

Tonton Jawab & Penjelasan

Bacaan lebih lanjut:

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. Hubungkan istilah dengan definisi mereka

A. XSS
B. csrf
C. ui redresi
D. MITM

memungkinkan penyerang untuk menyuntikkan skrip berbahaya ke halaman web yang dilihat oleh orang lain
Trik pengguna untuk berinteraksi dengan elemen yang disamarkan atau tersembunyi
Trik pengguna untuk menjalankan tindakan yang tidak diinginkan dengan mengeksploitasi sesi yang merekautentikasi
memungkinkan penyerang untuk mencegat dan memodifikasi komunikasi antara dua pihak tanpa sepengetahuan mereka

Sumber daya

Menjawab:

Tonton Jawab & Penjelasan

Bacaan lebih lanjut:

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. Hubungkan strategi font ke definisi mereka

A. font-display: block
B. font-display: swap
C. font-display: fallback
D. font-display: optional
E. font-display: auto

sementara membuat font yang tidak terlihat sampai font khusus telah diunduh
Gunakan font fallback saat font khusus sedang mengunduh, beralih ke font khusus saat tersedia
Hanya gunakan font khusus jika tersedia, jika tidak gunakan font fallback
memungkinkan browser untuk menentukan perilaku yang paling tepat untuk pemuatan font
Gunakan font khusus jika tersedia, gunakan font fallback jika font khusus tidak tersedia

Sumber daya

Menjawab:

Tonton Jawab & Penjelasan

Bacaan lebih lanjut:

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

22. Pernyataan apa yang benar tentang header cookie berikut?

 Set - Cookie : my - cookie = "value" ; Domain = "website.com" ; Secure ; HttpOnly ;

A. Cookie ini dapat diakses dari www.website.com , tetapi tidak dari blog.website.com
B. Cookie ini hanya dapat ditetapkan sisi klien di domain website.com
C. Cookie ini diperlakukan seperti kue sesi
D. Cookie ini akan dikirim saat menavigasi dari situs web lain ke www.website.com

Sumber daya

Menjawab:

Tonton Jawab & Penjelasan

Bacaan lebih lanjut:

https://httpwg.org/http-extensions/draft-ietf-httpbis-rfc6265bis.html#name-oveview
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. Selector CSS (Pseudo) Manakah yang Dapat Kami Gunakan Untuk Hanya Menargetkan Item Daftar Pertama `<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

Sumber daya

Menjawab:

Tonton Jawab & Penjelasan

Bacaan lebih lanjut:

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. Apa yang benar tentang header berikut?

 Strict - Transport - Security : max - age = 31536000 ; includeSubdomains ;

A. Header menegakkan https selama satu tahun di domain dan subdomainnya
B. Ketika max-age berakhir, browser akan default ke http
C. max-age disegarkan setiap kali browser membaca header
D. Permintaan tidak aman ke subdomain diizinkan

Sumber daya

Menjawab:

Tonton Jawab & Penjelasan

Bacaan lebih lanjut:

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. Manakah dari properti berikut yang menyebabkan elemen dipromosikan ke renderlayernya sendiri?

A. z-index: 1
B. translate3d: (0, 0, 0)
C. will-change: transform
D. transform: rotate(45deg)
E. position: fixed
F. position: absolute

Sumber daya

Menjawab:

Tonton Jawab & Penjelasan

Bacaan lebih lanjut:

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

26. Cocokkan format gambar dengan deskripsi

A. jpeg
B. png
C. Webp
D. Avif

Kompresi lossy dan lossless, mendukung HDR dan WCG, mendukung transparansi
Kompresi lossy dan lossless, mendukung transparansi, mendukung rendering progresif
Kompresi lossless, kualitas tinggi, mendukung transparansi, ukuran file yang lebih besar
Kompresi lossy, mendukung rendering progresif

Sumber daya

Menjawab:

Tonton Jawab & Penjelasan

Bacaan lebih lanjut:

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

27. Apa yang benar tentang konfigurasi CORS berikut?

 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. Permintaan preflight diperlukan
B. Hanya permintaan dari https://www.website.com diizinkan
C. Permintaan dengan cookie diizinkan
D. Respons aktual di -cache untuk 600ms
E. X-Custom-Header akan menjadi satu-satunya header respons yang disertakan
F. GET , POST , PATCH dan metode PUT diperbolehkan, tetapi tidak DELETE

Sumber daya

Menjawab:

Tonton Jawab & Penjelasan

Bacaan lebih lanjut:

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. Apa yang dicatat?

 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

Sumber daya

Menjawab:

Tonton Jawab & Penjelasan

Bacaan lebih lanjut:

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. Pernyataan apa yang benar?

A. http/2 memungkinkan beberapa permintaan dan tanggapan secara bersamaan melalui satu koneksi TCP
B. http/3 hanya dapat digunakan dengan https
C. http/2 kompatibel dengan http/1.1
D. HTTP/1.1 membutuhkan beberapa koneksi TCP untuk memproses beberapa permintaan secara bersamaan

Sumber daya

Menjawab:

Tonton Jawab & Penjelasan

Bacaan lebih lanjut:

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. Apa yang dicatat?

 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
A A A
D. A A undefined
E. B undefined B

Sumber daya

Menjawab:

Tonton Jawab & Penjelasan

Bacaan lebih lanjut:

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

Memperluas

Informasi Tambahan