不知大家对精华区的表格排序终极优化是否还有记忆,当时讨论的结果曾以为是最快的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
>
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
<
script
>
var curObj;
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
function sortTable()
{
var start=new Date();
var i;
var theRows=new Array();
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
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=''
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
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 ;
}
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
function sortRows(x,y)
{
if(x[0]>y[0]) return -1;
else if(x[0]<y[0]) return 1;
else return 0;
![](/Images/OutliningIndicators/InBlock.gif)
}
</
script
>
注意测试时将记录条数增加到500条以上,推荐1000条
我测试结果是平均1322ms左右
但这样就是最快的吗?非也,且看以下xml+xslt+js例子,能把时间缩短到721ms左右
需要准备三个文件
注意测试时将记录条数增加到500条以上,推荐1000条
我测试结果是平均1322ms左右
但这样就是最快的吗?非也,且看以下xml+xslt+js例子,能把时间缩短到721ms左右
需要准备三个文件
1. sort.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. sort.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
>
3. default.html
<!
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
=""
>
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
<
script
>
function safeLoadXML(xmlObj,url,func)
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](/Images/OutliningIndicators/ContractedSubBlock.gif)
{
xmlObj.async = true;
xmlObj.resolveExternals = false;
xmlObj.onreadystatechange = function()
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if(xmlObj.readyState==4 && xmlObj.parseError==0)
{ func(xmlObj); }
}
xmlObj.load(url);
}
![](/Images/OutliningIndicators/InBlock.gif)
function transformXML(xmlObj,xslObj)
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
var returnValue = xmlObj.transformNode(xslObj);
return returnValue;
}
![](/Images/OutliningIndicators/InBlock.gif)
var xmlDoc = new ActiveXObject("Msxml.DOMDocument");
var xslDoc = new ActiveXObject("Msxml.DOMDocument");
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
function init()
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
safeLoadXML(xmlDoc,'sort.xml',
function()
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
safeLoadXML(xslDoc,'sort.xsl',
function()
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
test.innerHTML = transformXML(xmlDoc.documentElement,xslDoc.documentElement); });
});
}
![](/Images/OutliningIndicators/InBlock.gif)
function sortIt()
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{var start=new Date();
var temp = [];
for(var i=0;i<xmlDoc.documentElement.childNodes.length;i++)
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
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++)
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
xmlDoc.documentElement.insertBefore(temp[i][1],xmlDoc.documentElement.firstChild)
}
test.innerHTML = transformXML(xmlDoc.documentElement,xslDoc.documentElement);
alert(new Date()-start);
}
function sortFunc(x,y)
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
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
>
![](/Images/OutliningIndicators/None.gif)
<
BODY
>
<
div
id
="test"
onclick
="sortIt()"
></
div
>
</
BODY
>
</
HTML
>