À partir d'aujourd'hui, nous commencerons à mettre à jour la banque de questions d'entretien de base du front-end et partagerons chaque jour dix questions d'entretien de base classiques.Bienvenue pour apprendre ensemble.
Table des matières
4. Concernant let, const et var en JavaScript, quelles sont leurs portées et caractéristiques ?
5. Veuillez décrire brièvement votre compréhension du framework MVVM
6. Veuillez donner un exemple de clôture.
7. Quel est le modèle d'architecture MVC ?
8. Comment implémenter le Lazy Loading ?
9. Comment optimiser les performances d’un site Web ?
10. Comment résoudre les problèmes de compatibilité des navigateurs ?
1. Qu'est-ce que la fermeture ? Veuillez décrire brièvement les caractéristiques et les scénarios d'application de la fermeture .
Une fermeture est une fonction imbriquée dans une fonction qui peut accéder à des variables dans la portée d'autres fonctions, même si ces variables existent toujours après la fin de l'appel de fonction.
Caractéristiques des fermetures :
1. Peut accéder aux variables en dehors de la fonction
2. La fonction interne détient la portée de la fonction externe
3. Peut accéder aux paramètres et aux variables locales des fonctions externes
4. Après le retour de la fonction externe, la fonction interne conservera toujours la portée de la fonction externe
Scénarios d'application des fermetures :
1. Encapsulez les bibliothèques de classes et masquez les détails d'implémentation internes
2. Exécution retardée, telle que la liaison d'événements et les fonctions de rappel
3. Simulez la portée au niveau du bloc, comme la création d'un minuteur dans une boucle
4. Utilisé comme fonction d'exécution immédiate (IIFE) pour empêcher les variables de polluer l'espace de noms global
2. Quelles sont les solutions pour optimiser les performances front-end ? Veuillez énumérer au moins trois solutions et les décrire en détail.
Les solutions d'optimisation des performances frontales incluent :
1. Réduisez les requêtes réseau : fusionnez les fichiers JS et CSS, utilisez les Sprites CSS, Iconfont, WebFont et d'autres méthodes pour réduire les requêtes d'images, compressez les codes JS, CSS, HTML, etc.
2. Réduisez le temps de chargement des ressources : utilisez les services CDN, la mise en cache du navigateur, la mise en cache du serveur, la mise en cache HTTP, la mise en cache LocalStorage et d'autres technologies.
3. Réduisez le redessinage et la redistribution des pages : réduisez les opérations DOM, utilisez l'animation CSS3 au lieu de l'animation JS, utilisez des attributs tels que la transformation, l'opacité, la position, le débordement, etc. au lieu de la marge et du remplissage.
3. Veuillez décrire brièvement la différence entre HTTPS et HTTP .Comment assurer la sécurité de HTTPS ?
HTTPS (HyperText Transfer Protocol Secure) est une version améliorée du protocole HTTP. Il crypte et transmet les données via le protocole SSL/TLS pour garantir une communication sûre et fiable.
Les différences sont les suivantes :
1. La communication HTTP utilise la transmission de texte brut et présente une faible sécurité ; HTTPS utilise SSL/TLS pour crypter les données à transmettre et présente une sécurité élevée.
2. HTTP utilise le port 80 par défaut et HTTPS utilise le port 443 par défaut.
3. HTTPS nécessite l'utilisation de certificats numériques, émis par les organisations CA, pour garantir la légitimité des identités des deux parties communicantes.
Mesures pour assurer la sécurité HTTPS :
1. Au cours du processus de prise de contact TLS, des algorithmes de chiffrement asymétriques (RSA, DSA, ECC, etc.) sont utilisés pour négocier des algorithmes et des clés de chiffrement symétriques.
2. La vérification de la chaîne de certificat garantit la légitimité des identités des deux parties communicantes.
3. Utilisez des algorithmes de cryptage rapides, tels que AES (Advanced Encryption Standard), etc.
4. Gestion de la sécurité des cookies, comme interdire la transmission via http, en utilisant les attributs Secure, HttpOnly, etc.
5. Activez HTTP Strict Transport Security (HSTS) pour empêcher les attaques de l'homme du milieu et utilisez la stratégie de sécurité du contenu (CSP) pour empêcher les attaques XSS et CSRF.
4. Pour let , const et var en JavaScript , quelles sont leurs portées et caractéristiques ?
Caractéristiques de let et const :
1. Il n'est valide que dans cette portée au niveau du bloc. Les variables ne sont pas accessibles en dehors de la portée au niveau du bloc.
2. Des déclarations en double ne peuvent pas être faites dans le même périmètre.
3. Une fois qu'une variable déclarée par const est déclarée et qu'une valeur lui est attribuée, elle ne peut plus être modifiée.
Caractéristiques du var
1. Il existe une promotion de variable, qui peut être utilisée d'abord puis déclarée, et la déclaration et l'affectation peuvent être écrites séparément. L'utilisation de typeof avant la variable ne signalera pas d'erreur.
2. La déclaration sera avancée en haut de la portée globale ou de la portée de la fonction.
3. Lorsqu'une variable est déclarée dans la portée globale, une propriété de l'objet global est créée et la variable est accessible via l'objet global.
5. Veuillez décrire brièvement votre compréhension du framework MVVM .
MVVM est l'abréviation de Model-View-ViewModel, une idée de framework front-end. Dans l'architecture MVWM, View et
ViewModel est indépendant l'un de l'autre et les deux utilisent une technologie de liaison de données pour réaliser une liaison de données bidirectionnelle.
Avantages du framework MVVM :
1. La liaison de données bidirectionnelle et la mise à jour automatique des vues réduisent une grande quantité de code de manipulation manuelle du DOM.
2. Une organisation claire du code, le développement modulaire et la séparation de View et ViewModel facilitent la maintenance du code et le développement collaboratif.
3. De riches bibliothèques officielles et tierces fournissent un grand nombre de composants et de fonctions prêts à l'emploi.
Inconvénients du framework MVVM :
1. La liaison de données consommera une certaine quantité de mémoire et de performances, en particulier pour les mises à jour de données à grande échelle, la consommation de performances est plus évidente.
2. Besoin d'apprendre de nouvelles règles de grammaire et d'utilisation.
3. La personnalisation des composants est faible et doit être personnalisée dans le cadre fourni par le framework.
6. Veuillez donner un exemple de clôture.
function outerFunc(){
var name = 'Jack';
function innerFunc(){
console.log(name);
}
retun ineFunc;
}
var func = outerFunc();
func();//'Jack'
Dans cet exemple, la fonction innerFunc() a accès à la variable de nom externe, c'est donc une fonction de fermeture. La fonction externalFunc() renvoie la fonction innerFunc() et attribue la fonction innerFunc() à la variable func. Lors de l'appel de func(), la fonction innerFunc() peut accéder au nom de la variable externe et afficher Jack.
7. Qu'est-ce que le modèle d'architecture MVC ?
Le modèle architectural MVC (Model View Controller) est un moyen de décomposer une application en trois parties de base :
1. Modèle, vue et contrôleur.
2. Le modèle est utilisé pour représenter les données de base de l'application, la vue est utilisée pour afficher les données et le contrôleur est utilisé pour gérer l'interaction de l'utilisateur.
3. Le modèle MVC facilite le développement et la maintenance des applications, aidant ainsi les développeurs à mieux gérer le code et à se concentrer sur la logique principale de l'application.
8. Comment implémenter le Lazy Loading ?
1. API de l'observateur d'intersection
2. Utilisez des espaces réservés pour les images
3. Utilisez les attributs data-src et data-srcset
4. Utilisez JavaScript pour insérer des éléments aux moments appropriés, etc.
Parmi elles, l'API Intersection Observer est une méthode fournie par les navigateurs modernes pour observer si un élément se trouve dans la fenêtre d'affichage et peut implémenter des fonctions telles que le chargement paresseux d'images.
9. Comment optimiser les performances d’un site Web ?
L'optimisation des performances du site Web comprend des méthodes telles que la réduction du nombre de requêtes, la compression des fichiers et l'optimisation des images. Plus précisément, vous pouvez utiliser l'accélération CDN, activer la mise en cache du navigateur, utiliser des algorithmes de compression pour compresser des fichiers, etc.
10. Comment résoudre les problèmes de compatibilité des navigateurs ?
Vous pouvez utiliser CSS Hack, JavaScript Polyfill, les propriétés CSS spécifiques à IE6-8 et d'autres méthodes pour résoudre les problèmes de compatibilité du navigateur. Vous pouvez également utiliser les spécifications CSS et les détails JavaScript pour éviter les problèmes de compatibilité.