Chaque fois que je charge tout en même temps, j'obtiens des milliers d'objets et des plantages de Chrome.
btn.addEventListener('click', function(){
event.preventDefault();
async function getData(){
const response=await fetch(url)
const data= await response.json();
info(data)
}
getData();
function info(x){
x.messages.forEach(element => {
console.log(element.creator.name+": "+element.text)
// console.log(x.element.text)
con.innerHTML += "<p>"+element.creator.name+": "+element.text+"</p>";
});
}
Voici mon code utilisant rn
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Le premier innerhtml est très lent car il doit être analysé à chaque fois. Créez une fonction pour créer un élément Dom et attachez-le au conteneur souhaité. L'ajout d'une pagination ou de processus pour insérer des données en morceaux serait également utile.
Essayez d'utiliser les éléments enfants ajoutés pour charger un élément à la fois. J'ai laissé un code alternatif ici.
Bac à sable
Code
const btn = document.getElementById("BtnInfo"); btn.addEventListener("click", function (event) { event.preventDefault(); async function getData() { const response = await fetch("https://dummyjson.com/products/1"); const data = await response.json(); info(data); } getData(); function info(x) { for (let key in x) { var pElement = document.createElement("p"); pElement.textContent = `${key}: ${x[key]}`; document.body.appendChild(pElement); } } });