JavaScript代碼改進

Question

我不是一個巨大的JavaScript性能大師。簡單地想知道，我可以使下面的代碼更緊湊嗎？不是在打包或壓縮它，而是按照它的寫法。

(function() { 
    var jq = document.createElement('script'); 
    var an = document.createElement('script'); 
    var cm = document.createElement('script'); 
    var ga = document.createElement('script'); 
    var domain = 'http://example.com/'; 

    jq.src = domain + 'jquery.1.3.2.js'; 
    an.src = domain + 'jquery.alphanumeric.js'; 
    cm.src = domain + 'common.js'; 
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; 
    ga.setAttribute('async', 'true'); 

    document.documentElement.firstChild.appendChild(jq); 
    document.documentElement.firstChild.appendChild(cm); 
    document.documentElement.firstChild.appendChild(an); 
    document.documentElement.firstChild.appendChild(ga); 
})(); 

乾杯傢伙！

Answer 1

'https:' == document.location.protocol ? 'https://ssl' : 'http://www' 

可以成爲：

'http' + 'https:'==document.location.protocol ? 's://ssl' : '://www' 

這是唯一的改善，我可以看到，除非你願意去爲非標準的JavaScript，而不是創造的元素，但實際的HTML元素轉換爲字符串，然後將其附加到文檔中.innerHTML

Answer 2

壓縮寫入的方式和性能無關。但把它寫在更緊湊的，可重用的方式：

function appendScript(url, async) { 
    var el = document.createElement('script'), 
     root = document.documentElement; 
    el.async = async; 
    el.src = url; 
    // avoid an IE6 bug by using insertBefore (http://bugs.jquery.com/ticket/2709) 
    root.insertBefore(el, root.firstChild); 
} 


appendScript('http://example.com/js/jquery.1.3.2.js', false); 
appendScript('http://example.com/js/jquery.alphanumeric.js', false); 
appendScript('http://example.com/js/common.js', false); 
appendScript(('https:' == document.location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js'), true); 

Answer 3

var child1 = document.documentElement.firstChild; 
child1.appendChild(jq); 
child1.appendChild(cm); 
child1.appendChild(an); 
child1.appendChild(ga); 

Answer 4

您可以創建一個addScriptElement（）函數來制定本辦法少重複。

Answer 5

我敢肯定，這將得到downvoted爲「膨脹」，只是分享我會怎麼做：

首先，我將定義這樣的功能，這將是高度可擴展性：

function addElements(objlist) { 
    // One or many 
    objlist = [].concat(objlist); 

    while(objlist.length > 0) { 
     var current = objlist.pop(); 

     var node = document.createElement(current.element || 'div'); 
     for(attr in current.attributes) 
      node.setAttribute(attr, current.attributes[attr]); 

     if(current.parent) 
      current.parent.appandChild(node); 
    } 
} 

然後，使用它：

addElements([ 
    { 
     parent: document.documentElement.firstChild, 
     element: 'script', 
     attributes: { 
      src: 'http://example.com/jquery.1.3.2.js' 
     } 
    }, 
    { 
     parent: document.documentElement.firstChild, 
     element: 'script', 
     attributes: { 
      src: 'http://example.com/jquery.alphanumeric.js' 
     } 
    }, 
    { 
     parent: document.documentElement.firstChild, 
     element: 'script', 
     attributes: { 
      src: 'http://example.com/common.js' 
     } 
    }, 
    { 
     parent: document.documentElement.firstChild, 
     element: 'script', 
     attributes: { 
      src: ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js', 
      async: true 
     } 
    } 
]); 

這就是我所說的'電源功能'。它的可讀性非常高，即使有重複，也可以用力量表達。

你甚至可以自動創建對象：

var elements = [ 
    'jquery.1.3.2.js', 
    'jquery.alphanumeric.js', 
    'common.js', 
    ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js' 
]; 

for(var i=0; i<4; ++i) { 
    elements[i] = { 
     element: 'script', 
     parent: document.documentElement.firstChild, 
     attributes: { 
      src: 'http://example.com/' + elements[i] 
     } 
    }; 
} 

elements[3].attributes.async = true; 

addElements(elements); 

Answer 6

好吧，這是我拍這個。不知道它現在可以節省多少，但如果你在example.com上獲得更多資產，它會加快速度。

(function(){ 
    var scripts = ['jquery.1.3.2', 'jquery.alphanumeric', 'common'], 
     head  = document.documentElement.firstChild, 
     domain  = 'http://example.com/', 
     add_script = function(url, async){ 
      var script = document.createElement('script'); 
      script.src = url; 
      if(async === true) script.setAttribute('async', 'true'); 
      head.appendChild(script); 
     }; 

    for(script in scripts) add_script(domain + scripts[script] + '.js'); 

    add_script(('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js', true); 
})(); 

Answer 7

下面是一種方法。希望這使得它可以直接添加或刪除腳本（這做或不需要async屬性：。

({ 
    DOMAIN : 'http://example.com/', 
    SCRIPTS : [ {file:'jquery.1.3.2.js'}, 
      {file:'jquery.alphanumeric.js'}, 
      {file:'common.js'}, 
      {file: ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js' 
       , async: 'true'} ], 
    init: function() { 
     for (var i in this.SCRIPTS) { 
      var script = this.SCRIPTS[i]; 
      var sc = document.createElement('script'); 
      sc.src = (script.file.match(/^http/gi)) ? sc.src = script.file : sc.src = this.DOMAIN + script.file; 
      if (typeof script.async !== 'undefined') { 
       sc.setAttribute('async', script.async); 
      } 
      document.documentElement.firstChild.appendChild(sc); 
     } 

    } 
}).init();