Partagez un article sur les vraies questions d'entretien frontal

J'ai accumulé des questions d'entretien à haute fréquence et je les ai enregistrées pour les étudiants dans le besoin. Cet article se concentre sur les questions d'entretien de base et teste principalement si les bases de la technologie frontale sont solides et si le système de connaissances frontales peut être connecté en série.

Q : Comment concevoir une encapsulation de composants

1. Le but de l'encapsulation de composants est de réutiliser, d'améliorer l'efficacité du développement et la qualité du code
2. , maintenabilité

Q : méthode de chargement asynchrone js

1. Le moteur de rendu s'arrêtera lorsqu'il rencontrera une balise de script, attendra que le script soit exécuté et continuera à rendre vers le bas/
2, defer signifie "exécuter après le rendu", async signifie "exécuter après le téléchargement", si defer a plusieurs scripts, ils seront chargés dans l'ordre dans lequel ils apparaissent sur la page. Plusieurs scripts asynchrones ne peuvent pas garantir l'ordre de chargement
3. Chargement Lors de la définition de type=module pour le module es6, le chargement asynchrone ne bloquera pas le navigateur. La page est rendue avant l'exécution. Vous pouvez également ajouter l'attribut async pour exécuter le script de manière asynchrone (en utilisant le niveau supérieur, cela équivaut à un point de syntaxe non défini). , vous pouvez détecter le code actuel Que ce soit dans le module ES6)

Q : La différence entre l'animation CSS et l'animation JS
1 Complexité du code, le code d'animation JS est relativement compliqué
2. Contrôle de l'animation lorsque l'animation est en cours d'exécution Dans une certaine mesure, js peut animer, mettre en pause, annuler, terminer, mais l'animation CSS ne peut pas ajouter d'événements
3. En ce qui concerne les performances de l'animation, l'animation js a un processus d'analyse js supplémentaire et les performances n'est pas aussi bon que l'animation CSS

Q : Deux types d'attaques intersites, XSS et CSRF
1. Les attaques de scripts intersites XSS se situent principalement au niveau front-end. au niveau de la saisie pour modifier l'affichage de la page ou voler les cookies du site Web. Méthode de prévention : n'y croyez pas. Pour toutes les opérations de l'utilisateur, la saisie de l'utilisateur est échappée et js n'est pas autorisé à lire et à écrire des cookies
2. Croix CSRF. -falsification de requêtes de site, envoi de requêtes malveillantes en votre nom, filtrage via cookies et paramètres, etc.
3 Nous ne pouvons pas éliminer complètement les attaques, nous ne pouvons qu'augmenter le seuil des attaques

Q : Délégation d'événements, objectif, fonction, méthode d'écriture
1. Déléguer les événements d'un ou d'un groupe d'éléments à sa couche parent Ou sur des éléments externes
2. Avantages : réduire la consommation de mémoire, lier dynamiquement les événements
3. la cible est le l'élément le plus spécifique qui déclenche l'événement, et currenttarget est l'élément auquel l'événement est lié (généralement égal à ceci dans la fonction))

Q : Thread, process

1. la plus petite unité d'exécution, et le processus est la plus petite unité de gestion des ressources
2. Un thread ne peut appartenir qu'à un seul processus, et un processus Il peut y avoir plusieurs threads, mais il doit y avoir au moins un thread

Q : Équilibrage de charge

Lorsque le système est confronté à un grand nombre de visites d'utilisateurs et que la charge est trop élevée, il est généralement nécessaire d'augmenter le nombre de serveurs pour l'expansion horizontale, d'utiliser le clustering et l'équilibrage de charge pour améliorer l'équilibrage de charge. capacité de traitement de l'ensemble du système

Q : Qu'est-ce que le cache CDN

1 CDN est une stratégie de déploiement qui déploie des services comme nginx selon différentes régions, les ressources statiques seront mises en cache. Lorsque le front-end optimise le projet, il est d'usage d'ajouter une valeur de hachage à la ressource de la plate-forme et de modifier le hachage à chaque fois qu'elle est mise à jour. Lorsque la valeur de hachage change, le service récupère à nouveau la ressource
. 2. (CDN) est un système global stratégiquement déployé comprenant quatre éléments : stockage distribué, équilibrage de charge, redirection des demandes réseau et gestion de contenu

Q : Comment écrire les fermetures, le rôle des fermetures et les lacunes de fermetures

1. Le but de l'utilisation des fermetures - masquer les variables, accéder indirectement à une variable et appeler des fonctions en dehors de la portée lexicale de la fonction définie
2 La fuite de mémoire des fermetures est un bug d'IE. .Fermetures Une fois le package utilisé, la référence à la fermeture ne peut pas être récupérée, ce qui entraîne des fuites de mémoire

Q : Problème inter-domaines, qui restreint l'inter-domaine et comment le résoudre

1. Causé par la politique de même origine du navigateur Cross-domain
2 Mécanisme de sécurité important pour isoler les fichiers potentiellement malveillants
3, permettant aux scripts de charger des ressources tierces
4. proxy inverse (configuration interne du service nginx Access-Control-Allow -Origin *)
5. Collaboration frontale et back-end CORS pour définir les en-têtes de requête, Access-Control-Allow-Origin et d'autres informations d'en-tête

Q : Pièges courants de fuite de mémoire en javascript

1. Les fuites de mémoire entraîneront une série de problèmes, tels que : un fonctionnement lent, des plantages, une latence élevée
2. Les fuites de mémoire font référence à des variables que vous ne pouvez pas utiliser (impossible d'accéder), occupant toujours de l'espace mémoire, et ne peut pas être réutilisé. Utilisez-le
3. Variables globales inattendues, ce sont des variables qui ne seront pas recyclées (à moins qu'elles ne soient définies sur null ou réaffectées), en particulier les variables utilisées temporairement stocker de grandes quantités d'informations
4. Fonctions périodiques toujours Pendant le fonctionnement, la fonction de traitement ne sera pas recyclée jq supprimera l'écouteur d'événement avant de supprimer le nœud
5. Il y a une référence au nœud DOM dans le js. code. Lorsque le nœud dom est supprimé, la référence est toujours conservée

Q : Quel est le principe de la conversion de babel en ES5 ou ES3

1. le langage d'entrée est ES6+ et le langage cible de la compilation est ES5
2 , Analyse : Analyse de la chaîne de code dans un arbre de syntaxe abstraite
3. Transformation : Transformation de l'arbre de syntaxe abstraite
4. Reconstruction : Régénération du code chaîne selon l'arbre de syntaxe abstraite transformé

Q : La simulation de promesse se termine

1 Lorsque le nouvel objet reste dans l'état "en attente", la chaîne de promesse d'origine mettra fin à l'exécution.
2. return new Promise(()=>{}); // Renvoie l'objet Promise dans l'état "en attente"

Q : Quels sont les résultats de la mise de promise dans try catch ?
1. L'erreur de l'objet Promise a un caractère bouillonnant et sera transmise en arrière jusqu'à ce qu'elle soit détectée. transmis au suivant. capture de l'instruction catch
2 Lorsqu'une erreur est générée dans la chaîne Promise, les informations d'erreur sont transmises en arrière le long du lien jusqu'à ce qu'elles soient capturées

Q : Optimisation des performances du site Web

1. En termes de requêtes http, réduire le nombre de requêtes et le volume des requêtes. L'approche correspondante consiste à compresser les ressources du projet, à contrôler la résolution DNS des ressources du projet à 2 à 4 noms de domaine, à extraire les styles de. annonces, composants publics, sprites et ressources de cache.

2. Compresser les ressources, extraire la compression des ressources publiques, extraire les méthodes publiques CSS, js
3. Ne pas mettre à l'échelle les images, utiliser des images de sprite, utiliser des graphiques de polices (Alibaba Vector). Library)
4. Utilisez CDN, jetez les cookies inutiles
5. Réduisez le redessin et la redistribution, séparez la lecture et l'écriture des attributs CSS, il est préférable de ne pas utiliser js pour modifier les styles, mettre à jour dom hors ligne, spécifier la taille de l'image avant le rendu
6. Optimisez le niveau de code js pour réduire Lors du calcul des chaînes, utilisez les fermetures de manière appropriée et placez le chargement des ressources js sur le premier écran en bas

Q : implémentation d'événement personnalisé js

1. Fournit nativement 3 méthodes pour implémenter des événements personnalisés. Définissez les événements

2. createEvent, définissez le type d'événement, qu'il s'agisse d'un événement HTML ou d'un événement de souris
3. s'il faut autoriser le bouillonnement, s'il faut bloquer les événements personnalisés
4. événement déclencheur dispatchEvent

Q : liaison de données bidirectionnelle angulaire et liaison de données bidirectionnelle de données vue

1. représentants typiques du développement de modèles MVVM

2. Angular est implémenté via une détection sale. Angular placera les événements de l'interface utilisateur, les événements de demande, settimeout et autres objets retardés dans la file d'attente sale de la surveillance des événements. Lorsque les données changent, la méthode $diget est. déclenché pour mettre à jour les données et restituer la vue
3. Passes Vue L'implémentation du modèle de détournement de données et de publication-abonnement des attributs de données peut être grossièrement comprise comme composée de trois modules L'observateur termine le détournement de données, la compilation termine le piratage. rendu des fragments de modèle, et l'observateur sert de pont pour connecter les deux, en s'abonnant aux modifications de données et en mettant à jour les vues

Q : La différence entre la communication get et post

1. , mais Post ne peut pas
2. Post est un peu plus sûr que Get, car les requêtes Get sont incluses dans l'URL et seront mises en cache, le navigateur ne le fait pas, mais c'est la même chose dans le cas de la capture de paquets. .
3. Post peut transmettre plus de données que Get via le corps de la requête. Get ne dispose pas de cette technologie.
4. L'URL a une limite de longueur, ce qui affectera la requête Get, mais cette limite de longueur est stipulée par le navigateur, pas les dispositions RFC
5. Post prend en charge plus de types d'encodage et ne limite pas les types de données

Q : Avez-vous étudié certains principes et mécanismes du webpack et comment les implémenter ?

1. paramètres de configuration webpack, fusionnez les paramètres transmis depuis le shell et configurés dans le fichier webpack.config.js pour produire le résultat de configuration final.
2. Enregistrez tous les plug-ins configurés afin que les plug-ins puissent surveiller les nœuds d'événements du cycle de vie de la construction du webpack et répondre en conséquence.
3. Commencez à analyser les fichiers du fichier d'entrée configuré pour créer une arborescence de syntaxe AST, recherchez les fichiers dont dépend chaque fichier et procédez de manière récursive.
4. Pendant le processus récursif d'analyse des fichiers, recherchez le chargeur approprié pour convertir le fichier en fonction du type de fichier et de la configuration du chargeur.
5. Une fois la récursion terminée, le résultat final de chaque fichier est obtenu et le morceau de bloc de code est généré en fonction de la configuration d'entrée.
6. Sortez tous les morceaux vers le système de fichiers.

Q : La différence entre le module ES6 et le module CommonJS

1 Le module CommonJS génère une copie de la valeur, tandis que le module ES6 génère une référence à la valeur

2. Le module CommonJS est chargé au moment de l'exécution, le module ES6 est l'interface de sortie au moment de la compilation
3. La variable de module entrée par ES6 n'est qu'un lien symbolique, cette variable est donc en lecture seule et une erreur sera signalée si elle est réaffecté

Q : Module chargeant les spécifications AMD, CMD, CommonJS Modules/2.0

1 Le but de ces spécifications est le développement modulaire de JavaScript, notamment côté navigateur
2. modules dépendants, AMD est exécuté à l'avance, CMD est une exécution retardée
3. CMD favorise les dépendances à proximité, AMD favorise les dépendances devant

Q : boucle d'événements de nœud, différences de boucle d'événements js

1. Boucle d'événements Node.js Divisée en 6 étapes

2. Le timing d'exécution de la file d'attente des tâches de microtâche est différent dans les environnements de navigateur et de nœud
Dans Node.js, la microtâche est exécutée entre différentes étapes de la boucle d'événements
Du côté du navigateur, la microtâche Execute
après l'exécution de la macrotâche de la boucle d'événement. 3. L'appel récursif process.nextTick() entraînera une faim d'E/S. La recommandation officielle est d'utiliser setImmediate()
.

Q : Les problèmes de copie superficielle et de copie profonde

1. La copie profonde et la copie superficielle concernent uniquement les types complexes tels que Object et Array
2 En d'autres termes, a et b pointent vers la même mémoire, donc si une valeur est modifiée, l'autre valeur suivra. Les changements, il s'agit d'une copie superficielle
3. Copie superficielle, la méthode "Object.assign() est utilisée pour copier les valeurs de toutes les propriétés énumérables d'une ou plusieurs". objets source à l'objet cible. Il renverra l'objet cible
4. Deep copy, JSON.parse() et JSON.stringify() nous donnent une solution de base, mais la fonction ne peut pas être traitée correctement

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!