Réponse : Tim Berners-Lee a inventé le World Wide Web en 1989 (au CERN). La première page web a été mise en ligne en 1991.

Détail : Berners-Lee a proposé le système en mars 1989, et le premier site web (info.cern.ch) a été lancé le 6 août 1991.

Réponse : Mosaic a été le premier navigateur graphique, créé par Marc Andreessen et Eric Bina en 1993 (National Center for Supercomputing Applications - NCSA).

Détail : Mosaic a été le premier navigateur à afficher des images intégrées au texte. Andreessen a ensuite fondé Netscape.

Réponse : Le projet a d'abord été nommé Phoenix, puis Firebird avant de devenir Firefox en 2004. Les changements de nom étaient dus à des conflits de marques avec d'autres projets (Phoenix Technologies, Firebird Database).

Détail : Firefox signifie "panda roux" (animal). Le nom a été choisi pour son côté "rapide et agile".

Réponse : L'innovation majeure de Chrome était son moteur JavaScript V8, qui a révolutionné la performance du JavaScript en le compilant en code machine (JIT - Just-In-Time compilation).

Détail : Chrome a aussi introduit le sandboxing (isolation des onglets) pour la sécurité, et a popularisé l'interface minimaliste "omnibox".

Réponse : Firefox 1.0 est sorti le 9 novembre 2004.

Détail : Il s'agissait d'une version stable et aboutie après plusieurs années de développement (précédée par Firefox 0.8, 0.9, 0.10, etc.). Il représentait une alternative crédible à Internet Explorer.

Réponse : Microsoft a abandonné Chakra pour Chromium en 2018-2020 pour plusieurs raisons :

• Compatibilité : Les sites étaient de plus en plus optimisés pour Chromium.
• Coût de développement : Maintenir un moteur rival de V8 coûtait très cher.
• Écosystème : Bénéficier des contributions open-source de Chromium.
• Standards : Suivre plus facilement les évolutions du Web.

Détail : Edge Chromium est sorti en janvier 2020. Microsoft contribue désormais activement à Chromium.

Réponse : Ryan Dahl, le créateur de Node.js, a créé Deno en 2018-2020 pour corriger les défauts de Node.js :

• Sécurité : Deno est sécurisé par défaut (nécessite des permissions explicites).
• TypeScript : Support natif de TypeScript.
• ES Modules : Support moderne des import/export.
• Package Management : Pas de package.json ni de node_modules, il utilise des URLs.

Détail : Deno signifie "anagramme de Node". Il utilise le moteur V8 et est écrit en Rust.

Réponse :

• Netscape Navigator : Le navigateur dominant au début des années 90 (1994-1997). Payant, avec des fonctionnalités avancées (cookies, JavaScript, SSL).
• Internet Explorer : Lancé en 1995 par Microsoft, gratuit et intégré à Windows. A gagné la guerre des navigateurs grâce à son intégration système et sa gratuité.

Détail : Netscape a été racheté par AOL en 1998 et son code source a donné naissance au projet Mozilla, puis à Firefox.

Réponse : Safari a été lancé en 2003 (pour Mac OS X Panther). Il utilise le moteur WebKit (qui a été développé à partir de KHTML).

Détail : WebKit est un moteur open-source qui a inspiré Blink (utilisé par Chrome et Edge). JavaScriptCore est le moteur JavaScript de Safari.

Réponse : Le projet Mozilla a été créé en 1998 après que Netscape ait rendu public le code source de son navigateur. L'objectif était de développer un navigateur open-source pour rivaliser avec Internet Explorer.

Détail : Mozilla est une contraction de "Mosaic" et "Godzilla". La fondation Mozilla a été créée en 2003 pour gérer le projet et défendre un Web ouvert.

Réponse : Le modèle Client-Serveur est comme un restaurant :

• Le client = Toi (tu commandes un plat).
• Le serveur = Le cuisinier (il prépare le plat).
• La commande = La requête HTTP (tu demandes une page).
• Le plat = La réponse HTTP (la page servie).

Techniquement : Le client (navigateur) envoie des requêtes au serveur (ordinateur distant) qui les traite et renvoie des réponses via des protocoles (HTTP).

Réponse : HTTPS = HTTP + SSL/TLS (chiffrement).

• HTTP : Les données sont transmises en clair (lisibles en route).
• HTTPS : Les données sont chiffrées (confidentialité, intégrité, authentification).

Détail : HTTPS utilise un certificat numérique pour authentifier le serveur et établir une clé de session symétrique.

• 2xx (Succès) : 200 OK (requête réussie).
• 3xx (Redirection) : 301 Moved Permanently (ressource déplacée).
• 4xx (Erreur client) : 404 Not Found (ressource introuvable).
• 5xx (Erreur serveur) : 500 Internal Server Error (erreur générique).

Autres exemples : 201 Created, 302 Found, 403 Forbidden, 503 Service Unavailable.

Étapes :

1. Cache du navigateur : Vérifie si l'IP est déjà en cache localement.
2. Cache du système (OS) : Vérifie le cache du système d'exploitation.
3. Résolveur DNS : Le système interroge un résolveur DNS (ex: 8.8.8.8).
4. Root Servers : Le résolveur interroge un serveur racine pour trouver le TLD (.com).
5. TLD Servers : Le résolveur interroge le serveur TLD (.com) pour trouver le serveur autoritaire de "exemple.com".
6. Autoritative Servers : Le résolveur interroge le serveur autoritaire pour obtenir l'IP (A record).
7. Résultat : L'IP est retournée au navigateur et mise en cache.

Détail : Le DNS utilise UDP (port 53) pour la plupart des requêtes pour sa rapidité.

Définition : Un CDN (Content Delivery Network) est un réseau de serveurs distribués géographiquement pour accélérer la livraison de contenu web.

Utilité :

• Performance : Réduction de la latence (serveur proche de l'utilisateur).
• Scalabilité : Absorption des pics de trafic.
• Sécurité : Protection DDoS, WAF.
• Disponibilité : Redondance mondiale.

Exemples : Cloudflare, Akamai, Fastly, Amazon CloudFront.

Détail : TCP garantit la livraison des paquets (retransmission en cas de perte), UDP ne le fait pas.

Définition : Le TTFB est le temps entre l'envoi de la requête HTTP et la réception du premier octet de la réponse.

Importance : Il mesure la réactivité du serveur. Un TTFB élevé indique un serveur lent, un réseau congesté ou une application mal optimisée.

Objectif : Idéalement < 200ms. Il est influencé par : DNS, TCP, TLS, temps de traitement serveur.

Étapes :

1. SYN : Le client envoie un paquet SYN (Synchronize) avec un numéro de séquence aléatoire.
2. SYN-ACK : Le serveur répond avec SYN-ACK (accuse réception du SYN + envoie son propre SYN).
3. ACK : Le client envoie ACK pour confirmer la réception du SYN-ACK.

Détail : La connexion est établie ! C'est comme un appel téléphonique : "Allô ?" → "Allô ?" → "Oui, je t'entends".

• HTTP/1.1 : Requêtes séquentielles (une par connexion), en-têtes non compressés, textuel.
• HTTP/2 : Multiplexage (plusieurs requêtes simultanées sur une connexion), compression des en-têtes (HPACK), binaire, Server Push.

Détail : HTTP/2 réduit considérablement la latence et est adopté par environ 60% des sites en 2026.

Définition : QUIC (Quick UDP Internet Connections) est un protocole de transport développé par Google, utilisé comme base pour HTTP/3.

Améliorations :

• Réduction de la latence : Pas de handshake TCP (0-RTT).
• Élimination du Head-of-Line Blocking : Les paquets perdus ne bloquent plus les autres flux.
• Meilleure mobilité : Changement de réseau sans interrompre la connexion.
• Chiffrement intégré : Sécurisé par défaut.

Détail : QUIC utilise UDP (au lieu de TCP) avec des mécanismes de contrôle de congestion au niveau application.

• <header> : En-tête de page/section (logo, navigation).
• <nav> : Navigation principale.
• <main> : Contenu principal (unique par page).
• <article> : Contenu indépendant (article de blog).
• <footer> : Pied de page (copyright, liens).

Détail : Les balises sémantiques améliorent le SEO et l'accessibilité.

• localStorage : Persistant (données conservées après fermeture du navigateur). Limité ~5-10 MB par domaine.
• sessionStorage : Par onglet (données supprimées à la fermeture de l'onglet).

Détail : Les deux sont des stockages clé-valeur (string) accessibles en JavaScript.

Définition : Un Service Worker est un proxy réseau qui s'exécute en arrière-plan.

Usages :

• Hors-ligne : Intercepter les requêtes et servir des fichiers en cache.
• Push notifications : Envoyer des notifications même quand la page est fermée.
• Mises à jour en arrière-plan : Précharger des ressources.

Détail : Les Service Workers sont la base des PWA (Progressive Web Apps).

• Flexbox : Unidimensionnel (ligne OU colonne). Idéal pour les composants (navigation, cartes).
• CSS Grid : Bidimensionnel (lignes ET colonnes). Idéal pour la mise en page globale (structure de la page).

Détail : Flexbox est plus flexible pour le contenu dynamique, Grid est plus puissant pour les mises en page complexes.

Mobile-First : Commencer par les styles mobile (par défaut), puis utiliser des Media Queries avec min-width pour ajouter des styles pour les écrans plus grands.

• em : Relatif à la taille de police du parent. Ex: 1.5em = 1.5 × taille de police du parent.
• rem : Relatif à la taille de police de l'élément racine (html). Ex: 1.5rem = 1.5 × taille de police racine (généralement 16px).

Détail : rem est plus prévisible et recommandé pour la plupart des cas. em est utile pour les composants imbriqués.

Définition : Les Web Workers permettent d'exécuter du JavaScript en arrière-plan (thread séparé) sans bloquer l'interface utilisateur.

Quand les utiliser :

• Calculs intensifs (cryptographie, algorithmes).
• Traitement d'images (filtres, compression).
• Parsing de gros fichiers (JSON, CSV).

Détail : Les Workers n'ont pas accès au DOM, ils communiquent via postMessage().

• let : Variable mutable, scope de bloc. Peut être réassignée.
• const : Constante, scope de bloc. Ne peut pas être réassignée (mais les objets peuvent être modifiés).
• var : Ancien, scope de fonction. Hoisting (déclarée en haut). À éviter.

Définition : CORS (Cross-Origin Resource Sharing) est un mécanisme de sécurité qui permet à un navigateur d'autoriser des requêtes cross-origin (domaine différent).

Pourquoi c'est important :

• Sécurité : Empêche les sites malveillants d'accéder aux données d'un autre site (Same-Origin Policy).
• APIs : Permet aux applications frontend d'appeler des APIs sur d'autres domaines (ex: mon-frontend.com → api.mon-backend.com).

Détail : Le serveur doit renvoyer les en-têtes CORS appropriés (Access-Control-Allow-Origin).

• LCP (Largest Contentful Paint) : Temps de chargement du contenu principal. Objectif : < 2.5s.
• FID (First Input Delay) : Réactivité aux interactions. Objectif : < 100ms.
• CLS (Cumulative Layout Shift) : Stabilité visuelle. Objectif : < 0.1.

Détail : Ces métriques sont utilisées par Google comme signal de ranking SEO.