CSS第n個孩子（單數）vs Javascript性能

Question

有沒有人測試過使用css nth-child（奇數）選擇器vs javascript的性能，如果你正在構建x元素列表並且想要設置奇數編號元素？

類似以下內容：

CSS：

#some-list li:nth-child(odd) { 
    color: #f00; 
} 

JS：

var theList = document.getElementById('some-list'), 
    stuff = ['a', 'b', 'c', 'd', 'e', 'f', 'g'], 
    listLen = stuff.length, 
    i = 0, 
    someContent = ''; 

while(i < listLen) { 
    someContent += '<li>' + stuff[i] + '</li>'; 
    i += 1; 
} 

theList.innerHTML = someContent; 

對戰的類似性能：

CSS：

#some-list .is-odd { 
    color: #f00; 
} 

個

JS：

var theList = document.getElementById('some-list'), 
    stuff = ['a', 'b', 'c', 'd', 'e', 'f', 'g'], 
    listLen = stuff.length, 
    i = 0, 
    someContent = '', 
    isOdd = ' class="is-odd"'; 

while(i < listLen) { 
    someContent += '<li' + isOdd + '>' + stuff[i] + '</li>'; 
    isOdd = (isOdd !== '') ? '' : ' class="is-odd"'; 
    i += 1; 
} 

theList.innerHTML = someContent; 

Answer 1

我已經運行在jsperf測試！請看看它：

http://jsperf.com/childperformance1

對於樣品，我只用2列表下的子元素。您可以添加更多的子元素並嘗試對它們進行測試！