Cette fois, je vous présente les dernières questions d'entretien front-end en 2018. Nous savons que les entretiens sont une partie indispensable du travail front-end. Cette fois, les questions d'entretien front-end courantes sont triées et résumées pour vous aider à obtenir. à travers l'interview frontale. Gros problèmes. Jetons un coup d'oeil.
[Recommandations associées : Questions d'entretien front-end(2020)]
1. Comment optimiser les fichiers et les ressources du site Web ?
1. Réduisez autant que possible le nombre de requêtes http, fusionnez les CSS, les js et les images séparément
2 Utilisez CDN pour réduire la distance de communication
3.
4 .Activez les fichiers compressés Gzip
5. Placez le CSS en haut de la page
6. Placez le script en bas de la page
7. Évitez d'utiliser des expressions en CSS
8. Placez les fichiers CSS et JS dans les fichiers externes
9. Réduisez les requêtes DNS
10. Réduisez les fichiers CSS, JS et réduisez la taille des fichiers
11. Évitez les redirections
12. 13. Configurez la balise d'entité ETag
14. Utilisez la mise en cache AJAX pour charger le contenu du site Web par lots et le mettre à jour localement
2. Dépassez la limite de simultanéité du navigateur (vous pouvez simplement choisir une URL G :
https://lh4.googleusercontent.com/- si4dh2myPWk/T81YkSiAI/AAAAAAAAQ5o/LlwbBRpp58Q/w497-h373/IMG_20120603_163233.jpg, remplacez le lh4 devant par lh3, lh6 et ainsi de suite, et vous pouvez toujours y accéder, comme une carte Ceci est très important pour les sites comme celui-ci qui nécessitent un grand nombre de téléchargements simultanés d'images. )3. Les cookies ne seront pas transférés entre les domaines, économisant ainsi la bande passante
<!DOCTYPE html>
<html>
<head>
<title>幻灯片</title>
<style type="text/css">
.myDiv{
width:600px;
height:400px;
margin:20px auto;
background-size:over;
background-postion:center;
-webkit-animation-name: "loop";
-webkit-animation-duration:20s;
-webkit-animation-iteration-count:infinite;
}
@-webkit-keyframes "loop"{
0%{background:url(http://img5.duitang.com/uploads/blog/201408/12/20140812150016_8NMUU.jpeg) no-repeat;}
25%{background:url(http://pic29.nipic.com/20130518/9908282_142904524164_2.jpg) no-repeat;}
50%{background:url(http://uploadfile.huiyi8.com/2014/0605/20140605114503719.jpg) no-repeat;}
75%{background:url(http://img3.redocn.com/20100322/Redocn_2010032112222793.jpg) no-repeat;}
100%{background:url(http://uploadfile.huiyi8.com/2014/0605/20140605114447934.jpg)no-repeat;}
}
</style>
</head>JavaScript. Animation JS
Inconvénients : (1) JavaScript s'exécute dans le thread principal du navigateur, et il existe d'autres scripts JavaScript, calculs de style, mises en page, tâches de dessin, etc. qui doivent être exécutés dans le thread principal, ce qui interfère avec le thread et provoque un blocage pouvant se produire, entraînant une perte de trame.
(2) La complexité du code est supérieure à celle de l'animation CSS
Avantages : (1) La capacité de contrôle de l'animation JavaScript est très forte et l'animation peut être contrôlée pendant le processus de lecture de l'animation : démarrage, pause, la lecture, la fin et l’annulation. Cela peut être fait.
(2) Les effets d'animation sont plus riches que l'
animation CSS3. Certains effets d'animation, tels que le mouvement de courbe, le scintillement d'impact et les effets de défilement de parallaxe, ne peuvent être complétés que par des animations JavaScript(3) CSS3 a des problèmes de compatibilité, et JS n'a la plupart du temps pas de problèmes de compatibilité
Animation CSS
Inconvénients : (1) Le contrôle du processus en cours d'exécution est faible et ne peut pas attacher de liaison d'événement
fonctions de rappel. Les animations CSS ne peuvent être mises en pause, ne peuvent pas trouver un point temporel spécifique dans l'animation, ne peuvent pas inverser l'animation à mi-chemin, ne peuvent pas modifier l'échelle de temps, ne peuvent pas ajouter de fonctions de rappel à des positions spécifiques ou lier des événements de lecture, et il n'y a pas de rapport de progression (2) Le code est long. Si vous souhaitez utiliser CSS pour implémenter des animations un peu plus complexes, le code CSS deviendra finalement très fastidieux.
Avantages : (1) Les navigateurs peuvent optimiser les animations.
Les navigateurs utilisent un mécanisme similaire à requestAnimationFrame. Par rapport à setTimeout et setInterval, les principaux avantages de requestAnimationFrame dans la définition des animations sont les suivants : 1) requestAnimationFrame concentrera toutes les opérations DOM dans chaque image et les complétera en un seul redessin ou redistribution. L'intervalle de temps de redessinage ou de redistribution suit de près la fréquence de rafraîchissement du navigateur. De manière générale, cette fréquence est de 60 images par seconde. 2) requestAnimationFrame ne redessinera pas ou ne redistribuera pas les éléments cachés ou invisibles, ce qui signifie bien sûr moins d'utilisation du processeur, du GPU et de la mémoire. Forcer l'utilisation de l'accélération matérielle (améliorer les performances d'animation via GPU)
Dernières questions d'entretien frontal de 2018, deux
Dernières questions d'entretien frontal de 2018, trois
Dernières questions d'entretien frontal de 2018, quatre
Dernières questions d'entretien frontal de 2018, cinq
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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
