Présente des questions courantes lors des entretiens avec des ingénieurs front-end. Certaines d'entre elles n'ont pas de réponse. Vous pouvez réfléchir à ces questions pendant votre temps libre
1. Quels navigateurs sont couramment utilisés pour les tests ? Quels sont les noyaux (Layout Engine) ?
(Q1) Navigateurs : IE, Chrome, FireFox, Safari, Opera. (Q2) Noyau : Trident, Gecko, Presto, Webkit.2. Dites-moi la différence entre les éléments en ligne et les éléments de niveau bloc ? Utilisation de la compatibilité des éléments de bloc en ligne ? (Sous IE8)
(Q1) Éléments en ligne : seront disposés dans la direction horizontale et ne peuvent pas contenir d'éléments au niveau du bloc. La définition de la largeur n'est pas valide, la hauteur n'est pas valide (la hauteur de la ligne peut être définie). , les marges haut et bas ne sont pas valides, les remplissages haut et bas ne sont pas valides. Éléments de niveau bloc : chacun occupe une ligne et est disposé verticalement. Commence sur une nouvelle ligne et se termine par un saut de ligne. (Q2) Compatibilité : display:inline-block;*display:inline;*zoom:1;3. Quels sont les moyens d'effacer les flotteurs ? Quelle est la meilleure façon ?
(Q1) (1) Le div parent définit la hauteur. (2) Ajoutez une balise div vide clear:both à la fin. (3) Le div parent définit des pseudo-classes : after et zoom. (4) Le div parent définit overflow:hidden. (5) Le div parent définit overflow:auto. (6) Le div parent est également flottant et doit définir la largeur. (7) Le div parent définit display:table. (8) Ajoutez la balise br clear:both à la fin. (Q2) La meilleure méthode est la troisième méthode, qui est utilisée par de nombreux sites Web.4. Quels sont les attributs couramment utilisés du dimensionnement des boîtes ? Quelles sont les fonctions de chacun ?
(Q1)box-sizing : content-box|border-box|inherit;(Q2)content-box : La largeur et la hauteur sont appliquées à la zone de contenu de l'élément respectivement. Dessine le remplissage et les bordures de l'élément en dehors de la largeur et de la hauteur (effet par défaut de l'élément). border-box : Tous les remplissages et bordures spécifiés par l'élément seront dessinés dans la largeur et la hauteur définies. La largeur et la hauteur du contenu sont obtenues en soustrayant respectivement la bordure et le remplissage de la largeur et de la hauteur définies.5. Quel est le rôle de Doctype ? Quelle est la différence entre le mode standards et le mode compatibilité ?
(Q1) indique à l'analyseur du navigateur quelle norme de document utiliser pour analyser ce document. Un DOCTYPE inexistant ou mal formaté entraînera le rendu du document en mode compatibilité. (Q2) Le formatage et le mode de fonctionnement JS en mode standard fonctionnent selon les normes les plus élevées prises en charge par le navigateur. En mode de compatibilité, les pages sont affichées de manière vaguement rétrocompatible, simulant le comportement des anciens navigateurs pour empêcher le site de fonctionner.6. Pourquoi avez-vous seulement besoin d'écrire
HTML5 n'est pas basé sur SGML, il n'est donc pas nécessaire de référencer la DTD, mais un doctype est nécessaire pour réguler le comportement du navigateur (laisser les navigateurs fonctionner comme ils le devraient). HTML4.01 est basé sur SGML, vous devez donc référencer la DTD pour indiquer au navigateur le type de document utilisé par le document.7. Lors de l'importation de styles dans la page, quelle est la différence entre l'utilisation de link et @import ?
(1) le lien est une balise XHTML En plus de charger CSS, il peut également être utilisé pour définir RSS, définir les attributs de connexion rel, etc.; ne doit être utilisé que pour charger du CSS ; (2) Lorsque la page est chargée, le lien sera chargé en même temps, et le CSS référencé par @import attendra que la page soit chargée avant de se charger ; (3) L'import est CSS2.1 proposé, il ne peut être reconnu que dans IE5 ou supérieur, et le lien est une balise XHTML, il n'y a donc pas de problème de compatibilité.8. Veuillez présenter votre compréhension du noyau du navigateur ?
Il est principalement divisé en deux parties : le moteur de rendu (layout Engineer ou Rendering Engine) et le moteur js. Moteur de rendu : responsable de l'obtention du contenu de la page Web (HTML, XML, images, etc.), de l'organisation des informations (comme l'ajout de CSS, etc.) et du calcul de la méthode d'affichage du Web page, puis l'envoyer vers le moniteur ou l'imprimante. Différents noyaux de navigateur auront différentes interprétations grammaticales des pages Web, donc les effets de rendu seront également différents. Tous les navigateurs Web, clients de messagerie et autres applications qui modifient et affichent du contenu Web nécessitent le noyau. Moteur JS : analyse et exécute du javascript pour obtenir des effets dynamiques sur les pages Web. Au début, il n'y avait pas de distinction claire entre le moteur de rendu et le moteur JS. Plus tard, le moteur JS est devenu de plus en plus indépendant, et le noyau avait tendance à se référer uniquement au moteur de rendu.9. Quelles sont les nouveautés du html5 ? Comment gérer les problèmes de compatibilité des navigateurs avec les nouvelles balises HTML5 ? Comment différencier HTML et HTML5 ?
(Q1)HTML5 n'est plus un sous-ensemble de SGML, il s'agit principalement de l'ajout d'images, de localisation, de stockage, de multitâche et d'autres fonctions. (1) Toile de peinture ; (2) Éléments vidéo et audio pour la lecture multimédia (3) Stockage local hors ligne, stockage local des données à long terme, données du navigateur ; ne seront pas perdues après la fermeture ; (4) les données de sessionStorage seront automatiquement supprimées après la fermeture du navigateur (5) Éléments de contenu avec une meilleure sémantique, tels que l'article, le pied de page, l'en-tête ; , nav, section;(6) Contrôles de formulaire, calendrier, date, heure, email, url, recherche;(7) Webworker nouvelles technologies, websocket, Géolocalisation;(Q2)IE8/IE7/IE6 prend en charge les balises générées par la méthode document.createElement,Vous pouvez utiliser cette fonctionnalité pour que ces navigateurs prennent en charge les nouvelles balises HTML5.
Une fois que le navigateur a pris en charge les nouvelles balises, vous devez ajouter le style par défaut des balises.
Bien sûr, vous pouvez également utiliser directement des frameworks matures, tels que html5shim,
