您的位置：首页 > Web前端

document的一点思索

2017-07-02 22:41 148 查看

英语专八学前端，在家学习ing；

今日看了一些关于性能提升的东西；

反思之前写的两篇文章：

http://blog.csdn.net/power8988/article/details/74010738，

http://blog.csdn.net/power8988/article/details/73864427；

在每篇文章开头都有以下代码；

window.onload=function () {
var el=function(){
this.$=function(sel){
var sel=document.querySelectorAll(sel);
return sel.length===1?sel[0]:sel;
//        这里需要改进，还没想好
};
this.newEl=function(el){
return document.createElement(el)
};
this.frag=function(el){
return document.createDocumentFragment().appendChild(this.newEl(el))
};
this.append=function (par,el){
var par=this.$(par);
var son=this.frag(el);
par.appendChild(son)
};
this.content=function(el,content){
var el=this.$(el);
el.innerHTML=content;
};
this.addAttribute=function(el,attr,attrVal){
this.$(el).setAttribute(attr,attrVal);
}
};
var newtable=new el();
newtable.append("table","tbody");
newtable.addAttribute("table","class","table");
newtable.append("tbody","tr");
newtable.append("tr","td");
newtable.addAttribute("td","class","bg-primary");
newtable.content(".bg-primary","hello");
newtable.append("tr","td");
newtable.addAttribute("tr td:nth-child(2)","class","bg-success");
newtable.content(".bg-success","world");
}

这里每执行一次操作，就需要自上而下查找，“查找局部作用域中的局部变量的速度应该是最快的”，所以最好一开始使用函数时，将当时的document保存起来；

window.onload=function () {
var el=function(){
var doc=document;
this.$=function(sel){
var sel=doc.querySelectorAll(sel);
return sel.length===1?sel[0]:sel;
//        这里需要改进，还没想好
};
this.newEl=function(el){
return doc.createElement(el)
};
this.frag=function(el){
return doc.createDocumentFragment().appendChild(this.newEl(el))
};
this.append=function (par,el){
var par=this.$(par);
var son=this.frag(el);
par.appendChild(son)
};
this.content=function(el,content){
var el=this.$(el);
el.innerHTML=content;
};
this.addAttribute=function(el,attr,attrVal){
this.$(el).setAttribute(attr,attrVal);
}
};

函数调用完毕，doc这个变量会被销毁，至于性能提高了多少，如何查看性能是否提高？this is a question;

还有一个就是继承的问题，需要下来好好想一想。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 函数前端性能 js document

相关文章推荐

新的分享

章节导航