Explication détaillée des exemples de liaison de données et de redistribution DOM

Méthode de liaison de données :

1. Utilisez la méthode de création dynamique de nœuds d'éléments et de les ajouter à la page pour implémenter la liaison de données (ajoutez le li ajouté dynamiquement Ajouté à ul)

var oUl = document.getElementById('ul')for(var i = 0;i<ary.length;i++){var cur = ary[i];var oLi = document.createElement(&#39;li&#39;);
            oLi.innerHTML = "<span>"+(i+1)+"</span>"+cur.title
            oUl.appendChild(oLi)
        }

　Avantage : Ajoutez le contenu qui doit être lié dynamiquement à la page un par un. n'ont aucun impact

Inconvénients : A chaque fois qu'on crée un li, on l'ajoute à la page, déclenchant un reflow DOM Enfin, trop de reflows sont déclenchés, ce qui affecte nos performances.

2. Méthode d'épissage de chaînes : bouclez d'abord les données qui doivent être liées, puis assemblez les balises qui doivent être liées dynamiquement ensemble sous forme de chaînes. (L'épissage de chaînes est le moyen le plus couramment utilisé pour lier des données dans nos futurs travaux)

 str = ""( i = 0;i<ary.length;i++ cur =+="<li>"+="<span>"+(i+1)+"</span>"+=+="</li>"+= str;//oUl.innerHTML(把之前的li以字符串的方式获取到)+str;拼接完成的整体还是字符串
　　　　 最后再把字符串统一的添加到页面中，浏览器还需要把字符串渲染成为对应的标签

Ajouté à ul, Les événements liés par le li original disparaissent

　Avantage : Splice le contenu à l'avance et unifiez-le à la fin. Ajouter à la page, déclenchant un seul reflow

Connaissance approfondie du DOM en JS : le reflow doit être minimisé

Reflow (reflow de réarrangement) : Lorsque le La structure HTML de la page change (des éléments sont ajoutés, supprimés et la position change), le navigateur doit recalculer la dernière structure DOM et recompiler la page actuelle

<.>Redessiner : Une partie du style d'un élément a changé (couleur de fond), le navigateur n'a plus qu'à restituer L'élément actuel peut être

var frg = document.createDocumentFragment();

for(var i = 0;i<ary.length;i++){var cur = ary[i];var oLi = document.createElement(&#39;li&#39;);
            oLi.innerHTML = "<span>"+(i+1)+"</span>"+cur.title
            frg.appendChild(oLi)
        }
        oUl.appendChild(frg);
        frg = null;

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!