Maison > Article > interface Web > Partagez quelques questions d'entretien Web frontales sélectionnées qui valent la peine d'être collectées (avec réponses)

Partagez quelques questions d'entretien Web frontales sélectionnées qui valent la peine d'être collectées (avec réponses)

青灯夜游avant: 2022-07-07 10:36:032186parcourir

Cet article résume certaines questions d'entretien Web frontales sélectionnées qui méritent d'être collectées (avec réponses). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

questions d'entretien js

1. types de données js
- Types de données de base
  Nombre, chaîne, booléen, nul, non défini, symbole, bigInt
- Type de données de référence
  objet, Ar ray , Date, Function, RegExp
2. Promotion des déclarations de variables et de fonctions js
- Dans js, la déclaration des variables et des fonctions sera promue au sommet pour l'exécution
- La promotion des fonctions est supérieure à la promotion des variables
- fonctions Si une variable externe du même nom est déclarée en interne à l'aide de var, la fonction ne recherchera plus.
- Les fonctions anonymes ne sont pas levées.
3. Fermeture
- Une fermeture est une fonction qui peut lire les variables à l'intérieur d'autres fonctions
- Une fermeture est essentiellement une fonction qui renvoie une fonction à l'intérieur de
- Avantages
  - Vous pouvez lire les variables à l'intérieur de la fonction
  - Toujours conserver les variables en mémoire
  - Vous pouvez encapsuler des propriétés privées et des méthodes privées d'objets
- Inconvénients
  - Cela consomme plus de mémoire et une mauvaise utilisation peut provoquer des problèmes de débordement de mémoire
4, == et La différence entre ===
- == est l'égalité au sens non strict
  - Égal si la valeur est égale
- === est l'égalité au sens strict, il comparera le type et la valeur des données taille des deux côtés
  - valeur et référence Les adresses ne sont égales que si elles sont égales
5 ceci
- cela pointe toujours vers l'appelant direct de la fonction
- S'il y a un nouveau mot-clé, cela pointe vers l'objet qui est sorti du nouveau
- Dans l'événement, cela pointe vers le déclencheur L'objet de cet événement
6 Comment parcourir les tableaux et les objets js
- pour in
- pour
- . forEach
- for-of
7. La différence entre map et forEach
- for Each 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 traversé, l'index du tableau et la méthode Array
- doit avoir une valeur de retour If. non, il renverra undéfini
8. Quelle est la différence entre les fonctions fléchées et les fonctions ordinaires ?
- 10. jsonp cross-domain
- document.domain + iframe cross-domain
nodejs middleware proxy cross-domain
Le backend définit le nom de domaine sécurisé dans les informations d'en-tête
Variables. doit être déclaré avant utilisation
Les paramètres de la fonction ne peuvent pas avoir d'attributs du même nom, sinon une erreur sera signalée
- L'instruction with ne peut pas être utilisée
- Il est interdit de pointer vers l'objet global
- 12, es6 nouveau Ajout d'une
Nouvelle chaîne de modèle
fonction de flèche
- 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 du concept de module module
13 Quelle est la différence entre attribut et propriété ?
- attribut est l'attribut que l'élément dom a comme balise html dans le document
- . property est l'élément dom dans js. En tant que propriété appartenant à un objet.
- Pour les attributs standard du HTML, l'attribut et la propriété sont synchronisés et seront mis à jour automatiquement
- Mais pour les attributs personnalisés, ils ne sont pas synchronisés
- 14 La différence entre let et const Qu'est-ce que c'est ?
La commande let n'a pas de promotion de variable. 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
- Les déclarations en double ne sont pas autorisées
- définition const sont des constantes et ne peuvent pas être modifiés, mais si un objet est défini, les données à l'intérieur de l'objet peuvent être modifiées
- 15. Fuite de mémoire
Définition : La mémoire tas qui a été allouée dynamiquement dans le programme n'est pas libérée pour une raison quelconque ou le programme Divers problèmes causés par l'impossibilité de publier.
Fuites de mémoire possibles dans js : Résultat : ralentissement, crash, retard important, etc.
- Causes possibles des fuites de mémoire dans js
- variables globales
- dom Une fois effacé, il y a encore des références
- le timer n'est pas effacé
Fuite de mémoire causée par l'existence de sous-éléments
- 16 Comment introduire le script ?
- .
  - html static<script> introduction</script>html 静态 <script> 引入</script>
  - js 动态插入 <script></script>
  - <script defer></script> : 异步加载，元素解析完成后执行
  - <script async></script>
- <script async></script> : chargement asynchrone, mais cela bloquera le rendu des éléments pendant l'exécution
  - 17, méthode array (array)
  - map : parcourir le tableau , Renvoie un nouveau tableau composé de valeurs de retour de rappel
  - forEach : Impossible de casser, vous pouvez utiliser throw new Error dans try/catch pour arrêter
  - filter : Filter
  - some : Si un élément renvoie vrai, l'ensemble est vrai
  - join : génère une chaîne en spécifiant le connecteur
  - push/pop : Push et pop à la fin, change le tableau d'origine, renvoie le push/pop item
  - unshift/shift : appuyez sur la tête et apparaît, changez le tableau d'origine, retournez l'opération item
  - sort(fn) / reverse : trier et inverser, modifier le tableau d'origine
  - concat : connecter le tableau, sans affectant le tableau d'origine, copie superficielle
  - slice(start, end) : renvoie le nouveau tableau tronqué sans modifier le tableau d'origine
  - splice(start,number,value...) : renvoie le tableau composé d'éléments supprimés, la valeur est l'élément inséré, modifiez le tableau d'origine
- reduce / réduireRight(fn(prev, cur), defaultPrev) : exécuté par paires, prev est le valeur de retour de la dernière fonction de réduction, cur est la valeur actuelle (à partir du deuxième élément)
  - - 18 Copie profonde et superficielle JavaScript ?
  .
- - - 19 Comment implémenter la programmation asynchrone ?
    - Fonction de rappel
  - - Surveillance des événements
  - - Objet de promesse
  - - Fonction génératrice
  - - fonction asynchrone
- - 20. 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. Venez à la conception de programmes
    - Avantages
    - Facile à maintenir
    - Facile à développer
    .
- - 21. Optimisation des performances du projet
  - Réduire le nombre de requêtes HTTP
  - Réduire les requêtes DNS
  - Utiliser CDN
  - Éviter les redirections
  - Chargement paresseux des images
  - Réduire le DOM Nombre d'éléments
  - Réduire les opérations DOM
  - Utiliser JavaScript et CSS externes
  - Compresser JavaScript, CSS, polices, images, etc.
  - Optimiser CSS Sprite
  - Utiliser iconfont
  - Distribution multi-domaines pour diviser le contenu en différents noms de domaine
  - Minimisez l'utilisation des iframes
  - Évitez les src d'images vides
- Mettez JavaScript en bas de la page
  - 22.
    - Un seul thread : un seul thread, ne peut faire qu'une seule chose
    - Raison : éviter les conflits de rendu du DOM
    - Le navigateur doit restituer le DOM
    - JS peut modifier la structure du DOM
    - Lorsque JS est exécuté, le DOM du navigateur rendu Il fera une pause
  - webworker prend en charge le multi-threading, mais ne peut pas accéder au DOM
- Solution : asynchrone
  - 23. Vous parlez d’équilibrage de charge ?
  - Les serveurs uniques travaillent ensemble pour éviter qu'un ou plusieurs d'entre eux ne soient surmenés et maximiser le rôle du serveur
- équilibrage de charge proxy inverse : accéder à un serveur unifié. Le serveur planifie l'accès à un serveur réel. Il nécessite un serveur unifié et ses performances sont affectées par le nombre de groupes de serveurs
  24.
- 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. Prototypes, chaînes de prototypes, héritage ? 🎜
  - Toutes les fonctions ont l'attribut prototype (prototype)
  - Tous les objets ont l'attribut __proto__所有的对象都有__proto__属性
  - 在Javascript中，每个函数都有一个原型属性prototype指向自身的原型，而由这个函数创建的对象也有一个proto属性指向这个原型，而函数的原型是一个对象，所以这个对象也会有一个proto指向自己的原型，这样逐层深入直到Object对象的原型，这样就形成了原型链。
- 26、JS垃圾回收机制是怎样的？
  1.概述
  
  js的垃圾回收机制是为了防止内存泄漏（已经不需要的某一块内存还一直存在着），垃圾回收机制就是不停歇的寻找这些不再使用的变量，并且释放掉它所指向的内存。
  在JS中，JS的执行环境会负责管理代码执行过程中使用的内存。
  
  2.变量的生命周期
  
  当一个变量的生命周期结束之后，它所指向的内存就会被释放。js有两种变量，局部变量和全局变量，局部变量是在他当前的函数中产生作用，当该函数结束之后，该变量内存会被释放，全局变量的话会一直存在，直到浏览器关闭为止。
  
  3.js垃圾回收方式
  有两种方式：标记清除、引用计数
  
  标记清除：大部分浏览器使用这种垃圾回收，当变量进入执行环境(声明变量）的时候，垃圾回收器将该变量进行了标记，当该变量离开环境的时候，将其再度标记，随之进行删除。
  
  引用计数：这种方式常常会引起内存的泄露，主要存在于低版本的浏览器。它的机制就是跟踪某一个值得引用次数，当声明一个变量并且将一个引用类型赋值给变量得时候引用次数加1，当这个变量指向其他一个时引用次数减1，当为0时出发回收机制进行回收。
- 27、逐进增强和优雅降级
  - 逐进增强
    针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高版本浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
  - 优雅降级
    一开始就构建完整的功能，然后再针对低版本浏览器进行兼容
vue面试题
- 1、vue优点
  - 轻量级
  - 速度快
  - 简单易学
  - 低耦合
  - 可重用性
  - 独立开发
  - 文档齐全，且文档为中文文档
【相关推荐：vuejs入门教程】
- 2、vue父组件向子组件传递数据
  - props
- 3、子组件向父组件传递事件
  - $emit
- 4、v-show和v-if指令的共同点和不同点
  - 相同点:都可以控制dom元素的显示和隐藏
  - 不同点:v-show只是改变display属性，dom元素并未消失，切换时不需要重新渲染页面
  - v-if直接将dom元素从页面删除，再次切换需要重新渲染页面
- 5、如何让CSS只在当前组件中起作用
  - scoped
- 6、<keep-alive></keep-alive>
  En Javascript, chaque fonction a un attribut prototype qui pointe vers son propre prototype L'objet créé par ceci. La fonction a également un attribut proto pointant vers le prototype, et le prototype de la fonction est un objet, donc cet objet aura également un proto pointant vers son propre prototype, et cela va plus profondément couche par couche jusqu'à ce que le prototype de l'objet Object soit formé.
- js vise à empêcher les fuites de mémoire (un morceau de mémoire qui n'est plus nécessaire existe toujours. Le mécanisme de récupération de place doit être constamment recherché). ces inutiles Réutilisez la variable et libérez la mémoire vers laquelle elle 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. Cycle de vie des variables
- Méthodes de garbage collection 3.js
  Il existe deux méthodes : l'effacement des marques, le comptage des références
  - 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 réduit de 1. Lorsqu’il est égal à 0, le mécanisme de recyclage démarre.
  - 27. Amélioration progressive et rétrogradation gracieuse
  - Amélioration progressive
    Créez la page pour les navigateurs de version basse pour garantir les fonctions les plus basiques, puis améliorez les effets, les interactions, etc. pour les navigateurs de version haute et fonctions supplémentaires pour 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 navigateurs
  - Léger
  - Rapide
    Simple et facile à apprendre
  Couplage faible
- Réutilisabilité
  Développement indépendant
  - Documentation et documentation complètes Pour les documents chinois
- 2. Le composant parent vue transmet les données au composant enfant
  - props
- 3 Le composant enfant transmet les événements au composant parent
  - $emit
  - 4. - Les similitudes et les différences des instructions if
- - 5. composant actuel
  - scoped
  - 6. Quel est le rôle de <keep-alive></keep-alive> Il est principalement utilisé pour mettre en cache les composants qui doivent être mis en cache ? changé fréquemment sans restituer la page
  - Ajoutez ref='refname' à l'élément dom, puis récupérez l'élément dom via this.$refs.refname
- 🎜v-model🎜🎜🎜🎜v-on🎜🎜🎜🎜v-html🎜🎜🎜🎜v-text🎜🎜🎜🎜v-once🎜🎜🎜🎜v-if 🎜 🎜 🎜🎜v-show🎜🎜 🎜🎜🎜🎜9. Qu'est-ce que vue-loader ? A quoi sert-il ? 🎜🎜🎜🎜Un chargeur pour les fichiers vue, convertissez le modèle/js/style en module js🎜🎜🎜🎜Utilisation : js peut écrire des styles es6 et de style🎜🎜🎜🎜🎜🎜10 Pourquoi utiliser la clé🎜🎜🎜 pour tout le monde Un DOM. élément plus une clé comme identifiant unique, l'algorithme diff peut identifier correctement ce nœud, ce qui accélère le rendu de la page. 🎜🎜🎜🎜🎜11, axios et installation ? 🎜🎜🎙 Les données peuvent être modifiées en temps réel🎜🎜🎜🎜🎜13 Veuillez me dire l'utilisation de chaque dossier et fichier du répertoire src dans le projet vue.cli🎜🎜🎜🎜composants de stockage de composants🎜🎜🎜🎜app. Entrée de la page principale .vue🎜🎜 🎜🎜entrée du fichier principal index.js🎜🎜🎜🎜ass stocke les fichiers de ressources statiques🎜🎜🎜🎜🎜🎜14 Décrivez brièvement les scénarios d'utilisation de calculé et de montre respectivement🎜.
  - Dans 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 le champ 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 modification dans data(), les données modifiées des données ne peuvent pas être obtenues dans la page, utilisez $ Chez nextTick, lorsque les données dans 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 cette façon, chaque fois que le composant est réutilisé, une nouvelle donnée sera renvoyée, ce qui équivaut à. chaque instance de composant ayant ses propres données privées, ils sont responsables de la maintenance des données de manière indépendante 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 si l'une d'elles est modifiée, toutes seront modifiées.
- 18. Compréhension du cadre progressif
  - préconise le moins
  - Vous pouvez choisir différents niveaux en fonction de différents besoins
- 19 Comment Vue est-il implémenté dans la liaison de données bidirectionnelle. ?
  - La liaison de données bidirectionnelle de Vue est mise en œuvre via un modèle de détournement de données, de combinaison et de publication-abonnement. C'est-à-dire que les données et la vue sont synchronisées. Lorsque les données changent, la vue change en conséquence. les données changent également.
  - Core : Concernant la liaison de données bidirectionnelle vue, le noyau est la méthode Object.defineProperty()
- 20. Les différences et les inconvénients entre les applications monopage et multipage. applications
  - Application à page unique (SPA), en termes simples, fait référence à une application avec une seule page principale et 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.
  - Multi-page (MPA) signifie qu'il y a plusieurs pages dans une application. Lorsque la page saute, la page entière est actualisée
  - Avantages de la page unique : bonne expérience utilisateur, rapide, les modifications de contenu ne nécessitent pas de rechargement. la page entière, sur la base de ce point, spa a moins de pression sur le serveur ; les extrémités avant et arrière sont séparées, et l'effet de page sera plus cool
  - Inconvénients d'une seule page : n'est pas propice au référencement ; 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é.
  - Plus précis
    Parce qu'avec la clé, elle n'est pas réutilisée sur place. Dans la même fonction Node a.key === b.key comparaison, la situation de réutilisation sur place peut être évitée. Ce sera donc plus précis.
  - Plus rapide
    Utilisez 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 traversée.
- 22. Quel est l'ordre d'exécution des hooks de cycle de vie des composants parents et enfants ?
  - Chargement du processus de rendu
  parent avantCréer -> parent créé -> parent avantCréer -> enfant avantMont -> Processus de mise à jour du composant
  - parent beforeUpdate -> enfant beforeUpdate -> enfant mis à jour -> parent mis à jour
  parent beforeUpdate -> > enfant avantDestroy -> enfant détruit -> parent détruit
  - 23. Parlez-moi de votre compréhension de nextTick ?
  Lorsque vous modifiez la valeur des données 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 des données modifiées s'afficher et se mettre à jour dans l'élément dom avant de l'obtenir. . succès.
  - 24. Pourquoi les données du composant vue doivent-elles être une fonction ?
  Les données du composant sont écrites sous forme de fonction et les données sont définies sous forme de valeur de retour de fonction, de sorte qu'à chaque fois que le composant est réutilisé, une nouvelle donnée sera renvoyée, ce qui équivaut à chaque instance de composant ayant son propre espace de données privé. Ils sont uniquement responsables des données qu’ils conservent et ne causeront pas 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 valeur, la liaison d'événements, etc. En fait, la seule différence avec le HTML natif c'est qu'il est plus pratique de sélectionner et d'utiliser des objets DOM, et les données et l'interface sont ensemble. 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. jQuery是使用选择器（$）选取DOM对象，对其进行赋值、取值、事件绑定等操作，其实和原生的HTML的区别只在于可以更方便的选取和操作DOM对象，而数据和界面是在一起的。比如需要获取label标签的内容：$("lable").val();,它还是依赖DOM元素的值。
  Vue则是通过Vue对象将数据和View完全分离开来了。对数据进行操作不再需要引用相应的DOM对象，可以说数据和View是分离的，他们通过Vue对象这个vm实现相互的绑定。这就是传说中的MVVM。
- 26、delete和Vue.delete删除数组的区别
  delete只是被删除的元素变成了 empty/undefined 其他的元素的键值还是不变。Vue.delete 直接删除了数组改变了数组的键值。
- 27、SPA首屏加载慢如何解决
  安装动态懒加载所需插件；使用CDN资源。
- 28、vue项目是打包了一个js文件，一个css文件，还是有多个文件？
  根据vue-cli脚手架规范，一个js文件，一个CSS文件。
- 29、vue更新数组时触发视图更新的方法
  push()；
  pop()；
  shift()；
  unshift()；
  splice()；
  sort()；
  reverse()
- 30、什么是 vue 生命周期？有什么作用？
  每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。
- 31、第一次页面加载会触发哪几个钩子？
  beforeCreate， created， beforeMount， mounted
- 32、vue获取数据在一般在哪个周期函数
  created
  beforeMount
  mounted
- 33、created和mounted的区别
  created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。
  mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。
- 34、vue生命周期的理解
  总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后。
  创建前/后：在beforeCreated阶段，vue实例的挂载元素$el和数据对象data都为undefined，还未初始化。在created阶段，vue实例的数据对象data有了，$el还没有。
  载入前/后：在beforeMount阶段，vue实例的$el和dataVue 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.
- Supprimer modifie uniquement l'élément supprimé en vide/non défini. Les valeurs clés des autres éléments restent inchangées. Vue.delete supprime directement le tableau et modifie la valeur clé du tableau.
- Installez les plug-ins requis pour le chargement paresseux dynamique et utilisez 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.
- push();
  shift();
- 30. Quel est le cycle de vie d'une vue ? Qu'est-ce que ça fait ?
  Chaque instance Vue passe 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. Dans le même temps, certaines fonctions appelées hooks de cycle de vie 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éé, avantMont, monté
  - 32. Dans quelle période la fonction vue obtient-elle généralement les données créées
- 33 La différence entre créé et monté
  créé : appelé avant le rendu du modèle. en html , c'est-à-dire que certaines valeurs de propriété sont généralement initialisées avant d'être rendues dans une vue.
  - 34. Comprendre le cycle de vie de vue
  - Il est divisé en 8 étapes : avant/après création, avant/après chargement, avant/après mise à jour et avant/après destruction.
  - Avant/après chargement : dans l'étape beforeMount, le $el et les data de l'instance de vue sont initialisés, mais le nœud dom virtuel avant le montage, data.message Non remplacé encore. Dans l'étape 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 avoir exécuté 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 libéré la surveillance des événements et la liaison au dom, mais que la structure dom existe toujours.
  35. Qu'est-ce que vuex ?
- 🎜36. Quels sont les attributs de vuex ? 🎜 Il existe cinq types, State, Getter, Mutation, Action, Module🎜 state : données de base (emplacement de stockage de la source de données) 🎜 getters : données dérivées des données de base 🎜 mutations : méthode de soumission des données modifiées, synchronisation ! 🎜 actions : comme un décorateur, envelopper les mutations pour les rendre asynchrones. 🎜 modules : Vuex modulaire🎜🎜🎜🎜37, vue family bucket 🎜 vue-cli, vuex, vueRouter, Axios🎜🎜🎜🎜38, vue-cli Quelles sont les commandes npm couramment utilisées pour les projets 🎜🎜🎜npm install Télécharger node_modules ? resources Package command🎜🎜npm run dev est la commande npm pour démarrer l'environnement de développement vue-cli🎜🎜npm run build vue-cli est la commande npm pour générer des ressources de déploiement de l'environnement de production🎜🎜npm run build–report est utilisé pour afficher vue -cli production environnement déploiement ressources commande npm de la taille du fichier🎜🎜🎜🎜🎜39 Veuillez me dire le but de chaque dossier et fichier du projet vue-cli est de sauvegarder une configuration initiale du 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 : 🎜assets est utilisé pour placer des images 🎜composants est utilisé pour placer des composants fichiers 🎜 app.vue C'est le fichier d'entrée du projet🎜 main.js Le fichier principal du projet🎜🎜🎜🎜🎜40 Quelle est la différence entre v-if et v-show🎜.
  - Points communs : ils affichent tous les éléments DOM de manière dynamique
  - Différences :
    - v-if ajoute ou supprime dynamiquement des éléments DOM dans l'arborescence DOM
    - v-show contrôle la visibilité en définissant l'attribut de style d'affichage de l'élément DOM
    - La commutation v-if a un processus de compilation/désinstallation partielle. Pendant le processus de commutation, les écouteurs d'événements internes et les sous-composants sont correctement détruits et reconstruits
    - v-show n'est qu'une simple commutation basée sur CSS.
      - v- if a un coût de commutation plus élevé
    - scénarios d'utilisation
    - v-if convient aux conditions de fonctionnement qui sont peu susceptibles de changer
  41. Quelles sont les priorités de v-for et v-if ?
- v-for détermine quand 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 heure dans la même balise.
  
  42. Modificateurs couramment utilisés dans vue?
- Modificateurs d'événements
  
  .stop empêche les événements de continuer à se propager
  - .capture utilise le mode de capture d'événements, c'est-à-dire événements déclenchés par l'élément lui-même Traités ici d'abord, puis transmis aux éléments internes pour traitement
  - .self La fonction de traitement n'est déclenchée que lorsque event.target est l'élément actuel lui-même
  - .once L'événement ne sera déclenché qu'une seule fois
  - modificateur du v-model
  .lazy Grâce à ce modificateur, il est converti en resynchronisation dans l'événement de changement
  - .trim Filtre automatiquement les espaces de fin dans la saisie utilisateur
  - Modificateur d'événement de clavier
  .enter
  - .delete (capturez "supprimer" et touches "retour arrière")
  - .esc
  - .space
  - Modificateur du bouton de la souris
  - .left
  - .right
  - .middle
  43. events?
  - Récupérez l'objet événement et transmettez $event comme paramètre de méthode. Notez que le symbole $ doit être utilisé dans l'événement
  - ```
  <button>事件对象</button>
```
- 44. Quelles sont les façons de transmettre les valeursdes composants
Passage du parent à l'enfant : Le composant enfant reçoit la valeur de l'attribut xx transmis par le composant parent via props['xx']
Pass from child to parent : Le composant enfant transmet this.$emit('fnName',value), et le composant parent reçoit le rappel en recevant le fnName méthode d'événement
- Autres moyens : transmettre la valeur en créant un bus
- Utiliser Vuex
- Appelle la méthode du composant parent. directement dans le composant enfant via this.$parent.event.
  - Utilisez $emit() dans le composant enfant pour déclencher un événement vers 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.
Ajoutez scoped devant le style dans le composant
2. 47. Comment obtenir dom ?
48. Vue route jump
- (1) Lien de routeur de navigation déclaratif
  - sans paramètres. :
```
// 注意：router-link中链接如果是'/'开始就是从根路由开始，如果开始不带'/'，则从当前路由开始。
<router-link>  
<router-link> //name,path都行, 建议用name</router-link></router-link>
```
- Avec paramètres :

<router-link>
<router-link>  
<router-link>  
//传递对象
<router-link></router-link></router-link></router-link></router-link>

(2)this.$router.push()

Sans paramètres :

this.$router.push('/home')
this.$router.push({name:'home'})
this.$router.push({path:'/home'})

ref="domName" 用法：this.$refs.domNameparamètres de requête

1.路由配置：
name: 'home',
path: '/home'
2.跳转：
this.$router.push({name:'home',query: {id:'1'}})
this.$router.push({path:'/home',query: {id:'1'}})
3.获取参数
html取参: $route.query.id
script取参: this.$route.query.id

paramètres params

```
1.路由配置：
name: 'home',
path: '/home/:id'(或者path: '/home:id')
2.跳转：
this.$router.push({name:'home',params: {id:'1'}})
注意：
// 只能用 name匹配路由不能用path
// params传参数(类似post)  路由配置 path: "/home/:id" 或者 path: "/home:id"否则刷新参数消失
3.获取参数
html取参:$route.params.id 
script取参:this.$route.params.id
```
Transférer les paramètres directement via le chemin
- ```
1.路由配置：
name: 'home',
path: '/home/:id'
2.跳转：
this.$router.push({path:'/home/123'}) 
或者：
this.$router.push('/home/123') 
3.获取参数：
this.$route.params.id
```
La différence entre les paramètres et la requête
- 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'identifiant sera toujours là après avoir actualisé la page.
(3)this.$router.replace()
- L'utilisation est la même que ci-dessus
(4)this.$router.go(n)
- Avancer ou reculer n times Page, n peut être un entier positif ou négatif
Différence :
- this.$router.push
  Accédez au chemin d'URL spécifié et ajoutez un enregistrement à la pile d'historique. En cliquant en arrière, vous reviendrez au précédent. page. La page
passe au chemin d'URL spécifié, mais il n'y aura aucun enregistrement dans la pile d'historique. En cliquant sur Retour, vous passerez à la page précédente (c'est-à-dire en remplaçant directement la page actuelle)
this.$router .go(n)
Sauter n pages en avant ou en arrière, n peut être un entier positif ou négatif
49 Le principe de la liaison bidirectionnelle Vue.js
Vue.js 2.0. utilise le détournement de données (mode Proxy) Combiné avec le mode éditeur-abonné (mode PubSub), Object.defineProperty() est utilisé pour détourner les setters et getters de chaque propriété, publier des messages aux abonnés lorsque les données changent et déclencher les rappels d'écoute correspondants .

每个组件实例都有相应的watcher程序实例，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的setter被调用时，会通知watcher重新计算，从而致使它关联的组件得以更新。

Vue.js 3.0, 放弃了Object.defineProperty ，使用更快的ES6原生 Proxy (访问对象拦截器, 也称代理器)
50、Computed和Watch的区别
- computed 计算属性 : 依赖其它属性值,并且 computed 的值有缓存,只有它依赖的属性值发生改变,下一次获取 computed 的值时才会重新计算 computed 的值。
- watch 侦听器 : 更多的是观察的作用,无缓存性,类似于某些数据的监听回调,每当监听的数据变化时都会执行回调进行后续操作。
- 运用场景：
  - 当我们需要进行数值计算,并且依赖于其它数据时,应该使用 computed,因为可以利用 computed的缓存特性,避免每次获取值时,都要重新计算。
  - 当我们需要在数据变化时执行异步或开销较大的操作时,应该使用 watch,使用 watch 选项允许我们执行异步操作 ( 访问一个 API ),限制我们执行该操作的频率, 并在我们得到最终结果前,设置中间状态。这些都是计算属性无法做到的。
  - 多个因素影响一个显示，用Computed；一个因素的变化影响多个其他因素、显示，用Watch;
- Computed 和 Methods 的区别
  - computed: 计算属性是基于它们的依赖进行缓存的,只有在它的相关依赖发生改变时才会重新求值对于 method ，只要发生重新渲染，
  - method 调用总会执行该函数
51、过滤器 (Filter)
- 在Vue中使用filters来过滤(格式化)数据，filters不会修改数据，而是过滤(格式化)数据，改变用户看到的输出（计算属性 computed ，方法 methods 都是通过修改数据来处理数据格式的输出显示。
- 使用场景：比如需要处理时间、数字等的的显示格式；
52、axios是什么
易用、简洁且高效的http库，支持node端和浏览器端，支持Promise，支持拦截器等高级配置。
53、sass是什么？如何在vue中安装和使用？
sass是一种CSS预编译语言安装和使用步骤如下。

用npm安装加载程序（ sass-loader、 css-loader等加载程序)。
在 webpack.config.js中配置sass加载程序。

54、Vue.js页面闪烁
Vue. js提供了一个v-cloak指令，该指令一直保持在元素上，直到关联实例结束编译。当和CSS一起使用时，这个指令可以隐藏未编译的标签，直到实例编译结束。用法如下。

	[v-cloak]{ 
	display:none; 
	} 
	<div v-cloak>{{ title }}</div>

55、如何解决数据层级结构太深的问题
在开发业务时，经常会岀现异步获取数据的情况，有时数据层次比较深，如以下代码: span 'v-text="a.b.c.d">, 可以使用vm.$set手动定义一层数据: vm.$set("demo"，a.b.c.d)
56、vue常用指令

v-model 多用于表单元素实现双向数据绑定（同angular中的ng-model）
v-bind 动态绑定作用：及时对页面的数据进行更改
v-on:click 给标签绑定函数，可以缩写为@，例如绑定一个点击函数函数必须写在methods里面
v-for 格式： v-for=“字段名 in(of) 数组json” 循环数组或json(同angular中的ng-repeat)
v-show 显示内容（同angular中的ng-show）
v-hide 隐藏内容（同angular中的ng-hide）
v-if 显示与隐藏（dom元素的删除添加同angular中的ng-if 默认值为false）
v-else-if 必须和v-if连用
v-else 必须和v-if连用不能单独使用否则报错模板编译错误
v-text 解析文本
v-html 解析html标签
v-bind:class 三种绑定方法
- 对象型 ‘{red:isred}’
- 三元型 ‘isred?“red”:“blue”’
- 数组型 ‘[{red:“isred”},{blue:“isblue”}]’
v-once 进入页面时只渲染一次不在进行渲染
v-cloak 防止闪烁
v-pre 把标签内部的元素原位输出

57、$route和$router的区别
- $route是“路由信息对象”，包括path，params，hash，query，fullPath，matched，name等路由信息参数。
- $router是“路由实例”对象包括了路由的跳转方法，钩子函数等
58、怎样理解 Vue 的单项数据流
- Les données sont toujours transmises du composant parent au composant enfant. Le composant enfant n'a pas le droit de modifier les données transmises par le composant parent. Il peut uniquement demander au composant parent de modifier les données d'origine. Cela empêchera le composant enfant de modifier accidentellement l'état du composant parent, ce qui rendrait difficile la compréhension du flux de données de votre application.
- Remarque : utiliser directement v-model pour lier les accessoires transmis du composant parent au composant enfant est une manière d'écrire irrégulière, et l'environnement de développement signalera un avertissement.
- Si vous souhaitez vraiment modifier la valeur props du composant parent, vous pouvez définir une variable dans data, l'initialiser avec la valeur prop, puis utiliser $emit pour notifier au composant parent de la modifier.
59. Qu'est-ce que le DOM virtuel ? Quels sont les avantages et les inconvénients ?
Puisque manipuler le DOM dans le navigateur coûte cher. Des opérations fréquentes sur le DOM entraîneront certains problèmes de performances. C'est la raison de la création du Dom virtuel. Le DOM virtuel de Vue2 s'appuie sur l'implémentation de la bibliothèque open source snabbdom. L'essence de Virtual DOM 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. Limite inférieure des performances garanties : le DOM virtuel du framework doit s'adapter à toutes les opérations pouvant être générées par l'API de couche supérieure. La mise en œuvre de certaines de ses opérations DOM doit être universelle, ses performances ne sont donc pas optimales. ; mais par rapport au brut Les performances de fonctionnement du DOM du DOM sont bien meilleures, donc le DOM virtuel du framework peut au moins garantir qu'il peut toujours fournir de bonnes performances sans optimisation manuelle, ce qui garantit non seulement la limite inférieure des performances.
  - 2. Pas besoin d'utiliser manuellement le DOM : nous n'avons pas besoin d'utiliser manuellement le DOM. Il nous suffit d'écrire la logique de code du View-Model. Le framework liera de manière bidirectionnelle le DOM virtuel et les données pour nous aider. mettre à jour la vue de manière prévisible, ce qui est très pratique, améliore considérablement notre efficacité de développement.
  - 3. Multiplateforme : le DOM virtuel est essentiellement un objet JavaScript et le DOM est fortement lié à la plate-forme. En comparaison, le DOM virtuel peut effectuer des opérations multiplateformes plus pratiques, telles que le rendu côté serveur, le développement weex, etc. .
- Inconvénients :
  - 1. Impossible d'effectuer une optimisation extrême : bien que DOM virtuel + optimisation raisonnable suffisent pour répondre aux besoins de performances de la plupart des applications, dans certaines applications ayant des exigences de performances extrêmement élevées, le DOM virtuel ne peut pas être optimisé à l'extrême.
  - 2. Lors du rendu d'une grande quantité de DOM pour la première fois, cela sera plus lent que l'insertion innerHTML en raison d'une couche supplémentaire de calcul DOM.
60. Comment résoudre le problème de perte de données lors du rafraîchissement de la page Vuex ?
- La persistance des données Vuex est requise. Généralement, une solution de stockage locale est utilisée pour sauvegarder les données. Vous pouvez concevoir vous-même une solution de stockage ou utiliser un plug-in tiers.
- 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 au 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 : Du fait de l'utilisation d'un seul arbre d'état, tous les états de l'application seront concentrés dans un objet relativement volumineux. Lorsqu’une application devient très complexe, les objets stockés peuvent devenir très volumineux. 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 des sous-modules imbriqués.
- Namespace : Par défaut, les actions, mutations et getters à l'intérieur du module sont enregistrés dans l'espace de noms global, ce qui 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 namespaced: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 Factory - Créer une instance en passant des paramètres
  Le DOM virtuel renvoie le Vnode de la balise de base et le Vnode du composant selon différents paramètres.
- 2. Mode Singleton - l'ensemble du programme a une et une seule instance
  L'installation de la méthode d'enregistrement du plug-in de vuex et vue-router reviendra directement si l'instance existe dans le système.
- 3. Modèle de publication-abonnement. (mécanisme d'événement vue)
- 4. (Principe des données réactives)
- 5. Mode Décorateur (utilisation de @decorator)
- 6. Le mode Stratégie signifie que l'objet a un certain comportement, mais dans différents scénarios, ce comportement a différentes solutions de mise en œuvre - Comme le. stratégie de fusion d’options.
63. Quelles optimisations de performances avez-vous effectuées pour Vue ?
Ici, nous listons uniquement l'optimisation des performances pour Vue L'optimisation des performances de l'ensemble du projet est un gros projet.
- 对象层级不要过深，否则性能就会差。
- 不需要响应式的数据不要放在 data 中（可以使用 Object.freeze() 冻结数据）
- v-if 和 v-show 区分使用场景
- computed 和 watch 区分场景使用
- v-for 遍历必须加 key，key最好是id值，且避免同时使用 v-if
- 大数据列表和表格性能优化 - 虚拟列表 / 虚拟表格
- 防止内部泄露，组件销毁后把全局变量和时间销毁
- 图片懒加载
- 路由懒加载
- 异步路由
- 第三方插件的按需加载
- 适当采用 keep-alive 缓存组件
- 防抖、节流的运用
- 服务端渲染 SSR or 预渲染
64、Vue.set 方法原理
在两种情况下修改 Vue 是不会触发视图更新的。
- 1、在实例创建之后添加新的属性到实例上（给响应式对象新增属性）
- 2、直接更改数组下标来修改数组的值。
- Vue.set 或者说是 $set 原理如下
  因为响应式数据我们给对象和数组本身新增了__ob__属性，代表的是 Observer 实例。当给对象新增不存在的属性，首先会把新的属性进行响应式跟踪然后会触发对象 ob 的dep收集到的 watcher 去更新，当修改数组索引时我们调用数组本身的 splice 方法去更新数组。
65、函数式组件使用场景和原理
函数式组件与普通组件的区别
- 1、函数式组件需要在声明组件时指定 functional:true
- 2、不需要实例化，所以没有this，this通过render函数的第二个参数context代替
- 3、没有生命周期钩子函数，不能使用计算属性，watch
- 4、不能通过$emit对外暴露事件，调用事件只能通过context.listeners.click的方式调用外部传入的事件
- 5、因为函数组件时没有实例化的，所以在外部通过ref去引用组件时，实际引用的是HTMLElement
- 6、函数式组件的props可以不用显示声明，所以没有在props里面声明的属性都会被自动隐式解析为prop，而普通的组件所有未声明的属性都解析到$attrs里面，并自动挂载到组件根元素上（可以通过inheritAttrs属性禁止）
优点：1.由于函数组件不需要实例化，无状态，没有生命周期，所以渲染性要好于普通组件2.函数组件结构比较简单，代码结构更清晰

使用场景：

一个简单的展示组件，作为容器组件使用比如 router-view 就是一个函数式组件。 “高阶组件”—用于接受一个组件为参数，返回一个被包装过的组件。
相关代码如下：

if (isTrue(Ctor.options.functional)) { // 带有functional的属性的就是函数式组件 
return createFunctionalComponent(Ctor, propsData, data, context, children);
} 
const listeners = data.on; 
data.on = data.nativeOn; 
installComponentHooks(data); // 安装组件相关钩子 （函数式组件没有调用此方法，从而性能高于普通组件）

66、子组件为何不可以修改父组件传递的 Prop？
所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。
67、vue项目创建。路由配置、环境配置以及组件传值等

css、html面试题

HTML和HTML5有什么区别？

主要有三个区别：
- 1、文档声明区别
  
  HTML：超文本标记语言，一种纯文本类型的语言。
  
  HTML5.0：文档声明HTML5方便书写，精简，有利于程序员快速的阅读和开发。
- 2、结构语义区别
  
  html：没有体现结构语义化的标签，如：<div id="nav"></div>
  
  html5 : Ajout de nombreuses balises sémantiques, telles que : <article>, <aside>, <audio>, <bdi>...<code><article>、<aside>、<audio>、<bdi>...</bdi></audio></aside></article>
- 3. HTML : fait référence aux graphiques vectoriels évolutifs, graphiques vectoriels utilisés pour définir le Web.
  
  HTML5 : L'élément canevas de HTML5 utilise des scripts (généralement utilisant JavaScript) pour dessiner des images sur la page Web et peut contrôler chaque pixel du canevas.
Nous diviserons une boîte en plusieurs parties : contenu, remplissage, bordure et marge. Autrement dit, le modèle de boîte se compose de la marge, du remplissage, du cadre et du contenu
- Le modèle de boîte est divisé en modèle de boîte standard. et le modèle de boîte IE
Balises sémantiques HTML
en-tête – titre
1. nav – navigation
2. article – article
3. section – section ou paragraphe
4. à côté – barre latérale
5. pied de page – pied de page

En l'absence de code CSS, la structure du contenu et la structure du code peuvent être bien présentées (afin que les personnes non techniques puissent comprendre le code)

Améliorer l'expérience utilisateur, telle que : titre, alt sont utilisés pour expliquer les noms et les informations sur les images
sont bons pour le référencement. La sémanticisation peut établir une meilleure connexion avec les moteurs de recherche, optimiser la recherche
faciliter le développement et la maintenance des équipes, et la sémantique est plus lisible

Quelles sont les différences entre les cookies, sessionStorage et localStorage ? (Navigateur)

(1) Il est utilisé pour la communication entre le client et le serveur
(2) Mais il a la fonction de stockage local, il est donc "emprunté"
(3) document.cookie = . ..obtenez-le et modifiez-le simplement
(4) Inconvénients du stockage des cookies
①La capacité de stockage est trop petite, seulement 4 Ko
②Toutes les requêtes 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 document.cookie
2 , localStorage, sessionStorage
(1) html5 est spécialement conçu pour le stockage, avec une capacité maximale de 5M
(2) l'API est simple et facile à utiliser
(3) lcoalStorage.setItem(key, value);localStorage.getItem(key);
(4) En mode caché iOS Safari : localStorage.getItem signalera une erreur Il est recommandé d'utiliser l'encapsulation try-catch
3. SessionStorage est utilisé pour stocker localement les données dans une session. . Ces données ne sont accessibles que par les pages de la même session et lorsque les données sont également détruites après 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, à moins que les données ne soient activement supprimées, les données n'expireront jamais.

Quels sont les noyaux courants des navigateurs ?

webkit

: Noyau Webkit : représente le navigateur Safari (le navigateur d'Apple) et les versions inférieures de Google Chrome, qui est un projet open source. **Noyau Presto : **représente le navigateur Opera (traduit du chinois par "Open Browser") Le noyau Presto est reconnu comme le moteur de rendu le plus rapide au monde, mais après 2013, Open a annoncé qu'il rejoindrait Google. camp a abandonné ce noyau.

**Noyau Blink :** Développé par Google et Opera, sorti en avril 2013, le noyau actuel de Chrome est Blink.

- Les standards Web sont principalement divisés en trois parties : structure, performances et comportement.
  
  Structure : fait référence aux balises que nous écrivons habituellement dans le corps, principalement composées de balises HTML. fait référence à des balises HTML plus riches, principalement composées de styles CSS
  
  Comportement : fait référence à l'interaction entre la page et l'utilisateur, principalement composée de parties JS
  
  W3C :
- W3C
  a proposé des exigences standardisées pour. les normes Web, c'est-à-dire les spécifications du code
  
  Exigences de structure
- 2 Les étiquettes doivent être fermées
  
  3. pour les performances et le comportement
  
  1. Il est recommandé d'utiliser des scripts CSS et js de liens externes 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é du rendu de la page et afficher le contenu Web plus rapidement
- Comment implémenter une mise en page adaptée au navigateur ?
  
  Utilisez des requêtes multimédia (@media)
Utilisez une disposition élastique flexible
Utilisez des unités de pourcentage
Utilisez des unités rem
- Utilisez des unités VH, HW
- Compréhension des sélecteurs et des priorités CSS ?
- Sélecteurs CSS couramment utilisés
- Au même niveau :
- À différents niveaux :
  
  Normalement, plus la valeur de poids est élevée, plus la priorité est élevée, mais il n'y a pas de division spécifique de la valeur de poids, donc dans la plupart des développements actuels, plus le niveau est profond, plus la priorité est élevée.
- Parlez de vos réflexions sur. refusionner et redessiner la compréhension ?
  - Qu'est-ce que le reflow ?
    - Lorsque la largeur et la hauteur, la disposition, l'affichage ou le masquage d'un élément, ou la structure du texte à l'intérieur de l'élément change, entraînant la nécessité de reconstruire la page, une redistribution se produit
  - Qu'est-ce que redessiner ?
    - Lorsque la largeur, la hauteur, la disposition, l'affichage ou le masquage d'un élément ne change pas, mais que seul le style d'apparence de l'élément est modifié, un redessin se produit
    - Quand la redistribution sera-t-elle effectuée ?
      Lors de l'ajout ou de la suppression d'éléments DOM visibles
      La position de l'élément change
      La taille de l'élément change
      Le contenu change
      Lorsque la page est rendue pour la première fois
    - Quand sera-t-elle redessinée ?
      
      Liste quelques styles CSS associés : couleur, arrière-plan, taille de l'arrière-plan, visibilité, ombre de la boîte
- opacité : 0, visibilité : caché, affichage : aucun Quelles sont les différences ?
  - opacity=0, l'élément est masqué, mais la mise en page ne sera pas modifiée. De plus, si l'élément a été lié à certains événements, comme des événements de clic, alors cliquer sur cette zone peut également déclencher des événements de clic
    .
  - visibility=hidden, l'élément est masqué, mais la mise en page ne sera pas modifiée, mais l'événement lié à l'élément ne sera pas déclenché
  - display=aucun, l'élément est masqué, et la mise en page. sera modifié. C'est compréhensible. C'est la même chose que de supprimer l'élément de la page
- css preprocessor
  - less
  - sass
- Quelle est la différence entre le titre et l'alt de <img alt="Partagez quelques questions d'entretien Web frontales sélectionnées qui valent la peine d'être collectées (avec réponses)" > <code><img alt="Partagez quelques questions d'entretien Web frontales sélectionnées qui valent la peine d'être collectées (avec réponses)" >的 title 和 alt 有什么区别
  - 通常当鼠标滑动到元素上的时候显示
  - alt 是<img alt="Partagez quelques questions d'entretien Web frontales sélectionnées qui valent la peine d'être collectées (avec réponses)" >
  Généralement affiché lorsque la souris glisse sur un élément
- alt est un attribut unique de <img alt="Partagez quelques questions d'entretien Web frontales sélectionnées qui valent la peine d'être collectées (avec réponses)" >, qui est une description équivalente du contenu de l'image et est utilisée pour les images. Impossible de charger l'affichage, lecteur d'écran pour lire l'image. Cela peut améliorer l'accessibilité des images. À l'exception des images purement décoratives, des valeurs significatives doivent être définies et les moteurs de recherche se concentreront sur l'analyse.
  
  Que sont les éléments en ligne et les éléments de niveau bloc ? À quel élément img appartient-il
  
  élément de bloc
  
  adresse - adresse
  blockquote - citation de bloc
  centre - bloc d'alignement central
  dir - liste de répertoires
  div - le niveau de bloc couramment utilisé est également la balise principale de la mise en page CSS
  dl - liste de définitions
  fieldset – groupe de contrôle de formulaire
  formulaire – formulaire interactif
  h1 – titre
  h2 – sous-titre
  h3 – titre de niveau 3
  h4 – titre de niveau 4
  h5 – titre de niveau 5
  h6 – titre de niveau 6
  hr – diviseur horizontal
  isindex – invite de saisie
  menu – liste de menus
  noframes – contenu facultatif des frames, (afficher ce contenu de bloc pour les navigateurs qui ne prennent pas en charge les frames)
  noscript – contenu de script facultatif (afficher ce contenu pour les navigateurs qui ne prennent pas en charge les scripts)
  ol – formulaire ordonné
  p – paragraphe
  texte pré-formaté
  tableau – tableau
  ul – liste non ordonnée
  
  élément en ligne
  
  a – ancre
  abbr – abréviation
  acronyme – lettre initiale
  b – gras (non recommandé)
  bdo – bidi override
  big – grande police
  br – saut de ligne
  citer – citation
  code – code informatique (obligatoire pour citer le code source)
  dfn – définir le champ
  em – emphase
  police – Paramètres de police (non recommandé)
  i – italique
  img – image
  saisie – zone de saisie
  kbd – définir le texte du clavier
  étiquette – étiquette du tableau
  q – citation courte
  s – trait de soulignement (non recommandé)
  samp – définition Exemple de code informatique
  select – sélection d'éléments
  petit – texte en petite police
  span – conteneur en ligne couramment utilisé, définissant des blocs dans le texte
  barré – souligné
  fort – accent gras
  sous – indice
  sup – exposant
  zone de texte – zone de saisie de texte multiligne
  tt – texte télex
  u – souligné
- img est un élément de remplacement en ligne, et l'effet est le même que celui des éléments de bloc
  - La différence entre lecture seule et désactivé dans les formulaires
  - Points communs : il empêche les utilisateurs de modifier le contenu dans le form
  1. readonly n'est valable que pour la saisie et la zone de texte, mais désactivé est valable pour tous les éléments du formulaire, y compris la radio et la case à cocher
3. Si le champ du formulaire est désactivé, le champ ne sera pas envoyé (le formulaire transmet la valeur) et sérialisé
- Navigateur
  
  1. Parcourir Entrez l'URL dans le serveur et. affichez-le sur la page Web. Que se passe-t-il dans tout le processus
  
  Résolution du nom de domaine
  Initiez la poignée de main TCP à trois voies
  Après avoir établi la connexion TCP, lancez une requête http
  Le serveur répond à la requête http et le navigateur obtient le code html
- Le navigateur affiche la page et la présente à l'utilisateur
  🎜🎜🎜 2. Inconvénients des cookies🎜
  Il y a une limite au nombre maximum de cookies générés sous chaque nom de domaine spécifique
  IE et Opera effaceront les cookies les moins récemment utilisés, et Firefox effacera les cookies de manière aléatoire
  La taille maximale des cookies est de 4096 octets pour des raisons de compatibilité. ne dépasse pas 4095 octets
  Problèmes de sécurité, si le cookie est piraté, toutes les informations de session peuvent être obtenues
- 3 Navigateurs et noyaux 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 des données dans une session localement. Ces données ne sont accessibles que par les pages de la même session. session et quand Les données seront détruites après la fin de la 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 votre compréhension de la spécification bfc
  
  bfc est le contexte de formatage du bloc, c'est-à-dire le contexte de formatage
  bfc fait partie du rendu visuel CSS de la page, qui est utilisé pour déterminer la mise en page. de la boîte de bloc et de la plage d'interaction flottante
  L'un des effets les plus importants de bfc est d'isoler les éléments à l'intérieur et à l'extérieur du bfc les uns des autres, de sorte que le positionnement des éléments internes et externes ne s'affectera pas les uns les autres
- 6. Veuillez citer au moins trois façons de réduire le temps de chargement des pages
  
  Minimiser les requêtes http répétées dans la page
  Placer le style css en tête du fichier et le script js à la fin du fichier
  Compresser et fusionner les codes js et css
  Activer la compression gzip sur le serveur
- 7. Comment optimiser les performances du site ?
  - Aspect du contenu
    - Réduire les requêtes HTTP : fusionner des fichiers, des sprites CSS, des images en ligne
    - Réduire les requêtes DNS : cache DNS, distribuer les ressources au nombre approprié de noms d'hôtes
    - Réduire le nombre d'éléments DOM
  - Serveur Aspect
    - User cdn
    - configure etag
    - User la compression gzip pour les composants
  - cookie Aspect
    - reduce Taille de cookie
  - css
    - Utiliser
    - <link> 不使用 @importAspect Javascript
    Placer le script en bas de page
  - Introduire javascript et css de l'extérieur
    - Compresser javascript et css
    - Supprimer les scripts inutiles
    - Réduire l'accès au DOM
    - Aspect de l'image
    Optimiser les images : choisissez la profondeur de couleur et la compression en fonction des besoins réels en matière de couleur
  - Optimiser les sprites CSS
    - Ne pas étirer les images dans le stockage HTML
- Lorsqu'il est transitoire, il suffit de stocker les données en mémoire, qui n'est disponible qu'au moment de l'exécution.
  Le stockage persistant peut être divisé en côté navigateur et côté serveur.
  - Navigateur :
  - Cookie : généralement utilisé pour. stockage L'identité de l'utilisateur, le statut de connexion, etc. sont automatiquement portés en http. La limite supérieure de la taille est de 4K. Vous pouvez définir vous-même le délai d'expiration
    - localStorage / sessionStorage : stockage à long terme/fermeture et suppression de la fenêtre. la limite de taille est de 4 à 5 M
      - indexDB
      - serveur
      Cache distribué redis
    - base de données
- get : Cache, la longueur des requêtes est limitée, et sera enregistrée dans l'historique
  Aucun effet secondaire (les ressources ne sont pas modifiées), idempotent (le nombre de requêtes n'a rien à voir avec les ressources) scénario
  - - post : Sécurité, big data, plus Plusieurs types d'encodage
  - 10.
- Attaque XSS : injecter du code malveillant
  cookie Set httpOnly
  - Échapper au contenu d'entrée et au contenu de sortie sur la page
    - CSRF : falsification de requêtes intersites, protection :
    get ne modifie pas les données
  - ne pas être bloqué Lorsqu'un site Web tiers accède au cookie d'un utilisateur
    - établir une liste blanche et ne sera pas demandé par un site Web tiers
    - demander une vérification
1. Quels sont les aspects de l'optimisation des performances ?
- Compression et fusion des ressources, réduisant les requêtes HTTP
  Chargement asynchrone du code non principal
  - Utilisation de la mise en cache du navigateur
  - Utilisation du CDN
  - Pré-résolution DNS
- Chargement de script dynamique
  différé
  - async
  - 3.
- defer est exécuté après l'analyse du HTML. S'il y en a plusieurs, ils sont exécutés dans l'ordre de chargement.
  async est exécuté immédiatement après le chargement. S'il y en a plusieurs, l'ordre d'exécution n'a rien à voir avec l'ordre de chargement. . 4. Pré-chargement ?
- 5、DNS 预解析?
  - DNS 解析也是需要时间的，可以通过预解析的方式来预先获得域名所对应的 IP。
    <meta http-equiv="'x-dns-prefetch-control'" content="'on'">
    <link rel="dns-prefetch" href="//yuchengkai.cn">
  - 在https协议中默认a标签不会开启预解析,因此需要手动设置meta
- 6、懒执行?
  懒执行就是将某些逻辑延迟到使用时再计算。该技术可以用于首屏优化，对于某些耗时逻辑并不需要在首屏就使用的，就可以使用懒执行。懒执行需要唤醒，一般可以通过定时器或者事件的调用来唤醒。
- 7、懒加载?
  懒加载就是将不关键的资源延后加载。
  
  懒加载的原理就是只加载自定义区域（通常是可视区域，但也可以是即将进入可视区域）内需要加载的东西。对于图片来说，先设置图片标签的 src 属性为一张占位图，将真实的图片资源放入一个自定义属性中，当进入自定义区域时，就将自定义属性替换为 src 属性，这样图片就会去下载资源，实现了图片懒加载。
  
  懒加载不仅可以用于图片，也可以使用在别的资源上。比如进入可视区域才开始播放视频等等。
react面试题

1、什么时候使用状态管理器?
- 从项目的整体看
  - 目用户的使用方式复杂
  - 不同身份的用户有不同的使用方式（比如普通用户和管理员）
  - 多个用户之间可以协作
  - 与服务器大量交互，或者使用了 WebSocket
  - View 要从多个来源获取数据
- 从组件角度看
  - 某个组件的状态，需要共享
  - 某个状态需要在任何地方都可以拿到
  - 一个组件需要改变全局状态
  - 一个组件需要改变另一个组件的状态
- 组件有相当大量的，随时间变化的数据
- state 需要有一个单一可靠数据源
- 所有 state 放在顶层组件已经无法满足需求了
2、说说 React 有什么特点?
- 它使用**虚拟 DOM **而不是真正的 DOM。
- 它可以用服务器端渲染。
- 它遵循单向数据流或数据绑定
3、列出 React 的一些主要优点?
- 它提高了应用的性能
- 可以方便地在客户端和服务器端使用
- 由于 JSX，代码的可读性很好
- React 很容易与 Meteor，Angular 等其他框架集成
- 使用 React，编写 UI 测试用例变得非常容易
4、什么是 JSX?
- 它 JSX 是 J avaScript XML 的简写。是 React 使用的一种文件，它利用 JavaScript 的表现力和类似 HTML 的模板语法。这使得 HTML 文件非常容易理解。此文件能使应用非常可靠，并能够提高其性能
- 例子
```
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></form>、<group></group>、<div> 等。此函数必须保持纯净，即必须每次调用时都返回相同的结果<p>8、什么是 Props?</p> <ul><li>Props est l'abréviation de propriétés dans React. Ce sont des composants en lecture seule et doivent rester purs, c'est-à-dire immuables. Ils sont toujours transmis du composant parent au composant enfant tout au long de l'application. Les composants enfants ne peuvent jamais renvoyer d'accessoires au composant parent. Cela permet de maintenir un flux de données unidirectionnel et est souvent utilisé pour présenter des données générées dynamiquement</li></ul> <p>9. Qu'est-ce que l'état dans React ? </p> <ul><li>L'état est le cœur des composants React et la source des données. Il doit être aussi simple que possible. Fondamentalement, l'état est un objet qui détermine la présentation et le comportement d'un composant. Contrairement aux Props, ils sont modifiables et créent des composants dynamiques et interactifs. Ils sont accessibles via this.state(). </li></ul> <p>10. Distinguer l'état et les accessoires ?</p> <table> <thead><tr class="firstRow"> <th>Conditions</th> <th>État</th> <th>Props</th> </tr></thead> <tbody> <tr> <td>Accepter la valeur initiale du composant parent</td> <td>Oui</td> <td>Oui</td> </tr> <tr> <td>Le composant parent peut changer de valeur </td> <td>Non</td> <td>Oui</td> </tr> <tr> <td>Définir la valeur par défaut dans le composant </td> <td>Non</td> <td>Oui</td> </tr> <tr> <td>Changer à l'intérieur du composant </td> <td>Oui</td> <td>Non</td> </tr> <tr> <td>Définir la valeur initiale du composant enfant </td> <td>Oui </td> <td>Oui </td> </tr> <tr> <td>Changement à l'intérieur du composant enfant</td> <td>Non</td> <td>Oui</td> </tr> </tbody> </table> <p>11. Comment mettre à jour l'état du composant ?</p> <ul><li>Utilisez <code>this.setState() pour mettre à jour l'état du composant
12 Quelles sont les étapes du cycle de vie du composant React ?
- Le cycle de vie du composant React. comporte trois étapes différentes :
  - Étape de rendu initial : c'est l'étape où le composant est sur le point de commencer son parcours de vie et d'entrer dans le DOM.
  - Phase de mise à jour : une fois qu'un composant est ajouté au DOM, il peut être mis à jour et restitué uniquement lorsque les accessoires ou l'état changent. Celles-ci ne se produisent que dans cette phase
  - Phase de déchargement : C'est la dernière phase du cycle de vie du composant, le composant est détruit et supprimé du DOM
13. Que savez-vous des références de React ?
- Refs. sont React L'abréviation citée dans. Il s'agit d'une propriété qui permet de stocker une référence à un élément ou composant React spécifique, qui sera renvoyée par la fonction de configuration de rendu du composant. Une référence à un élément ou un composant spécifique renvoyé par render(). Ils sont utiles lorsque vous devez effectuer des mesures DOM ou ajouter des méthodes aux composants
- Énumérez quelques situations dans lesquelles vous devez utiliser des références
  - Lorsque vous devez gérer le focus, sélectionner la lecture de texte ou de média
  - Animations déclenchées
  - Avec un tiers ? Intégration de la bibliothèque DOM Party
14. Comment modulariser le code dans React ?
- Vous pouvez utiliser les attributs d'exportation et d'importation pour modulariser le code. Ils aident à écrire des composants séparément dans différents fichiers
15. Que sont les composants d'ordre supérieur HOC ?
- Les composants d'ordre supérieur sont une méthode avancée de réutilisation de la logique des composants et sont un modèle de composant dérivé de React. Un HOC est un composant personnalisé qui contient un autre composant en son sein. Ils peuvent accepter n'importe quelle dynamique fournie par les composants enfants, mais ne modifient ni ne copient aucun comportement dans leurs composants d'entrée. Vous pouvez considérer HOC comme un composant « pur »
16. Que pouvez-vous faire avec HOC
- HOC peut être utilisé pour de nombreuses tâches :
  - Utiliser la réutilisation de code, la logique et l'abstraction d'amorçage
  - Détournement de rendu
  - Abstraction et contrôle d'état
  - Contrôle des accessoires
17. Quelle est l'importance de la clé dans React ?
- la clé est utilisée pour identifier les éléments uniques du DOM virtuel et leurs données correspondantes qui pilotent l'interface utilisateur. Ils aident React à optimiser le rendu en recyclant tous les éléments actuellement dans le DOM. Ces clés doivent être des nombres ou des chaînes uniques, et React réorganise simplement les éléments plutôt que de les restituer. Cela peut améliorer les performances de l'application
18. Quel est le principal problème du framework MVC ?
- Les opérations clés du DOM sont très coûteuses
- Le programme s'exécute lentement et inefficace
- Gestion de mémoire importante
- En raison de la circulaire dépendances, les modèles de composants doivent être créés autour des modèles et des vues
19. Pourriez-vous s'il vous plaît expliquer Flux ?
- Flux est un modèle architectural qui force un flux de données unidirectionnel. Il contrôle les données dérivées et permet la communication entre plusieurs composants à l'aide d'un magasin central avec toutes les autorisations de données. Les mises à jour des données dans toute l’application ne doivent avoir lieu qu’ici. Flux assure la stabilité des applications et réduit les erreurs d'exécution.
20. Qu'entendez-vous par "source unique de vérité"
- Redux utilise "store" pour stocker l'intégralité de l'état du programme au même endroit. Ainsi, l’état de tous les composants est stocké dans le magasin et ils reçoivent des mises à jour du magasin lui-même. Une arborescence d'état unique facilite le suivi des modifications au fil du temps et le débogage ou l'inspection des programmes.
21. Lister les composants de Redux ?
- Redux est composé des composants suivants :
  - Action C'est un objet utilisé pour décrire ce qui s'est passé
  - Réducteur C'est un endroit qui détermine comment l'état va changer
  - Store L'arborescence état/objet de l'ensemble du programme est enregistrée dans le Store
  - La vue affiche uniquement les données fournies par le Store
22 Quelle est la signification de Store dans Redux ?
- Store est un objet JavaScript. qui peut être enregistré L'état du programme et fournit des méthodes pour accéder à l'état, planifier les opérations et enregistrer les auditeurs. L’intégralité de l’arborescence état/objet de l’application est conservée dans un seul stockage. Par conséquent, Redux est très simple et prévisible. Nous pouvons transmettre un middleware au magasin pour traiter les données et enregistrer diverses opérations qui modifient l'état du stockage. Toutes les opérations renvoient un nouvel état via le Réducteur
23 Quels sont les avantages de Redux
- Prévisibilité des résultats
- Maintenabilité
- Rendu côté serveur
- Facile à tester -
24. Routage ?
- React Routing est une puissante bibliothèque de routage construite sur React qui permet d'ajouter de nouveaux écrans et flux à l'application. Cela maintient l'URL synchronisée avec les données affichées sur la page Web. Il est responsable du maintien d’une structure et d’un comportement standardisés et est utilisé pour développer des applications Web d’une seule page. Le routage React a une API simple.
25. Parlez-moi de votre compréhension des principes de rendu de React ?
- Flux de données unidirectionnel. React est un framework MVVM. En termes simples, il divise la couche de données et la couche de vue dans la partie frontale sous le modèle MVC. Le flux de données unidirectionnel signifie que les modifications apportées à la couche de données ne peuvent affecter que les modifications apportées à la couche de vue, et non l'inverse (sauf liaison bidirectionnelle)
- Vues basées sur les données. Nous n'avons pas besoin de prêter attention au DOM de la page, nous devons seulement faire attention aux données
- Processus de rendu, cycle de vie...
- setState() est exécuté de manière asynchrone la plupart du temps pour améliorer les performances.
26. Trois façons de créer des composants dans React ?
- React.createClass(), classe ES6 et fonctions sans état.
JQuery
- Nommez quelques fonctions courantes dans jQuery et quelles sont leurs significations ?
  (1) get() obtient l'ensemble de tous les éléments DOM correspondants
  (2) get(index ) en obtient un ; des éléments correspondants. l'index indique quel élément correspondant est obtenu ;
  (3) append(content) ajoute le contenu à chaque élément correspondant
  (4) after(content) ajoute le contenu à chaque élément correspondant Ensuite, insérez le contenu ; ) html()/html(var) obtient ou définit le contenu html de l'élément correspondant ;
  (6) find(expr) recherche tous les éléments qui correspondent à l'expression spécifiée ;
  (7) bind(type ,[data], fn) Lier une fonction de gestion d'événements à l'événement spécifique de chaque élément correspondant ;
  (8) empty() supprime tous les nœuds enfants dans l'ensemble d'éléments correspondants
  (9) hover(over,out) une méthode pour imiter les événements de survol ( la souris se déplace sur et hors d'un objet) ;
  (10) attr(name) obtient la valeur d'attribut du premier élément correspondant.
【Recommandation associée :
Tutoriel jq】
- Que peut faire jQuery ?
  Récupérez les éléments de la page ; modifiez l'apparence de la page ; modifiez le contenu de la page ; répondez aux opérations de la page de l'utilisateur ; obtenez des informations du serveur sans actualiser la page ; .
- Vous pouvez ajouter un élément existant ou un nouvel élément HTML à la fin de l'élément DOM spécifié via la méthode appendTo().
- jQuery est un ensemble de bibliothèques JavaScript qui simplifient certaines des complexités liées à l'utilisation de JavaScript pour développer des effets spéciaux de pages Web, en permettant l'automatisation des tâches courantes et la simplification des tâches complexes
  - Obtenez rapidement des éléments de document
    - Fournissez de superbes effets dynamiques de page
    - Créez des pages Web Ajax non actualisées
    - Fournissez des améliorations au langage JavaScript
    - Gestion améliorée des événements
    - Modifiez le contenu de la page Web
- Avantages de JQuery
  1. Utilisez des sélecteurs CSS pour fournir un comportement de recherche d'éléments à grande vitesse. 2. Fournit une couche d'abstraction pour standardiser diverses tâches courantes et peut résoudre les problèmes de compatibilité de différents navigateurs.
  3. Simplifiez les codes complexes et fournissez un mode de programmation série, ce qui simplifie grandement le fonctionnement du code.
Démarrer avec le front-end Web
, Tutoriel vidéo jQuery)

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!

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Reactjs peut-il s'exécuter uniquement dans un nœud ?Article suivant：Reactjs peut-il s'exécuter uniquement dans un nœud ?

Articles Liés

Voir plus

Partagez quelques questions d'entretien Web frontales sélectionnées qui valent la peine d'être collectées (avec réponses)

ul – liste non ordonnée

Articles Liés