|
不知大家對精華區的表格排序終極優化是否還有記憶，當時討論的結果曾以為是最快的JS排序了，實則不然，按前段時間我發的DHTML性能提升帖（轉譯）所講到的，DOM效率某些情況下并不如DHTML，比如一次寫入大量數據時，DOM頻繁創建添加反而更慢，所以可以對排序算法作以下修改：
<table id=downloadList border="1" width="100%" onclick="sortTable()"> <tr> <td>AddCommonInfo.mxp</td> <td>MXP File</td> <td>2614</td> <td>2002-12-30 16:45:22,Fri</td> </tr> <tr> <td>addtemplateparam.mxp</td> <td>MXP File</td> <td>3100</td> <td>2002-12-5 13:28:24,Sun</td> </tr></table><script>var curObj;function sortTable() {var start=new Date()var i;var theRows=new Array();for(i=0;i<downloadList.rows.length;i++) {theRows[i]=new Array(downloadList.rows[i].cells[0].innerText.toLowerCase(),downloadList.rows[i].outerHTML);}theRows.sort(sortRows);var str=''for(i=0;i<theRows.length;i++) {str+=theRows[i][1];}downloadList.outerHTML='<table id=downloadList border="1" width="100%">'+str+'</table>'curObj=null;alert(new Date()-start)return ;}function sortRows(x,y) {if(x[0]>y[0]) return -1;else if(x[0]<y[0]) return 1;else return 0;}</script> [單擊全選，Ctrl+A復制，將代碼保存成html文件運行]注意測試時將記錄條數增加到500條以上，推薦1000條
我測試結果是平均1322ms左右但這樣就是最快的嗎？非也，且看以下xml+xslt+js例子，能把時間縮短到721ms左右
需要準備三個文件
1. xml文件 ---節省版面起見，這里只羅列兩條記錄
<?xml version="1.0" encoding="UTF-8" ?>
<root>
<record>
<info>AddCommonInfo.mxp</info>
<info>MXP File</info>
<info>2614</info>
<info>2002-12-30 16:45:22,Fri</info>
</record>
<record>
<info>addtemplateparam.mxp</info>
<info>MXP File</info>
<info>3100</info>
<info>2002-12-5 13:28:24,Sun</info>
</record>
</root>2. xsl 文件
<?xml version="1.0"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl" version="1.0">
<xsl:template match="root">
<table border="1" width="100%">
<xsl:for-each select="record">
<tr>
<xsl:for-each select="info">
<td>
<xsl:value-of select="text()" />
</td>
</xsl:for-each>
</tr>
</xsl:for-each>
</table>
</xsl:template>
</xsl:stylesheet>注意命名空間，想要在IE5下兼容，必須使用這個名字 3.htm文件
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD><TITLE> New Document </TITLE><META NAME="Generator" CONTENT="EditPlus"><META NAME="Author" CONTENT=""><META NAME="Keywords" CONTENT=""><META NAME="Description" CONTENT=""><script>function safeLoadXML(xmlObj,url,func){xmlObj.async= true;xmlObj.resolveExternals= false;xmlObj.onreadystatechange= function() { if(xmlObj.readyState==4 && xmlObj.parseError==0) { func(xmlObj); } }xmlObj.load(url);}function transformXML(xmlObj,xslObj){var returnValue= xmlObj.transformNode(xslObj);return returnValue;}var xmlDoc= new ActiveXObject("Msxml.DOMDocument");var xslDoc= new ActiveXObject("Msxml.DOMDocument");function init(){safeLoadXML(xmlDoc,'sort.xml',function(){safeLoadXML(xslDoc,'sort.xsl',function(){test.innerHTML= transformXML(xmlDoc.documentElement,xslDoc.documentElement);});});}function sortIt(){var start=new Date();var temp= [];for(var i=0;i<xmlDoc.documentElement.childNodes.length;i++){temp[temp.length]= [xmlDoc.documentElement.childNodes[i].firstChild.firstChild.nodeValue,xmlDoc.documentElement.childNodes[i]]}temp.sort(sortFunc);for(var i=0;i<temp.length;i++){xmlDoc.documentElement.insertBefore(temp[i][1],xmlDoc.documentElement.firstChild)}test.innerHTML= transformXML(xmlDoc.documentElement,xslDoc.documentElement);alert(new Date()-start);}function sortFunc(x,y){if(x[0].toLowerCase()>y[0].toLowerCase()) return 1;else if(x[0].toLowerCase()<y[0].toLowerCase()) return -1;else return 0;}window.onload=init;</script></HEAD><BODY><div id=test onclick=sortIt()></div></BODY></HTML> [單擊全選，Ctrl+A復制，將代碼保存成html文件運行]以上代碼在 WIN2K，IE5 下測試通過，歡迎大家指正 :)
|
