Comment éviter le blocage DOM par localstorage et autres coupables

Points clés

• Synchronisation des opérations JavaScript telles que l'informatique, les mises à jour DOM, le stockage et la récupération des données à l'aide de LocalStorage ou IndededDB bloquent les mises à jour DOM et affectent les performances frontales.
• Les travailleurs du Web peuvent être utilisés pour gérer les processus de longue durée. Ils permettent à l'application du navigateur principal de lancer des scripts d'arrière-plan et de communiquer à l'aide d'événements de message, mais ils n'ont pas accès direct au DOM ou LOCALSTORAGE.
• Les animations CSS accélérées par le matériel fonctionnent dans leurs propres couches, ce qui améliore la douceur de l'animation et n'est pas bloquée par la plupart des navigateurs modernes.
• Le stockage de mémoire fournit des mises à jour de données plus rapides que les mécanismes de stockage basés sur le disque. Il est recommandé d'utiliser des objets de mémoire pour améliorer les performances et stocker les données en permanence lorsqu'elle est pratique.

Les programmes JavaScript dans des environnements en cours d'exécution tels que les navigateurs et Node.js s'exécutent sur un seul thread. Lorsque le code est exécuté dans l'onglet Navigateur, toutes les autres opérations Stop: Commandes de menu, téléchargements, rendus, mises à jour DOM et même animations GIF.

Les utilisateurs le remarquent rarement car le traitement se déroule rapidement en petits blocs. Par exemple: cliquer sur un bouton, lancer un événement, exécuter une fonction, effectuer des calculs et mettre à jour le DOM. Une fois terminé, le navigateur peut traiter librement l'élément suivant dans la file d'attente.

Le code JavaScript ne peut pas attendre que quelque chose se produise; imaginez à quel point ce serait frustrant si l'application gèle à chaque fois qu'elle fait une demande Ajax. Par conséquent, le code JavaScript utilise des événements et des rappels pour fonctionner: Instruction à un navigateur ou un processus de niveau d'exploitation pour appeler une fonction spécifique une fois l'opération terminée et le résultat est prêt.

Dans l'exemple suivant, lorsqu'un événement de clic de bouton se produit, une fonction de gestionnaire est exécutée qui anime la classe CSS. Une fois l'animation terminée, le rappel anonyme supprimera la classe:

// 单击按钮时引发事件
document.getElementById('clickme').addEventListener('click', handleClick);

// 处理按钮单击事件
function handleClick(e) {

  // 获取要设置动画的元素
  let sprite = document.getElementById('sprite');
  if (!sprite) return;

  // 动画结束时删除“animate”类
  sprite.addEventListener('animationend', () => {
    sprite.classList.remove('animate');
  });

  // 添加“animate”类
  sprite.classList.add('animate');
}

ES2015 est prometteur, ES2017 introduit Async / Await pour simplifier le codage, mais utilise toujours des rappels sous la surface. Pour plus d'informations, voir "Contrôle des processus dans JS moderne".

Facteur d'obstruction

Malheureusement, certaines opérations JavaScript seront toujours synchronisées, y compris:

• exécuter le calcul
• Mettre à jour Dom
• Stockage et récupérer les données à l'aide de LocalStorage ou IndededDB.

L'exemple suivant montre un intrus qui utilise l'animation CSS pour le mouvement et le javascript pour agiter le membre. L'image à droite est le GIF animé de base. Cliquez sur le bouton "Écrire" à l'aide de l'opération par défaut de 100 000 SessionStorage:

[Exemple de liaison du codePen - Le code intégré à codePen doit être inséré ici]

Pendant cette opération, les mises à jour DOM sont bloquées. Dans la plupart des navigateurs, les intrus s'arrêtent ou s'arrêtent. Certaines animations de GIF animées seront interrompues. Les appareils plus lents peuvent afficher un avertissement "script non réactif".

Il s'agit d'un exemple complexe, mais il montre comment les opérations de base affectent les performances frontales.

Les travailleurs du Web

Une solution pour les processus de longue durée est les travailleurs du Web. Ceux-ci permettent à l'application du navigateur principal de démarrer les scripts d'arrière-plan et de communiquer à l'aide d'événements de message. Par exemple:

// 单击按钮时引发事件
document.getElementById('clickme').addEventListener('click', handleClick);

// 处理按钮单击事件
function handleClick(e) {

  // 获取要设置动画的元素
  let sprite = document.getElementById('sprite');
  if (!sprite) return;

  // 动画结束时删除“animate”类
  sprite.addEventListener('animationend', () => {
    sprite.classList.remove('animate');
  });

  // 添加“animate”类
  sprite.classList.add('animate');
}

Script du web worker:

// main.js
// 是否支持 Web Workers？
if (!window.Worker) return;

// 启动 Web Worker 脚本
let myWorker = new Worker('myworker.js');

// 从 myWorker 接收消息
myWorker.onmessage = e => {
  console.log('myworker sent:', e.data);
}

// 向 myWorker 发送消息
myWorker.postMessage('hello');

Un travailleur peut même générer d'autres travailleurs pour simuler des opérations filetées complexes. Cependant, la fonctionnalité du travailleur est intentionnellement limitée, et le travailleur ne peut pas accéder directement au DOM ou au localStorage (ce faire en fait le JavaScript multi-thread et perturbera la stabilité du navigateur). Par conséquent, tous les messages sont envoyés sous forme de chaînes, ce qui permet de passer des objets codés en JSON, mais ne permet pas de passer les nœuds DOM.

Les travailleurs peuvent accéder à certaines propriétés de fenêtre, à WebSockets et indexDB, mais ils n'améliorent pas les exemples indiqués ci-dessus. Dans la plupart des cas, les travailleurs sont utilisés pour des calculs de longue durée, comme le traçage des rayons, le traitement d'image, l'exploitation bitcoin, etc.

(Node.js fournit des processus enfants, qui sont similaires aux travailleurs du Web, mais ont la possibilité d'exécuter des exécutables écrits dans d'autres langues.)

Animation d'accélération matérielle

La plupart des navigateurs modernes ne bloquent pas les animations CSS accélérées par le matériel fonctionnant dans leurs propres couches.

Par défaut, l'exemple ci-dessus déplace l'intrus en modifiant la marge gauche. Cette propriété et des propriétés similaires telles que la gauche et la largeur font que le navigateur est à nouveau répandu et ré-échouez l'ensemble du document à chaque étape d'animation.

L'efficacité animale est plus efficace lors de l'utilisation des propriétés de transformation et / ou d'opacité. Ceux-ci mettent en fait des éléments dans des couches de composition distinctes afin que le GPU puisse les animer individuellement.

Cliquez sur la case "Accélération matérielle" et l'animation deviendra immédiatement plus fluide. Essayez maintenant une autre SessionStorage Write; Notez que les mouvements des membres seront toujours interrompus car cela est contrôlé par JavaScript.

stockage de mémoire

La mise à jour des objets en mémoire est beaucoup plus rapide que d'utiliser le mécanisme de stockage écrit sur le disque. Dans l'exemple ci-dessus, sélectionnez le type de stockage d'objet et cliquez sur Écrire. Le résultat sera différent, mais il devrait être environ 10 fois plus rapide que l'opération SessionStorage équivalente.

La mémoire est volatile: la fermeture de l'onglet ou laisser la navigation entraînera la perte de toutes les données. Un bon compromis consiste à utiliser des objets de mémoire pour améliorer les performances, puis stocker en permanence les données lorsqu'elles sont pratiques - par exemple lorsque la page est désinstallée:

// myworker.js
// 接收消息时启动
onmessage = e => {
  console.log('myworker received:', e.data);
  // ...长时间运行的进程...
  // 发送回消息
  postMessage('result');
};

Le jeu ou l'application à page unique peut nécessiter des options plus complexes. Par exemple, le moment où les données sont enregistrées:

Aucune activité utilisateur (souris, toucher ou clavier) pendant une période de temps
Pause de jeu ou balise d'application en arrière-plan (voir API de visibilité de la page)
Il y a des pauses naturelles, comme la mort des joueurs, la réalisation des niveaux, le déplacement entre les écrans d'accueil, etc.

Performances Web

Les performances Web sont un sujet brûlant. Les développeurs sont moins restrictifs par les restrictions du navigateur, et les utilisateurs s'attendent à des performances d'application de type système d'exploitation rapides.

Faire le moins de traitement possible, le DOM ne sera jamais sensiblement bloqué. Heureusement, il existe certaines options où les tâches de longue date ne peuvent pas être évitées.

Les utilisateurs et les clients peuvent ne jamais remarquer votre optimisation de vitesse, mais ils se plaignent toujours lorsque l'application ralentit!

FAQ sur le blocage DOM (FAQ)

Qu'est-ce que le bloc DOM et pourquoi est-ce un problème?

Dom Blocking signifie que le navigateur ne peut pas rendre la page Web car il attend que le script termine le chargement. Cela réduira considérablement la vitesse de chargement de la page Web, entraînant une mauvaise expérience utilisateur. Le navigateur doit construire l'arbre Dom en analysant la balise HTML. Au cours de ce processus, si un script est rencontré, il doit être arrêté et exécuté pour continuer. En effet

Comment éviter le blocage DOM?

Il existe plusieurs façons d'éviter le blocage DOM. L'un des moyens les plus efficaces consiste à utiliser des scripts de chargement asynchrones. Cela signifie que le script se chargera en arrière-plan, tandis que le reste de la page continuera de se charger. Une autre approche consiste à reporter les scripts, ce qui signifie qu'ils ne seront exécutés qu'après l'analyse du document HTML. Enfin, vous pouvez également déplacer les scripts vers le bas du document HTML afin qu'ils soient le dernier contenu chargé.

Quelle est la différence entre les scripts synchrones et les scripts asynchrones?

Les scripts synchrones bloquent les constructions DOM jusqu'à ce qu'elles soient entièrement chargées et exécutées. Cela signifie que si le script se charge pendant longtemps, il retarde toute la page Web. D'un autre côté, les scripts asynchrones ne bloquent pas la construction DOM. Ils se chargent en arrière-plan et peuvent être exécutés une fois qu'ils sont prêts, même si le DOM n'est pas entièrement construit.

Quel est l'attribut "différer" dans la balise de script?

La propriété "Defer" dans la balise de script est utilisée pour indiquer que le script doit être exécuté après l'analyse du document HTML. Cela signifie que le script ne bloque pas la construction DOM, accélérant ainsi le temps de chargement de la page Web. Cependant, cela signifie également que le script peut ne pas être prêt lorsque le DOM est construit, il ne peut donc être utilisé qu'avec des scripts qui ne modifient pas la structure DOM.

Comment est-il utile de déplacer le script vers le bas du document HTML?

Les scripts déplacés vers le bas du document HTML garantissent qu'ils sont le dernier contenu chargé. Cela signifie que le reste de la page Web peut être rendu sans attendre que le script termine le chargement. Cependant, cette méthode ne peut être utilisée qu'avec des scripts qui ne modifient pas la structure DOM, car ils peuvent ne pas être prêts lorsque le DOM est construit.

Quel est l'attribut "async" dans la balise de script?

L'attribut "async" dans la balise de script est utilisé pour indiquer que le script doit être chargé de manière asynchrone. Cela signifie que le script se chargera en arrière-plan, tandis que le reste de la page Web continuera de se charger. Le script peut être exécuté immédiatement lorsqu'il est prêt, même si le DOM n'est pas entièrement construit. Cela peut améliorer considérablement le temps de chargement des pages Web, mais il ne peut être utilisé que pour les scripts qui ne modifient pas la structure DOM.

Quel est l'impact du blocage DOM sur le référencement?

Le blocage DOM peut réduire considérablement la vitesse de chargement de la page Web, ce qui affectera négativement son classement SEO. Les moteurs de recherche comme Google considèrent la vitesse de chargement de la page Web comme l'un des facteurs de classement. Par conséquent, éviter le blocage DOM est très important pour vous assurer que votre page se classe élevée dans les résultats des moteurs de recherche.

Qu'est-ce qu'un Dom virtuel et comment est-il aident?

Virtual Dom est un concept utilisé dans les cadres JavaScript modernes tels que React. Il s'agit d'une copie du Dom réel, et les modifications sont apportées en premier dans le DOM virtuel, pas dans le DOM réel. Une fois toutes les modifications terminées, le DOM virtuel sera synchronisé avec le DOM réel par un processus appelé coordination. Cela réduit le nombre d'opérations directes sur le DOM réel, accélérant ainsi le temps de chargement de la page Web.

Comment vérifier si ma page Web a des problèmes de blocage DOM?

Vous pouvez utiliser des outils tels que PagesPeed Insights de Google pour vérifier si vos pages Web ont des problèmes de blocage DOM. Cet outil analyse vos pages Web et fournit des rapports détaillés sur leurs performances, y compris tous les problèmes potentiels tels que le blocage DOM.

CSS provoque-t-il également le blocage DOM?

Oui, le CSS peut également provoquer le blocage DOM. Lorsque le navigateur rencontre un fichier CSS, il doit s'arrêter et le charger pour continuer à rendre la page Web. En effet, le fichier CSS peut contenir des styles qui modifient l'apparence de la page Web. Pour éviter cela, vous pouvez utiliser des méthodes telles que le CSS critique en ligne et le CSS non critique post-critique.

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!