Maison >titres >Trois années de partage d'expérience en entretien : quatre étapes et trois facteurs déterminants des entretiens front-end

Trois années de partage d'expérience en entretien : quatre étapes et trois facteurs déterminants des entretiens front-end

青灯夜游avant: 2022-12-16 15:32:333841parcourir

La situation de l'emploi cette année est tout simplement sombre. Basé sur la "mentalité de la chance" selon laquelle l'année prochaine sera pire que cette année, j'ai choisi de démissionner sans hésitation. Après un mois et demi de travail acharné, j'ai reçu une assez bonne offre. , le salaire et la plateforme ont été grandement améliorés, mais il y a encore un grand écart entre elle et mes attentes psychologiques. La plus grande conclusion est donc la suivante : ne parlez pas nu ! Ne dites rien nu ! Ne dites rien nu ! Parce que la pression exercée sur les gens lors de l'entretien et les dommages psychologiques causés par l'écart entre la réalité et les idéaux sont incommensurables, c'est un bon choix pour survivre dans un tel environnement.

Recommandations associées : Résumé des grandes questions d'entretien frontal 2023 (Collection)

Ce qui suit est un résumé des quatre étapes suivantes et des trois facteurs déterminants qui seront vécus lors des entretiens frontaux dans des circonstances normales : Trois années de partage dexpérience en entretien : quatre étapes et trois facteurs déterminants des entretiens front-end

Trois années de partage dexpérience en entretien : quatre étapes et trois facteurs déterminants des entretiens front-end

En tant que personnel frontal, la profondeur et l'étendue de la technologie sont classées en premier. Trois ans sont une ligne de démarcation à ce moment-là. Deuxièmement, de bonnes compétences en communication et en expression, des vêtements, des performances et d'autres facteurs hors site peuvent augmenter la reconnaissance de vous par l'intervieweur. Certaines personnes sont très compétentes, mais l'intervieweur se sent mal à l'aise pendant l'entretien. Il pense que vous êtes arrogant/négligé/phare/impossible de vous exprimer clairement, alors il vous rejettera simplement. C'est la plus grande perte qui l'emporte sur le gain. Ce qui suit est un résumé de toute ma préparation à l'entretien et des questions qui m'ont été posées, car pendant le processus d'entretien, la communication avec l'intervieweur n'est pas dans une large mesure une simple approbation. Il est préférable de transmettre les connaissances par la vôtre. résumez-le et exprimez-le de manière concise, puis complétez-le sur place en fonction des questions de l'intervieweur. [Apprentissage recommandé : front-end web, enseignement de la programmation]

1. Auto-présentation

L'intervieweur vous demande de vous présenter et ne limite pas la portée de l'auto-présentation. pour apprendre de votre auto-présentation Je vous connais, donc l'introduction doit être courte et fluide Face à différents intervieweurs, le contenu de l'auto-présentation peut être exactement le même, il est donc important de préparer vos mots à l'avance et d'en être sûr. faire attention : ne trébuche pas, sois confiant ! La fluidité d’expression et la capacité de communication sont également l’un des points d’évaluation des candidats par l’intervieweur. J'ai également été intervieweur. Les candidats confiants et généreux sont souvent plus susceptibles d'être favorisés. 1. Introduction personnelle (situation de base), le CV principal est disponible, cet aspect doit être court 2 Ce pour quoi vous excellez, y compris technique et non technique. Les personnes techniques peuvent comprendre votre transition, mais les personnes non techniques peuvent vous comprendre en tant que personne 3 Choisissez les projets les plus importants que vous avez réalisés, ne présentez pas tous les projets comme les approbations 4. intérêts ou opinions, ou même vos propres projets de carrière. Cela devrait donner à l'intervieweur le sentiment : aimer « lancer » ou « réfléchir »

Exemple : Bonjour l'intervieweur, je m'appelle xxx, je suis diplômé de l'université xx en xx et je suis engagé dans le développement front-end depuis l'obtention de mon diplôme. . Travail. La pile technologique dans laquelle je suis bon est le bucket de la famille vue. J'ai un certain degré de recherche sur l'utilisation et le code source de vue2 et vue3 ; je connais les outils d'empaquetage webpack et vite ; de projets moyens et grands à partir de zéro et de capacité. Dans mon entreprise précédente, j'étais principalement la personne en charge de la gamme de produits xx, et mes principales responsabilités l'étaient. . . . . . En plus des travaux liés au développement, il possède également une certaine expérience en gestion technique : comme servir de réviseur des exigences, de juge de révision des interactions UI/UE, responsable de la planification du développement, de la collaboration des membres, de la révision du code des membres, de l'organisation de réunions régulières, etc. Habituellement, j'enregistre des articles d'étude ou des notes d'étude sur le blog que j'ai créé, j'écris également des articles techniques originaux et les publie sur Nuggets, et j'ai remporté le XX Award.

En général, essayez de limiter l'auto-présentation entre 3 et 5 minutes. La première priorité est d'être concis et précis, puis de mettre en valeur vos capacités et vos points forts. Pour les intervieweurs techniques ordinaires, l'auto-présentation n'est qu'une déclaration d'ouverture habituelle avant l'entretien. Généralement, les informations de base indiquées sur le CV ont déjà satisfait à leur compréhension de base de vous. Mais pour les intervieweurs de niveau superviseur ou les RH, ils apprécieront votre personnalité, vos habitudes comportementales, votre résistance au stress et d'autres capacités globales. Par conséquent, vous devez être aussi positif que possible pendant le processus d'entretien, avoir de larges passe-temps, comme l'apprentissage continu, comme le travail d'équipe, et être capable de faire des heures supplémentaires sans condition, etc. Bien sûr, je ne veux pas vous laisser tricher, mais dans cet environnement, ces « capacités secondaires » sont aussi des armes magiques qui peuvent améliorer votre compétitivité dans une certaine mesure.

2. Project mining

Dans la situation actuelle du marché, lorsque vous recevez un avis d'entretien, il y a de fortes chances que ce soit parce que votre expérience de projet est plus adaptée au poste pour lequel vous recrutez. Par conséquent, vous devez accorder une attention particulière à la préparation du projet, par exemple :

Approfondir les techniques utilisées dans le projet
Contrôle de la conception globaleidées du projet
Gestion du projetprocessus d'exploitation
La capacité de collaboration en équipe.
Quels sont les points d'optimisation du projet

Je n'entrerai pas dans les détails ici car ils varient d'une personne à l'autre, il suffit de les découvrir en fonction de votre propre situation.

3. Personnel

Parlons d'abord de l'individu. Lorsque vous passerez l'entretien technique et atteindrez le niveau de superviseur et des RH, peu importe à quel point votre technologie actuelle est géniale, ils examineront en outre votre potentiel personnel, votre capacité d'apprentissage, personnalité et Concernant les soft skills comme l'intégration en équipe, voici quelques questions faciles à poser :

Pourquoi as-tu changé de métier ?

Partez directement du développement personnel pour montrer votre ambition :

J'ai toujours voulu aller sur une plateforme plus grande, qui non seulement a une meilleure ambiance technique, mais qui apprend aussi plus
Je veux m'élargir Dans en termes de connaissances, j'ai toujours créé des produits x-end xx auparavant. La pile technologique est relativement simple, je devrais donc apprendre de xx.
Je suis tombé dans une zone de confort dans mon emploi précédent et je ne pouvais faire que ces choses. Je souhaite changer de plateforme pour élargir mon champ d'application technique, entrer en contact et apprendre de nouveaux systèmes techniques, qui seront plus bénéfiques. à mon développement personnel ultérieur

Parlez-nous de vous et des front-ends ordinaires Quels sont vos points forts ?

1. Je suis doué pour la planification et la synthèse. Je procéderai à une analyse complète des projets que je gère. L'un est le démontage des activités, en utilisant des cartes mentales pour démonter les activités de chaque module. Solution, distinguer chaque module de code selon sa fonction. Revenez au développement. Je pense que c'est quelque chose que de nombreux front-ends qui font uniquement du développement commercial aveugle ne peuvent pas faire 2 J'aime me spécialiser dans la technologie, je continue généralement à apprendre le code source de vue, et je publie également mes propres articles techniques, comme le. celui que j'ai écrit ligne par ligne auparavant. Lisez intensivement le code source de teleport , il a fallu une trentaine d'heures pour l'écrire, et interpréter la fonction et le rôle de chaque ligne de code source (mais pourquoi la lecture et les likes sont-ils si faibles) .

Quelles sont vos lacunes ?

Je suis plus sérieux et introverti, donc je vais aussi essayer de me rendre plus extraverti. La première consiste à organiser diverses réunions de révision. En tant que représentant frontal, je dois préparer divers documents et prononcer des discours. Je fais donc plus de partage technique au sein de l'équipe et anime des réunions régulières chaque semaine, ce qui me donne aussi le courage de m'exprimer et de discuter.

Êtes-vous attentif aux nouvelles technologies récemment ?

Outil de gestion des dépendances de packages pnpm (pas d'installation répétée de dépendances, structure node_modules non plate, ajout de packages dépendants via des liens symboliques)
outil de packaging vite (environnement de développement extrêmement rapide)
flutter (Google Cadre de développement d'applications mobiles (App) lancé et open source, axé sur le multiplateforme, la haute fidélité et les hautes performances)
rust (j'ai entendu dire que c'est la future base de js)
turbopack, le successeur de webpack , a déclaré qu'il est 10 fois plus rapide que Vite, et que le webpack est 700 fois plus rapide. Ensuite, You Yuxi a personnellement vérifié qu'il n'est pas 10 fois plus rapide que Vite. Continuer à étudier ?
Mon plan personnel est le suivant : Dans 3 à 5 ans, tout en améliorant ma profondeur technique, j'élargirai également mes connaissances, c'est-à-dire que la profondeur et la largeur seront améliorées, principalement en largeur seulement lorsque vous serez pleinement. comprenez le grand front-end, pouvez-vous faire de meilleurs choix

5 à 7 ans, c'est lorsque vous avez accumulé suffisamment de connaissances, vous pouvez alors choisir une certaine direction d'intérêt pour étudier en profondeur et vous efforcer de devenir un expert dans ce domaine

Échelle de l'équipe, spécifications de l'équipe et processus de développement

Cela varie d'une personne à l'autre, alors préparez-vous simplement en conséquence, car les modèles R&D des équipes de différentes tailles sont très différents. Les objectifs de la révision du code

1. La chose la plus importante est la maintenabilité du code (nom des variables, commentaires, principe d'unité des fonctions, etc.)

2. peut être reproduit par application, évolutivité)3. Nouvelles fonctionnalités d'ES (chaîne facultative es6+, ES2020, ES2021, at)

4. Spécifications d'utilisation des fonctions (par exemple, lors de l'utilisation de la carte comme forEach)

5. utiliser des algorithmes pour écrire du code plus élégant et plus performant Comment diriger une équipe J'occupais un rôle de direction technique dans ma dernière entreprise. 0, Implémenter les spécifications de développement, j'ai publié sur le wiki interne de l'entreprise, de la dénomination, des meilleures pratiques à l'utilisation de diverses bibliothèques d'outils. Au début de l'arrivée de nouvelles personnes, je donnerai la priorité au suivi de la qualité de leur code

1 Répartition du travail en équipe

: Chaque personne est responsable seule du développement d'un produit, puis je désignerai généralement. quelques personnes pour développer des modules publics 2. Assurance qualité du code : Nous réviserons leur code chaque semaine, nous organiserons également une révision croisée du code et mettrons les articles de sortie des résultats modifiés dans le wiki 3 Organiser des réunions régulières : Organiser des réunions régulières. des réunions chaque semaine pour synchroniser leurs avancées et risques respectifs, répartir les tâches de travail en fonction de leur propre progression 4 Partage technologique : Nous organiserons également des partages technologiques occasionnels. Au début, c'était juste moi qui partageais, comme le micro système frontal, le code source d'ice stark 5, Public Demand Pool : comme la mise à niveau de webpack5/vite la mise à niveau de vue2.7 ; introduction du sucre de syntaxe de configuration ; utilisation de pnpm ; Optimisation des performances de la carte topologique 6, Projet d'optimisation : Après la sortie de la première version du produit, j'ai également lancé un projet spécial d'optimisation des performances, les performances de chargement du premier écran, l'optimisation du volume d'emballage. ; que chacun soit responsable des éléments d'optimisation correspondants

Que pensez-vous des heures supplémentaires ?

Je pense qu'il y a généralement deux situations lorsqu'on fait des heures supplémentaires : Premièrement, le calendrier du projet est serré, donc bien sûr, l'avancement du projet passe en premier, après tout, tout le monde en dépend pour gagner sa vie Deuxièmement, c'est un question de ses propres capacités, peu familier avec l'entreprise, ou introduisant une toute nouvelle pile technologique, je pense que je dois non seulement faire des heures supplémentaires pour suivre le rythme, mais aussi utiliser mon temps libre pour étudier et combler mes lacunes

Quels sont vos passe-temps ?

J'aime généralement lire, c'est-à-dire que je lis des livres sur la psychologie, la gestion du temps et certaines compétences orales en lecture sur WeChat Ensuite, j'écris des articles, car je trouve qu'il est facile d'oublier de simplement prendre des notes. J'enregistre uniquement le contenu des autres et j'écris mes propres articles originaux. Ce faisant, je peux convertir une très grande partie de mes connaissances en mes propres contenus. Par conséquent, en plus de mes propres articles sur les mines d'or, j'ai souvent aussi des opinions sur le sujet. sortie du projet. L'article est exporté vers le wiki D'autres passe-temps sont jouer au basket et chanter avec des amis

4. Technologie

Assurez-vous de prêter attention aux entretiens techniques : Soyez concis et précis, soyez détaillé de manière appropriée, et si vous ne comprenez pas, dites simplement que vous ne comprenez pas. Étant donné que le processus d'entretien est un processus de communication en face à face avec l'intervieweur, aucun intervieweur n'aimerait qu'un candidat bavarde longtemps sans parler des points clés. En même temps, pendant le processus de parole, l'auditeur sera passif. ignorez les parties qui ne l'intéressent pas, il est donc nécessaire de mettre en évidence les caractéristiques essentielles d'une certaine technologie et de développer de manière appropriée autour de ce noyau. Les grandes entreprises sélectionneront essentiellement les candidats à l'aide de questions algorithmiques. Il n'y a pas de raccourcis vers les algorithmes. Vous ne pouvez répondre aux questions que étape par étape, puis répondre à nouveau aux questions. Ceux qui sont faibles dans cet aspect doivent planifier à l'avance et étudier. Le processus d'entretien technique posera principalement des questions sur les technologies liées au domaine front-end. Généralement, l'intervieweur se basera sur votre établissement, et le plus souvent, l'intervieweur se basera sur les questions d'entretien qu'il a préparées auparavant, ou. la technologie que l'équipe du projet connaît. Cliquez pour poser des questions, car elles sont toutes inconnues, donc tous les aspects sont assez exigeants. Si vous souhaitez entrer dans une entreprise de taille moyenne à grande avec de bonnes perspectives de développement, vous ne pouvez pas vous tromper en mémorisant simplement l'expérience des autres. Bien que chaque résumé ici soit très bref, c'est ma compréhension de chacun. les points sont quelques-uns des points de connaissances de base extraits après une étude approfondie, vous n'avez donc pas peur de la « pensée divergente » de l'intervieweur. Le processus d'entretien implique généralement la prise en compte des huit grands types de connaissances suivants : JS/CSS/TypeScript/Framework (Vue, React)/Navigateur et réseau/Optimisation des performances/Ingénierie front-end/Architecture/Autres Trois années de partage dexpérience en entretien : quatre étapes et trois facteurs déterminants des entretiens front-end

Par conséquent, la préparation technique avant l'entretien ne se fait en aucun cas du jour au lendemain. Elle nécessite également une accumulation quotidienne. Par exemple, vous pouvez consacrer dix à vingt minutes par jour à l'étude approfondie d'un des petits points de connaissance. peu importe le nombre d'années d'entretiens, il suffira de parler avec éloquence.

Chapitre JS

Le livre d'enveloppe rouge du Stud d'apprentissage JS et le Blog approfondi de la série JS de M. Yu YuC'est fondamentalement ok Les questions courantes d'entretien JS incluent généralement celles-ci Trois années de partage dexpérience en entretien : quatre étapes et trois facteurs déterminants des entretiens front-end

Qu'est-ce qu'un prototype/ Chaîne prototype ?

L'essence d'un prototype est un objet. Lorsque nous créons un constructeur, cette fonction aura un attribut prototype par défaut, et la valeur de cet attribut pointe vers l'objet prototype de cette fonction. Cet objet prototype est utilisé pour fournir des attributs partagés pour les objets d'instance créés via le constructeur, c'est-à-dire que est utilisé pour implémenter l'héritage basé sur un prototype et le partage d'attributs Ainsi, les objets d'instance que nous créons via le constructeur le seront be from L'objet prototype de cette fonction hérite des propriétés ci-dessus Lors de la lecture des attributs de l'instance, si elle est introuvable, elle recherchera les attributs dans le prototype associé à l'objet. S'elle ne peut pas être trouvée, elle recherchera le prototype du prototype jusqu'à ce qu'elle atteigne le niveau supérieur. (le niveau supérieur est Prototype of Object.prototype, la valeur est nulle). Object.prototype的原型，值为null）。所以通过原型一层层相互关联的链状结构就称为原型链。

什么是闭包？

定义：闭包是指引用了其他函数作用域中变量的函数，通常是在嵌套函数中实现的。从技术角度上所有 js 函数都是闭包。从实践角度来看，满足以下俩个条件的函数算闭包

即使创建它的上下文被销毁了，它依然存在。（比如从父函数中返回）
在代码中引用了自由变量（在函数中使用的既不是函数参数也不是函数局部变量的变量称作自由变量）

使用场景：

创建私有变量 vue 中的data，需要是一个闭包，保证每个data中数据唯一，避免多次引用该组件造成的data共享
延长变量的生命周期一般函数的词法环境在函数返回后就被销毁，但是闭包会保存对创建时所在词法环境的引用，即便创建时所在的执行上下文被销毁，但创建时所在词法环境依然存在，以达到延长变量的生命周期的目的

应用

柯里化函数
例如计数器、延迟调用、回调函数等

this 的指向

在绝大多数情况下，函数的调用方式决定了 this 的值（运行时绑定） 1、全局的this非严格模式指向window对象，严格模式指向 undefined 2、对象的属性方法中的this 指向对象本身 3、apply、call、bind 可以变更 this 指向为第一个传参 4、箭头函数中的this指向它的父级作用域，它自身不存在 this

浏览器的事件循环？

js 代码执行过程中，会创建对应的执行上下文并压入执行上下文栈中。如果遇到异步任务就会将任务挂起，交给其他线程去处理异步任务，当异步任务处理完后，会将回调结果加入事件队列中。当执行栈中所有任务执行完毕后，就是主线程处于闲置状态时，才会从事件队列中取出排在首位的事件回调结果，并把这个回调加入执行栈中然后执行其中的代码，如此反复，这个过程就被称为事件循环。事件队列分为了宏任务队列和微任务队列，在当前执行栈为空时，主线程回先查看微任务队列是否有事件存在，存在则依次执行微任务队列中的事件回调，直至微任务队列为空；不存在再去宏任务队列中处理。 常见的宏任务有setTimeout()、setInterval()、setImmediate()、I/O、用户交互操作，UI渲染 常见的微任务有promise.then()、promise.catch()、new MutationObserver、process.nextTick()Donc La structure de chaîne qui est interconnectée couche par couche à travers des prototypes est appelée une chaîne de prototypes.

Qu'est-ce qu'une fermeture ?

Définition : La fermeture fait référence à une fonction qui fait référence à des variables dans le cadre d'autres fonctions, généralement implémentées dans des fonctions imbriquées.

Techniquement, toutes les fonctions js sont des fermetures. D'un point de vue pratique, une fonction qui remplit les deux conditions suivantes est considérée comme une fermeture

Même si le contexte qui l'a créée est détruit, elle existe toujours. (Par exemple, retour de la fonction parent)

Les variables libres sont référencées dans le code (les variables utilisées dans la fonction qui ne sont ni des paramètres de fonction ni des variables locales de fonction sont appelées variables libres) Scénarios d'utilisation :

Créer des variables privées

les données dans vue doivent être une fermeture pour garantir que les données de chaque donnée sont uniques et éviter le partage de données causé par de multiples références au composant Prolonger le cycle de vie des variables 🎜Généralement, l'environnement lexical d'une fonction est détruit après le retour de la fonction, mais la fermeture conservera une référence à l'environnement lexical où elle a été créée. Même si le contexte d'exécution où elle a été créée est détruit, l'environnement lexical où elle a été créée. a été créé existe toujours pour réaliser l'extension. Le but du cycle de vie des variables🎜🎜🎜🎜🎜application🎜🎜

🎜this Pointant vers 🎜🎜🎜Dans la plupart des cas, la méthode d'appel de la fonction détermine la valeur de `this` (liaison d'exécution) 🎜🎜1 Le global this non-. Le mode strict pointe vers l'objet fenêtre, et le mode strict pointe vers l'objet fenêtre non défini🎜🎜2 Ceci dans la méthode d'attribut de l'objet pointe vers l'objet lui-même🎜🎜3. Appliquer, appeler et lier peut modifier cela pour pointer vers l'objet fenêtre. premier paramètre passé🎜🎜4. Ceci dans la fonction flèche pointe vers sa portée parent, qui elle-même n'existe pas this🎜

🎜La boucle d'événements du navigateur ? 🎜🎜🎜Lors de l'exécution du code js, le contexte d'exécution correspondant sera créé et poussé dans la pile de contexte d'exécution. 🎜🎜Si une tâche asynchrone est rencontrée, la tâche sera suspendue et transmise à d'autres threads pour traiter la tâche asynchrone. Lorsque la tâche asynchrone est traitée, le résultat du rappel sera ajouté à la file d'attente des événements. 🎜🎜Lorsque toutes les tâches de la pile d'exécution ont été exécutées, c'est-à-dire lorsque le thread principal est inactif, le résultat du rappel d'événement classé en premier sera retiré de la file d'attente des événements, et ce rappel sera ajouté à la pile d'exécution, puis le code qu'il contient sera exécuté, donc à plusieurs reprises, ce processus est appelé une boucle d'événements. 🎜🎜La file d'attente des événements est divisée en 🎜file d'attente des tâches macro🎜 et file d'attente des micro-tâches. Lorsque la pile d'exécution actuelle est vide, le thread principal vérifie d'abord s'il y a un événement dans la file d'attente des micro-tâches. les rappels d'événements dans la file d'attente des microtâches seront exécutés en séquence jusqu'à ce que la file d'attente des microtâches soit vide ; si elle n'existe pas, elle sera traitée dans la file d'attente des macrotâches. 🎜🎜🎜Les tâches de macro courantes incluent 🎜`setTimeout()`, `setInterval()`, `setImmediate()`, E/S, opérations d'interaction utilisateur, interface utilisateur rendu🎜🎜🎜Les microtâches courantes incluent🎜`promise.then()`, `promise.catch()`, `new MutationObserver`, `process.nextTick ()`🎜🎜🎜La différence essentielle entre les macro-tâches et les micro-tâches🎜🎜🎜🎜🎜Les macro-tâches ont des tâches asynchrones claires qui doivent être exécutées et des rappels, et nécessitent la prise en charge d'autres threads asynchrones🎜🎜🎜🎜Micro-tâches ne sont pas clairs. Les tâches asynchrones doivent être exécutées, seuls les rappels sont requis et aucune autre prise en charge de threads asynchrones n'est requise. 🎜🎜🎜🎜🎜Comment les données sont stockées dans la pile et le tas en JavaScript🎜🎜🎜1 Les types de données de base sont de taille fixe et faciles à utiliser, ils sont donc stockés dans la pile🎜🎜2. Les types de données sont incertains, ils sont donc stockés dans la pile et laissez-les déterminer leur taille lors de la demande de mémoire🎜🎜3. Un stockage séparé de cette manière peut minimiser l'utilisation de la mémoire. L'efficacité de la pile est supérieure à celle du tas🎜🎜4. Les variables dans la mémoire de la pile seront récupérées immédiatement après la fin de l'environnement d'exécution, tandis que toutes les références aux variables dans la mémoire du tas doivent être terminées avant de le faire. être recyclé🎜🎜🎜Parlons du garbage collection v8🎜🎜 🎜1. Effectuez le garbage collection en différentes générations en fonction de la durée de survie de l'objet, puis utilisez différents algorithmes de recyclage pour différentes générations 🎜🎜2. utilise l'algorithme de récupération de l'espace pour le temps : l'espace entier est divisé en deux blocs. Les variables n'existent que dans l'un d'eux. Lors du recyclage, les variables survivantes sont copiées dans un autre espace, et les variables non survivantes sont recyclées. est répété encore et encore🎜🎜3. L'ancienne génération utilise l'effacement des marques et le tri des marques : parcourez tous les objets et la marque est accessible (en direct), puis ceux qui ne sont pas en direct sont recyclés comme déchets. Après le recyclage, pour éviter la discontinuité de la mémoire, les objets vivants doivent être déplacés vers une extrémité de la mémoire par marquage et tri, puis nettoyer la mémoire limite une fois le mouvement terminé🎜

Méthodes d'appel de fonction

fonction

()

fonction test(x, y) { return x + y}

test(3, 4)

function

()

function test(x, y) { return x + y}

test(3, 4)

const obj = { test: function (val) { return val } }

obj.test(2)

call

apply

new

defer和async的区别

下载阶段

浏览器事件机制

捕获阶段：事件最开始由不太具体的节点最早接受事件, 而最具体的节点（触发节点）最后接受事件。为了让事件到达最终目标之前拦截事件。比如点击一个div，则 click 事件会按这种顺序触发: document => => => <div>，即由 document 捕获后沿着 DOM 树依次向下传播，并在各节点上触发捕获事件，直到到达实际目标元素。<li> 目标阶段 当事件到达目标节点的，事件就进入了目标阶段。事件在目标节点上被触发(执行事件对应的函数)，然后会逆向回流，直到传播至最外层的文档节点。 </li> <li> 冒泡阶段 事件在目标元素上触发后，会继续随着 DOM 树一层层往上冒泡，直到到达最外层的根节点。 </li> 所有事件都要经历捕获阶段和目标阶段，但有些事件会跳过冒泡阶段，比如元素获得焦点 focus 和失去焦点 blur 不会冒泡 扩展一 e.target 和 e.currentTarget 区别？ <ul> <li> <code>e.target 指向触发事件监听的对象。
e.currentTarget 指向添加监听事件的对象。

<ul>
  <li><span>hello 1</span></li>
</ul>

let ul = document.querySelectorAll(&#39;ul&#39;)[0]
let aLi = document.querySelectorAll(&#39;li&#39;)
ul.addEventListener(&#39;click&#39;,function(e){
  let oLi1 = e.target  
  let oLi2 = e.currentTarget
  console.log(oLi1)   //  被点击的li
  console.log(oLi2)   // ul
  console.og(oLi1===oLi2)  // false
})

e.currenttarget

e.target

e.currenttarget

e.target

事件委托

扩展二

addEventListener(type, listener);
addEventListener(type, listener, options || useCapture);

type: 监听事件的类型，如：'click'/'scroll'/'focus'
listener: 必须是一个实现了 EventListener 接口的对象，或者是一个函数。当监听的事件类型被触发时，会执行
options：指定 listerner 有关的可选参数对象
- capture: 布尔值，表示 listener 是否在事件捕获阶段传播到 EventTarget 时触发
- once：布尔值，表示 listener 添加之后最多调用一次，为 true 则 listener 在执行一次后会移除
- passive: 布尔值，表示 listener 永远不会调用 preventDefault()
- signal：可选，AbortSignal，当它的abort()

call

apply

4 new peut indirectement appeler le constructeur pour générer une instance d'objet

🎜La différence entre defer et async🎜🎜🎜 Dans des circonstances normales, lorsque la balise de script est exécutée, elle téléchargera + exécutera des opérations en deux étapes. Ces deux étapes bloqueront l'analyse du HTML ; 🎜🎜async et defer peuvent transformer la 🎜phase de téléchargement🎜 du script en exécution asynchrone (synchronisée avec l'analyse HTML) ; 🎜🎜async exécutera js immédiatement après la fin du téléchargement, ce qui bloquera l'analyse HTML 🎜🎜defer attendra que toute l'analyse HTML soit terminée ; terminé et exécuté avant l’événement DOMContentLoaded. 🎜

🎜Mécanisme d'événements du navigateur🎜🎜🎜Flux d'événements DOM en trois étapes : 🎜

, c'est-à-dire qu'il est capturé par le document puis propagé vers le bas le long de l'arborescence DOM, 🎜 et déclenche des événements de capture sur chaque nœud 🎜 jusqu'à ce qu'il atteigne l'élément cible réel. . 🎜🎜🎜🎜🎜Phase cible🎜🎜🎜Lorsque l'événement atteint le nœud cible, l'événement entre dans la phase cible. 🎜L'événement est déclenché sur le nœud cible🎜 (exécutant la fonction correspondant à l'événement), puis revient en sens inverse jusqu'à ce qu'il se propage vers le nœud de document le plus externe. 🎜🎜🎜🎜🎜Phase de bouillonnement🎜🎜🎜Une fois l'événement déclenché sur l'élément cible, il continuera à bouillonner couche par couche le long de l'arborescence DOM jusqu'à ce qu'il atteigne le nœud racine le plus externe. 🎜🎜🎜🎜Tous les événements doivent passer par la phase de capture et la phase de cible, mais certains événements sauteront la phase de bouillonnement, comme l'élément qui gagne et perd la concentration, le flou ne bouillonnera pas 🎜🎜🎜Extended 🎜🎜🎜e. différence entre target et e.currentTarget ? 🎜

e.target

e.currentTarget

// 比如
<input v-model="sth" />
// 等价于
<input :value="sth" @input="sth = $event.target.value" />

e.target

e.currenttarget

e.target

Délégation d'événement

// 父组件
<my-button v-model="number"></my-button>

// 子组件
<script>
export default {
  props: {
    value: Number, //  属性名必须是 value
  },

  methods: {
    add() {
      this.$emit(&#39;input&#39;, this.value + 1) // 事件名必须是 input
    },
  }
}
</script>

EventListener

preventDefault()

AbortSignal

abort()

Article Vue

La différence entre vue et réagir

React prône la programmation fonctionnelle, les données immuables et le flux de données unidirectionnel, qui ne peuvent être transmis que via setState. ou onchange pour implémenter les mises à jour de la vuesetState或者onchange来实现视图更新
Vue 基于数据可变，设计了响应式数据，通过监听数据的变化自动更新视图

React 推荐使用 jsx + inline style的形式，就是 all in js
Vue 是单文件组件（SFC）形式，在一个组件内分模块(tmplate/script/style)，当然vue也支持jsx形式，可以在开发vue的ui组件库时使用

Vue2采用双端比较，Vue3采用快速比较
react主要使用diff队列保存需要更新哪些DOM，得到patch树，再统一操作批量更新DOM。，需要使用shouldComponentUpdate()来手动优化react的渲染。

扩展：了解 react hooks吗

React Hooks 的设计目的，就是加强版函数组件，完全不使用"类"，就能写出一个全功能的组件

React Hooks 的意思是，组件尽量写成纯函数，如果需要外部功能和副作用，就用钩子把外部代码"钩"进来。

vue组件通信方式

props / $emit
ref / $refs
$parent /$ root
attrs / listeners
eventBus / vuex / pinia / localStorage / sessionStorage / Cookie / window
provide / inject

vue 渲染列表为什么要加key?

Vue 在处理更新同类型 vnode 的一组子节点（比如v-for渲染的列表节点）的过程中，为了减少 DOM 频繁创建和销毁的性能开销：

对没有 key 的子节点数组更新是通过就地更新的策略。它会通过对比新旧子节点数组的长度，先以比较短的那部分长度为基准，将新子节点的那一部分直接 patch 上去。然后再判断，如果是新子节点数组的长度更长，就直接将新子节点数组剩余部分挂载；如果是新子节点数组更短，就把旧子节点多出来的那部分给卸载掉）。所以如果子节点是组件或者有状态的 DOM 元素，原有的状态会保留，就会出现渲染不正确的问题。

有 key 的子节点更新是调用的patchKeyedChildrenVue conçoit des données réactives en fonction de la variabilité des données et met automatiquement à jour la vue en surveillant les modifications des données

2. Méthode d'écriture

react

shouldComponentUpdate()

🎜méthode de communication des composants vue🎜🎜🎜🎜props / $emit🎜🎜ref / $refs🎜🎜

parent /

Le module ES6 est une référence, la réaffectation provoquera une erreur de compilation, ne peut pas Modifiez le pointeur de sa variable, mais vous pouvez changer la valeur de la propriété interne ;
Les valeurs du module ES6 sont des références dynamiques en lecture seule.
En lecture seule, c'est-à-dire que la valeur de la variable importée ne peut pas être modifiée. La variable importée est en lecture seule, qu'il s'agisse d'un type de données de base ou d'un type de données complexe. Lorsqu'un module rencontre une commande d'importation, une référence en lecture seule est générée. Lorsque le script est réellement exécuté, la valeur sera récupérée du module chargé en fonction de cette référence en lecture seule.
Pour les dynamiques, lorsque la valeur d'origine change, la valeur chargée par import changera également. Qu'il s'agisse d'un type de données de base ou d'un type de données complexe.
Lors d'un chargement en boucle, les modules ES6 sont référencés dynamiquement. Tant qu'une référence existe entre les deux modules, le code pourra s'exécuter.

CommonJS

Le module CommonJS est une copie (copie superficielle), qui peut être réaffectée et le pointeur pointé vers ;
Pour les types de données de base ; , il appartient à la copie. Autrement dit, il sera mis en cache par le module. Parallèlement, les variables sorties par ce module peuvent être réaffectées dans un autre module.
Pour les types de données complexes, il s'agit d'une copie superficielle. Puisque les objets référencés par les deux modules pointent vers le même espace mémoire, les modifications de la valeur du module affecteront l'autre module. Lorsqu'un module est chargé à l'aide de la commande require, l'intégralité du code du module sera exécuté.
Lorsque la commande require est utilisée pour charger le même module, le module ne sera pas exécuté à nouveau, mais la valeur dans le cache sera obtenue. En d'autres termes, quel que soit le nombre de chargements du module CommonJS, il ne s'exécutera qu'une seule fois lors de son premier chargement. S'il est chargé ultérieurement, le résultat de la première exécution sera renvoyé, sauf si le cache système est chargé. effacé manuellement.
Lors d'un chargement en boucle, tous les codes de script seront exécutés lorsque nécessaire. Une fois qu'un module est "chargé en boucle", seule la partie exécutée sera sortie, et la partie non exécutée ne sera pas sortie.

Modèles de conception

Mode Agent

Mode Agent : Fournir un substitut ou un espace réservé pour l'objet pour en contrôler l'accès

loading

img

Mode Décorateur

Autres

Expressions régulières

Quel type de données est une expression régulière ?

est un objet, let re = /ab+c/ est équivalent à let re = new RegExp('ab+c')let re = /ab+c/等价于let re = new RegExp('ab+c')

正则贪婪模式和非贪婪模式？

量词

*：0或多次； ?：0或1次； +：1到多次； {m}：出现m次； {m,}：出现至少m次； {m, n}：出现m到n次

贪婪模式

正则中，表示次数的量词默认是贪婪的，会尽可能匹配最大长度，比如a*会从第一个匹配到a的时候向后匹配尽可能多的a，直到没有a为止。

非贪婪模式

在量词后面加?就能变成非贪婪模式，非贪婪即找出长度最小且满足条件的

贪婪& 非贪婪特点

贪婪模式和非贪婪模式，都需要发生回溯才能完成相应的功能

独占模式

独占模式和贪婪模式很像，独占模式会尽可能多地去匹配，如果匹配失败就结束，不会进行回溯，这样的话就比较节省时间。

写法：量词后面使用+

优缺点：独占模式性能好，可以减少匹配的时间和 cpu 资源；但是某些情况下匹配不到，比如：

	正则	文本	结果
贪婪模式	a{1,3}ab	aaab	匹配
非贪婪模式	a{1,3}?ab	aaab	匹配
独占模式	a{1,3}+ab	aaab	不匹配

a{1,3}+ab 去匹配 aaab 字符串，a{1,3}+ 会把前面三个 a 都用掉，并且不会回溯

常见正则匹配

*

?

{m}

{m,}

{m, n}

操作符	说明	实例
.	表示任何单个字符
[ ]	字符集，对单个字符给出范围	`[abc]`表示 a、b、c,[a-z]表示 a-z 的单个字符
[^ ]	非字符集，对单个字符给出排除范围	`[^abc]`表示非a或b或c的单个字符
_	前一个字符零次或无限次扩展	`abc_`表示 ab、abc、abcc、abccc 等
`	`	左右表达式的任意一个	`abc	def`表示 abc、def
$	匹配字符串结尾	`abc$`表示 abc 且在一个字符串结尾
( )	分组标记内部只能使用	`(abc)`表示 abc,`(abc	def)`表示 abc、def
D	非数字
d	数字，等价于0-9
S	可见字符
s	空白字符(空格、换行、制表符等等)
W	非单词字符
w	单词字符，等价于[a-z0-9A-Z_]
w	匹配字符串开头	`^abc`表示 abc 且在一个字符串的开头
{m,n}	扩展前一个字符 m 到 n 次	`ab{1,2}c`表示 abc、abbc
{m}	扩展前一个字符 m 次	`ab{2}c`表示 abbc
{m,}	匹配前一个字符至少m 次
？	前一个字符 0 次或 1 次扩展	`abc?`	mode gourmand régulier et mode non gourmand ?	Quantifier

a*

?

+

🎜	Régulier	Texte	Résultat

[abc]

[^abc]

abc_

abc$ code> signifie abc et à la fin d'une chaîne 🎜🎜🎜🎜🎜🎜🎜🎜<tr>🎜( )🎜🎜 ne peut être utilisé qu'à l'intérieur la balise de regroupement 🎜🎜<code>(abc)

^abc

ab{1,2}c

ab{2}c

abc?

单元测试

概念：前端自动化测试领域的，用来验证独立的代码片段能否正常工作

1、可以直接用 Node 中自带的 assert 模块做断言：如果当前程序的某种状态符合 assert 的期望此程序才能正常执行，否则直接退出应用。

function multiple(a, b) {
    let result = 0;
    for (let i = 0; i < b; ++i)
        result += a;
    return result;
}

const assert = require(&#39;assert&#39;);
assert.equal(multiple(1, 2), 3));

2、常见单测工具：Jest，使用示例

const sum = require(&#39;./sum&#39;);

describe(&#39;sum function test&#39;, () => {
  it(&#39;sum(1, 2) === 3&#39;, () => {
    expect(sum(1, 2)).toBe(3);
  });
  
  // 这里 test 和 it 没有明显区别，it 是指: it should xxx, test 是指 test xxx
  test(&#39;sum(1, 2) === 3&#39;, () => {
    expect(sum(1, 2)).toBe(3);
  });
})

babel原理和用途

babel 用途

转义 esnext、typescript 到目标环境支持 js （高级语言到到低级语言叫编译，高级语言到高级语言叫转译）
代码转换（taro）
代码分析（模块分析、tree-shaking、linter 等）

bebel 如何转换的？

对源码字符串 parse 生成 AST，然后对 AST 进行增删改，然后输出目标代码字符串

转换过程

parse 阶段：首先使用 @babel/parser将源码转换成 AST
transform 阶段：接着使用@babel/traverse遍历 AST，并调用 visitor 函数修改 AST，修改过程中通过@babel/types来创建、判断 AST 节点；使用@babel/template来批量创建 AST
generate 阶段：使用@babel/generate将 AST 打印为目标代码字符串，期间遇到代码错误位置时会用到@babel/code-frame

Trois années de partage dexpérience en entretien : quatre étapes et trois facteurs déterminants des entretiens front-end

好的，以上就是我对三年前端经验通过面试题做的一个总结了，祝大家早日找到心仪的工作~

【推荐学习：web前端开发、编程基础视频教程】

Opérateur	Description	Instance	🎜	🎜
w 🎜🎜Caractères de mots, etc. Au prix de [a-z0-9A-Z_]🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜

Déclaration：

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

Trois années de partage d'expérience en entretien : quatre étapes et trois facteurs déterminants des entretiens front-end

1. Auto-présentation

2. Project mining

3. Personnel

Pourquoi as-tu changé de métier ?

Parlez-nous de vous et des front-ends ordinaires Quels sont vos points forts ?

Quelles sont vos lacunes ?

Êtes-vous attentif aux nouvelles technologies récemment ?

Échelle de l'équipe, spécifications de l'équipe et processus de développement

1. La chose la plus importante est la maintenabilité du code (nom des variables, commentaires, principe d'unité des fonctions, etc.)

4. Spécifications d'utilisation des fonctions (par exemple, lors de l'utilisation de la carte comme forEach)

1 Répartition du travail en équipe

Que pensez-vous des heures supplémentaires ?

Quels sont vos passe-temps ?

4. Technologie

Chapitre JS

Qu'est-ce qu'un prototype/ Chaîne prototype ?

什么是闭包？

this 的指向

浏览器的事件循环？

Même si le contexte qui l'a créée est détruit, elle existe toujours. (Par exemple, retour de la fonction parent)

Créer des variables privées

Méthodes d'appel de fonction

defer和async的区别

浏览器事件机制

Article Vue

La différence entre vue et réagir

vue组件通信方式

vue 渲染列表为什么要加key?

vue3 相对 vue2的响应式优化

Vue 核心diff流程

vue双向绑定原理

v-model 原理

vue 响应式原理

computed 和 watch

$nextTick 原理？

Vue 异常处理

Vuex 流程 & 原理

Vue.use函数里面具体做了哪些事

怎么编写一个vue插件

CSS篇

什么是 BFC

伪类和伪元素及使用场景

src 和 href 区别

不定宽高元素的水平垂直居中

浏览器和网络篇

跨页面通信的方法？

详细说说 HTTP 缓存

L'ensemble du processus de saisie de l'URL à l'affichage de la page

La différence entre TCP et UDP

La différence entre TCP et UDP

Content-length 了解吗？

跨域常用方案

websocket

Différence entre Post et Get

Optimisation des performances

Quelles sont les méthodes d'optimisation des performances

如何减少回流、重绘，充分利用 GPU 加速渲染？

大图片优化的方案

代码优化

Ingénierie front-end

Processus d'exécution et cycle de vie de webpack

le plugin et le chargeur de webpack

Stratégie de hachage de Webpack

Principe de Vite

Comparaison entre webpack et vite

Quelles optimisations de webpack avez-vous effectuées ? 0. Mettez à niveau la version du webpack, 3 litres 4, le test réel consiste à augmenter la vitesse d'empaquetage de plusieurs dizaines de secondes .

processus d'exécution d'exécution npm

ESM和CJS 的区别

设计模式篇

代理模式

2 Il existe également une situation où la simple exécution d'une commande de script, telle que npm run build, exécute en fait node build.js, c'est-à-dire en utilisant node Execute the. build.js file

CommonJS

Mode Agent : Fournir un substitut ou un espace réservé pour l'objet pour en contrôler l'accès

Autres

Expressions régulières

单元测试

babel原理和用途

Articles Liés