1. Minimisez le nombre de requêtes HTTP 2. Réduisez le nombre de recherches DNS 3 Évitez les sauts 4. AJAX mis en cache 5. Préparation du chargement 7. Réduisez le nombre d'éléments DOM 8. Divisez le contenu de la page en fonction du nom de domaine 9. Réduisez le nombre d'iframes Ne pas avoir d'erreurs 404 11. . Utilisez le réseau de distribution de contenu 12. Spécifiez Expires ou Cache-Control pour l'en-tête du fichier 13. Gzip compresse le contenu du fichier 14. Configurez ETag 15. Actualisez le tampon de sortie le plus tôt possible 16. . Utilisez GET pour compléter les requêtes AJAX 17. Mettez la feuille de style en haut 18. Évitez d'utiliser des expressions CSS (Expression) 19. Utilisez du JavaScript et du CSS externes 20. et CSS 21. Utilisez au lieu de @ import 22. Évitez d'utiliser des filtres 23. Placez les scripts en bas de la page 24. > Version 19.jquery ? Compatible 1.11 ?
La série Query 2.x a la même API que jQuery 1.x, mais ne prend plus en charge IE6, 7 et 8. Il est recommandé d'utiliser la version 1.x sauf si vous êtes sûr que les utilisateurs IE6, 7 et 8 n'accéderont plus au site Web.
jquery1.11 est la version 1.x, qui est compatible avec IE6, 7 et 8, il prend donc également en charge IE9.
Niveau de bloc 20 ? Au sein de l’industrie ? Éléments vides ?
Éléments en ligne : tous les autres éléments sont sur la même ligne. La hauteur, la hauteur de la ligne, les marges extérieures et les marges intérieures ne peuvent pas être modifiées et peuvent être modifiées. n'accepte que du texte. Ou d'autres éléments en ligne Éléments au niveau du bloc : commencez toujours sur une nouvelle ligne, la hauteur, la hauteur de la ligne, les marges et le remplissage peuvent être contrôlés, peut accueillir des éléments en ligne et d'autres éléments
vides : dans Éléments HTML, les éléments HTML sans contenu sont appelés éléments vides. Les éléments vides sont fermés dans la balise d'ouverture. est un élément vide sans balise de fermeture.
media spécifie l'appareil sur lequel le document lié sera affiché. L'attribut media est utilisé pour spécifier différents styles pour différents types de médias. Screen est l'écran par défaut de l'ordinateur, all est applicable à tous les appareils, max-width ne sera pas exécuté s'il dépasse la largeur maximale et min-width doit être supérieur à la largeur minimale avant l'exécution.
22. Quelle est la valeur de l'attribut name de la balise méta ? L'attribut
name est principalement utilisé pour décrire les pages Web, et la valeur de l'attribut correspondante est le contenu. Le contenu du contenu est principalement utilisé par les robots des moteurs de recherche pour trouver des informations et classer les informations. Le format de syntaxe de l'attribut name de la balise méta est : .
L'attribut name a principalement les paramètres suivants :
A. Description des mots-clés (keywords) : les mots-clés sont utilisés pour indiquer aux moteurs de recherche quels sont les mots-clés de votre page Web. B, description (description du contenu du site Web) Description : la description est utilisée pour indiquer aux moteurs de recherche le contenu principal de votre site Web. C, description des robots (guide du robot) : les robots sont utilisés pour indiquer aux robots de recherche quelles pages doivent être consultées. être indexé et quelles pages Aucun index n'est requis. Les paramètres de contenu incluent all, none, index, noindex, follow, nofollow, et la valeur par défaut est all. Exemple : ＜meta name="robots" content="none"＞D, author(author)
Combien de façons existe-t-il de couper des images sur des pages mobiles ?
Mise en page réactive, affichage de mise en page flexible : flex, utilisez js pour écrire et définir la proportion, définissez les pixels pour l'élément racine et utilisez rem comme unité.
24. Quelle est la différence entre px/em/rem ? Pourquoi la taille de la police est-elle généralement définie sur 62,5 % ?
La taille de la police par rapport au texte de l'objet actuel. Si la taille de police actuelle du texte en ligne n'a pas été définie manuellement, elle sera relative à la taille de police par défaut du navigateur. 1. La valeur de em n'est pas fixe ;
2. em héritera de la taille de police de l'élément parent. Lorsque vous utilisez rem pour définir la taille de la police d'un élément, il s'agit toujours d'une taille relative, mais elle est uniquement relative à l'élément racine HTML. On peut dire que cette unité combine les avantages de la taille relative et de la taille absolue. Grâce à elle, vous pouvez ajuster toutes les tailles de police proportionnellement en modifiant uniquement l'élément racine, et vous pouvez éviter la réaction en chaîne consistant à composer les tailles de police couche par couche.
rem est mis à l'échelle par rapport au navigateur. La valeur par défaut de 1rem est 16px. Dans une mise en page réactive, il est trop difficile de convertir un par un en rem, alors réinitialisez rem body{font-size=62.5% } à ce moment-là 1rem = 10px ; , c'est 1.2rem .
25. Quelle est la différence entre sass et scss ? Comment sass est-il généralement compilé
Les extensions de fichier sont différentes. ".sass" comme extension. et SCSS utilise le suffixe ".scss" comme extension ; la syntaxe est écrite différemment avec des règles de syntaxe indentées strictes, sans accolades ({}) ni points-virgules (;). tandis que l'écriture syntaxique de SCSS est très similaire à notre écriture syntaxique CSS.
26. Que faire si le CSS est optimisé ?
Compresser et empaqueter, intégrer des images, éviter d'utiliser des Hacks, résoudre les problèmes de compatibilité, utiliser des abréviations pour assurer la maintenance future du CSS.
27. Comment compresser et fusionner des fichiers CSS ?
Utilisez gulp, installez gulp globalement sur la page d'accueil. 1. npm install --global gulp 2. Deuxièmement, installez gulp localement. npm install gulp --save-dev 3. Créez un fichier nommé gulpfile.js dans le répertoire racine du projet var gulp = require('gulp'); gulp.task('default' , function () { //Mettez votre code de tâche par défaut ici}); 4. (La tâche par défaut nommée default sera exécutée. Si vous souhaitez exécuter une tâche spécifique séparément, veuillez saisir gulp ) gulp Fusionner et compresser JS, fichiers CSS compresser Les fichiers JS, CSS doivent référencer les composants suivants : gulp-minify-css : compresser css
28. Programmation modulaire ?
Programmation de composants : regroupez js css html pour fournir des méthodes et des effets ; Modularisation : extrayez les mêmes fonctions et stockez-les au même endroit pour la programmation
29 . Afficher les images et le texte sur la même ligne ?
1 Ajoutez l'attribut "vertical-align:middle" à p en CSS. 2 Placez respectivement l'image et le texte dans des p différents, puis utilisez l'attribut "margin" pour les positionner afin qu'ils puissent être affichés sur la même ligne. 3 Définissez l'image comme image d'arrière-plan.
30. Désactiver le bouillonnement d'événement
event.stopPropagation()
31. >event.preventDefault()
32. Quelle est la séquence de configuration correcte pour le lien de survol actif visité dans la balise a
, visité, survolé, actif ? a un certain ordre a:link
a:visited
a:hover a:active
33 Comment désactiver la page de saut href dans une balise Ou localiser le lien
e.preventDefault();href="javascript:void(0);
34. Clics à long terme sur les images sur les téléphones mobiles provoquera Comment gérer les images sélectionnées ?
onselect=function() {return false
}
Plusieurs méthodes d'attribut de balise vidéo
>
35. 🎜>
src : URL de l'affiche vidéo : couverture vidéo, image affichée en l'absence de lecture préchargement : préchargement de la lecture automatique : boucle de lecture automatique : commandes de lecture en boucle : largeur de la barre de contrôle du navigateur : largeur de la vidéo hauteur : hauteur de la vidéo
36. Combien de formats d'encodage vidéo courants existe-t-il ? Combien de formats vidéo existe-t-il ?
Formats vidéo : MPEG-1, MPEG-2 et MPEG4, AVI, Formats RM, ASF et WMV Formats d'encodage vidéo : H.264, MPEG-4, MPEG-2, WMA-HD et VC-1
37.canvas sur l'étiquette Quel est le différence entre définir la largeur et la hauteur dans le style ?
La largeur et la hauteur de la balise de toile sont la largeur et la hauteur réelles de la toile, et la largeur et la hauteur du style sont basées sur cela . height est la hauteur et la largeur du canevas lorsqu'il est rendu dans le navigateur. Si la largeur et la hauteur du canevas ne sont pas spécifiées ou si les valeurs sont incorrectes, elles sont définies sur les valeurs par défaut. >
38.border box? -sizing?
Border-image : Bordure graphique
Box-sizing : La propriété vous permet de définir des éléments spécifiques qui correspondent à une certaine zone d'une manière spécifique .
Syntaxe : box-sizing : content-box | border-box Content-box : le remplissage et la bordure ne sont pas inclus dans la largeur et la hauteur définies. La largeur réelle de l'objet est égale à la somme de la valeur de largeur définie, de la bordure et du remplissage, c'est-à-dire (Largeur de l'élément = largeur + bordure + remplissage) Cet attribut se comporte comme un modèle de boîte en mode standard Bordure-. box : le rembourrage et la bordure sont inclus dans la largeur et la hauteur définies. La largeur réelle de l'objet est égale à la valeur de largeur définie. Même si la bordure et le remplissage sont définis, la largeur réelle de l'objet ne sera pas modifiée, c'est-à-dire (Largeur de l'élément = largeur). mode bizarre.
39. Amélioration progressive et dégradation gracieuse
Amélioration progressive : créez des pages pour les navigateurs de version basse afin de garantir les fonctions les plus basiques, puis améliorez les effets, les interactions et ajoutez des fonctions supplémentaires pour les navigateurs avancés afin d'obtenir une meilleure expérience utilisateur. Dégradation gracieuse : créez des fonctionnalités complètes depuis le début, puis rendez-les compatibles avec les versions inférieures des navigateurs. Différence : la dégradation gracieuse part du statu quo complexe et tente de réduire l'offre d'expérience utilisateur, tandis que l'amélioration progressive part d'une version très basique et fonctionnelle et l'étend continuellement pour s'adapter aux besoins de l'environnement futur. La dégradation (décroissance fonctionnelle) signifie regarder en arrière ; l'amélioration progressive signifie regarder vers l'avant tout en gardant ses racines dans une zone de sécurité. Le point de vue de la « dégradation gracieuse » Le point de vue de la « dégradation gracieuse » estime que les sites Web doivent être conçus pour les navigateurs les plus avancés et les plus complets. Organisez les tests des navigateurs considérés comme « obsolètes » ou dont les fonctions manquent à la dernière étape du cycle de développement, et limitez les objets de test à la version précédente des navigateurs grand public (tels que IE, Mozilla, etc.). Dans ce paradigme de conception, les anciens navigateurs sont considérés comme n'offrant qu'une expérience de navigation « médiocre, mais passable ». Vous pouvez effectuer quelques petits ajustements en fonction d'un navigateur spécifique. Mais comme elles ne sont pas au centre de notre attention, les autres différences seront ignorées, à l'exception de la correction de bugs plus importants. Le point de vue « Amélioration progressive » Le point de vue « Amélioration progressive » estime qu'il convient de prêter attention au contenu lui-même. Le contenu est la raison pour laquelle nous construisons des sites Web. Certains sites Web l'affichent, certains le collectent, certains le recherchent, certains l'exploitent et certains sites Web incluent même tout ce qui précède, mais la même chose est qu'ils impliquent tous du contenu. Cela fait de « l’amélioration progressive » un paradigme de conception plus raisonnable. C'est pourquoi il a été immédiatement adopté par Yahoo! et utilisé pour construire sa stratégie « Graded Browser Support ». Puis la question vient. Maintenant que le chef de produit voit que les effets de page Web d'IE6, 7 et 8 sont beaucoup moins arrondis et d'ombres (CSS3) que les navigateurs modernes, et qu'ils nécessitent une compatibilité (utiliser des arrière-plans d'images et abandonner CSS3), comment allez-vous le convaincre ?
40. Expliquez le modèle de boîte étrange, le modèle de boîte étrange et le modèle de boîte flexible de c3 dans les versions inférieures d'IE
IE lorsque la valeur de padding+border ? est inférieur à la largeur Ou hauteur : Largeur du modèle de boîte = marge (gauche et droite) + largeur (la largeur inclut déjà les valeurs de padding et border) Hauteur du modèle de boîte = marge (haut et bas) + hauteur (la hauteur inclut déjà la valeur de remplissage et de bordure)) Lorsque la valeur de remplissage+bordure est supérieure à la largeur ou à la hauteur : Largeur du modèle de boîte = marge (gauche et droite) + remplissage (gauche et à droite) + bordure (gauche et droite) Hauteur du modèle de boîte = marge (haut et bas) )+padding(haut et bas)+bordure (haut et bas)+19px (plus une hauteur de ligne par défaut de 19px ) Cela équivaut donc à comparer padding+border avec la largeur ou la hauteur, selon la valeur la plus grande. Les DOCTYPE ci-dessus sont tous des types de documents standard. Quel que soit le mode utilisé pour définir complètement le DOCTYPE, le mode standard sera déclenché si le DOCTYPE est manquant, le mode bizarre (mode bizarreries) sera déclenché dans ie6, ie7 et ie8 CSS3box -sizing a deux valeurs, l'une est content-box et l'autre est border-box. Lorsqu'il est défini sur box-sizing:content-box, le mode standard sera utilisé pour l'analyse et le calcul, qui est également le mode par défaut Lorsqu'il est défini sur box-sizing:border-box, le mode bizarre sera ; être utilisé pour l'analyse et le calcul ; Le modèle flexbox CSS3 introduit un nouveau modèle de boîte - le modèle flexbox, qui détermine comment une boîte est distribuée parmi d'autres boîtes et comment gérer l'espace disponible. Grâce à ce modèle, vous pouvez facilement créer une mise en page fluide qui s'adapte à la fenêtre du navigateur ou une mise en page flexible qui s'adapte à la taille de la police.
41.Attributs correspondants de l'animation
Écriture : animation : nom durée synchronisation-fonction délai itération-compte direction Ce qui suit est une introduction aux attributs correspondants ; animation-name spécifie le nom de l'image clé qui doit être lié au sélecteur. animation-duration spécifie le temps nécessaire pour terminer l'animation, en secondes ou millisecondes. animation-timing-function spécifie la courbe de vitesse de l'animation. animation-delay spécifie le délai avant le début de l'animation. animation-iteration-count spécifie le nombre de fois que l'animation doit être jouée. animation-direction précise si l'animation doit être jouée à l'envers à tour de rôle.
42.transition?
La transition CSS permet aux valeurs d'attribut CSS d'effectuer une transition en douceur dans un certain intervalle de temps. Cet effet peut être déclenché par un clic de souris, un focus, un clic ou toute modification apportée à l'élément, et modifie en douceur la valeur de la propriété CSS avec un effet d'animation. Notez la différence entre la transformation, qui effectue des transformations 2D telles que le mouvement, la mise à l'échelle, et inversion. Venez, faites pivoter et étirez les éléments.
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
