En fait, il y a dix ans, le développement front-end dans l'industrie ne valait pas la peine d'être ingénieur, car beaucoup de gens pensaient que le travail de développement front-end était très simple. Il suffit d'écrire un style, et le concepteur a fait le travail en la manière. Par conséquent, le développement front-end était dans l'esprit des programmeurs. le statut est très faible .
Cependant, avec le développement de l'Internet mobile, avec la combinaison du front-end et du mobile, le concept de big front-end a vu le jour. Dans le même temps, le front-end fait face à des tâches de plus en plus compliquées, surtout aujourd'hui lorsque le front-end et le back-end sont séparés.Pour gérer le développement de l'interface, cela implique également le traitement d'une logique métier complexe, et les exigences pour le développement front-end sont de plus en plus élevées.
En passant, je veux rectifier le nom de l'ingénieur front-end: la charge de travail de l'ingénieur front-end est plus grande que celle du back-end. Il ne doit pas seulement s'occuper de l'interface front-end et de la conception, et la sélectivité du chef de produit, mais aussi avec l'ingénieur back-end pour déterminer le format et l'interface des données interactives. Ce qui est plus important, c'est l'adaptation des interfaces de navigateur front-end. Le grand front-end conduit à s'adapter au travail du terminal mobile. Par rapport au cycle de vie stable, complet et long de l'écologie back-end, le front- Le cycle de vie du cadre et de la technologie est plus court. Cela signifie que les ingénieurs front-end doivent continuellement apprendre et mettre à jour leurs connaissances, ce qui met de plus en plus de pression sur les ingénieurs front-end.
Par conséquent, être un frontal est très puissant.
Alors, quel niveau d'apprentissage frontal peut aller pour trouver un emploi? Je partage une feuille de route d'apprentissage frontale comme suit:
J'ai trois étapes ici:
La première étape: étape d'apprentissage de base
En fait, il y a beaucoup de choses à apprendre sur le front-end. Nous devons apprendre le langage de développement du front-end, qui est utilisé pour traiter la logique métier: JavaScript, le langage de balisage HTML pour dessiner l'interface, et CSS pour embellir l'interface. C'est ce qu'il faut apprendre lors de la première étape de base.
Je pense que l'apprentissage le plus important dans la première étape est: JavaScript et CSS.Je ne dis pas que HTML n'est pas important, c'est très important, mais comparé à JS et CSS, HTML est en fait relativement simple en tant que langage de balisage. JS peut vous aider à gérer une logique métier complexe. CSS peut améliorer les performances de l'embellissement de l'interface. En bref, JS et CSS seront d'une grande aide dans le traitement de l'optimisation des performances à un stade ultérieur. Par conséquent, l'étape de base de l'apprentissage de ces deux éléments il faut prêter attention aux choses.
La deuxième étape: stade de combat réel intermédiaire
Si vous maîtrisez cette étape de l'apprentissage, vous pouvez en fait sortir pour trouver un emploi.
Les connaissances à maîtriser sont un cours d'amélioration de base, HTML5 + CSS3 et ES6 + TypeScript, il faut les comprendre, TS est la tendance, ici H5, CSS3, ES6, TS est la version améliorée de l'étape d'apprentissage de base, ceux-ci nécessitent que vous appreniez en même temps, si vous pouvez atteindre le niveau de recherche d'emploi, vous devez également utiliser l'un des frameworks: Vue, React, Angular, l'un de ces trois frameworks grand public.
En fait, les points de connaissance traditionnels liés à JQuery et DOM doivent également être compris, bien qu'ils ne soient pas beaucoup utilisés maintenant.
Bien sûr, relativement parlant, ces trois frameworks, Vue, sont développés par les chinois, et les documents sont en chinois, les chinois apprennent plus vite et le niveau d'entrée est relativement bas. Par conséquent, de nombreuses personnes apprendront Vue, et de nombreuses entreprises utilisent le framework frontal Vue en Chine.
Si vous réussissez l'étape d'apprentissage de base précédente, vous pouvez utiliser JS, CSS, H5 avec compétence et en même temps maîtriser un cadre de développement, vous atteindrez le niveau où vous pouvez trouver un emploi dans le front-end.
Bien sûr, ce n'est que pour atteindre le niveau de la recherche d'emploi.Si vous voulez avoir un meilleur développement dans le front-end, vous devez aller plus loin.
La troisième étape: stade avancé avancé
Pour développer davantage le front-end, vous devez apprendre les principes du fonctionnement interne du navigateur, maîtriser certains modèles de conception couramment utilisés et réaliser l'ingénierie frontale, c'est-à-dire: la modularisation du code, la composante fonctionnelle, le packaging, la construction et la version. automatisation, orientée processus.
C'est très important en termes d'optimisation des performances, et les connaissances de base de l'optimisation des performances du site Web, du référencement et du côté serveur doivent également être maîtrisées. Y compris la maintenabilité du code, la facilité d'utilisation des composants, les modèles sémantiques hiérarchiques et la prise en charge hiérarchique du navigateur.
Ces fonctions avancées doivent être maîtrisées, afin que les connaissances soient maîtrisées, afin que vous puissiez écrire une page haute efficacité et haute performance, ce qui est la poursuite de nos ingénieurs de développement front-end.
Pensez-vous qu'il y a beaucoup de connaissances impliquées dans ces trois étapes? Ces trois étapes ne sont pas seulement un parcours d'apprentissage pour les ingénieurs front-end, mais aussi un processus évolutif et avancé. Notre apprentissage frontal deviendra de plus en plus élevé à l'avenir, et les compétences et exigences requises deviendront de plus en plus complexes. La chose la plus importante pour l'apprentissage frontal est d'apprendre systématiquement selon la feuille de route.
Ce n'est pas aussi douloureux que nous l'avons appris il y a dix ans. C'est très pratique pour les gens d'apprendre maintenant, car il y a beaucoup de matériel d'apprentissage sur Internet, et il existe de nombreux bons cours systématiques qui peuvent vous aider à apprendre et à maîtriser plus efficacement les compétences pratiques. , et vous pouvez éviter de nombreux détours.
En termes d'expérience en tant qu'ingénieur front-end, l'apprentissage front-end est devenu de plus en plus important en raison du statut croissant du front-end dans l'ensemble du projet de développement logiciel, et la situation devient de plus en plus complexe. , vous devez maîtriser les connaissances frontales est également très compliqué. Si vous n'avez pas la capacité d'apprendre systématiquement les connaissances frontales, je vous suggère de trouver un cours approprié pour étudier systématiquement, car c'est très important pour l'apprentissage Efficacité. Il est trop facile d’apprendre par vous-même. Les itérations de mise à jour frontale sont rapides, et les méthodes d’apprentissage efficaces et rapides sont primordiales.
Les trois en or et les quatre en argent arrivent bientôt. Je ne sais pas si tout le monde se prépare déjà pour l’entretien de recrutement du printemps. Comment se déroulent les préparatifs?
Si vous pensez que les connaissances de base sont encore relativement faibles, il est préférable de brosser cet ensemble de "Compilation et analyse des questions d'entrevue de recrutement dans les écoles frontales", je vous souhaite bonne chance.
HTML
- Quelles sont les trois couches de la page du navigateur, quelles sont-elles et quelles sont leurs fonctions?
- Les avantages et les inconvénients du HTML5?
- Que fait Doctype, comment faire la distinction entre le mode strict et le mode promiscuous? Que signifient-ils?
- Quelles sont les nouvelles fonctionnalités et éléments de HTML5?
- Dans quels navigateurs les pages Web que vous avez créées ont-elles été testées et quels sont les cœurs de ces navigateurs?
- Il y a une chose très importante au début de chaque fichier HTML, Doctype. Savez-vous à quoi cela sert?
- Parlez-moi de vos connaissances en HTML5? (Qu'est-ce que c'est, pourquoi)
- Compréhension et connaissance des standards WEB et du W3C?
- …
CSS
- Expliquez le modèle de boîte CSS?
- Pouvez-vous nous parler des types de sélecteurs CSS et donner quelques exemples pour illustrer leur utilisation?
- Pourriez-vous s'il vous plaît me dire ce qui est spécial avec CSS? (Priorité, calcul des valeurs spéciales)
- Problèmes courants de compatibilité des navigateurs et solutions?
- Énumérez les valeurs de l'affichage et expliquez ce qu'elles font?
- Comment centrer un div, comment centrer un élément flottant?
- Veuillez énumérer plusieurs méthodes (au moins deux) pour effacer les flotteurs?
- Comparaison des détails de bloc, inline et inlinke-block?
- Qu'est-ce que la dégradation gracieuse et l'amélioration progressive?
- Parlez des problèmes causés par les éléments flottants et de vos solutions
- Quelles sont vos méthodes d'optimisation des performances?
- …
JavaScript
- Les différentes positions de js, telles que clientHeight, scrollHeight, offsetHeight et la différence entre scrollTop, offsetTop, clientTop?
- Implémentation de la fonction glisser-déposer js
- Méthode js à chargement asynchrone
- js anti-secousse et étranglement
- Parlez de fermetures
- Parlez de votre compréhension de la chaîne de portée
- Prototype JavaScript, chaîne de prototypes, quelles sont les caractéristiques?
- Veuillez expliquer ce qu'est la délégation d'événement / délégation d'événement
- Comment Javascript implémente-t-il l'héritage?
- L'exécution de la fonction change cela
- Principe de compilation Babel
- Fonction Currying
- Parler de la création et de l'héritage des classes
- Parlez du flux d'événements dans le front-end
- Comment créer une bulle d'événement d'abord, puis capturer
- Parlez du chargement paresseux et du préchargement des images
- Que fait le nouvel opérateur de js
- Changer le pointeur sur la fonction de ce pointeur à l'intérieur de la fonction (la différence entre bind, apply, call)
- Ajax résout le problème du cache du navigateur
- …
En raison de l'espace limité de l'article, seule une partie des questions d'entretien peut être affichée.Si nécessaire, cliquez ici pour recevoir les questions gratuitement + résoudre le PDF .
Vue
- Le rôle de la valeur clé dans Vue
- Pourquoi les données d'un composant Vue doivent-elles être une fonction?
- Quelle est la caractéristique d'État de vuex?
- Présentez le système réactif de Vue
- La différence entre computed et watch
- Présentez le cycle de vie de Vue
- Pourquoi les données des composants doivent être une fonction
- Comment les composants communiquent-ils
- Comment utiliser des composants personnalisés dans Vue.cli? Avez-vous rencontré des problèmes?
- Comment Vue implémente-t-il le chargement à la demande et les paramètres du pack Web
- Décrivez brièvement les scénarios pour lesquels chaque cycle convient
- Qu'est-ce que scss? Quelles sont les étapes d'installation et d'utilisation dans Vue.cli? Quelles sont les principales fonctionnalités?
- Parlez de votre compréhension de la compilation de modèles Vue.js?
- Plusieurs façons de sauter le routage Vue
- Comment Vue implémente-t-il le chargement à la demande et les paramètres du pack Web?
- Implémentation de routage de Vue: mode hachage et mode historique
- Quelle est la différence entre Vue, Angular et React?
- Fonction Hook pour le routage Vue
- Quelles sont les propriétés calculées de Vue?
- …
Réagir
- Introduire réagir
- Réagir un flux de données unique
- Fonctions du cycle de vie React et cycle de vie des composants React
- Principes, différences, points forts et fonctions de React et Vue
- Communication des composants ReactJs
- Avez-vous découvert le DOM virtuel de React et comment se compare-t-il?
- React est utilisé dans le projet, pourquoi devrions-nous choisir React et quels sont les avantages de React?
- Comment obtenir le vrai dom
- Les raisons du choix réagissent
- Fonction de cycle de vie de React
- Traiter après setState
- Connaissez-vous les composants haut de gamme de React?
- React jsx, programmation fonctionnelle
- Qu'est-ce que les composants de réaction utilisent pour déterminer s'il faut actualiser?
- Comment configurer React-Router
- Modules chargés dynamiquement pour le routage
- Qu'est-ce que le middleware Redux? Il accepte plusieurs paramètres
- Comment le middleware de requête Redux gère la concurrence
Le navigateur
- Communication croisée
- Architecture du navigateur
- Boucle d'événement sous le navigateur
- Le processus de l'URL d'entrée à l'affichage
- Redessiner et redistribuer
- espace de rangement
- Travailleur Web
- Mécanisme de collecte des ordures V8
- Fuite de mémoire
- Optimisation de la refusion et de la peinture
- Comment réduire le redraw et le redistribution?
- Une page est entrée de l'URL à la page est chargée et affichée, que s'est-il passé dans le processus?
- Résumé de la différence entre localStorage et sessionStorage et cookie
- …
Serveur et réseau
- La différence entre HTTPS et HTTP
- Version HTTP
- Que s'est-il passé entre la saisie de l'URL et le rendu de la page?
- Cache HTTP
- Emplacement du cache
- Cache fort
- Cache de négociation
- Les ressources mises en cache sont là
- L'impact du comportement des utilisateurs sur le cache du navigateur
- Avantages de la mise en cache
- Processus d'exécution de demande de rafraîchissement différent
- …
Algorithme et structure des données
- Traversée de séquence d'arbre binaire
- Les caractéristiques de l'arbre B, la différence entre l'arbre B et l'arbre B +
- Récursivité de la queue
- Comment écrire une factorielle d'un grand nombre? Quel est le problème avec la méthode récursive?
- Comment transformer un tableau multidimensionnel en un tableau unidimensionnel
- Parlez du principe de la décharge rapide bouillonnante
- Le principe de la méthode de tri en tas? la complexité?
- Plusieurs algorithmes de tri courants, manuscrits
- Déduplication de tableaux, écrivez autant de méthodes que possible
- S'il y a un grand tableau, tous sont des entiers, comment trouver les 10 premiers nombres les plus grands
En raison de l'espace limité de l'article, seule une partie des questions d'entretien peut être affichée.Si nécessaire, cliquez ici pour recevoir les questions gratuitement + résoudre le PDF .
La maîtrise de ce qui précède peut fondamentalement être effrénée, comment être autoritaire, c'est-à-dire la connaissance de l'utilisation et des principes du cadre et des outils d'emballage ~~~ Explication détaillée de suivi
Révélez quelques conseils d'entretien
(1) Le voleur qui écrit des CV **, je peux utiliser divers frameworks sur les CV, et quel seau de famille webpack / vue, seau de famille de réaction, rollup / node ont, et les bases seront froides quand on le leur demandera. ~~~~ La couche inférieure du cadre est toujours la fondation js, la fondation n'est pas solide et l'interview est composée de deux lignes de larmes.
(2) Les points techniques du CV doivent être écrits sur ce dans quoi vous êtes bon, interviewer une fille, 2 ans d'expérience de travail, écrire une compréhension approfondie du principe de vue, une question comment nextTick peut-il obtenir le DOM mis à jour, très simple, je ne sais pas ~ bien sûr, des points seront déduits. Beaucoup demandent à la fondation ne sais pas, cool ~
(3) Soyez honnête dans l'entrevue, ne soyez pas impétueux, ne connaissez pas certaines connaissances et il n'y a rien de mal à cela. Un gars spirituel, j'ai posé des questions sur le principe de la mise en page réactive, comment js l'a jugé, je ne sais pas ~~~ _ ~ , je me suis demandé si je pouvais sauter cette question, mais je ne l'ai pas vue beaucoup récemment. Moi: Qu'est-ce que tu regardes récemment? jsxh: Des trucs d'ingénierie frontale? Moi: Je pense que c'est très impétueux ~, quelle est la différence entre le schéma de modularisation common.js / es6? Comment plusieurs fichiers de projet partagent-ils une plage de travail nodeModules? Comment surveiller les commits git? Quels problèmes résout-il? Cool ~~~~ L'ingénierie est un gros problème, il y a de nombreux points de développement, de compilation, de déploiement et en ligne
(4) Le projet dit qu'il est en place, écriture d'un emmm d' accélérateur , écriture d'une copie profonde emmm, écriture d'une promesse.all, ~~ emmmm
(5) J'ai rencontré quelques bons candidats. Bien que certains points de connaissance et capacité d'écriture manuscrite soient faibles, les gens sont très fiables et gentils. J'ai déjà vu que j'étais ingénieur de développement junior et je donnerai l'opportunité de réussir, non la technologie fera passer les gens.
Pour résumer, les bases et la capacité à écrire du code sont très importantes, très importantes, très importantes ~, quelle que soit la qualité du cadre, la couche inférieure est également basée sur les bases, y compris divers points de connaissance, modèles de conception et bientôt. Quant aux questions posées par le cadre et comment se préparer, nous le décomposerons la prochaine fois.