javascript - 直接使用createElement()和创建一个局部变量方法,那个性能更好?
PHPz
PHPz 2017-04-11 12:29:46
0
4
837

今天看《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'); pContent = doc.createElement('p'); pBrief = doc.createElement('p'); ulBrief = doc.createElement('ul'); pDetail = doc.createElement('p'); 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'); pContent = createEle('p'); pBrief = createEle('p'); ulBrief = createEle('ul'); pDetail = createEle('p'); ulDetail = createEle('ul'); liBrief = createEle('li'); liDetail = createEle('li'); a = createEle("a");
PHPz
PHPz

学习是最好的投资!

reply all (4)
伊谢尔伦

不这么折腾更好

分析一下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引擎对代码执行的优化过程)

    伊谢尔伦

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

      迷茫

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

        黄舟

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

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

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

          Latest Downloads
          More>
          Web Effects
          Website Source Code
          Website Materials
          Front End Template
          About us Disclaimer Sitemap
          php.cn:Public welfare online PHP training,Help PHP learners grow quickly!