直接使用createElement()和创建一个局部变量方法,那个性能更好?

发布于 2022-09-03 13:46:39 字数 1535 浏览 21 评论 0

今天看《javascript高级程序设计》上说:把全局的定义为局部变量和使用变量比调用对象属性性能更好,所以吧项目中的代码做了如下修改,但是不知道怎么验证,也感觉这样不知道好在哪,或这样其实并没有优化性能,求大神指点。

如果在js中直接使用createElement()创建元素和将创建一个局部方法指向createElement()这两种那个性能更好?为什么?

直接使用createElement(),这里已经将document复制给局部变量doc
var doc=document    
var createEle=function(eleStr){
        return doc.createElement(eleStr);
    }
            //创建元素
        li = doc.createElement('li');
        span = doc.createElement('span');
        img = doc.createElement('img');
        divContent = doc.createElement('div');
        divBrief = doc.createElement('div');
        ulBrief = doc.createElement('ul');
        divDetail = doc.createElement('div');
        ulDetail = doc.createElement('ul');
        liBrief = doc.createElement('li');
        liDetail = doc.createElement('li');
        a = doc.createElement("a");
    

创建:‘创建对象的方法’

        var doc=document    
        var createEle=function(eleStr){
                return doc.createElement(eleStr);
            }
            //定义创建元素的方法应引用是都比doc.createElement('str');性能更好?
            li = createEle('li');
            span = createEle('span');
            img = createEle('img');
            divContent = createEle('div');
            divBrief = createEle('div');
            ulBrief = createEle('ul');
            divDetail = createEle('div');
            ulDetail = createEle('ul');
            liBrief = createEle('li');
            liDetail = createEle('li');
            a = createEle("a");

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(4

半﹌身腐败 2022-09-10 13:46:39

不这么折腾更好

分析一下doc.createElement:

  1. 在当前作用域下找doc变量

  2. 在doc下找createElement属性

  3. 调用createElement函数

分析一下createEle:

  1. 在当前作用域下找createEle

  2. 执行createEle
    2.1 找doc变量
    2.2 找doc变量下的createElement属性
    2.3 找eleStr参数变量
    2.4 调用createElement属性

你能看出来createEle多出了哪些东西么
(纯粹YY,我不了解JS引擎对代码执行的优化过程)

半寸时光 2022-09-10 13:46:39

与其在意这一点性能问题,还不如优化一下循环什么的东西。也可以玩玩函数式编程

孤者何惧 2022-09-10 13:46:39

我认为直接调用原生方法更快,毕竟包装成函数要多一次调用,而且这个函数也只是简单地调用原生方法且没什么优化。

能否归途做我良人 2022-09-10 13:46:39

你的第二种方法还不如直接这样呢……

var createEle = document.createElement.bind(document);

包装那么几层完全没有必要。

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文