document的一点思索

最新推荐文章于 2025-02-13 17:34:03 发布

liugang0605

最新推荐文章于 2025-02-13 17:34:03 发布

阅读量279

点赞数

CC 4.0 BY-SA版权

分类专栏： js 性能 dom操作 frag 函数参数文章标签：函数前端性能 js document

本文链接：https://blog.youkuaiyun.com/power8988/article/details/74161871

js 同时被 3 个专栏收录

113 篇文章

订阅专栏

dom操作

11 篇文章

订阅专栏

性能

9 篇文章

订阅专栏

本文探讨了前端性能优化的方法，特别是通过改进DOM操作来减少浏览器负担的技术。作者分享了如何优化自定义JavaScript库中的元素创建与操作过程，并提出了一种通过缓存document变量以提升效率的策略。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

英语专八学前端，在家学习ing；
今日看了一些关于性能提升的东西；
反思之前写的两篇文章：
http://blog.youkuaiyun.com/power8988/article/details/74010738，
http://blog.youkuaiyun.com/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);
            }
        };