Shulou(Shulou.com)06/02 Report--

This article introduces the relevant knowledge of "performance analysis of various dynamic rendering Element methods". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

I. principles and methodology of performance optimization

Establish the principle: dynamic rendering into a Dom element, first of all, we need to ensure that the dynamic rendering operation must have as little impact on the original dom tree as possible, affecting redrawing and rearrangement.

Determine methodology: you must find a container to cache the dom structure generated during rendering (the operation must have as little impact on the original dom tree as possible), and then render it to the target element again.

Second, the selection of DOM cache during generation

DocumentFragment (document fragment object, reason for selection: detached from document stream)

Temporary Element (selected reason: the new element is detached from the document stream)

Temporary Element+innerHTML+cloneNode returns the outermost element element object, and then inserts the appendChild. If necessary, you need a selector method to extract a certain Element object.

The XML string generates an Element object by parsing (note, it's not a HTMLxxxElement object, it's an Element object), and then appendChild that object into it.

CreateElement, and then render step by step

Convert to a Dom object by describing the String of Dom (hereinafter referred to as DomString)

Temporary string (reason for selection: rendering with innerHTML, one render)

Third, the advantages and disadvantages of DocumentFragment

Basic mode:

Var fragment = document.createDocumentFragment (); fragment.appendChild (. / / generate Element IIFE) / / IIFE example, create elements var ConfigVar = {ELname: "div", id: "blablabla", name: "balblabla", class: "ClassName"} (function (Config) {var el = document.createElement (Config.ELname); el.className = (Config.class | | ") For (let AttrName in Config) {if (AttrName = = "class") continue; el.setAttribute (AttrName,Config [AttrName]);} return el;}) (ConfigVar)

Advantages

1. Separated from the document stream, the operation will not affect the Dom tree.

2. Each time you generate a temporary Element, you can save the reference to the Element object without having to use the selector to get it again.

Shortcoming

Compatibility only achieves IE9+

Fourth, the advantages and disadvantages of createElement

Basic mode

Var el = document.createElement ("ElementName"); el.className = ""; el.setAttribute ("AttrName", AttrValue); el.setAttribute ("AttrName", AttrValue); El.appendChild (. / / generate the IIFE of Element, see above)

Advantages

1. The newly created element is separated from the document flow, and the operation will not affect the Dom tree.

2. Compatibility *

3. Each time you generate a temporary Element, you can save the reference to the Element object without having to use the selector to get it again.

Shortcoming

Each time the setAttribute method is called, the Element is modified again and again, and there is a potential performance penalty.

5. Advantages and disadvantages of DomString-- temporary Element+innerHTML+cloneNode.

Basic mode

Var domString2Dom = (function () {if (window.HTMLTemplateElement) {var container = document.createElement ("template"); return function (domString) {container [XSS _ clean] = domString; return container.content.firstChild.cloneNode (true)}} else {/ / a pair of unsupported template browsers still have compatibility methods not written, so some elements such as tr,td are not supported in div. Var container = document.createElement ("div"); return function (domString) {container [XSS _ clean] = domString; return container.firstChild.cloneNode (true)}) (); var template = domString2Dom (''); for (var index = 0; index < 80; index++) {template.appendChild ((function () {var el = domString2Dom ("M")) Return el}) ()}

Advantages

You don't need to do setAttribute multiple times after creating a Dom

Shortcoming

1. Temporary elements cannot wrap specific elements (you cannot set the innerHTML attribute on all HTML elements in all browsers)

2. The parsing process does a lot of other operations. There is potential performance loss here.

3. Only one element is allowed in the inserted string layer Node

VI. Advantages and disadvantages of DomString--XML parsing

Basic mode

Var XMLParser = function () {var $DOMParser = new DOMParser (); return function (domString) {if (domString [0] = = "

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.