1. CSS
1. Parlez du modèle de boîte CSS
En html, tous les éléments peuvent être vus comme une boîte
Composition de la boîte : contenu du contenu, remplissage de la marge intérieure, bordure de la bordure, marge de la marge extérieure
Type de modèle de boîte :
modèle de boîte standard
marge + bordure + rembourrage + contenu
c'est-à-dire le modèle de boîte
marge + contenu (remplissage + bordure)
Le mode du modèle de boîte de contrôle : box-sizing : content-box (valeur par défaut, modèle de boîte standard), border-box (c'est-à-dire modèle de boîte)
2. Priorité des sélecteurs CSS
Fonctionnalités CSS : héritage, cascade, priorité
priorité:
! important, style en ligne, sélecteur d'identifiant, classe/pseudo-classe/attribut, étiquette, sélecteur global
3. Comment masquer des éléments
affichage : aucun ; ne prend pas de place
opacité : 0 ; occupe de l'espace
visibilité : masqué ; occuper de l'espace
position : absolue ;
coupe par chemin de détourage
4. La différence entre px et rem
px : unité de longueur absolue
rem : unité de longueur relative, par rapport à la valeur font-size du nœud racine de html, 1rem=10px ; font-size : 62,5 % (16px* 62,5 %=10)
5. Quelle est la différence entre redessiner et réarranger ?
Refonte (reflow) : Le moteur de mise en page calculera la position et la taille du modèle de boîte sur la page en fonction du style.
Redessiner : après avoir calculé la position, la taille et les autres attributs du modèle de boîte, le navigateur dessinera en fonction des caractéristiques de chaque modèle de boîte.
Le mécanisme de rendu du navigateur : Après avoir modifié la taille et la position du dom, le navigateur doit recalculer les propriétés géométriques de ces éléments, c'est ce qu'on appelle le réarrangement.
Modifier le style dom, color, bgcolor, lorsque le navigateur n'a pas besoin de calculer l'attribut set, il dessine directement le nouveau style de l'élément, qui s'appelle redessiner
6. Centrer un élément horizontalement et verticalement
positionnement+marge
positionnement + transformation
mise en page flexible
disposition de la grille
disposition du tableau
7. Quels attributs de css peuvent être hérités et lesquels ne peuvent pas
Police d'attribut de police
Hauteur de ligne de la propriété de texte
visibilité des éléments
Propriété de mise en page du tableau border-spacing
attribut de liste style de liste
page d'attributs de style de page
8. Préprocesseur
Le langage de prétraitement ajoute des fonctions telles que des variables, des fonctions et des mixins
moins impertinent
Deux, javascript
1. La composition de js
ECMAScript : noyau js, grammaire de base du langage de description, var, for, etc.
Document Object Model (DOM) : Planifiez une page html comme un document composé d'éléments
Modèle d'objet de navigateur (BOM) : accédez aux fenêtres du navigateur et manipulez-les
2.js objets intégrés
chaîne booléen nombre tableau objet fonction math date regexp
3. Quelles sont les méthodes de manipulation des tableaux
push() pop() sort() splice() unshift() shift() reverse() map()
4. Détection des types de données
typeof() juge le type de données de base
instanceof() juge le type de données de référence
constructeur Types de données de base et types de données de référence, déclarer des constructeurs et pointer vers un tableau
object.prototype.tostring.call() prend en charge tous les types
5. Fermetures, caractéristiques
Fermeture : fonction fonction imbriquée, la fonction interne est renvoyée et enregistrée par la fonction externe
Fonctionnalités : Réutilisation des variables, cette variable ne polluera pas le global, et les variables ne seront pas recyclées par le mécanisme de ramasse-miettes.
Inconvénients : consommation de mémoire, dégradation des performances des pages et fuites de mémoire dans les navigateurs par exemple
Scénarios d'utilisation : anti-shake, throttling, éviter la pollution globale des données
6. Fuites de mémoire frontale
js alloue une adresse mémoire, mais ne parvient pas à la libérer pendant une longue période, ce qui entraîne un plantage.
Facteurs : affectation sans déclaration, temporisateur non effacé, fermeture, élément de référence non clair
7. Délégation événementielle
Principe : mécanisme de propagation des événements, les événements des éléments enfants sont liés aux éléments parents
Empêcher le bouillonnement d'événements event.stopPropagation()
8. La différence entre les types de données de base et les types de données de référence
Types de données de base : chaîne, nombre, booléen, indéfini et nul sont stockés dans la mémoire de la pile et stockent des valeurs spécifiques
Types de données de référence : objet, fonction, tableau sont stockés dans la mémoire de tas et l'adresse est stockée
9. Chaîne prototype
Un prototype est un objet qui partage des méthodes et des propriétés pour les instances du constructeur, et toutes les instances font référence au même objet prototype
Lorsqu'un objet d'instance appelle des propriétés et des méthodes, il recherche à partir de l'instance elle-même, du prototype du constructeur et du prototype du prototype à tour de rôle.
10. Que fait exactement le nouvel opérateur ?
Créez d'abord un objet vide
Liez l'objet vide et le constructeur via la chaîne de prototypes
Liez le this du constructeur à l'objet vide
Selon le type renvoyé par le constructeur, s'il s'agit d'un type valeur, renvoie l'objet, s'il s'agit d'un type référence, renvoie le type référence.
11. Comment js implémente l'héritage
Héritage de la chaîne prototype
emprunter l'héritage du constructeur
héritage compositionnel
héritage de classe de la classe es6
12. Cela pointe vers le problème en js
Ceci dans l'objet global pointe vers la fenêtre
Dans les fonctions ordinaires, cela pointe vers la fenêtre globale
cela pointe toujours vers l'objet qui l'a appelé en dernier (fonction non fléchée)
Le nouveau mot-clé change la direction de cette
appliquer, appeler, lier peut changer la direction de ceci (fonction non fléchée)
La fonction this dans la flèche pointe vers this de sa classe parent
ceci dans la fonction anonyme pointe vers la fenêtre
13. Quelle est la différence entre asynchrone et différé dans le script
Sans asynchrone et différé, le navigateur chargera et exécutera immédiatement le script spécifié
Avec async, de manière asynchrone, le processus de chargement et de rendu des éléments sera effectué en parallèle avec le chargement et l'exécution des scripts
Avec defer, le processus de chargement et de rendu des éléments sera effectué en parallèle avec le chargement des scripts, et tous les éléments seront exécutés après l'analyse
14.setTimeout temps d'exécution minimum
setTimeout:4ms
setInterval:10ms
15. La différence entre ES5 et ES6ECMAScript
ES5 :
ES6 :
16. Nouvelles fonctionnalités de ES6
Ajout de la portée au niveau du bloc (let, const)
Ajouter du sucre syntaxique pour définir les classes (classe)
Type de données de base de symbole ajouté
Ajout d'une affectation de déstructuration
Nouvelle valeur par défaut du paramètre de fonction
Ajout d'une nouvelle API pour les tableaux
Nouvel opérateur de propagation pour les objets et les tableaux
promesse
Plus de modularité (import, export)
Ajout de structures de données d'ensemble et de carte
Ajouter un générateur
Fonctions fléchées ajoutées
17. La différence entre appeler, appliquer et lier
Les deux changent le point this et l'appel de la fonction
Les fonctions d'appel et d'application sont similaires, mais la méthode de transmission des paramètres est différente
Le paramètre d'appel est une liste de paramètres
Le paramètre apply est un tableau
bind ne sera pas exécuté immédiatement après le passage des paramètres, et renverra une fonction qui change le point de ceci, et ne peut pas être utilisé comme constructeur.Cette fonction peut passer des paramètres à bind()()
Les performances de la méthode d'appel sont beaucoup plus faciles à utiliser
18. Quelle est la différence entre une fonction fléchée et une fonction normale ?
Ne peut pas être utilisé comme constructeur, ne peut pas utiliser new
pas d'arguments
Vous ne pouvez pas utiliser call, apply ou bind pour changer la direction de ce
pas de prototype
this pointe vers le this de la première fonction dans la couche externe
19. La différence entre let const var
let const : il n'y a pas de promotion de variable, elle doit être définie avant de pouvoir être utilisée, il y a un problème de zone morte temporaire, il y a un contenu de portée au niveau du bloc et elle ne peut pas être déclarée à plusieurs reprises dans la même portée
var : le levage variable existe
20. Comment mettre en œuvre une copie en profondeur
Copiez complètement un nouvel objet et ouvrez un nouvel espace dans la mémoire de tas
Principalement pour les données de type référence
L'opérateur de propagation {...obj} ne peut atteindre que le premier niveau
json.parse(json.stringify()), ne copiera pas les fonctions internes
Utiliser une fonction récursive pour obtenir
21. Qu'est-ce qu'ajax
Techniques de développement Web pour créer des applications Web interactives
Échangez des données avec le serveur et mettez à jour des parties du contenu sans recharger toute la page
Envoyez une requête asynchrone au serveur via l'objet xmlhttprequest, et après avoir obtenu les données du serveur, exploitez la page en manipulant le dom via js
Créer un objet xmlhttprequest
Établir une connexion avec le serveur via la méthode open() dans l'objet xmh
Construisez les données requises pour la requête et envoyez-les au serveur via send() de xmh
Écoutez l'état de la communication entre le serveur et vous via l'événement onreadystate change de xmh
Accepter et traiter le résultat des données de la réponse du serveur
Mettre à jour les données traitées sur la page html
22. La différence entre obtenir et publier
Le paramètre get sera placé sur l'url, qui est moins sécurisée, et le message est placé dans le corps
get refresh server ou return n'a aucun effet, le message sera resoumis
obtenir les demandes seront mises en cache, la publication ne le sera pas
Les demandes d'obtention seront enregistrées dans l'historique du navigateur, la publication ne le sera pas
get ne peut être encodé que dans une URL, la publication en prend en charge plusieurs
23. Le principe interne et les avantages et inconvénients de la promesse
L'objet Promise encapsule une opération asynchrone et peut également obtenir un résultat de réussite ou d'échec
L'objet Promise résout principalement le problème de l'enfer des rappels. Dans le passé, s'il y avait de nombreuses tâches asynchrones et qu'il y avait des dépendances mutuelles entre elles, elles ne pouvaient être traitées qu'avec des fonctions de rappel. Cela conduirait facilement à l'enfer des rappels, et la lisibilité et la maintenabilité du code était médiocre.
Il y a trois états : état initial en attente, état de réussite rempli, état d'échec rejeté
Principe : construire une instance de promesse. L'instance doit transmettre des paramètres. Ce paramètre a deux paramètres formels, qui sont tous deux des types de fonction, l'un est résoudre et l'autre est rejeter
Il existe également une méthode then sur la promesse, qui est utilisée pour spécifier l'opération définie lorsque l'état change. resolve est d'exécuter la première fonction et rejet est d'exécuter la seconde fonction.
24. La différence entre promesse et attente asynchrone
Les deux gèrent les requêtes asynchrones
la promesse est es6, l'attente asynchrone est es7
L'attente asynchrone est implémentée sur la base de la promesse et n'est pas bloquante
Avantages et inconvénients:
Promise est l'objet de retour, puis les méthodes catch et catch doivent être utilisées pour gérer et intercepter les exceptions, et la méthode d'écriture est chaînée, ce qui est facile à provoquer un chevauchement de code et une mauvaise maintenabilité
L'attente asynchrone est utilisée pour intercepter les exceptions via try catch
L'attente asynchrone peut rendre le code synchrone, tant qu'il rencontre l'attente, il renverra le résultat immédiatement, puis effectuera les opérations suivantes
promise.then() montrera que la requête n'a pas été renvoyée et les opérations suivantes sont effectuées
25. Méthode de stockage du navigateur
Méthode de stockage local standard des cookies, bonne compatibilité, petite capacité de stockage, besoin d'être emballé
localstorage utilise des paires clé-valeur de manière standard, facile à utiliser, stockage permanent, bonne compatibilité, le type de valeur enregistrée est limité et ne peut pas être lu en mode privé
sessionstorage sera nettoyé lorsque la page sera fermée, méthode de stockage au niveau de la session
stockage de paires clé-valeur indexedDB, stockage pratique
26. Où le jeton existe-t-il ?
token : jeton d'authentification
S'il existe dans localdtorage, il doit être passé en arrière-plan en tant que champ chaque fois que l'interface est demandée, ce qui est facile à attaquer par xss
Il existe dans le cookie et sera envoyé automatiquement, mais il ne peut pas être interdomaine 27. Processus de rendu de page
résolution DNS
établir une connexion tcp
envoyer une requête http
Le serveur traite la requête
rendre la page
Le navigateur obtiendra les ressources html et css et analysera le html dans un arbre dom
Ensuite, analysez css en cssom
Fusionner dom et cssom dans l'arborescence de rendu
Rendre chaque nœud de l'arborescence de rendu sur la page
déconnecter la connexion tcp
JWT
le jeton Web json est utilisé comme jeton dans les applications Web sous la forme de json, et les informations peuvent être sorties en toute sécurité sous forme de données json entre les parties
Transfert d'informations, autorisation
L'environnement sous-jacent de npm
Node package manager est un outil de gestion et de distribution de packages pour node
Composants NPM : site Web, registre, outils de ligne de commande
Politique de mise en cache du navigateur
Cache fort (cache local), cache de négociation (cache faible)
Cache fort : n'envoyez pas de requêtes, utilisez directement le contenu du cache, le navigateur stocke js, css, image, etc. dans la mémoire, et le prochain accès utilisateur est directement extrait de la mémoire pour améliorer les performances
Cache faible : vous devez envoyer une requête en arrière-plan, en jugeant d'utiliser ou non le cache de négociation, si le contenu n'a pas changé, renvoyez 304, et le navigateur utilisera le contenu du cache
Qu'est-ce que la politique de même origine
Le cœur du navigateur, sans la politique de même origine, sera soumis à des attaques de réseau
Se réfère principalement au protocole + nom de domaine + numéro de port sont cohérents, si l'un d'eux est différent, ce n'est pas la même source, et un domaine croisé se produira
img, link et script permettent le chargement de ressources entre domaines
Les requêtes inter-domaines peuvent être envoyées, et le backend renverra les résultats normalement, mais les résultats sont interceptés par le navigateur
Résolution inter-domaines : jsonp, cors, websocket, reverse proxy
Qu'est-ce que l'anti-shake et l'étranglement ?
Les deux sont des solutions d'optimisation pour faire face aux événements fréquents sur la page
Anti-shake : évite le déclenchement répété d'événements et n'exécute que la dernière fois dans un certain laps de temps
Throttling : Exécuter une seule fois dans une certaine période de temps
3.HTML/CSS
1. Quelles sont les nouvelles fonctionnalités de html5 et css3
H5 : Balises sémantiques, nouvelles balises audio et vidéo, nouveau canevas, nouveau stockage de données, nouveaux contrôles de formulaire, nouvelle API de glisser-déposer
css3 : nouveaux attributs, pseudo-classes, sélecteurs de pseudo-éléments, nouvelles requêtes multimédias, ombres de texte, bordures, dimensionnement de la boîte du modèle de boîte, dégradés, transitions, animations personnalisées, propriétés d'arrière-plan, 2d et 3d
4. vue
1. La différence entre v-if et v-show
Vous pouvez contrôler le masquage et l'affichage des éléments
v-show est de contrôler la valeur de l'affichage pour afficher et masquer
v-if est la destruction et la création d'éléments dom
2. Comment comprendre mvvm
L'abréviation de model-view-viewmodel est une idée de conception,
model est le modèle de données, utilisé pour définir la modification et le fonctionnement des données
la vue est la vue
viewmodel est le pont reliant la vue et le modèle
Lorsque les données changent, le modèle de vue met automatiquement à jour la vue en surveillant le changement de données. Lorsque l'utilisateur utilise la vue, le modèle de vue peut surveiller le changement de vue et notifier les données du changement.
Le modèle de vue relie la vue et le modèle via une liaison bidirectionnelle, et la synchronisation entre eux est automatique
3. Cycle de vie des composants
créer
beforeCreate : ni la propriété ni la méthode ne peuvent être utilisées
created : une fois l'instance créée, les données peuvent être utilisées et modifiées, mais la page n'est pas rendue
monter
beforemount : le dom virtuel est créé et sera bientôt rendu
monté : monte le modèle compilé sur la page
renouveler
beforeUpdate : utilisé avant la mise à jour du composant, les données sont nouvelles, les données de la page sont anciennes et le composant est sur le point d'être mis à jour
mis à jour : les rendus, les données et les pages sont nouveaux
détruire
beforeDestory : efface les minuteurs et autres opérations
détruit : le composant est détruit
Deux de plus lors de l'utilisation de keep-alive
activé : lorsque le composant est activé
désactivé : lorsque le composant est détruit
4. Quelle est la différence entre créer et monter pour demander des données
créé : appelé avant le rendu, initialisez d'abord les données
monté : appelé après le rendu, les données de la demande peuvent apparaître sur l'écran de démarrage, les données créées ne le seront pas
La donnée demandée a un impact sur dom, l'utilisation créée, n'a rien à voir avec dom, elle peut être placée dans monté
5. Communication des composants Vue
Passage du parent à l'enfant : props, $ref - l'objet d'informations de référence sera enregistré sur l'objet $refs du composant parent
Passer de l'enfant au parent : ￥emit---Le composant enfant lie les événements personnalisés et le composant enfant se lie à recevoir
Biographie de Brother : Le bus d'événements mondial $bus utilise et émet pour la transmission de données
6.keep-alive
Il s'agit d'un composant intégré de Vue. Lors de l'encapsulation des composants, les instances de composants inactifs seront mises en cache
Empêcher le re-rendu, réduire le temps de chargement et la consommation de performances
7. Comment empaqueter axios
Télécharger axios----créer une instance----encapsuler l'intercepteur de requête et de réponse----encapsuler l'interface--utiliser
8. passage du paramètre de routage de vue
params传参:this.$router.push({name:'',params:{}})
this.$route.params.id
Paramètres de passage de propriété d'itinéraire
this.$router.push({name:'/${item.id}'})
Configuration du routage {chemin :'/index :id'}
paramètre de requête
this.$router.push({name:'index',query:{}})
9. Quelle est la différence entre le routage en mode hachage et l'historique
Il y a # sur l'adresse de hachage, mais il n'y a pas d'historique
Lorsque vous appuyez sur Entrée pour actualiser la barre d'adresse, le hachage charge la page correspondante et l'historique signale 404
Hash prend en charge les navigateurs de basse version grâce à la nouvelle API de H5
le hachage ne recharge pas la page
history a des enregistrements historiques, vous pouvez modifier les enregistrements historiques via pushState et replaceState(0), et n'envoyez pas la demande immédiatement
l'historique nécessite une configuration en arrière-plan
10. Interception de route
router.before ach((to,from,next)=>{})
11. Routage dynamique de la vue
Définissez l'attribut méta dans la configuration de routage, développez les champs liés à l'autorisation et jugez l'identifiant d'autorisation dans la protection de navigation de routage pour réaliser une augmentation dynamique et un routage de saut
12. Comment résoudre l'itinéraire de chargement secondaire après l'actualisation
window.location.reload()
matcher
coût routeur=createRouter()
fonction d'exportation resetRouter(){
const nouveauRouter=créerRouter()
router.matcher=nouveauRouter.matcher
}
13. vuex rafraîchir la page de perte de données
Vuex va réacquérir les données
Enregistrer les données dans le cookie de cache du navigateur, le stockage local, la session
Lorsque la page est actualisée, redemandez des données et mettez à jour dynamiquement les données dans vuex
14. La différence entre calcul et montre
calculated : attributs calculés, prise en charge de la mise en cache, puisque la valeur de l'attribut change, l'attribut calculé sera recalculé, sinon le cache est utilisé, l'asynchrone n'est pas pris en charge, le premier chargement sera surveillé et il doit y avoir un retour dans la fonction
watch : surveiller les attributs, surveiller les changements de données dans les données, ne prend pas en charge la mise en cache, prend en charge l'asynchrone, ne surveille pas le premier chargement et n'a pas besoin d'avoir un retour
15.scénarios d'utilisation et attributs de vuex
état : variable de stockage
getters : propriétés calculées de l'état
mutations : la méthode de soumission des données mises à jour, la synchronisation
actions : opérations asynchrones
modules : modulaire vuex
Informations personnelles de l'utilisateur, panier d'achat, etc.
16. Le principe de la liaison bidirectionnelle vue
Grâce au détournement de données combiné au modèle éditeur-abonné, Liyong object.defineProperty() détourne le setter et le getter de chaque propriété, publie un message à l'abonné lorsque les données changent et déclenche le rappel de surveillance correspondant pour rendre la vue
17. diff et dom virtuel
Virtual dom, décrivant la relation entre les éléments et créant un objet js
S'il y a des données de réponse dans le composant, lorsque les données changent, la fonction de rendu générera un nouveau dom virtuel, le nouveau dom virtuel sera comparé à l'ancien dom virtuel, trouvera le contenu du dom virtuel qui doit être modifié, puis aller à la modification réelle correspondante dans dom
diff est utilisé pour la comparaison de dom virtuel, renvoie un objet patch pour stocker la différence entre deux nœuds, et enfin met à jour le dom réel avec les informations d'enregistrement dans le patch
18. La différence entre vue et jquery
Le principe est différent : vue est une liaison de données, et jq obtient d'abord dom pour le traitement
Le focus est différent : vue est piloté par les données, jq se concentre sur les pages
Le fonctionnement est différent
19. Traitement réactif de vuex
Lorsque l'événement est déclenché, la méthode dans l'action sera accessible via la répartition, et la validation dans les actions déclenchera la méthode dans les mutations pour modifier la valeur dans l'état et mettre à jour les données dans la vue via le getter
20. Comment encapsuler les composants
Créer un composant à l'aide de Vue.extend()
Enregistrer les composants à l'aide de la méthode Vue.components()
21. filtre de vue
Expressions d'interpolation, v-bind peut utiliser des filtres
Global : Vue.filter
Local : même niveau que les méthodes, filtre
22. Forcer le rafraîchissement en vue
localtion.reliad()
ceci.$router.go(0)
fournir et injecter
23. vue2 et vue3
Le principe de la liaison de données bidirectionnelle est différent : vue2 utilise defindpropty() et vue3 utilise un proxy.
Fragmentation prise en charge
différentes API
Différentes méthodes de définition des variables de données, vue3---setup
le cycle de vie est différent
différentes valeurs
Les instructions et les créneaux sont différents
main.js est différent
24. Optimisation des performances de Vue
Ne mettez pas toutes les données dans les données
v-for lie les événements à chaque élément avec un proxy d'événement
composant de cache persistant
Différencier au maximum les composants pour améliorer la réutilisabilité
la clé doit être unique
Utilisation raisonnable du chargement paresseux de route
Utilisez autant que possible l'optimisation anti-shake et throttling pour le stockage persistant des données
Chargement à la demande, chargement paresseux de contenu, chargement paresseux d'images
Écran squelette
Optimisation SEO : pré-rendu, rendu côté serveur ssr
Introduire des modules tiers sous la forme de cdn, d'empaquetage multi-thread et d'extraction de fichiers publics
Cache client, cache serveur, compression Gzip du serveur
25. Optimisation du premier écran
Chargement paresseux avec itinéraires
Les composants sous la ligne de flottaison utilisent async
Chargement paresseux de composants sans importance sur le premier écran
Les ressources dynamiques sont placées sur CDN
Réduisez la taille des fichiers de ressources tels que js et css sur le premier écran
Utiliser le rendu côté serveur
Réduire le nombre et le niveau de dom
Utiliser la requête de sprite
faire du menteur
Activer Gzip
Chargement différé des images
26.vue3 est meilleur que vue2
optimisation de l'algorithme diff
boost statique
cache de l'écouteur d'événements
27. Pourquoi vue utilise-t-il un proxy
proxy peut proxy l'objet entier
La méthode de surveillance de l'objet proxy est plus riche
L'objet proxy générera un nouvel objet et ne modifiera pas l'objet lui-même
Non compatible avec le navigateur ie
28. Comment optimiser le référencement
srr - rendu côté serveur
seo - optimiser le moteur de recherche
srr, prerender prerender-spa-plugin