Entfernen von nicht verwendeten DOM-Elementen für die Leistung

Question

Ich schreibe eine einzelne Seite Anwendung. Wenn die Seite anfänglich bereitgestellt wird, enthält sie viele DOM-Elemente, die JSON-Zeichenfolgen enthalten, die ich in die Seite einspeise.

Wenn die Seite auf dem Client geladen wird, passiert das erste, dass diese DOM-Elemente von JSON zu JavaScript-Objekten geparst werden und dann nie wieder verwendet werden.

Wäre es ein Leistungsvorteil, sie aus dem DOM zu löschen und ihre Größe zu reduzieren? Ich habe keine schlüssigen Daten zu diesem Aspekt gefunden. Für Informationen sind diese Elemente etwa 500K groß.

Vielen Dank für Ihre Vorschläge.

Answer 1

Unabhängig davon, ob Sie die JSON aus dem DOM ziehen, können Sie diese Technik für einschließlich Ihrer JSON-Objekte betrachten:

<script type='text/json' id='whatever'> 
    { "some": "json" } 
</script> 

Browser vollständig den Inhalt dieser Schriften (außer natürlich für eingebettete Strings ignorieren, dass sehe aus wie </script>, die es für mich als Dinge, die ein JSON-Serializer möglicherweise irgendwie umgehen möchte), so dass Sie nicht riskieren, in Probleme mit eingebetteten Et-Zeichen und Dinge. Das ist wahrscheinlich ein Performance-Gewinn an und für sich: Der Browser hat wahrscheinlich eine leichtere Zeit, um nach dem Ende des <script> Blocks zu suchen, als nach Dingen zu suchen, von denen er denkt, dass sie tatsächlich Inhalte sind. Sie können den Inhalt wörtlich mit .innerHTML erhalten.

Answer 2

Wäre es ein Leistungsvorteil, sie aus dem DOM zu löschen und seine Größe zu reduzieren?

In Bezug auf die Leistung des DOM, je weniger Sie mit Ihrem DOM interagieren, desto besser. Denken Sie daran, dass Ihre Selektoren das dom durchlaufen. Wenn Sie also ineffiziente Selektoren verwenden, wird die Leistung schlecht, aber wenn Sie Elemente nach ID und nicht nach Klasse oder Attribut auswählen, können Sie eine gute Leistung erzielen aus der Seite, unabhängig davon, ob Sie diese überflüssigen Markup-Elemente gelöscht haben.

Wenn die Seite zunächst serviert wird, es viele DOM-Elemente enthält, dass json Zeichenfolgen enthalten, die ich in die Seite bin Injektion .... Für Informationen sind diese elemnts in Größe 500K über.

In Bezug auf die Seitenlast leidet Ihre Leistung bereits von der Übertragung all dieser Daten. Wenn Sie einen Weg finden, nur den Json zu übertragen, könnte es nur helfen. Das Löschen nach der Tat würde dieses spezielle Problem jedoch nicht lösen.