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
2. Promotion des déclarations de variables et de fonctions js
3. Fermeture
4, == et La différence entre ===
5 ceci
6 Comment parcourir les tableaux et les objets js
7. La différence entre map et forEach
13 Quelle est la différence entre attribut et propriété ?
html static<script> introduction</script>html 静态 <script> 引入</script>
js 动态插入 <script></script><script defer></script> : 异步加载，元素解析完成后执行<script async></script>js insertion dynamique<script></script>
<script defer></script> : chargement asynchrone, exécuté après l'analyse des éléments est terminée<script async></script> : chargement asynchrone, mais cela bloquera le rendu des éléments pendant l'exécution
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)
Mettez JavaScript en bas de la page
Solution : asynchrone
é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
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 ? 🎜Tous les objets ont l'attribut __proto__所有的对象都有__proto__属性
26、JS垃圾回收机制是怎样的？
1.概述
js的垃圾回收机制是为了防止内存泄漏（已经不需要的某一块内存还一直存在着），垃圾回收机制就是不停歇的寻找这些不再使用的变量，并且释放掉它所指向的内存。
在JS中，JS的执行环境会负责管理代码执行过程中使用的内存。
2.变量的生命周期
当一个变量的生命周期结束之后，它所指向的内存就会被释放。js有两种变量，局部变量和全局变量，局部变量是在他当前的函数中产生作用，当该函数结束之后，该变量内存会被释放，全局变量的话会一直存在，直到浏览器关闭为止。
3.js垃圾回收方式
有两种方式： 标记清除、引用计数
标记清除：大部分浏览器使用这种垃圾回收，当变量进入执行环境(声明变量）的时候，垃圾回收器将该变量进行了标记，当该变量离开环境的时候，将其再度标记，随之进行删除。
引用计数：这种方式常常会引起内存的泄露，主要存在于低版本的浏览器。它的机制就是跟踪某一个值得引用次数，当声明一个变量并且将一个引用类型赋值给变量得时候引用次数加1，当这个变量指向其他一个时引用次数减1，当为0时出发回收机制进行回收。
27、逐进增强和优雅降级
vue面试题
1、vue优点
文档齐全，且文档为中文文档
【相关推荐：vuejs入门教程】
2、vue父组件向子组件传递数据
3、子组件向父组件传递事件
4、v-show和v-if指令的共同点和不同点
相同点:都可以控制dom元素的显示和隐藏
不同点:v-show只是改变display属性，dom元素并未消失，切换时不需要重新渲染页面
v-if直接将dom元素从页面删除，再次切换需要重新渲染页面
5、如何让CSS只在当前组件中起作用
6、<keep-alive></keep-alive>
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
Documentation et documentation complètes Pour les documents chinois
2. Le composant parent vue transmet les données au composant enfant
3 Le composant enfant transmet les événements au composant parent
4. - Les similitudes et les différences des instructions if
5. composant actuel
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
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 ?
16. Utilisation de $nextTick
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é.
22. Quel est l'ordre d'exécution des hooks de cycle de vie des composants parents et enfants ?
parent avantCréer -> parent créé -> parent avantCréer -> enfant avantMont -> Processus de mise à jour du composant
parent beforeUpdate -> > enfant avantDestroy -> enfant détruit -> parent détruit
25. La différence entre vue et jQueryjQuery 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.
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.
shift();
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.
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.$el et les données de l'objet de données de l'instance de vue sont tous deux indéfinis et n'ont pas été initialisés. Dans la phase de création, les données de l'objet de données de l'instance vue sont disponibles, mais $el n'est pas encore disponible. $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.
.stop empêche les événements de continuer à se propager
.lazy Grâce à ce modificateur, il est converti en resynchronisation dans l'événement de changement
.enter
43. events?
<button>事件对象</button>
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// 注意：router-link中链接如果是'/'开始就是从根路由开始，如果开始不带'/'，则从当前路由开始。 <router-link> <router-link> //name,path都行, 建议用name</router-link></router-link>
<router-link> <router-link> <router-link> //传递对象 <router-link></router-link></router-link></router-link></router-link>
(2)this.$router.push()
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.id1.路由配置：
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.idTransfé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.idSauter n pages en avant ou en arrière, n peut être un entier positif ou négatif
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 和 Methods 的区别
51、过滤器 (Filter)
52、axios是什么
易用、简洁且高效的http库， 支持node端和浏览器端，支持Promise，支持拦截器等高级配置。
53、sass是什么？如何在vue中安装和使用？
sass是一种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常用指令
57、$route和$router的区别
58、怎样理解 Vue 的单项数据流
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.
60. Comment résoudre le problème de perte de données lors du rafraîchissement de la page Vuex ?
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 ?
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.
64、Vue.set 方法原理
在两种情况下修改 Vue 是不会触发视图更新的。
65、函数式组件使用场景和原理
函数式组件与普通组件的区别
优点：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>...
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.
: 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 :
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)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 ?
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
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)" >的 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)" >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-iltexte pré-formatép – paragraphe
é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é
tableau – tableauzone de texte – zone de saisie de texte multiligneul – liste non ordonnée
sup – exposant
é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
tt – texte télexu – souligné
Navigateur
Le serveur répond à la requête http et le navigateur obtient le code htmlAprès avoir établi la connexion TCP, lancez une requête http
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
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 ?
<link> 不使用 @importAspect Javascript1. Quels sont les aspects de l'optimisation des performances ?
<link rel="preload" href="http://example.com">5、DNS 预解析?
<meta http-equiv='x-dns-prefetch-control' content='on'><link rel="dns-prefetch" href="//yuchengkai.cn">6、懒执行?
懒执行就是将某些逻辑延迟到使用时再计算。该技术可以用于首屏优化，对于某些耗时逻辑并不需要在首屏就使用的，就可以使用懒执行。懒执行需要唤醒，一般可以通过定时器或者事件的调用来唤醒。
7、懒加载?
懒加载就是将不关键的资源延后加载。
懒加载的原理就是只加载自定义区域（通常是可视区域，但也可以是即将进入可视区域）内需要加载的东西。对于图片来说，先设置图片标签的 src 属性为一张占位图，将真实的图片资源放入一个自定义属性中，当进入自定义区域时，就将自定义属性替换为 src 属性，这样图片就会去下载资源，实现了图片懒加载。
懒加载不仅可以用于图片，也可以使用在别的资源上。比如进入可视区域才开始播放视频等等。
react面试题
1、什么时候使用状态管理器?
2、说说 React 有什么特点?
3、列出 React 的一些主要优点?
4、什么是 JSX?
render() {
return(
<div>
<h1> Hello World </h1>
</div>
)
}5、说说为什么浏览器无法读取 JSX?
6、你理解“在 React 中，一切都是组件”这句话?
7、 React 中 render()的目的?
<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 composant12 Quelles sont les étapes du cycle de vie du composant React ?
13. Que savez-vous des références de React ?
14. Comment modulariser le code dans React ?
15. Que sont les composants d'ordre supérieur HOC ?
16. Que pouvez-vous faire avec HOC
17. Quelle est l'importance de la clé dans React ?
18. Quel est le principal problème du framework MVC ?
19. Pourriez-vous s'il vous plaît expliquer Flux ?
20. Qu'entendez-vous par "source unique de vérité"
21. Lister les composants de Redux ?
22 Quelle est la signification de Store dans Redux ?
23 Quels sont les avantages de Redux
24. Routage ?
25. Parlez-moi de votre compréhension des principes de rendu de React ?
26. Trois façons de créer des composants dans React ?
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.
Tutoriel jq】
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 ; .
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.
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!
Les derniers prix des dix principales monnaies virtuelles
Que signifie vram ?
Comment ouvrir le fichier bak
Quelle est la priorité de l'interruption ?
html définir la taille de la couleur de la police
La valeur d'entrée Excel est illégale
Fonctions de la commande tracert
Utilisation de typedef en langage C
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
