js questions d'entretien
1. Type de données js
Types de données de base Nombre, Chaîne, Booléen, Null, Non défini, Symbole, bigInt Types de données de référence objet, Tableau, Date, Fonction, RegExp2. Amélioration des déclarations de variables et de fonctions js
Dans js, la déclaration des variables et des fonctions sera promue au sommet. La fonction d'exécution est promue plus haut que la variable. Si une variable externe du même nom est déclarée avec var à l'intérieur de la fonction, la fonction ne recherchera plus vers le haut. Les fonctions anonymes ne sont pas levées.3. Clôture
Une fermeture est une fonction qui peut lire les variables internes d'autres fonctions. Une fermeture est essentiellement une fonction qui renvoie une fonction. Avantages : Elle peut lire les variables à l'intérieur de la fonction et conserver les variables en mémoire. méthodes privées de l'objet Inconvénients : C'est plus cher. Une mauvaise utilisation de la mémoire peut provoquer des problèmes de débordement de mémoire.4. La différence entre == et ===
== est égal dans un sens non strict. Si les valeurs sont égales, elles sont égales. === est égal dans un sens strict. Le type de données et la taille de la valeur des deux côtés seront comparés. l'adresse ne sera égale que si elles sont égales.5. ceci
this pointe toujours vers l'appelant direct de la fonction. S'il y a un new mot-clé, cela pointe vers l'objet qui sort de new. Dans l'événement, this pointe vers l'objet qui a déclenché l'événement.6. Comment parcourir les tableaux et les objets js
pour infoforChaquepour-de7. La différence entre map et forEach
La méthode forEach est la méthode la plus basique, qui est le parcours et le bouclage. Il y a trois paramètres passés par défaut : l'élément de contenu du tableau parcouru, l'index du tableau et la méthode Arraymap du tableau parcouru actuel. , mais différent. Il renverra un nouveau tableau, donc le rappel doit avoir une valeur de retour. Sinon, undefined sera renvoyé.8. Quelle est la différence entre les fonctions fléchées et les fonctions ordinaires ?
L'objet this dans le corps de la fonction est l'objet dans lequel il est défini, pas l'objet dans lequel il est utilisé. Il ne peut pas être utilisé comme constructeur, c'est-à-dire que la nouvelle commande ne peut pas être utilisée, sinon une erreur se produira. lancé. L'objet arguments ne peut pas être utilisé. L'objet n'existe pas dans le corps de la fonction. Si vous souhaitez l'utiliser, vous pouvez utiliser le paramètre Rest à la place. La commande rendement ne peut pas être utilisée, donc la fonction flèche ne peut pas être utilisée comme fonction générateur.9. Stratégie de même origine
L'homologie fait référence au même nom de domaine, protocole et numéro de port.10. Comment résoudre les problèmes inter-domaines
jsonp cross-domain document.domain + iframe cross-domain nodejs middleware proxy cross-domain backend définit le nom de domaine sécurisé dans les informations d'en-tête11. Restrictions du mode strict
Les variables doivent être déclarées avant d'utiliser la fonction. Les paramètres ne peuvent pas avoir d'attributs avec le même nom, sinon une erreur sera signalée. L'instruction with ne peut pas être utilisée pour empêcher cela de pointer vers l'objet global.12. Nouveau dans es6
Nouvelle fonction de flèche de chaîne de modèle for-of (utilisée pour parcourir des données, telles que des valeurs dans un tableau.) ES6 intègre des objets Promise dans la spécification et fournit des objets Promise natifs. Ajout des commandes let et const pour déclarer des variables. Il y a aussi l'introduction de la notion de module module13. Quelle est la différence entre attribut et propriété ?
L'attribut est l'attribut que l'élément dom a comme balise HTML dans le document. La propriété est l'attribut que l'élément dom a comme objet dans js. Pour les attributs standards du HTML, l'attribut et la propriété sont synchronisés et seront mis à jour automatiquement. Cependant, pour les attributs personnalisés, ils ne sont pas synchronisés.14. Quelle est la différence entre let et const ?
Il n'y a pas de promotion de variable dans la commande let. Si elle est utilisée avant let, une erreur sera signalée. S'il y a des commandes let et const dans la zone de bloc, une portée fermée sera formée et les déclarations répétées ne seront pas autorisées. et ne peut pas être modifié. Cependant, si la définition est Objet, vous pouvez modifier les données à l'intérieur de l'objet.15. Fuite de mémoire
Définition : Divers problèmes causés par le fait que le programme ne libère pas ou est incapable de libérer la mémoire tas qui a été allouée dynamiquement dans le programme pour une raison quelconque. Fuites de mémoire possibles dans js : Résultat : ralentissement, crash, retard important, etc. Causes possibles des fuites de mémoire dans js Lorsque la variable globale dom est effacée, il y a toujours une fuite de mémoire causée par l'existence d'éléments enfants qui ne sont pas effacés par la minuterie de référence.16. Comment introduire le script ?
html static <script> introduit l'insertion dynamique js <script><script defer> : chargement asynchrone, exécuté une fois l'analyse des éléments terminée <script async> : chargement asynchrone, mais le rendu des éléments sera bloqué pendant l'exécution17. Méthode de tableau
map : parcourt le tableau et renvoie un nouveau tableau composé de valeurs de retour de rappel. forEach : impossible de rompre, vous pouvez utiliser throw new Error dans try/catch pour arrêter le filtre : filtrer certains : si un élément renvoie vrai, le tout est vrai à chaque fois : Si un élément renvoie false, alors la valeur globale est falsejoin : génère une chaîne en spécifiant le connecteur push/pop : push et pop à la fin, change le tableau d'origine, renvoie l'élément push/pop unshift/shift : push et pop à la tête, change le tableau d'origine, renvoie l'opération item sort (fn) / reverse : Trie et inverse, change le tableau d'origine concat : Connectez le tableau, sans affecter le tableau d'origine, copie superficielle slice (début, fin) : renvoie le nouveau tableau tronqué, sans changer l'épissure du tableau d'origine (début, numéro, valeur...) : renvoie un tableau composé d'éléments supprimés, la valeur est l'élément inséré, modifie le tableau d'origine indexOf / lastIndexOf(value, fromIndex) : trouve le élément du tableau et renvoie l'indice correspondant réduire / réduireRight(fn(prev, cur), defaultPrev) : Exécuté par paires, prev est la valeur de retour de la dernière fonction simplifiée, cur est la valeur actuelle (à partir du deuxième élément)18. Copie JavaScript profonde et superficielle ?
Copie superficielle La copie profonde d'Object.assign peut être résolue par JSON.parse(JSON.stringify(object))19. Parlez de la mise en œuvre de la programmation asynchrone ?
Avantages de la fonction de rappel : simple et facile à comprendre Inconvénients : peu propice à la maintenance, couplage de code élevé Surveillance des événements Avantages : facile à comprendre, peut lier plusieurs événements, chaque événement peut spécifier plusieurs fonctions de rappel Inconvénients : piloté par les événements, le processus n'est pas assez clair pour la publication /Subscription (mode observateur) est similaire à l'écoute d'événements, mais vous pouvez utiliser le « Centre de messages » pour savoir combien d'éditeurs et d'abonnés il y a actuellement. Avantages de l'objet Promise : vous pouvez utiliser la méthode then pour écrire dans un. chaîne ; vous pouvez écrire des rappels lorsque des erreurs se produisent. Inconvénients de la fonction : relativement difficile à écrire et à comprendre. Avantages de la fonction du générateur : échange de données à l'intérieur et à l'extérieur du corps de la fonction, mécanisme de gestion des erreurs. Inconvénients : gestion des processus peu pratique. Avantages de la fonction asynchrone : exécuteur intégré, meilleure sémantique. , applicabilité plus large, renvoie What is Promise, structure claire Inconvénients : mécanisme de gestion des erreurs20. Parlez d'idées de programmation orientée objet ?
L'idée de base est d'utiliser des concepts de base tels que les objets, les classes, l'héritage et l'encapsulation pour concevoir des programmes. Les avantages sont une facilité de maintenance et d'extension, une réutilisabilité et un héritage élevés du travail de développement et une charge de travail réduite de duplication. Cycle de développement raccourci21. Optimisation des performances du projet
Réduisez le nombre de requêtes HTTP. Utilisez CDN pour éviter le chargement paresseux. Réduisez le nombre d'éléments DOM. Utilisez du JavaScript et du CSS externes pour compresser le JavaScript, le CSS, les polices, les images. etc. Optimisez CSS Sprite. Utilisez iconfont pour la distribution multi-domaine. Réduisez autant que possible l'utilisation des iframes, évitez les src d'image vides, placez la feuille de style dans le lien et placez JavaScript en bas. de la page.22. Qu'est-ce qu'un thread unique et sa relation avec l'asynchrone ?
Fil unique : il n'y a qu'un seul thread qui ne peut faire qu'une seule chose. Raison : Pour éviter les conflits dans le rendu DOM, le navigateur doit restituer DOMJS. Lorsque JS est exécuté, le rendu DOM du navigateur met le rendu en pause. deux morceaux de JS et ne peuvent pas être exécutés en même temps (les deux sont modifiés en conflits DOM) webworker prend en charge le multi-threading, mais ne peut pas accéder à la solution DOM : asynchrone.23. Vous parlez d’équilibrage de charge ?
Les serveurs uniques fonctionnent ensemble pour éviter le surmenage d'un ou plusieurs d'entre eux et maximiser le rôle du serveur de redirection http en équilibrage de charge : le planificateur sélectionne le serveur en fonction de la politique pour répondre à la requête avec 302. L'inconvénient est qu'il n'a d'effet que la première fois, et les opérations suivantes Maintenir l'équilibrage de charge DNS sur ce serveur : lors de la résolution des noms de domaine, accéder à l'un des multiples serveurs IP (faible surveillance) Raison - éviter les conflits de rendu DOM Équilibrage de charge proxy inverse : accéder à un serveur unifié, et le serveur planifie l'accès. Un serveur réel nécessite un serveur unifié et ses performances sont affectées par le nombre de groupes de serveurs.24. Chaîne de portée ?
La chaîne de portée peut être comprise comme un ensemble de listes d'objets, comprenant le parent et ses propres objets variables, afin que nous puissions accéder aux variables ou fonctions déclarées dans le parent via la chaîne de portée.25. Que sont les prototypes, les chaînes de prototypes et l'héritage ?
Toutes les fonctions ont un attribut prototype (prototype). Tous les objets ont un attribut __proto__. En Javascript, chaque fonction a un attribut prototype qui pointe vers son propre prototype, et l'objet créé par cette fonction a également un attribut proto pointant vers celui-ci. Prototype, et le prototype d'une fonction est un objet, donc cet objet aura aussi un proto pointant vers son propre prototype, et cela ira plus profondément couche par couche jusqu'au prototype de l'objet Object, formant ainsi une chaîne de prototypes.26. Qu'est-ce que le mécanisme de récupération de place JS ? 1. Aperçu
Le mécanisme de garbage collection de js vise à éviter les fuites de mémoire (un morceau de mémoire qui n'est plus nécessaire existe toujours). Le mécanisme de garbage collection recherche en permanence ces variables qui ne sont plus utilisées et libère la mémoire vers laquelle il pointe. Dans JS, l'environnement d'exécution de JS est responsable de la gestion de la mémoire utilisée lors de l'exécution du code.
2. Le cycle de vie des variables
Lorsque le cycle de vie d'une variable se termine, la mémoire vers laquelle elle pointe sera libérée. JS a deux types de variables, les variables locales et les variables globales. Les variables locales ont un effet dans sa fonction actuelle. Lorsque la fonction se termine, la mémoire des variables sera libérée jusqu'à la fermeture du navigateur.
3. Il existe deux méthodes de récupération de place js : l'effacement des marques et le comptage des références.
Marquer le balayage : la plupart des navigateurs utilisent ce type de garbage collection. Lorsqu'une variable entre dans l'environnement d'exécution (déclare la variable), le garbage collector marque la variable. Lorsque la variable quitte l'environnement, elle est à nouveau marquée, puis supprimée.
Comptage de références : Cette méthode provoque souvent des fuites de mémoire, principalement dans les versions inférieures des navigateurs. Son mécanisme consiste à suivre le nombre de références à une certaine valeur. Lorsqu'une variable est déclarée et qu'un type de référence est attribué à la variable, le nombre de références est augmenté de 1. Lorsque la variable pointe vers une autre, le nombre de références. est décrémenté de 1. Lorsqu'il est égal à 0, le mécanisme de recyclage démarre.
27. Amélioration progressive et dégradation gracieuse
L'amélioration progressive crée des pages pour les navigateurs de version basse afin de garantir les fonctions les plus basiques, puis améliore les effets, les interactions et ajoute des fonctions supplémentaires pour les navigateurs de version élevée afin d'obtenir une meilleure expérience utilisateur. Rétrogradation gracieuse : créez des fonctionnalités complètes dès le début, puis rendez-les compatibles avec les versions inférieures des navigateursquestions d'entretien de vue
1. Avantages de vue
Léger, rapide, facile à apprendre, faible couplage, réutilisable, développement indépendantLa documentation est complète et la documentation est en chinois
2. Le composant parent Vue transmet les données aux composants enfants
accessoires3. Les composants enfants transmettent les événements aux composants parents
$émettre4. Points communs et différences entre les instructions v-show et v-if
Points similaires : les deux peuvent contrôler l’affichage et le masquage des éléments DOM.
La différence : v-show modifie uniquement l'attribut d'affichage, l'élément dom ne disparaît pas et il n'est pas nécessaire de restituer la page lors du changement.
v-if supprime directement l'élément dom de la page. Le changement nécessite à nouveau le rendu de la page.
5. Comment faire en sorte que CSS ne fonctionne que dans le composant actuel
portée6. Quelle est la fonction de <keep-alive></keep-alive>
Principalement utilisé pour mettre en cache les composants qui doivent être changés fréquemment sans restituer la page.7. Comment obtenir du dom
Ajoutez ref='refname' à l'élément dom, puis obtenez l'élément dom via this.$refs.refname
8. Nommez plusieurs instructions dans Vue et leur utilisation
modèle en V
v-on
v-html
v-texte
v-une fois
v-si
v-show
9. Qu'est-ce que vue-loader ? A quoi sert-il ?
Un chargeur pour les fichiers vue qui convertit template/js/style en modules js
Objectif : js peut écrire des styles es6 et de style
10. Pourquoi utiliser la clé
Ajoutez une clé comme identifiant unique à chaque élément DOM. L'algorithme diff peut identifier correctement ce nœud et accélérer le rendu de la page.11. axios et installation ?
Le plug-in axios est requis lors de l'utilisation d'ajax dans un projet vue
Méthode de téléchargement cnpm install axios --save
12. Utilisation du modèle V
v-model est utilisé pour la liaison bidirectionnelle des formulaires et peut modifier les données en temps réel.13. Veuillez me dire l'utilisation de chaque dossier et fichier du répertoire src du projet vue.cli.
composants stocker des composants
entrée de la page principale de app.vue
entrée du fichier principal index.js
ass stocke des fichiers de ressources statiques
14. Décrivez brièvement les scénarios d'utilisation du calculateur et de la montre respectivement.
Pour reprendre une phrase du site officiel, tout ce qui doit être calculé doit utiliser des propriétés calculées. Lorsque plusieurs éléments de données affectent un élément de données, utilisez les propriétés calculées et utilisez le panier de scène.
Si une modification de données affecte plusieurs éléments de données, utilisez watch et utilisez la zone de recherche de scène.
15. V-on peut-il surveiller plusieurs méthodes ?
Oui, par exemple v-on="onclick,onbure"16. Utilisation de $nextTick
Après la modification dans data(), les données modifiées de data ne peuvent pas être obtenues dans la page. Lors de l'utilisation de $nextTick, lorsque les données de data sont modifiées, la page peut être rendue en temps réel.17. Pourquoi les données du composant Vue doivent-elles être une fonction ?
En raison des caractéristiques de JavaScript, dans un composant, les données doivent exister sous la forme d'une fonction et ne peuvent pas être un objet.
Les données du composant sont écrites sous forme de fonction et les données sont définies sous la forme d'une valeur de retour de fonction, de sorte que chaque fois que le composant est réutilisé, une nouvelle donnée sera renvoyée, ce qui équivaut à ce que chaque instance de composant ait sa propre espace de données privé et leurs valeurs Responsable de la maintenance des données individuellement sans prêter à confusion. Si elles sont simplement écrites sous forme d'objet, toutes les instances de composants partagent les mêmes données, donc si l'une d'elles est modifiée, toutes seront modifiées.
18. Compréhension du cadre progressif
Plaider le moins
Différents niveaux peuvent être sélectionnés en fonction de différents besoins
19. Comment Vue implémente-t-il la liaison de données bidirectionnelle ?
La liaison de données bidirectionnelle de Vue est mise en œuvre via le détournement de données, la combinaison et le mode publication-abonnement. Lorsque les données changent, la vue change en conséquence. .
Noyau : concernant la liaison de données bidirectionnelle vue, son noyau est la méthode Object.defineProperty()
20. Différences et inconvénients entre les applications monopage et les applications multipages
Une application à page unique (SPA), en termes simples, fait référence à une application avec une seule page principale. Le navigateur charge tous les js, html et css depuis le début. Tout le contenu de la page est contenu dans cette page principale. Mais lors de l'écriture, il est toujours écrit séparément, puis lors de la protection, le programme de routage est chargé dynamiquement, les pages d'une seule page sautent et seules les ressources locales sont actualisées. Principalement utilisé sur PC.
Multipage (MPA) signifie qu'il existe plusieurs pages dans une application et que la page entière est actualisée lorsque la page saute.
Avantages d'une seule page : l'expérience utilisateur est bonne et rapide, et les modifications de contenu ne nécessitent pas de recharger la page entière. Sur cette base, le spa exerce moins de pression sur le serveur et l'effet de page sera séparé. glacière.
Inconvénients d'une seule page : peu propice au référencement ; la navigation n'est pas disponible. Si vous devez naviguer, vous devez réaliser vous-même l'avance et l'arrière. Le premier chargement prend beaucoup de temps ; la complexité de la page augmente beaucoup.
21. Pourquoi est-il nécessaire d'écrire la clé dans le composant liste du projet Vue, et quelle est sa fonction ? La clé est l'ID unique attribué à chaque nœud virtuel. Vous pouvez compter sur la clé pour obtenir le nœud vnode correspondant dans oldVnode avec plus de précision et de rapidité.
C'est plus précis car avec la clé, il n'y a pas de réutilisation sur place. Dans la comparaison de la fonction sameNode a.key === b.key, la réutilisation sur place peut être évitée. Ce sera donc plus précis. Il est plus rapide d'utiliser le caractère unique de la clé pour générer un objet cartographique afin d'obtenir le nœud correspondant, ce qui est plus rapide que la méthode de parcours.22. Quel est l'ordre d'exécution des hooks de cycle de vie des composants parents et des composants enfants ?
Charger le processus de renduparent beforeCreate -> parent créé -> parent beforeMount -> enfant beforeCreate -> enfant créé -> enfant beforeMount -> enfant monté -> parent monté
Processus de mise à jour des sous-composantsParent avant la mise à jour -> Enfant avant la mise à jour -> Enfant mis à jour -> Parent mis à jour
Processus de mise à jour du composant parentparent avant la mise à jour -> parent mis à jour
processus de destructionparent avantDestroy -> enfant avantDestroy -> enfant détruit -> parent détruit
23. Parlez-moi de votre compréhension de nextTick ? Lorsque vous modifiez la valeur de data puis obtenez immédiatement la valeur de l'élément dom, vous ne pouvez pas obtenir la valeur mise à jour. Vous devez utiliser le rappel $nextTick pour laisser la valeur de données modifiée s'afficher et se mettre à jour dans l'élément dom avant de l'obtenir avec succès. .
24. Pourquoi les données du composant vue doivent-elles être une fonction ? En raison des caractéristiques de JavaScript, dans un composant, les données doivent exister sous la forme d'une fonction et ne peuvent pas être un objet. Les données du composant sont écrites sous forme de fonction et les données sont définies sous la forme d'une valeur de retour de fonction, de sorte que chaque fois que le composant est réutilisé, une nouvelle donnée sera renvoyée, ce qui équivaut à ce que chaque instance de composant ait sa propre espace de données privé. Ils sont uniquement responsables de la maintenance de leurs propres données sans provoquer de confusion. Si elles sont simplement écrites sous forme d'objet, toutes les instances de composants partagent les mêmes données, donc la modification de l'une d'entre elles les modifiera toutes.
25. La différence entre vue et jQuery. jQuery utilise le sélecteur ($) pour sélectionner des objets DOM et effectuer des opérations telles que l'affectation, l'acquisition de valeurs, la liaison d'événements, etc. En fait, la seule différence avec le HTML natif est qu'il peut être plus pratique. sélectionner et exploiter les objets DOM, tandis que les données et l'interface vont de pair. Par exemple, si vous avez besoin d'obtenir le contenu de la balise label : $("lable").val();, cela dépend toujours de la valeur de l'élément DOM. Vue sépare complètement les données et la vue via les objets Vue. Pour opérer sur les données, vous n'avez plus besoin de référencer l'objet DOM correspondant. On peut dire que data et View sont séparés. Ils sont liés l'un à l'autre via l'objet Vue, le vm. C'est le légendaire MVVM.
26. La différence entre delete et Vue.delete dans la suppression d'un tableau. Supprimer ne modifie que les éléments supprimés en vides/non définis. Les valeurs clés des autres éléments restent inchangées. Vue.delete supprime directement le tableau et modifie la valeur clé du tableau.
27. Comment résoudre le chargement lent du premier écran SPA en installant les plug-ins requis pour le chargement paresseux dynamique en utilisant les ressources CDN ;
28. Le projet Vue contient-il un fichier js, un fichier css ou plusieurs fichiers ? Selon la spécification d'échafaudage vue-cli, un fichier js et un fichier CSS.
29. Méthodes pour déclencher des mises à jour de vue lorsque vue met à jour un tableau push();
30. Quel est le cycle de vie d'une vue ? Qu'est-ce que ça fait ? Chaque instance de Vue doit passer par une série de processus d'initialisation lors de sa création - par exemple, elle doit configurer la surveillance des données, compiler des modèles, monter l'instance sur le DOM et mettre à jour le DOM lorsque les données changent, etc. Parallèlement, certaines fonctions appelées life cycle hooks seront également exécutées au cours de ce processus, ce qui donnera aux utilisateurs la possibilité d'ajouter leur propre code à différentes étapes.
31. Quels hooks seront déclenchés lors du premier chargement de la page ? beforeCreate, créé, beforeMount, monté
32. Vue obtient généralement des données dans lesquelles la fonction de période est créée avant le montage du support
33. La différence entre créé et monté : créé : appelé avant que le modèle ne soit rendu en HTML, c'est-à-dire que certaines valeurs d'attribut sont généralement initialisées puis restituées dans une vue. monté : appelé après le rendu du modèle en HTML, généralement une fois la page d'initialisation terminée, puis effectue certaines opérations requises sur le nœud DOM du HTML.
34. La compréhension du cycle de vie de Vue est divisée en 8 étapes : avant/après création, avant/après chargement, avant/après mise à jour et avant/après destruction. Création avant/après : à l'étape beforeCreated, l'élément de montage $el et les données de l'objet de données de l'instance de vue sont tous deux indéfinis et n'ont pas été initialisés. Dans la phase de création, les données de l'objet de données de l'instance vue sont disponibles, mais $el ne le sont pas. Avant/après chargement : à l'étape beforeMount, $el et les données de l'instance vue sont initialisés, mais le nœud dom virtuel avant est toujours monté et data.message n'a pas été remplacé. Dans la phase montée, l'instance vue est montée et data.message est rendu avec succès. Mise à jour avant/après : lorsque les données changent, les méthodes beforeUpdate et update seront déclenchées. Avant/après destruction : après l'exécution de la méthode destroy, les modifications apportées aux données ne déclencheront plus la fonction périodique, indiquant que l'instance Vue a publié la surveillance des événements et la liaison au DOM, mais que la structure DOM existe toujours.
35. Qu'est-ce que vuex ? Gestion de l'état dans le framework vue.
36. Quels sont les attributs de vuex ? Il existe cinq types : État, Getter, Mutation, Action, État du module : données de base (emplacement de stockage de la source de données) getters : mutations de données dérivées des données de base : méthodes pour soumettre les données modifiées, synchronisation ! actions : comme un décorateur, envelopper les mutations pour qu'elles puissent être asynchrones. modules : Vuex modulaire
37. seau de la famille vue vue-cli, vuex, vueRouter, Axios
38. Quelles sont les commandes npm couramment utilisées dans les projets vue-cli ?
npm install est la commande pour télécharger le package de ressources node_modules. npm run dev est la commande npm pour démarrer l'environnement de développement vue-cli. vue-cli est la commande npm pour générer les ressources de déploiement de l'environnement de production npm run build–. Le rapport est utilisé pour afficher les fichiers de ressources de déploiement de l'environnement de production vue-cli, commande size npm.39. Veuillez me dire le but de chaque dossier et fichier du projet vue-cli ?
Le dossier build stocke certaines configurations initiales de webpack. Le dossier config enregistre certaines configurations d'initialisation du projet. node_modules est le module dont dépend le projet chargé par npm. Le répertoire src est le répertoire que nous voulons développer : les actifs sont utilisés pour placer les composants d'image. .vue est le fichier d'entrée de projet main.js du fichier principal du projet.40. Quelle est la différence entre v-if et v-show ?
Ce qu'ils ont en commun : Ils affichent tous dynamiquement les éléments DOM. Différences : v-if ajoute ou supprime dynamiquement des éléments DOM dans l'arborescence DOM. v-show contrôle l'affichage et la masquage en définissant l'attribut de style d'affichage de l'élément DOM. si les commutateurs ont un processus de compilation/désinstallation partielle, détruisez et reconstruisez correctement les écouteurs d'événements internes et les sous-composants pendant le processus de commutation. v-show n'est qu'une simple consommation de performances de commutation basée sur CSS. v-if a un coût de commutation plus élevé. un coût de rendu initial plus élevé. Le scénario v-if convient aux conditions de fonctionnement peu susceptibles de changer. v-show convient aux commutations fréquentes.41. Quelles sont les priorités de v-for et v-if ? Lorsque v-for et v-if sont utilisés en même temps, ils ont la priorité de s'exécuter l'un après l'autre. v-for a une priorité plus élevée que v-. if, ce qui signifie que v-for a une priorité plus élevée que v-if. Le jugement de v-if est appelé à chaque fois dans chaque affectation de boucle, il n'est donc pas recommandé d'utiliser v-if et v-for en même temps. dans la même étiquette.
42. Modificateurs couramment utilisés dans Vue ?
.stop empêche les événements de continuer à se propager.prevent empêche le comportement par défaut des tags.capture utilise le mode de capture d'événements, c'est-à-dire que les événements déclenchés par l'élément lui-même sont d'abord traités ici, puis transmis aux éléments internes pour traitement.self uniquement lorsque event.target est l'élément actuel La fonction de gestionnaire est déclenchée lorsqu'elle-même. L'événement Once ne sera déclenché qu'une seule fois. Passive indique au navigateur que vous ne souhaitez pas empêcher le comportement par défaut de l'événement.Modificateurs pour le modèle V
.lazy utilise ce modificateur pour se synchroniser à nouveau dans l'événement de changement, convertit automatiquement la valeur saisie par l'utilisateur en un type numérique, filtre automatiquement les espaces de fin saisis par l'utilisateur.Modificateur d'événement clavier
.enter.tab.delete (capture les touches "supprimer" et "retour arrière").esc.space.up.down.left.rightmodificateur de système
.ctrl.alt.shift.metaModificateur du bouton de la souris
.gauche.droite.milieu43. Comment utiliser les objets événement dans les événements vue ?
Récupérez l'objet événement et transmettez $event comme paramètre de méthode. Notez que le symbole $ est utilisé dans l'événement <button @click="Event($event)">Objet événement</button>44. Quelles sont les méthodes de transfert de valeur des composants ?
Passer du parent à l'enfant : Le composant enfant reçoit la valeur de l'attribut xx transmis par le composant parent via props['xx'] Passer de l'enfant au parent : Le composant enfant la transmet via this.$emit('fnName',value) , et le composant parent reçoit l'événement fnName Autres façons de recevoir des rappels : en créant un bus et en transmettant des valeurs à l'aide de Vuex45. Comment un composant enfant appelle-t-il le composant parent dans Vue ?
Appelez directement la méthode du composant parent via this.$parent.event dans le composant enfant. Utilisez $emit() dans le composant enfant pour déclencher un événement sur le composant parent, et le composant parent peut écouter cet événement. Le composant parent transmet la méthode au composant enfant et la méthode est appelée directement dans le composant enfant.46. Comment faire en sorte que CSS ne fonctionne que dans le composant actuel ? Ajouter une portée devant le style dans le composant
47. Comment obtenir dom?ref="domName" Utilisation : this.$refs.domName
48. saut de routage vue
(1) Lien de routeur de navigation déclaratif
Sans paramètres : // Remarque : Si le lien dans router-link commence par '/', il démarre à partir de la route racine. S'il ne commence pas par '/', il démarre à partir de la route actuelle. <router-link :to="{name:'home'}"> <router-link :to="{path:'/home'}"> //Le nom et le chemin sont acceptables. avec paramètres :< router-link :to="{name:'home', params : {id:1}}"><router-link :to="{name:'home', requête : {id:1} }"> < router-link :to="/home/:id"> //Transférer l'objet<router-link :to="{name:'detail', requête : {item:JSON.stringify(obj)}} "></ lien-routeur>(2) ceci.$router.push()
Sans paramètres : this.$router.push('/home')this.$router.push({name:'home'})this.$router.push({path:'/home'})paramètre de requête 1. Configuration de routage : nom : 'home', chemin : '/home' 2. Saut : this.$router.push({name:'home',query: {id:'1'}})this.$ router.push ({path:'/home',query: {id:'1'}})3. Obtenir les paramètres paramètres HTML : $route.query.idscript paramètres : this.$route.query.idparams paramètres 1. Configuration du routage : nom : 'home', chemin : '/home/:id' (ou chemin : '/home:id') 2. Saut : this.$router.push({name:'home', params : {id:'1 '}}) Remarque : // Vous pouvez uniquement utiliser le nom pour faire correspondre les routes et vous ne pouvez pas utiliser les paramètres de chemin // pour transmettre les paramètres (similaire à la publication) Chemin de configuration de routage : "/home/:id" ou chemin : "/home :id " sinon le paramètre de rafraîchissement disparaît 3. Récupérer le paramètre paramètre html : $route.params.id paramètre de script : this.$route.params.id Passer le paramètre directement par le chemin 1. Configuration de la route : nom : 'home', chemin : '/home/:id' 2. Sauter : this.$router.push({path:'/home/123'}) ou : this.$router.push('/home/123') 3. Obtenir les paramètres : La différence entre this.$route.params.idparams et query. Query est similaire à get. Après le saut, l'URL de la page sera associée à des paramètres similaires à ?id=1. Les mots de passe non importants peuvent être transmis de cette manière, les mots de passe et autres utilisent toujours des paramètres, et l'ID sera toujours là lorsque la page sera actualisée. Les paramètres sont similaires à la publication. Les paramètres ne seront pas ajoutés après l'URL de la page après le saut.(3) ceci.$router.replace()
L'utilisation est la même que ci-dessus(4) ceci.$router.go(n)
Sauter n pages en avant ou en arrière, n peut être un entier positif ou négatifla différence :
this.$router.push accède au chemin d'URL spécifié et ajoute un enregistrement dans la pile d'historique. Un clic en arrière reviendra à la page précédente. this.$router.replace accède au chemin d'URL spécifié, mais il n'y aura aucun enregistrement dans le chemin d'URL spécifié. pile d'historique. Enregistrer, cliquez sur Retour pour passer à la page précédente (c'est-à-dire remplacer directement la page actuelle) this.$router.go(n) Avancer ou reculer de n pages, n peut être un entier positif ou un entier négatif.49. Le principe de la liaison bidirectionnelle de Vue.js. Vue.js 2.0 utilise le détournement de données (mode Proxy) combiné au mode éditeur-abonné (mode PubSub) pour détourner les setters et getters de chaque propriété via Object.defineProperty(). Publiez des messages aux abonnés lorsque les données changent et déclenchez les rappels d'écoute correspondants.
Chaque instance de composant a une instance de programme d'observation correspondante, qui enregistre les propriétés en tant que dépendances lors du rendu du composant. Plus tard, lorsque le setter de la dépendance est appelé, l'observateur sera invité à recalculer, entraînant la mise à jour de ses composants associés.
Vue.js 3.0, abandonné Object.defineProperty et utilisé le proxy natif ES6 plus rapide (intercepteur d'objet d'accès, également appelé proxy)
50. La différence entre Computed et Watch
Attribut calculé: dépend des autres valeurs d'attribut, et la valeur calculée est mise en cache uniquement lorsque la valeur d'attribut dépend des modifications, la valeur calculée sera recalculée la prochaine fois que la valeur calculée sera obtenue.
REGARDER AUCUNIÈRE: Il s'agit davantage d'une fonction d'observation, sans mise en cache, similaire à la surveillance de certaines données.
Scénarios d'application :
Lorsque nous devons effectuer des calculs numériques et compter sur d'autres données, il doit être utilisé, car la fonction de cache de calcul peut être utilisée pour éviter de recalculer chaque fois que la valeur est obtenue. La montre doit être utilisée lorsque nous devons effectuer des opérations asynchrones ou coûteuses lorsque les données changent. Résultat final. Ce sont des choses que les propriétés calculées ne peuvent pas faire. Si plusieurs facteurs affectent un affichage, utilisez calculé; si un changement dans un facteur affecte plusieurs autres facteurs et affichages, utilisez la montre;La différence entre calculé et méthodes
Calculé: les propriétés calculées sont mises en cache en fonction de leurs dépendances et ne seront réévaluées que lorsque leurs dépendances associées changent.51. Filtre
Utilisez des filtres dans les données VUE (format). Affichage.52. Axios est une bibliothèque HTTP concise et efficace et efficace.
53. Qu'est-ce que Sass? Comment l'installer et l'utiliser dans Vue? Sass est une langue précompilée CSS.
Utilisez NPM pour installer des chargeurs (chargeur SASS, chargeur CSS, etc.). Configurez le chargeur SASS dans webpack.config.js. 54. Vue.js Page Flashs Vue.js fournit une directive V-Coak, qui reste sur l'élément jusqu'à la compilation des fins d'instance associée. Lorsqu'il est utilisé avec CSS, cette directive cache des étiquettes non compilées jusqu'à ce que l'instance soit compilée. L'utilisation est la suivante. [v-coak] {affichage: aucun;} <div v-coak> {{title}} </div>55. Comment résoudre le problème de la structure hiérarchique des données trop profondes. Vous pouvez utiliser VM. $ Set définit manuellement une couche de données: Vm. $ Set ("Demo", ABCD)
56. Vue Instructions communes
Le modèle V est principalement utilisé pour les éléments de formulaire pour implémenter la liaison des données bidirectionnelle (identique à Ng-modèle en angulaire) Fonction de liaison dynamique de la banque en V: Modifiez en temps opportun les données de la page V-on: Cliquez sur la fonction à l'étiquette , qui peut être abrégé en tant que @, par exemple, pour lier une fonction de clic, la fonction doit être écrite en méthodes V-For Format: V-for = "Nom de champ dans (OF) Array JSON" Loop Array ou JSON (identique à Ng-Repeat in Angular) V-show Afficher le contenu (identique à Ng-show in Angular) Contenu de masquer V-Hide (identique à Ng-Hide in Angular) V-IF Afficher et masquer (la suppression et l'ajout d'éléments DOM sont les mêmes Comme ng-si en angulaire, la valeur par défaut est fausse) V- else-if doit être utilisée en conjonction avec V-if V-else doit être utilisée en conjonction avec V-if et ne peut pas être utilisée seule, sinon une erreur sera Erreur de compilation de modèle rapporté V-Text Parse Text V-html Parse HTML TAG Vind: Classe Trois Méthodes de liaison Type d'objet '{Red: ISRID}' Ternary Type'isred? "Red": "Blue" 'Array Type' [{{ Red: "isRed"}, {bleu: "IsBlue"}] 'V-once ne rende qu'une seule fois lorsque vous entrez dans la page ne rendant plus V-Cloak pour empêcher la sortie V-Pre vacillante les éléments à l'intérieur de la balise en place en place57. La différence entre $ Route et $ routeur
$ Route est un "objet d'information de routage", y compris le chemin, les paramètres, le hachage, la requête, le FullPath, le correspondance, le nom et d'autres paramètres d'information de routage. $ Router est l'objet "Instance de routage", y compris les méthodes de saut de routage, les fonctions de crochet, etc.58. Comment comprendre le flux de données unique de Vue
Les données sont toujours passées du composant parent au composant enfant. Cela empêchera le composant de l'enfant de modifier accidentellement l'état du composant parent, ce qui rend le flux de données de votre application difficile à comprendre. Remarque: L'utilisation directement de Model V pour lier les accessoires transmis du composant parent au composant enfant est un moyen d'écriture irrégulier, et l'environnement de développement rapportera un avertissement. Si vous souhaitez vraiment modifier la valeur des accessoires du composant parent, vous pouvez définir une variable dans les données, l'initialiser avec la valeur de l'hélice, puis utiliser $ émettre pour informer le composant parent pour le modifier.59. Qu'est-ce que DOM virtuel? Quels sont les avantages et les inconvénients ? Parce que la manipulation du DOM dans le navigateur coûte cher. Des opérations fréquentes sur le DOM entraîneront certains problèmes de performance. C'est la raison de la création de Dom virtuel. Virtual Dom de Vue2 s'appuie sur l'implémentation de la bibliothèque open source Snabbdom. L'essence de Dom virtuel est d'utiliser un objet JS natif pour décrire un nœud Dom, qui est une couche d'abstraction du DOM réel.
Avantages: 1. Performances garanties Limite inférieure: Le DOM virtuel du cadre doit s'adapter à toutes les opérations qui peuvent être générées par l'API de la couche supérieure. ; mais par rapport au brut, les performances de l'opération DOM de DOM sont bien meilleures, donc le DOM virtuel du cadre peut au moins garantir qu'il peut toujours fournir de bonnes performances sans optimisation manuelle, ce qui garantit non seulement la limite de performance inférieure. 2. Pas besoin de faire fonctionner manuellement le DOM: nous n'avons pas besoin de faire fonctionner manuellement le DOM. D'une manière prévisible, ce qui améliore considérablement l'efficacité. 3. Plate-forme transversale: Virtual Dom est essentiellement un objet JavaScript, et Dom est fortement lié à la plate-forme. Inconvénients: 1. Incapacité à effectuer une optimisation ultime: bien que l'optimisation DOM virtuelle + raisonnable soit suffisante pour répondre aux besoins de performance de la plupart des applications, dans certaines applications avec des exigences de performance extrêmement élevées, le DOM virtuel ne peut pas effectuer une optimisation ultime ciblée. 2. Lorsque vous rendez une grande quantité de Dom pour la première fois, elle sera plus lente que l'insertion innorhtml en raison d'une couche supplémentaire de calcul DOM.60. Comment résoudre le problème de la perte de données lorsque la page Vuex est actualisée?
La persistance des données Vuex est requise. Il est recommandé d'utiliser le plug-in Vuex-Persist, qui est un plug-in pour le stockage persistant Vuex. Vous n'avez pas besoin d'accéder manuellement à un stockage, mais enregistrez l'état directement dans les cookies ou localStorage.61. Pourquoi Vuex doit-il être divisé en modules et ajouter des espaces de noms?
Module: En raison de l'utilisation d'un seul arbre d'état, tous les états de l'application seront concentrés dans un objet relativement grand. Lorsqu'une application devient très complexe, les objets de stockage peuvent devenir assez gonflés. Afin de résoudre les problèmes ci-dessus, Vuex nous permet de diviser le magasin en modules. Chaque module a son propre état, mutation, action, Getter et même sous-modules imbriqués.
Espace de noms: par défaut, les actions, les mutations et les getters dans un module sont enregistrés dans l'espace de noms global - cela permet à plusieurs modules de répondre à la même mutation ou action. Si vous souhaitez que votre module ait un degré plus élevé d'encapsulation et de réutilisabilité, vous pouvez en faire un module nommé en ajoutant des noms de noms: true. Lorsqu'un module est enregistré, tous ses getters, actions et mutations seront automatiquement nommés en fonction du chemin enregistré par le module.
62. Quels modèles de conception sont utilisés dans Vue?
1. Mode d'usine - Passez des paramètres pour créer une instance virtuelle DOM et renvoyez le VNode de la balise de base et du composant VNode en fonction de différents paramètres. 2. Mode Singleton - L'ensemble du programme a une et une seule instance. 3. Modèle de publication-subscription. (mécanisme d'événement Vue) 4. Modèle d'observateur. (Principe de données réactif) 5. Mode décorateur (utilisation de @decorator) 6. Mode de stratégie.63. Quelles optimisations de performances avez-vous faites pour Vue? Ici, nous énumérons uniquement l'optimisation des performances pour VUE.
Ne rendez pas la hiérarchie des objets trop profonde, sinon les performances seront médiocres. Ne mettez pas les données qui ne nécessitent pas de réactivité dans les données (vous pouvez utiliser objet.freeze () pour geler les données). Une clé lors de la traversée, et la clé est la meilleure valeur d'identification, et évitez d'utiliser V-If en même temps la liste des mégadonnées et l'optimisation des performances du tableau - liste virtuelle / table virtuelle pour empêcher les fuites internes, détruire les variables globales et le temps après la destruction des composants, Image Route de chargement paresseux, chargement paresseux de routage asynchrone Plug-in tiers à la demande Utilisation appropriée des composants de cache de conservation pour le chargement, l'anti-sillons et la limitation, le rendu SSR ou le pré-rendu côté serveur ou le pré-rendu64. Principe de Vue.Set Méthode: La modification de Vue ne déclenchera pas la mise à jour de la vue dans deux cas.
1. Ajoutez de nouveaux attributs à l'instance après la création de l'instance (ajoutez des attributs à l'objet réactif) 2. Modifiez directement l'indice du tableau pour modifier la valeur du tableau. Le principe de Vue.set ou $ set est le suivant. Lors de l'ajout d'un attribut non existant à un objet, le nouvel attribut sera d'abord suivi de manière responsable, puis le observateur collecté par le DEP de l'objet OB sera déclenché pour mettre à jour. le tableau lui-même pour mettre à jour le tableau.65. Scénarios d'utilisation et principes des composants fonctionnels.
1. Les composants fonctionnels doivent spécifier les fonctionnalités: Vrai lors de la déclaration du composant. La fonction et les propriétés calculées ne peuvent pas être utilisées. Référencé à l'extérieur via REF, le réel référencé est Htmlement6. $ attrs et monté automatiquement.Avantages: 1. Étant donné que les composants de la fonction n'ont pas besoin d'être instanciés, sont apatrides et n'ont pas de cycle de vie, les performances de rendu sont meilleures que les composants ordinaires.
Scénarios d'utilisation:
Un composant d'affichage simple, utilisé comme composant de conteneur tel que le routeur-vision, est un composant fonctionnel. "Composant d'ordre supérieur" - utilisé pour accepter un composant comme paramètre et renvoyer un composant enveloppé. Le code correspondant est le suivant :
if (istrue (ctor.options.fonctional)) {// Ceux avec les attributs fonctionnels sont des composants fonctionnels renvoient createFonctionalComponent (ctor, propsdata, data, context, enfants);} const les auteurs = data.on; ;66. Pourquoi les composants de l'enfant ne peuvent-ils pas modifier l'hélice transmise par le composant parent? Tous les accessoires forment une liaison vers le bas unidirectionnelle entre leurs accessoires parent et enfant: les mises à jour de l'hélice parent circulent vers le bas vers le composant enfant, mais pas vice versa. Cela empêchera le composant de l'enfant de modifier accidentellement l'état du composant parent, ce qui rend le flux de données de votre application difficile à comprendre.
67. Création de projet Vue. Configuration de routage, configuration de l'environnement, transfert de valeur des composants, etc.
CSS, HTML Interview Questions
Quelle est la différence entre HTML et HTML5?
Il y a trois différences principales:
1. Différence de déclaration de document
HTML: Langue de balisage hypertexte, une langue de type texte brut.
HTML5.0: Le document indique que HTML5 est facile à écrire, rationalisé et propice à la lecture et au développement rapides par les programmeurs.
2. Différences de sémantique structurelle
HTML: des balises qui ne reflètent pas la sémantique structurelle, telle que: <div id = "nav"> </div>
HTML5: Ajout de nombreuses balises sémantiques, telles que: <broix>, <men Mots>, <Audio>, <bdi> ...
3. Différences de dessin
HTML: fait référence aux graphiques vectoriels évolutifs, les graphiques basés sur les vecteurs utilisés pour définir le Web.
HTML5: L'élément Canvas de HTML5 utilise des scripts (généralement à l'aide de JavaScript) pour dessiner des images sur la page Web et peut contrôler chaque pixel de la toile.
Qu'est-ce qu'un modèle de boîte?
Nous diviserons une boîte en plusieurs parties: contenu, rembourrage, bordure et marge.Comment comprendre la sémantique HTML5?
HTML SEMANTIC TAG HIDER - TITRE NAV - Article de navigation - Section Article - Section ou paragraphe Mis à part - pied de page de barre latérale - pied de pageQuels sont les avantages de la sémantique?
En l'absence de code CSS, la structure du contenu et la structure du code peuvent être bien présentées (afin que les non-techniciens puissent comprendre le code) pour améliorer l'expérience utilisateur. bénéfique pour le référencement. La sémanisation peut établir une meilleure connexion avec les moteurs de recherche. (Navigateur) 1. Cookie (1) Il est utilisé pour la communication entre le client et le serveur (2) mais il a la fonction du stockage local, il est donc "emprunté" (3) document.cookie = ... et le modifier (4) Inconvénients des cookies pour le stockage ① La capacité de stockage est trop petite, seulement 4KB ② Toutes les demandes HTTP sont transportées, ce qui affectera l'efficacité de l'acquisition des ressources ③ L'API est simple et doit être encapsulée pour utiliser le document. Cookie 2. LocalStorage, SessionStorage (1) Spécialisation HTML5 Conçu pour le stockage, la capacité maximale est de 5m (2) L'API est simple et facile à utiliser (3) lcoalstorage.setItem (clé, valeur); localstorage.getItem (clé); (4) Dans le mode iOS Safari Hidden: LocalStorage.getItem rapportera une erreur, les suggestions Utilification de l'utilisation de l'encapsulation des coups de travail 3. SessionStorage est utilisée pour stocker localement les données dans une session. et les données seront détruites à la fin de la session. Par conséquent, sessionStorage n'est pas un stockage local persistant, mais uniquement un stockage au niveau de la session. LocalStorage est utilisé pour le stockage local persistant. Quels sont les grains de navigateur commun? ** Trident Kernel: ** signifie que le navigateur est à IE, donc le noyau Trident est également appelé le noyau E.** Gecko Core: ** représente le navigateur Firefox Browser. Le noyau Gecko est open source, et son plus grand avantage est qu'il peut être multiplateforme.
WebKit: WEBKIT KERNEL: Le navigateur représentatif est Safari (navigateur d'Apple) et une version inférieure de Google Chrome, qui est un projet open source.
** PRESTO CORE: ** représente le navigateur d'opéra de navigateur (chinois traduit par "navigateur ouvert"). .
** BLINK CORE: ** Développé par Google and Opera, publié en avril 2013, le CHROME CORE actuel est Blink.
Parlez de votre compréhension des normes Web et du W3C?
Normes Web:
Les normes Web sont principalement divisées en trois parties: structure, performances et comportement.
Structure: fait référence aux balises que nous écrivons habituellement dans le corps, qui sont principalement composées de balises HTML
Performance: fait référence aux styles de balises HTML plus riches, principalement composés de styles CSS
Comportement: fait référence à l'interaction entre la page et l'utilisateur, principalement composé de la partie JS
W3C:
W3C a présenté les exigences standardisées pour les normes Web, à savoir les spécifications de code.
exigences structurelles
1. Les lettres d'étiquette doivent être minuscules
2. L'étiquette doit être fermée
3. Les balises ne sont pas autorisées à être imbriquées arbitrairement
Performance et exigences comportementales
1. Il est recommandé d'utiliser des scripts CSS et JS à liaison externe pour réaliser la séparation de la structure et des performances, de la structure et du comportement, ce qui peut améliorer l'efficacité de rendu de la page et afficher le contenu Web plus rapidement.
Comment implémenter la disposition réactive du navigateur?
Utilisez des requêtes multimédias (@Media), utilisez la disposition Flex, utilisez des unités pour pourcentage, utilisez des unités REM et utilisez des unités VH et HW.Vous comprenez les sélecteurs et priorités CSS?
Sélecteurs CSS couramment utilisés
Sélecteur d'identité, sélecteur de classe, sélecteur de balises, sélecteur d'attributs, sélecteur de pseudo-classe, sélecteur descendant
Division du poids
Au même niveau:
! IMPORTANT> Style en ligne> Sélecteur d'ID> Sélecteur de classe> (sélecteur de balises, sélecteur de pseudo-classe, sélecteur d'attribut)
À différents niveaux:
Normalement, plus la valeur de poids est élevée, plus la priorité est élevée, mais il n'y a pas eu de division de valeur de poids spécifique, donc dans la plupart des développements actuels, plus le niveau est profond, plus la priorité est élevée.
Parlez de votre compréhension de la reflux et de la redessation?
Qu'est-ce que la reflux?
Le reflux se produit lorsque la largeur, la hauteur, la mise en page, l'affichage ou la cachette d'un élément lui-même, ou que la structure du texte à l'intérieur de l'élément change, ce qui doit être reconstruit de la page.Qu'est-ce que Repainte?
Redessine se produit lorsque la largeur, la hauteur, la mise en page, l'affichage ou la cachette d'un élément lui-même n'ont pas changé, mais seul le style d'apparence de l'élément a changé.
Quand le reflux aura-t-il lieu? Lorsqu'un élément DOM visible est ajouté ou supprimé, la position de l'élément change, la taille de l'élément change, le contenu change et lorsque la page est rendue pour la première fois.
Quand la repection aura-t-elle lieu?
Énumérez certains styles CSS connexes: couleur, arrière-plan, taille arrière, visibilité, box-shadow
Quelle est la différence entre l'opacité: 0, visibilité: caché et affichage: aucun?
Opacity = 0, l'élément est masqué, mais la disposition de la page ne sera pas modifiée.
Visibilité = cachée, l'élément est masqué, mais la disposition de la page ne sera pas modifiée, mais les événements liés à l'élément ne seront pas déclenchés.
Display = Aucun masque l'élément et modifie la disposition de la page.
préprocesseur CSS
mobsasseQuelle est la différence entre le titre et l'alt de <Mg>?
Habituellement, lorsque la souris glisse sur un élément, ALT est affiché. Il peut améliorer l'accessibilité des images.Quels sont les éléments en ligne et les éléments au niveau des blocs? À quel élément IMG appartient-il?
Adresse - Adresse Blockquote - Centre de référence de bloc - Alignement du centre Bloc Dir - Répertoire Liste Div - Niveau de bloc couramment utilisé, également l'étiquette principale de CSS Layout DL - Fieldset de liste de définition - Formulaire de contrôle de la forme - Formulaire interactif H1 - TEALLINE H2 - Sous-titre H3 - Niveau 3 En-tête H4 - Niveau 4 Heading H5 - Niveau 5 En-tête H6 - Niveau 6 En-tête HR - Ligne de séparateur horizontal ISIndex - Menu d'invite d'entrée - Liste de menu NOFRAMES - FRAMES CONTENU UNE CONTENU (Afficher ceci pour les navigateurs qui ne prennent pas en charge les cadres) Bloc Contenu noscript - Script facultatif Contenu (ce contenu s'affiche pour les navigateurs qui ne prennent pas en charge le script) ol - Formulaire commandé P - Paragraphe pré - Tableau de texte formaté - Tableau UL - Liste non ordonnée
A - Anchor Point ABBR - Abréviation Acronyme - Première lettre B - Bold (non recommandé) BDO - Bidi Override Big - Large Font Br - Line Break Cite - Code de référence - Code d'ordinateur (requis lors de la citation du code source) DFN - Définir le champ EM - Imphase sur la police - Paramètre de police (non recommandé) I - Italic IMG - Entrée d'image - boîte d'entrée KBD - Définir l'étiquette du texte du clavier - Étiquette de table Q - Citation courte S - Sous-ligne (non recommandé) Small - Small Police Text Span - Contators en ligne couramment utilisés, définissant les blocs dans la frappe de texte - Soulignez Strong - Bold Imphasis Sub - Indice SUP - SuperScript TextArea - Boîte d'entrée de texte multi-lignes TT - TELETYPE TEXT U - CONSEIL
IMG est un élément de remplacement en ligne et a le même effet qu'un élément de bloc
La différence entre Readonly et Handicap sous forme
Points communs: il empêche les utilisateurs de modifier le contenu dans le formulaire. Ne peut pas être modifié. La zone de texte définie sur Disabled ne peut pas obtenir Focus 3. Si le champ du formulaire est désactivé, le champ ne sera pas envoyé (valeur réalisée dans le formulaire) et sérialisé1. Entrez l'URL dans le navigateur et affichez-le sur la page Web.
La résolution de noms de domaine initie une poignée de main à trois voies TCP pour établir une connexion TCP. demande les ressources dans le code HTML.
2. Inconvénients des cookies
Il y a une limite au nombre maximal de cookies générés par chaque nom de domaine spécifique. , il ne dépasse généralement pas 4095 octets.
3. Browsers et grains grand public
Google Chrome: Webkit / Blink Safari: Webkit IE: Trident Firefox: Gecko Opera: Presto / Webkit / Blink
4. La différence entre SessionStorage et LocalStorage
SessionStorage est utilisé pour stocker localement les données dans une session. localStorage est utilisé pour le stockage local persistant, à moins que les données ne soient activement supprimées, les données n'expireront jamais.
5. Parlez de la compréhension des spécifications du BFC
BFC est le contexte de formatage de blocs, c'est-à-dire le contexte de formatage. Les effets du BFC sont de permettre aux éléments à l'intérieur et à l'extérieur de l'interagir les uns avec les autres.
6. Veuillez nommer au moins trois façons de réduire le temps de chargement des pages.
Minimiser les demandes HTTP répétées dans la page.
7. Comment optimiser les performances du site Web?
Pour le contenu, réduisez les demandes HTTP: fusion des fichiers, des sprites CSS et des images en ligne. Utilisez GZIP pour les composants. Au bas de la page. Étirez les images en HTML.8. Stockage du navigateur?
Lorsqu'il est transitoire, nous devons stocker les données en mémoire et le stockage persistant n'est disponible qu'à l'exécution. etc., Dans HTTP transporté automatiquement, la limite supérieure de la taille est de 4k, vous pouvez définir le temps d'expiration par vous-même localstorage / sessionstorage: stockage à long terme / fermeture de fenêtre et suppression, la limite de taille est de 4 ~ 5Mindexdb Server distribué de cache réparti Retis base de données9. Obtenez / publier?
GET: Cache, la longueur de la demande est limitée, sera enregistrée dans l'historique, aucun effet secondaire (les ressources ne sont pas modifiées), idempotent (le nombre de demandes n'a rien à voir avec les ressources) Scénario Post: Sécurité, Big Data, plus de types d'encodage10. Problèmes de sécurité?
Attaque XSS: injectez le cookie de codes malveillant set httponly pour échapper au contenu d'entrée et à la sortie du contenu de la page CSRF: Fonctionnement de la demande de site transversal, Protection: GET ne modifie pas les données et n'est pas accessible par des sites Web tiers définissent le cookie de l'utilisateur sur une liste blanche et n'est pas accessible par la vérification de la demande de demande de site Web de tiersOptimisation des performances
1. Quels sont les aspects de l'optimisation des performances?
Compression et fusion des ressources, réduisant les demandes HTTP, chargement asynchrone du code non essentiel, utilisation du cache du navigateur et utilisant CDN pour pré-résoudre DNS2. Chargement asynchrone?
Script dynamique Chargement de déferasync3. Quelles sont les différences dans les méthodes de chargement?
Le report est exécuté après l'analyse du HTML.4. Précharge?
Pendant le développement, vous pouvez rencontrer une telle situation. Certaines ressources n'ont pas besoin d'être utilisées immédiatement, mais vous souhaitez les obtenir dès que possible. Le préchargement est en fait une récupération déclarative, ce qui oblige le navigateur à demander des ressources et ne bloque pas l'événement Onload. Préchargement, il peut réduire le temps de chargement du premier écran dans une certaine mesure, car certains fichiers importants qui n'affectent pas le premier écran peuvent être retardés dans le chargement.5. Pré-résolution DNS?
La résolution DNS prend également du temps et l'IP correspondant au nom de domaine peut être obtenu à l'avance par pré-résolution. <meta http-equiv = 'x-dns-prefetch-control' contenu = 'on'> <lin Le protocole HTTPS pré-payé, donc Meta doit être réglé manuellement6. Exécution paresseuse? Cette technologie peut être utilisée pour l'optimisation de premier écran. L'exécution paresseuse nécessite du réveil, ce qui peut généralement être fait en appelant un minuteur ou un événement.
7. Chargement paresseux?
Le principe du chargement paresseux est de charger ce qui doit être chargé dans une zone personnalisée (généralement la zone visible, mais il peut également être la zone qui est sur le point d'entrer dans la zone visible). Pour les images, définissez d'abord l'attribut SRC de la balise d'image à une image d'espace réservé, mettez la véritable ressource d'image dans un attribut personnalisé, et lorsque vous entrez dans la zone personnalisée, remplacez l'attribut personnalisé par l'attribut SRC, de sorte que l'image télécharge la ressource , réalisant le chargement paresseux de l'image.
Le chargement paresseux peut être utilisé non seulement pour les images, mais aussi pour d'autres ressources. Par exemple, la vidéo ne commencera à jouer qu'après être entrée dans la zone visible, etc.
Réagir les questions d'entrevue
1. Quand utiliser le gestionnaire d'État?
En regardant le projet dans son ensemble, l'utilisation des utilisateurs est complexe. À partir de plusieurs sources. Composant.2. Quelles sont les caractéristiques de la réaction?
Il utilise ** Virtual Dom ** au lieu de Real Dom. Il peut être rendu à l'aide du côté serveur. Il suit le flux de données unidirectionnel ou la liaison des données3. Énumérez certains des principaux avantages de la réact?
Il améliore les performances de l'application et peut être facilement utilisée du côté client et du serveur. Réagir.4. Qu'est-ce que JSX?
JSX est court pour JavaScript XML. est un fichier utilisé par React qui exploite la puissance expressive et la syntaxe de modèle de type HTML de JavaScript. Cela rend les fichiers HTML très faciles à comprendre.此文件能使应用非常可靠，并能够提高其性能例子render() {return(<div><h1> Hello World </h1></div>)}5、说说为什么浏览器无法读取JSX?
浏览器只能处理JavaScript 对象，而不能读取常规JavaScript 对象中的JSX。所以为了使浏览器能够读取JSX，首先，需要用像Babel 这样的JSX 转换器将JSX 文件转换为JavaScript 对象，然后再将其传给浏览器6、你理解“在React 中，一切都是组件”这句话?
组件是React 应用UI 的构建块。这些组件将整个UI 分成小的独立并可重用的部分。每个组件彼此独立，而不会影响UI 的其余部分7、 React 中render()的目的?
每个React 组件强制要求必须有一个render()。它返回一个React 元素，是原生DOM 组件的表示。如果需要渲染多个HTML 元素，则必须将它们组合在一个封闭标记内，例如<form>、<group>、<div> 等。此函数必须保持纯净，即必须每次调用时都返回相同的结果8、什么是Props?
Props 是React 中属性的简写。它们是只读组件，必须保持纯，即不可变。它们总是在整个应用中从父组件传递到子组件。子组件永远不能将prop 送回父组件。这有助于维护单向数据流，通常用于呈现动态生成的数据9、React 中的状态是什么？
状态是React 组件的核心，是数据的来源，必须尽可能简单。基本上状态是确定组件呈现和行为的对象。与Props 不同，它们是可变的，并创建动态和交互式组件。可以通过this.state() 访问它们。10、区分状态和Props?
条件StateProps从父组件中接受初始值YesYes父组件可以改变值NoYes在组件中设置默认值NoYes在组件的内部变化YesNo设置子组件的初始值YesYes在子组件的内部改变NoYes11、如何更新组件的状态?
使用this.setState()更新组件的状态12、React 组件生命周期的阶段是什么?
React 组件的生命周期有三个不同的阶段：初始渲染阶段：这是组件即将开始其生命之旅并进入DOM 的阶段。更新阶段：一旦组件被添加到DOM，它只有在prop 或状态发生变化时才可能更新和重新渲染。这些只发生在这个阶段卸载阶段：这是组件生命周期的最后阶段，组件被销毁并从DOM 中删除13、你对React 的refs 有什么了解?
Refs 是React 中引用的简写。它是一个有助于存储对特定的React 元素或组件的引用的属性，它将由组件渲染配置函数返回。用于对render()返回的特定元素或组件的引用。当需要进行DOM 测量或向组件添加方法时，它们会派上用场列出一些应该使用refs 的情况?需要管理焦点、选择文本或媒体播放时触发式动画与第三方DOM 库集成14、如何模块化React 中的代码?
可以使用export 和import 属性来模块化代码。它们有助于在不同的文件中单独编写组件15、什么是高阶组件HOC?
高阶组件是重用组件逻辑的高级方法，是一种源于React 的组件模式。 HOC 是自定义组件，在它之内包含另一个组件。它们可以接受子组件提供的任何动态，但不会修改或复制其输入组件中的任何行为。你可以认为HOC 是“纯（Pure）”组件16、你能用HOC 做什么?
HOC 可用于许多任务:用代码重用，逻辑和引导抽象渲染劫持状态抽象和控制Props 控制17、 React 中key 的重要性是什么?
key 用于识别唯一的Virtual DOM 元素及其驱动UI 的相应数据。它们通过回收DOM 中当前所有的元素来帮助React 优化渲染。这些key 必须是唯一的数字或字符串，React 只是重新排序元素而不是重新渲染它们。这可以提高应用程序的性能18、MVC 框架的主要问题是什么?
key 用对DOM 操作的代价非常高程序运行缓慢且效率低下内存浪费严重由于循环依赖性，组件模型需要围绕models 和views 进行创建19、请你解释一下Flux? 
20、你对“单一事实来源”有什么理解
Redux 使用“store” 将程序的整个状态存储在同一个地方。因此所有组件的状态都存储在store 中，并且它们从store 本身接收更新。单一状态树可以更容易地跟踪随时间的变化，并调试或检查程序。21、列出Redux 的组件?
Redux 由以下组件组成:Action 这是一个用来描述发生了什么事情的对象Reducer 这是一个确定状态将如何变化的地方Store 整个程序的状态/对象树保存在Store 中View 查只显示Store 提供的数据22、 Store 在Redux 中的意义是什么?
store 是一个JavaScript 对象，它可以保存程序的状态，并提供一些方法来访问状态、调度操作和注册侦听器。应用程序的整个状态/对象树保存在单一存储中。因此，Redux 非常简单且是可预测的。我们可以将中间件传递到store 来处理数据，并记录改变存储状态的各种操作。所有操作都通过Reducer 返回一个新状态23、 Redux 有哪些优点?
结果的可预测性可维护性服务器端渲染易于测试-24、 什么是React 路由?
React 路由是一个构建在React 之上的强大的路由库，它有助于向应用程序添加新的屏幕和流。这使URL 与网页上显示的数据保持同步。它负责维护标准化的结构和行为，并用于开发单页Web 应用。 React 路由有一个简单的API。25、说说你对React 的渲染原理的理解?
单向数据流。React 是一个MVVM 框架，简单来说是在MVC 的模式下在前端部分拆分出数据层和视图层。单向数据流指的是只能由数据层的变化去影响视图层的变化，而不能反过来（除非双向绑定）数据驱动视图。我们无需关注页面的DOM，只需要关注数据即可渲染过程，生命周期……setState()大部分时候是异步执行的，提升性能。26、React 中三种构建组件的方式?
React.createClass()、ES6 class 和无状态函数。JQuery
说出jQuery中常见的几种函数以及他们的含义是什么? （1）get()取得所有匹配的DOM元素集合； （2）get(index)取得其中一个匹配的元素.index表示取得第几个匹配的元素； （3）append(content)向每个匹配的元素内部追加内容； （4）after(content)在每个匹配的元素之后插入内容； （5）html()/html(var)取得或设置匹配元素的html内容； （6）find(expr)搜索所有与指定表达式匹配的元素； （7）bind(type,[data],fn)为每个匹配元素的特定事件绑定事件处理函数； （8）empty()删除匹配的元素集合中所有的子节点； （9）hover(over,out)一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法； （10）attr(name)取得第一个匹配元素的属性值。
jQuery 能做什么？ Get the elements of the page; modify the appearance of the page; change the large content of the page; respond to the user's page operations; add dynamic effects to the page; get information from the server without refreshing the page; simplify common javascript tasks .
如何将一个HTML元素添加到DOM树中的？ 可以通过appendTo()方法在指定的DOM元素末尾添加一个现存的元素或者一个新的HTML元素。
什么是jQuery? jQuer能做什么？ jQuery是一套JavaScript的库，它简化了使用Javascript进行网页特效开发的一些复杂性，提供了对常见任务的自动化和复杂任务的简化
jQuery的作用快速获取文档元素提供漂亮的页面动态效果创建Ajax无刷新网页提供对JavaScript语言的增强增强的事件处理更改网页内容JQuery可以修改网页中的内容,比如更改网页的文本、插入或转网页图像, jQuery简化了原本使用JavaScript代码需要处理的方式。JQuery 的优点1.利用css的选择器提供高速的元素查找行为。 2.提供了一个抽象层来标准化各种常见的任务，可以解决各种浏览器的兼容问题。 3.将复杂的代码简化，提供连缀编程模式，大大简化了代码的操作。
以上就是分享一些值得收藏的精选Web前端面试题（附答案）的详细内容，更多请关注本站其它相关文章！