重庆分公司
重庆分公司，新征程启航
为企业提供网站建设、域名注册、服务器等服务
各种动态渲染Element方式的性能分析
本篇内容介绍了“各种动态渲染Element方式的性能分析”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！
创新互联是一家专注于成都做网站、网站设计与策划设计,广灵网站建设哪家好?创新互联做网站,专注于网站建设十载,网设计领域的专业建站公司;建站业务涵盖:广灵等地区。广灵做网站价格咨询:028-86922220
一、性能优化的原则及方法论
树立原则：动态渲染进入一个Dom元素，首先需要保证动态渲染操作必须尽可能少对原有dom树的影响，影响重绘及重排。
确定方法论：必须寻找一个容器来缓存渲染期间生成的dom结构(操作必须尽可能少对原有dom树的影响)，然后再进行一次渲染到目标element中。
二、生成期间DOM缓存的选择
DocumentFragment(文档碎片对象，选择原因：脱离于文档流)
临时Element(选择原因：新element脱离于文档流)
临时Element+innerHTML+cloneNode返回最外层element元素对象，再进行插入appendChild，必要时还需要选择器方法讲某一个Element对象提取出来
XML字符串通过解析生成Element对象(注意，不是HTMLxxxElement对象，是Element对象)，然后将该对象appendChild进去
createElement，再一步步进行渲染
通过描述Dom的String(下称：DomString)，转化为Dom对象
临时字符串(选择原因：借助innerHTML渲染，一次渲染)
三、DocumentFragment的优缺点
基本模式：
var fragment = document.createDocumentFragment(); fragment.appendChild( ... //生成Element的IIFE )
//IIFE示例,根据配置创建元素 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)优点
1、脱离于文档流，操作不会对Dom树产生影响
2、在每一次生成临时Element时候就可以将该Element对象的引用保存下来，而不需要多次用选择器再次获取。
缺点
兼容性只是达到IE9+
四、createElement的优缺点
基本模式
var el = document.createElement("ElementName"); el.className = ""; el.setAttribute("AttrName",AttrValue); el.setAttribute("AttrName",AttrValue); ... el.appendChild( ... //生成Element的IIFE,见上文 );优点
1、新创建的元素脱离于文档流，操作不会对Dom树产生影响
2、兼容性***
3、在每一次生成临时Element时候就可以将该Element对象的引用保存下来，而不需要多次用选择器再次获取。
缺点
每一次调用setAttribute方法都是一次次对Element进行修改，此处具有潜在的性能损耗。
五、DomString——临时Element+innerHTML+cloneNode的优缺点
基本模式
var domString2Dom = (function(){ if (window.HTMLTemplateElement){ var container = document.createElement("template"); return function(domString){ container.innerHTML = domString; return container.content.firstChild.cloneNode(true) } }else{ //对不支持的template 的浏览器还有兼容性方法没写，所以不支持tr,td等些元素inner进div中。 var container = document.createElement("div"); return function(domString){ container.innerHTML = domString; return container.firstChild.cloneNode(true) } } })();var template = domString2Dom('M
"); return el })() ) }优点
创建Dom之后不需要多次进行setAttribute
缺点
1、临时元素不能包裹一些特定的元素(不能在所有浏览器的所有 HTML 元素上设置 innerHTML 属性)
2、解析的过程进行了很多其余的操作。此处具有潜在的性能损耗。
3、插入的字符串***层Node只允许有一个元素
六、DomString——XML解析的优缺点
基本模式
var XMLParser = function () { var $DOMParser = new DOMParser(); return function (domString) { if (domString[0] == "<") { var doc = $DOMParser.parseFromString(domString, "application/xhtml+xml"); return doc.firstChild; } else { return document.createTextNode(domString); } }; }();var template = XMLParser('M
"); return el; })()); }优点
DomString方法中通用性***的，虽然IE10+才支持DOMParser，但是IE9以下的有替代方法
缺点
1、解析的过程本身就具有潜在的性能损耗。
2、只能得到刚刚创建最外层元素的克隆。子元素的引用还需要用选择器。
3、插入的字符串***层Node只允许有一个元素
七、临时字符串的优缺点
基本模式：
var template = document.createElement("div"); template.innerHTML = ` Test TextNode ${(function(){ var temp = new Array(8); for (var index = 0; index < 80; index++) { temp[index]="M" } return temp.join() }())}