Page d'accueil>Ressources de création de sites Web>Données du site Web
Télécharger

Quiz de développement Web avancé

Ce dépôt est lié à mon cours Frontendmasters.
Vous trouverez les questions et les ressources supplémentaires pour mieux comprendre les concepts.

Ce quiz de développement Web avancé couvre un large éventail de choses que les développeurs Web peuvent gérer quotidiennement. L'objectif est de (re) vous présenter certains concepts que vous avez peut-être oubliés au fil des ans ou tout simplement ne pas être exposé à cela souvent?

Amusez-vous, et j'espère que vous apprendrez quelque chose de nouveau aujourd'hui! Bonne chance! ?

️ Ce dépôt ne contient pas les réponses (!) , Seulement les questions et les ressources utiles sur le sujet de la question!
Pour voir les réponses et regarder des explications visualisées pour chaque question, veuillez regarder le cours Frontendmasters!

Aperçu

  • Question 1: Ordonnance d'exécution async et defer
  • Question 2: Rendre le pipeline et composer
  • Question 3: Résolution des demandes de domaine
  • Question 4: Stack d'appel et boucle d'événements
  • Question 5: Indices de ressources
  • Quesiton 6: référence d'objet et destructeur
  • Question 7: PerformanceNavigationTiming
  • Question 8: directives de cache
  • Question 9: Collection des ordures
  • Question 10: Coût d'animation
  • Question 11: Propagation des événements
  • Question 12: spécificité CSS
  • Question 13: WeakMap
  • Question 14: Web Vitals
  • Question 15: Politique de sécurité du contenu
  • Question 16: Politiques de références
  • Question 17: Générateurs
  • Question 18: Méthodes de promesse
  • Question 19: Cache en arrière
  • Question 20: XSS, MITM, CSRF, Clickjacking
  • Question 21: Stratégies de police
  • Question 22: Cookies
  • Question 23: Sélecteurs PSS Pseudo
  • Question 24: Strict-Transport-Security
  • Question 25: Rendre les couches
  • Question 26: Formats d'images
  • Question 27: CORS
  • Question 28: Boucle d'événement
  • Question 29: HTTP / 1, HTTP / 2, HTTP / 3
  • Question 30: this mot clé

Toutes les questions

1. Mettez les scripts dans le bon ordre d'exécution

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

Répondre:

  • Regardez la réponse et l'explication

Lire plus approfondie:

  • 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. Quelles déclarations sont vraies?

  • A. L'arbre de rendu contient tous les éléments du DOM et du CSSOM combinés
  • B. La composition est le processus de séparation des couches basée sur l'index z, qui sont ensuite combinés pour former l'image finale affichée à l'écran
  • C. Le processus de mise en page attribue des couleurs et des images aux éléments visuels de l'arbre de rendu
  • D. Le processus de compostage se produit sur le fil du compositeur
  • E. Les éléments qui ne sont pas visibles sur la page, par exemple display: hidden , ne font pas partie de l'arbre Dom
Ressources

Répondre:

  • Regardez la réponse et l'explication

Lire plus approfondie:

  • https://www.chromium.org/developers/design-documents/graphics-and-skia/
  • https://www.chromium.org/developers/design-documents/gpu-accelerated-compositing-in-chrome/
  • 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-browser-part4/
  • https://www.chromium.org/blink/

3. combler les lacunes 

 - 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. Resolver DNS récursif
  2. Serveur de noms racine
  3. Adresse IP
  4. Serveur de noms de domaine de niveau supérieur
  5. Serveur de noms autoritatifs
Ressources

Répondre:

  • Regardez la réponse et l'explication

Lire plus approfondie:

  • 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. Qu'est-ce qui est enregistré? 

 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
Ressources

Répondre:

  • Regardez la réponse et l'explication

Lire plus approfondie:

  • https://tc39.es/ecma262/#sec-promise-objects
  • https://dev.to/lydiahallie/javascript-visualized-promis-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. Faites correspondre les conseils de ressources avec leurs définitions

  • A. dns-prefetch
  • B. preconnect
  • C. prefetch
  • D. preload
  1. Priorise la récupération des ressources critiques nécessaires à la navigation actuelle
  2. Effectue une résolution de noms de domaine en arrière-plan
  3. Effectue de manière proactive la résolution DNS et la poignée de main TCP / TLS
  4. demande des ressources non critiques en arrière-plan
Ressources

Répondre:

  • Regardez la réponse et l'explication

Lire plus approfondie:

  • https://html.spec.whatwg.org/#linktypes
  • https://www.chromium.org/developers/design-documents/dns-prefetching/
  • https://www.smashingmagazine.com/2019/04/optimisation-performance-resource-hins/
  • 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-int.html

6. Quelle est la sortie? 

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

Répondre:

  • Regardez la réponse et l'explication

Lire plus approfondie:

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

7. Mettez le PerformanceNavigationTimings dans le bon ordre

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

Répondre:

  • Regardez la réponse et l'explication

Lire plus approfondie:

  • 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. Faites correspondre les directives de mise en cache à leurs définitions

  • A. no-cache
  • B. must-revalidate
  • C. no-store
  • D. private
  • E. stale-while-revalidate
  1. valide une réponse périmée avec le serveur d'origine avant de l'utiliser
  2. sert du contenu périmé tout en validant la réponse mise en cache avec le serveur d'origine
  3. ne cache aucune partie de la demande ou de la réponse
  4. valide une réponse en cache avec le serveur d'origine avant de l'utiliser, même s'il est toujours frais
  5. Empêche la mise en cache sur les caches partagées
Ressources

Répondre:

  • Regardez la réponse et l'explication

Lire plus approfondie:

  • 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-ctrentrol/

9. Quelles déclarations sont vraies dans ce bloc de code? 

 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 et obj2 ne peuvent pas être collectés aux ordures, conduisant à une fuite de mémoire
  • B. obj1 et obj2 seront collectés des ordures immédiatement après les avoir mis sur null
  • C. obj1 et obj2 ne seront collectés que après la fermeture de l'onglet du navigateur
  • D. obj1 et obj2 peuvent être collectés des ordures pendant le prochain cycle de collecte des ordures
Ressources

Répondre:

  • Regardez la réponse et l'explication

Lire plus approfondie:

  • 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/@moshikoo/garbage-collector-in-v8-engine-1c582399837

10. Lors de l'animation des propriétés suivantes, qui ont les coûts de rendu correctement répertoriés?

  • A. width : Disposition, peinture, composite
  • B. opacity : peinture, composite
  • C. background-image : composite
  • D. left : Disposition, peinture, composite
  • E. transform : peinture, composite
Ressources

Répondre:

  • Regardez la réponse et l'explication

Lire plus approfondie:

  • 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-lag-complex-layouts-and--yout-thrashing/
  • https://developer.chrome.com/blog/hardware-accelerated-animations/

11. Qu'est-ce qui est enregistré lors du clic sur le bouton? 

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

Répondre:

  • Regardez la réponse et l'explication

Lire plus approfondie:

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

12. Commandez les sélecteurs CSS en ascendant la spécificité

  • 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"]
  • h1.large-text#title
Ressources

Répondre:

  • Regardez la réponse et l'explication

Lire plus approfondie:

  • 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. Quelles déclarations sont vraies? 

 const userTokenMap = new WeakMap ( ) ;

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

userTokenMap . set ( user , "secret_token" ) ;
  • A. userTokenMap implémente le protocole itérateur
  • B. Lors de la définition user sur null , userTokenMap renvoie 0
  • C. Si l'objet utilisateur est défini sur null , son entrée userTokenMap peut être collectée à la poubelle.
  • D. [...userTokenMap] renvoie un tableau des entrées userTokenMap
Ressources

Répondre:

  • Regardez la réponse et l'explication

Lire plus approfondie:

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

14. Faites correspondre le Web Vitals aux descriptions correctes

  • A. TTFB
  • B. FID
  • C. TTI
  • D. TBT
  • E. CLS
  • F. Inp
  1. Le temps nécessaire à une page Web pour répondre à la première interaction d'un utilisateur.
  2. L'heure à laquelle le thread principal est empêché de répondre à l'entrée utilisateur.
  3. Le temps moyen nécessaire à une page Web pour mettre à jour ses visuels après qu'un utilisateur a interagi avec lui.
  4. Le temps nécessaire au serveur pour répondre à une demande et commencer à renvoyer des données au client
  5. Le temps nécessaire pour qu'une page Web soit entièrement chargée et réactive aux entrées utilisateur.
  6. La stabilité de la disposition d'une page Web, ou la mise en page inattendue qui se produisent sur une page Web au fur et à mesure de son chargement.
Ressources

Répondre:

  • Regardez la réponse et l'explication

Lire plus approfondie:

  • https://web.dev/metrics/

15. Quelles ressources seront autorisées avec l'en-tête CSP suivant? 

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

Répondre:

  • Regardez la réponse et l'explication

Lire plus approfondie:

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

16. Quelles déclarations sont vraies?

  • A. rel="noopener" est utilisé pour empêcher la page d'origine d'accès à l'objet window de la page nouvellement ouverte
  • B. rel="noreferrer" peut être utilisé pour empêcher la page nouvellement ouverte d'accéder à l'objet window de la page d'origine
  • C. rel="noopener" et rel="noreferrer" ne peut être utilisé qu'avec HTTPS
  • D. rel="noopener" peut être utilisé pour empêcher le tabnabbing
  • E. Le Referrer-Policy par défaut est no-referrer-when-downgrade
Ressources

Répondre:

  • Regardez la réponse et l'explication

Lire plus approfondie:

  • https://www.w3.org/tr/referrer-policy/
  • https://html.spec.whatwg.org/multipage/links.html#link-ype-nooperner
  • https://html.spec.whatwg.org/multipage/links.html#link-type-rooreferrer
  • https://web.dev/Referrer-Best-Practices/

17. Quand fait "In log: My input!" être enregistré? 

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

Répondre:

  • Regardez la réponse et l'explication

Lire plus approfondie:

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

18. Connectez les méthodes de promesse à la bonne sortie 

 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 )
  • all
  • any
  • C. race
  • D. allSettled
  1. Result: 2
  2. Error: 3
  3. Result: [{}, {}, {}, {}]
  4. Result: 2
Ressources

Répondre:

  • Regardez la réponse et l'explication

Lire plus approfondie:

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

19. Laquelle des valeurs suivantes rendra toujours votre page inadmissible à BFCache?

  • A. unload
  • B. pagehide
  • C. onbeforeunload
  • D. pageshow
  • E. Tout ce qui précède
  • F. Aucune de ces éléments
Ressources

Répondre:

  • Regardez la réponse et l'explication

Lire plus approfondie:

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

20. Connectez les termes à leurs définitions

  • A. XSS
  • B. CSRF
  • C. UI RESTRING
  • D. Mitm
  1. permet aux attaquants d'injecter des scripts malveillants dans les pages Web visualisées par d'autres
  2. informe les utilisateurs d'interagir avec des éléments déguisés ou cachés
  3. insigne les utilisateurs pour exécuter des actions indésirables en exploitant leur session authentifiée
  4. permet aux attaquants d'intercepter et de modifier la communication entre deux parties à leur insu
Ressources

Répondre:

  • Regardez la réponse et l'explication

Lire plus approfondie:

  • 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. Connectez les stratégies de police à leur définition

  • A. font-display: block
  • B. font-display: swap
  • C. font-display: fallback
  • D. font-display: optional
  • E. font-display: auto
  1. rendre temporairement une police invisible jusqu'à ce que la police personnalisée soit téléchargée
  2. Utilisez une police de secours pendant que la police personnalisée télécharge, passez à la police personnalisée lorsque cela est disponible
  3. Utilisez uniquement la police personnalisée si elle est disponible, sinon utilisez une police de secours
  4. permet au navigateur de déterminer le comportement le plus approprié pour le chargement des polices
  5. Utilisez la police personnalisée si elle est disponible, utilisez une police de secours si la police personnalisée n'est pas disponible
Ressources

Répondre:

  • Regardez la réponse et l'explication

Lire plus approfondie:

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

22. Quelles déclarations sont vraies à propos de l'en-tête des cookies suivants? 

 Set - Cookie : my - cookie = "value" ; Domain = "website.com" ; Secure ; HttpOnly ;
  • A. Ce cookie est accessible depuis www.website.com , mais pas sur blog.website.com
  • B. Ce cookie ne peut être défini que côté client sur le domaine website.com
  • C. Ce cookie est traité comme un cookie de session
  • D. Ce cookie sera envoyé lors de la navigation d'un autre site Web à www.website.com
Ressources

Répondre:

  • Regardez la réponse et l'explication

Lire plus approfondie:

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

23. Quels sélecteurs CSS (Pseudo) pouvons-nous utiliser pour cibler uniquement l'élément de la première liste <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
Ressources

Répondre:

  • Regardez la réponse et l'explication

Lire plus approfondie:

  • 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. Qu'est-ce qui est vrai dans l'en-tête suivant? 

 Strict - Transport - Security : max - age = 31536000 ; includeSubdomains ;
  • A. L'en-tête applique HTTPS pendant un an sur le domaine et ses sous-domaines
  • B. Lorsque max-age expire, les navigateurs seront par défaut à HTTP
  • C. L' max-age est rafraîchi chaque fois que le navigateur lit l'en-tête
  • D. Les demandes d'insécurité aux sous-domaines sont autorisées
Ressources

Répondre:

  • Regardez la réponse et l'explication

Lire plus approfondie:

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

25. Laquelle des propriétés suivantes provoque la promotion de l'élément à son propre rendu?

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

Répondre:

  • Regardez la réponse et l'explication

Lire plus approfondie:

  • 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. Faites correspondre les formats d'image aux descriptions

  • A. JPEG
  • B. PNG
  • C. webp
  • D. avif
  1. Compression avec perte et sans perte, prend en charge HDR et WCG, prend en charge la transparence
  2. Compression avec perte et sans perte, soutient la transparence, soutient le rendu progressif
  3. Compression sans perte, haute qualité, prend en charge la transparence, plus grande taille de fichier
  4. Compression avec perte, soutient le rendu progressif
Ressources

Répondre:

  • Regardez la réponse et l'explication

Lire plus approfondie:

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

27. Qu'est-ce qui est vrai dans la configuration CORS suivante? 

 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. Une demande en plein air est requise
  • B. Seules les demandes de https://www.website.com sont autorisées
  • C. Les demandes avec les cookies sont autorisées
  • D. La réponse réelle est mise en cache pendant 600 ms
  • E. X-Custom-Header sera le seul en-tête de réponse inclus
  • F. GET , POST , PATCH and PUT Les méthodes sont autorisées, mais pas DELETE
Ressources

Répondre:

  • Regardez la réponse et l'explication

Lire plus approfondie:

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

28. Qu'est-ce qui est enregistré? 

 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
Ressources

Répondre:

  • Regardez la réponse et l'explication

Lire plus approfondie:

  • https://tc39.es/ecma262/#sec-promise-objects
  • https://dev.to/lydiahallie/javascript-visualized-promis-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. Quelles déclarations sont correctes?

  • A. HTTP / 2 autorise plusieurs demandes et réponses simultanément sur une seule connexion TCP
  • B. http / 3 ne peut être utilisé qu'avec HTTPS
  • C. http / 2 est en arrière compatible avec http / 1.1
  • D. HTTP / 1.1 nécessite plusieurs connexions TCP pour traiter simultanément plusieurs demandes
Ressources

Répondre:

  • Regardez la réponse et l'explication

Lire plus approfondie:

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

30. Qu'est-ce qui est enregistré? 

 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
Ressources

Répondre:

  • Regardez la réponse et l'explication

Lire plus approfondie:

  • https://tc39.es/ecma262/#sec-ffunction-environment-records-getthisbinding
  • https://developer.mozilla.org/en-us/docs/web/javascript/reference/Operators/This
  • https://javascript.info/object-methods
Développer
Informations supplémentaires
Applications connexes
Recommandé pour vous
Actualités connexes Tout