最近2018中文字幕在日韩欧美国产成人片_国产日韩精品一区二区在线_在线观看成年美女黄网色视频_国产精品一区三区五区_国产精彩刺激乱对白_看黄色黄大色黄片免费_人人超碰自拍cao_国产高清av在线_亚洲精品电影av_日韩美女尤物视频网站

 
 
 
  
  
  
var fragment = document.createDocumentFragment(); 
  
  
  
    fragment.appendChild( 
  
  
  
        ...    //生成Element的IIFE 
  
  
  
    )  
 
 

 
 
 
  
  
  
//IIFE示例,根據(jù)配置創(chuàng)建元素 
  
  
  
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)  
 
 

 
 
 
  
  
  
var el = document.createElement("ElementName");     
  
  
  
    el.className = ""; 
  
  
  
    el.setAttribute("AttrName",AttrValue); 
  
  
  
    el.setAttribute("AttrName",AttrValue); 
  
  
  
    ... 
  
  
  
    el.appendChild(         
  
  
  
          ... //生成Element的IIFE,見(jiàn)上文 
  
  
  
    );  
 
 

 
 
 
  
  
  
var domString2Dom = (function(){ 
  
  
  
    if (window.HTMLTemplateElement){ 
  
  
  
        var container = document.createElement("template"); 
  
  
  
        return function(domString){ 
  
  
  
            container.innerHTML = domString; 
  
  
  
            return container.content.firstChild.cloneNode(true) 
  
  
  
        } 
  
  
  
    }else{ 
  
  
  
        //對(duì)不支持的template 的瀏覽器還有兼容性方法沒(méi)寫(xiě)，所以不支持tr,td等些元素inner進(jìn)div中。 
  
  
  
        var container = document.createElement("div"); 
  
  
  
        return function(domString){ 
  
  
  
            container.innerHTML = domString; 
  
  
  
            return container.firstChild.cloneNode(true) 
  
  
  
        }         
  
  
  
    } 
  
  
  
})();  
 
 

 
 
 
  
  
  
var template = domString2Dom('

 
 
 
  
  
  
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('

 
 
 
  
  
  
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() 
  
  
  
                        }())} 
  
  
  
                      

 
 
 
  
  
  
var template = document.createElement("template"); 
  
  
  
template.innerHTML = ` 
  
  
  
                        Test TextNode 
  
  
  
                        ${(function(){ 
  
  
  
                          var temp = new Array(8); 
  
  
  
                          for (var index = 0; index < 80; index++) { 
  
  
  
                            temp[index]="
M
" 
  
  
  
                          } 
  
  
  
                          return temp.join() 
  
  
  
                        }())} 
  
  
  
                      

優(yōu)點(diǎn)

比div要好很多，作為臨時(shí)元素容器的包容性更強(qiáng)

缺點(diǎn)

兼容性不好：http://caniuse.com/#search=HTML%20templates 在不支持的瀏覽器中表示為HTMLUnknownElement

九、各種方法的效率對(duì)比

測(cè)試代碼：(由于筆者不太熟悉各種瀏覽器性能的BUG，這里的代碼如果有不足請(qǐng)指正)，代碼由typescript進(jìn)行編寫(xiě)，也可以用babel進(jìn)行編譯。

 
 
 
  
  
  
/** 
  
  
  
 * @param Count:渲染DOM結(jié)構(gòu)的次數(shù) 
  
  
  
 */ 
  
  
  
var DateCount = { 
  
  
  
    TimeList : {}, 
  
  
  
    time:function(Str){ 
  
  
  
        console.time(Str); 
  
  
  
    }, 
  
  
  
    timeEnd:function(Str){ 
  
  
  
        console.timeEnd(Str); 
  
  
  
    } 
  
  
  
}; 
  
  
  
//==================工具函數(shù)====================== 
  
  
  
var domString2Dom = (function () { 
  
  
  
    var container; 
  
  
  
    if (window.HTMLTemplateElement) { 
  
  
  
        container = document.createElement("template"); 
  
  
  
        return function (domString) { 
  
  
  
            container.innerHTML = domString; 
  
  
  
            return container.content.firstChild.cloneNode(true); 
  
  
  
        }; 
  
  
  
    } 
  
  
  
    else { 
  
  
  
        //對(duì)不支持的template 的瀏覽器還有兼容性方法沒(méi)寫(xiě)，所以不支持tr,td等些元素inner進(jìn)div中。 
  
  
  
        container = document.createElement("div"); 
  
  
  
        return function (domString) { 
  
  
  
            container.innerHTML = domString; 
  
  
  
            return container.firstChild.cloneNode(true); 
  
  
  
        }; 
  
  
  
    } 
  
  
  
})(); 
  
  
  
var XMLParser = (function () { 
  
  
  
    var $DOMParser; 
  
  
  
    if (window.DOMParser) { 
  
  
  
        $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); 
  
  
  
            } 
  
  
  
        }; 
  
  
  
    }else{ 
  
  
  
        $DOMParser = new ActiveXObject("Microsoft.XMLDOM"); 
  
  
  
        return function (domString) { 
  
  
  
            if (domString[0] == "<") { 
  
  
  
                $DOMParser.async = false; 
  
  
  
                $DOMParser.loadXML(domString);    
  
  
  
                return $DOMParser 
  
  
  
            } 
  
  
  
            else { 
  
  
  
                return document.createTextNode(domString); 
  
  
  
            }                 
  
  
  
        } 
  
  
  
 
  
  
  
    } 
  
  
  
 
  
  
  
})(); 
  
  
  
//=============================================== 
  
  
  
 
  
  
  
var Test = function(Count){ 
  
  
  
    //保留這種寫(xiě)法，能夠在移動(dòng)端平臺(tái)中不依靠控制臺(tái)進(jìn)行效率測(cè)試 
  
  
  
    // var DateCount = { 
  
  
  
    //     TimeList : {}, 
  
  
  
    //     time:function(Str){ 
  
  
  
    //         this.TimeList[Str] = Date.now(); 
  
  
  
    //     }, 
  
  
  
    //     timeEnd:function(Str){ 
  
  
  
    //         alert(Str+(Date.now() - this.TimeList[Str])); 
  
  
  
    //     } 
  
  
  
    // } 
  
  
  
 
  
  
  
        //基準(zhǔn)測(cè)試1： 
  
  
  
    DateCount.time("無(wú)臨時(shí)div + 不需要字符串拼接 + innerHTML：") 
  
  
  
    for (let index = 0; index < Count; index++) { 
  
  
  
        (function(){ 
  
  
  
            var template = document.createElement("div"); 
  
  
  
                template.className = "TestClass"; 
  
  
  
                template.setAttribute("Arg","TestArg") 
  
  
  
                template.innerHTML = ` Test TextNode 
  
  
  
M