1. Dans un scénario de chargement paresseux, comment juger qu'un élément est dans la fenêtre
Dans les scénarios de chargement différé, il est très courant de déterminer si un élément se trouve dans la fenêtre d'affichage. Il est généralement utilisé pour charger des images, du contenu ou effectuer d'autres opérations de chargement différé. Vous pouvez utiliser JavaScript pour déterminer si un élément se trouve dans la fenêtre. Voici un exemple d'implémentation spécifique :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lazy Loading Example</title>
<style>
/* 设置一些占位样式，避免页面闪烁 */
.lazy-image {
width: 300px;
height: 200px;
background-color: #f0f0f0;
}
</style>
</head>
<body>
<div class="lazy-image" data-src="image1.jpg"></div>
<div class="lazy-image" data-src="image2.jpg"></div>
<div class="lazy-image" data-src="image3.jpg"></div>
<div class="lazy-image" data-src="image4.jpg"></div>
<div class="lazy-image" data-src="image5.jpg"></div>
<script>
const lazyImages = document.querySelectorAll('.lazy-image');
function isElementInViewport(el) {
const rect = el.getBoundingClientRect();
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
rect.right <= (window.innerWidth || document.documentElement.clientWidth)
);
}
function lazyLoad() {
lazyImages.forEach(image => {
if (isElementInViewport(image)) {
image.style.backgroundImage = `url(${image.getAttribute('data-src')})`;
image.classList.add('loaded');
}
});
}
// 初始化时加载可见元素
lazyLoad();
// 监听滚动事件，当滚动时判断元素是否在视口内
window.addEventListener('scroll', lazyLoad);
</script>
</body>
</html>
Dans l'exemple ci-dessus, utilisez getBoundingClientRect() la méthode pour obtenir les informations de position de l'élément, puis déterminez si les limites supérieure, inférieure, gauche et droite de l'élément se trouvent dans la plage de la fenêtre d'affichage. Lorsque l'élément est dans la fenêtre, définissez data-src le lien d'image dans ses propriétés comme image d'arrière-plan et ajoutez une loaded classe pour le marquer chargé. En écoutant scroll l'événement, vous pouvez déterminer dynamiquement si l'élément est dans la fenêtre lors du défilement, afin d'obtenir l'effet de chargement paresseux.
Veuillez noter qu'il ne s'agit que d'un exemple de base et que davantage de détails devront peut-être être pris en compte dans des scénarios réels, tels que l'optimisation des performances, la limitation anti-tremblement, etc.
2. Comment déterminer si l'environnement actuel est un PC ou un téléphone mobile
Différentes méthodes peuvent généralement être utilisées pour déterminer si l'environnement actuel est un PC ou un téléphone mobile. Plusieurs méthodes de détermination courantes sont répertoriées ci-dessous et des exemples d'implémentation de code correspondants sont fournis :
1. Utilisez des requêtes multimédias : utilisez des requêtes multimédias CSS pour déterminer la largeur de l'écran de l'appareil afin de déterminer s'il s'agit d'un téléphone mobile.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Device Detection</title>
<style>
@media (max-width: 767px) {
body {
background-color: lightblue; /* 手机端样式 */
}
}
@media (min-width: 768px) {
body {
background-color: lightgreen; /* PC端样式 */
}
}
</style>
</head>
<body>
</body>
</html>
2. Utilisation navigator.userAgent : Déterminez le type de périphérique en vérifiant la chaîne de l'agent utilisateur. Notez que cette méthode n'est pas très fiable, puisque la chaîne de l'agent utilisateur peut être modifiée.
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
console.log('手机端');
} else {
console.log('PC端');
}
3. Utilisez la largeur de l'écran : obtenez la largeur de l'écran via JavaScript pour déterminer le type d'appareil.
if (window.innerWidth <= 767) {
console.log('手机端');
} else {
console.log('PC端');
}
4. Utilisation window.orientation: Vérifiez l'orientation de l'appareil pour déterminer s'il s'agit d'un téléphone mobile ou d'un PC. Cette approche fonctionne sur les appareils mobiles.
if (typeof window.orientation !== 'undefined') {
console.log('手机端');
} else {
console.log('PC端');
}
Notez que différentes méthodes peuvent avoir une précision et une applicabilité différentes dans différentes situations. Dans une perspective globale, il pourrait être possible de déterminer plus précisément le type de périphérique en combinant plusieurs méthodes.
3. Comment le navigateur met-il en cache les ressources statiques ?
Les navigateurs peuvent optimiser la vitesse de chargement des pages Web en utilisant des mécanismes de mise en cache, réduire les requêtes adressées au serveur et offrir une meilleure expérience utilisateur. La mise en cache statique des ressources est l'une des méthodes courantes qui permet au navigateur de stocker les ressources localement après les avoir chargées pour la première fois, de sorte que lors d'un nouvel accès ultérieur, les ressources puissent être obtenues directement à partir de la zone locale sans les télécharger depuis le serveur. serveur à nouveau. Voici les méthodes courantes utilisées par les navigateurs pour mettre en cache des ressources statiques :
1. En-tête de cache HTTP : Dans la communication entre le navigateur et le serveur, vous pouvez contrôler la stratégie de mise en cache des ressources statiques en définissant le champ d'en-tête HTTP. Les champs d'en-tête du cache HTTP couramment utilisés sont :
-
Cache-Control: Ce champ peut être utilisé pour spécifier la stratégie de mise en cache de la ressource, telle quemax-age,no-cache,public,privateetc. -
Expires: Ce champ permet de définir le délai d'expiration de la ressource, indiquant ainsi au navigateur quand il doit redemander la ressource. -
ETagetLast-Modified: Utilisé pour déterminer si la ressource a changé. S'il n'y a pas de changement, le statut 304 Non modifié peut être renvoyé.
2. Cache Manifest (AppCache) : Cache Manifest est un fichier qui définit le comportement de mise en cache du navigateur. Il permet aux développeurs de spécifier clairement quelles ressources doivent être mises en cache et le numéro de version mis en cache. Bien que Cache Manifest ait été davantage utilisé dans le passé, en raison de sa complexité et de certains problèmes, son utilisation n'est plus recommandée.
3. Service Worker : Service Worker est un script JavaScript qui agit comme un proxy entre le navigateur et le réseau et peut intercepter et traiter les requêtes réseau. L'utilisation de Service Worker permet d'obtenir un contrôle de cache plus puissant, notamment la mise en cache hors ligne, la mise en cache dynamique, l'accélération du premier écran, etc.
4. Algorithme de mise en cache du navigateur : les navigateurs utilisent des algorithmes de mise en cache pour décider s'ils doivent obtenir des ressources du cache ou les récupérer du serveur. Les algorithmes de mise en cache courants incluent :
-
Mise en cache renforcée : utilisez les champs d'en-tête tels que Cache-Control et Expires pour déterminer si la ressource est dans la période de validité.
-
Cache de négociation : utilisez les champs d'en-tête tels que ETag et Last-Modified pour déterminer si la ressource a changé.
La mise en cache forte et la mise en cache négociée sont deux stratégies courantes. Voici des exemples spécifiques de mise en œuvre de ces deux stratégies :
Exemple de mise en cache forte :Cache-Control la mise en cache forte est implémentée en définissant le champ ou dans l'en-tête de réponse HTTP Expires , indiquant au navigateur d'obtenir les ressources directement du cache dans un certain laps de temps.
// 使用 Cache-Control 设置缓存策略
// max-age 指定缓存的秒数
// public 表示资源可以被公共缓存（CDN 等）存储
// private 表示资源仅在用户私有的缓存中存储（默认值）
// no-cache 表示资源需要经过协商缓存验证后才能使用
// no-store 表示不缓存资源
response.setHeader('Cache-Control', 'max-age=3600, public');
// 使用 Expires 设置过期时间，这里设置为一个未来的日期
response.setHeader('Expires', new Date(Date.now() + 3600000).toUTCString());
Exemple de mise en cache de négociation : La mise en cache de négociation est implémentée en définissant ETag les champs et dans l'en-tête de réponse HTTP . Le navigateur enverra ces valeurs au serveur lors de la prochaine requête. Le serveur détermine si la ressource a changé et renvoie 304 Not Modified ou une nouvelle ressource.Last-Modified
// 生成 ETag 值，可以使用文件内容的 hash 值等
response.setHeader('ETag', '123456');
// 设置 Last-Modified 为资源的最后修改时间
response.setHeader('Last-Modified', new Date().toUTCString());
Lors de la requête suivante, le navigateur enverra If-None-Match le champ d'en-tête (correspondant à ETag) et/ou If-Modified-Since le champ d'en-tête (correspondant à Last-Modified) au serveur, et le serveur déterminera si la ressource doit être mise à jour en fonction de ces valeurs. Si la ressource n'a pas changé, le serveur renvoie 304 Not Modified et le navigateur utilise directement le cache.
En fait, le cache fort et le cache de négociation peuvent être utilisés ensemble. Lorsque le cache fort échoue, le cache de négociation sera ensuite utilisé à des fins de vérification. Ces deux stratégies peuvent être configurées de manière flexible en fonction des différentes ressources et besoins de l'entreprise.
Pendant le développement, une configuration correcte de ces mécanismes de mise en cache peut améliorer considérablement la vitesse de chargement des pages Web, mais il est également important de noter que si la stratégie de mise en cache n'est pas configurée correctement, les utilisateurs peuvent voir des ressources expirées ou incorrectes. Par conséquent, il est très important de comprendre le principe de la mise en cache du navigateur et les différents mécanismes de mise en cache, et de les configurer en fonction de la situation réelle.