xslt在Chrome上运行速度快,在IE上运行缓慢

时间:2016-07-06 16:42:59

标签: jquery google-chrome internet-explorer xslt tablesorter

我是XSLT的新手,但我认为我理解它的基础知识归功于一本书和W3,但是我遇到了一个我无法解决的问题......我有一个大的XML文件(没有选项)用于服务器端方法),记录近10k。

以下是一个示例:

<?xml version="1.0"?>
     <severeinjury>
        <record>
            <ID>1111111111</ID>
            <upa>1111111</upa>
            <eventDate>2015-01-01</eventDate>
            <employer>EMPLOYER</employer>
            <address>ADDRESS</address>
            <address2/>
            <city>CITY</city>
            <state>ST</state>
            <zip>12345</zip>
            <NAICS>1111111</NAICS>
            <Hospitalized>1</Hospitalized>
            <Amputation>0</Amputation>
            <inspectionNumber>111111</inspectionNumber>
            <finalNarrative>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text.</finalNarrative>
            <nid>xxx</nid>
            <ntitle>Text</ntitle>
            <pid>xxx</pid>
            <ptitle>Text</ptitle>
            <eid>xxx</eid>
            <etitle>Text Text Text Text Text Text Text</etitle>
            <sid>xxxx</sid>
            <stitle>Text Text Text Text</stitle>
            <ssid>xxxx</ssid>
            <sstitle>Text Text Text Text Text</sstitle>
        </record>
        <--and so-forth for nearly 10k records -->
    </severeinjury>

xsl使用for-eachchoose,但相当香草:

<xsl:output method="html" />

<xsl:template match="severeinjury">
    <table class="table table-striped" id="severeInjuryTable">
        <thead>
            <tr>
                <th data-placeholder="ID">ID</th>
                <th data-placeholder="ID">UPA</th>
                <th data-placeholder="yyyy/mm/dd">Date</th>
                <th data-placeholder="Employer">Employer</th>
                <th data-placeholder="Address">Address</th>
                <th data-placeholder="City">City</th>
                <th class="filter-select" data-placeholder="Select State">ST</th>
                <th data-placeholder="Zip">Zip</th>
                <th data-placeholder="NAICS">Primary NAICS</th>
                <th  class="filter-select" data-placeholder="Select Result">Result</th>
                <th data-placeholder="Inspection#">Insp #</th>
                <th data-placeholder="Narrative">Final Narrative</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th colspan="12" class="ts-pager form-horizontal">
                    <button type="button" class="btn first" title="First Page"><i class="icon-step-backward glyphicon glyphicon-step-backward"></i></button>
                    <button type="button" class="btn prev" title="Previous Page"><i class="icon-arrow-left glyphicon glyphicon-backward"></i></button>
                    <span class="pagedisplay"></span> <!-- this can be any element, including an input -->
                    <button type="button" class="btn next" title="Next Page"><i class="icon-arrow-right glyphicon glyphicon-forward"></i></button>
                    <button type="button" class="btn last" title="Last Page"><i class="icon-step-forward glyphicon glyphicon-step-forward"></i></button>
                    <select class="pagesize input-mini" title="Select page size">
                        <option selected="selected" value="10">10</option>
                        <option value="25">25</option>
                        <option value="50">50</option>
                        <option value="75">75</option>
                        <option value="100">100</option>
                    </select>
                    <select class="pagenum input-mini" title="Select page number"></select>
                </th>
            </tr>
        </tfoot>
        <tbody>
        <xsl:for-each select="record">
        <xsl:sort select="eventdate" />
            <tr>
                <td><xsl:value-of select="ID" /></td>
                <td><xsl:value-of select="upa" /></td>
                <td><xsl:value-of select="eventDate" /></td>
                <td><xsl:value-of select="employer" /></td>
                <td><xsl:value-of select="address" /> <xsl:value-of select="address2" /></td>
                <td><xsl:value-of select="city" /></td>
                <td><xsl:value-of select="state" /></td>
                <td><xsl:value-of select="zip" /></td>
                <td><xsl:value-of select="NAICS" /></td>
                <xsl:choose>
                    <xsl:when test="Hospitalized = 1">
                        <td>Hospitalized</td>
                    </xsl:when>
                    <xsl:when test="Amputation = 1">
                        <td>Amputation</td>
                    </xsl:when>
                    <xsl:when test="Hospitalized = 0">
                        <td>Amputation</td>
                    </xsl:when>
                    <xsl:when test="Amputation = 0">
                        <td>Hospitalized</td>
                    </xsl:when>
                </xsl:choose>
                <td>
                    <a title="View the inspection details for this case" href="{inspectionNumber}" target="_blank">
                        <xsl:value-of select="inspectionNumber" />
                    </a>
                </td>
                <td><xsl:value-of select="finalNarrative" /> 
                    <div class="mocktable">
                        <div class="mockrow">
                            <div class="mockcell center"><xsl:value-of select="nid" /></div>
                            <div class="mockcell center"><xsl:value-of select="pid" /></div>
                            <div class="mockcell center"><xsl:value-of select="eid" /></div>
                            <div class="mockcell center"><xsl:value-of select="sid" /><xsl:text> </xsl:text><xsl:value-of select="ssid" /></div>
                        </div>
                        <div class="mockrow">
                            <div class="mockcell"><xsl:value-of select="ntitle" /></div>
                            <div class="mockcell"><xsl:value-of select="ptitle" /></div>
                            <div class="mockcell"><xsl:value-of select="etitle" /></div>
                            <div class="mockcell"><xsl:value-of select="stitle" /><xsl:text> </xsl:text><xsl:value-of select="sstitle" /></div>
                        </div>
                    </div>
                </td>
            </tr>
        </xsl:for-each>
        </tbody>
    </table>
</xsl:template>
</xsl:stylesheet>

最后,javascript(带有tablesorter.js):

$(document).ready(function(){
    var resultTables = $('#severeinjury');
    resultTables.html('<p><img src="images/spinner.gif" alt="" /> Loading...</p>');
    displayResult();

    function loadXMLDoc(dname) {
        if (window.XMLHttpRequest) {
            xhttp = new XMLHttpRequest();
        } else {
            xhttp = new ActiveXObject("Msxml2.XMLHTTP");
        }
        xhttp.open("GET",dname,false);
        try {xhttp.responseType = 'msxml-document'} catch(e){}
        xhttp.send("");
        return xhttp.responseXML;
    }

    function displayResult() {
        xml = loadXMLDoc("./xml/severeinjury.xml");
        xsl = loadXMLDoc("./xml/severeinjury.xsl");

        if (document.implementation && document.implementation.createHTMLDocument && typeof XSLTProcessor != 'undefined') {
            // code for Chrome, Firefox, Opera, etc.
            xsltProcessor = new XSLTProcessor();
            xsltProcessor.importStylesheet(xsl);
            resultDocument = xsltProcessor.transformToFragment(xml,document);
            resultTables.html(resultDocument);

        } else if (window.ActiveXObject || xhttp.responseType == 'msxml-document'){
            // code for IE
            ex = xml.transformNode(xsl);
            document.getElementById('severeinjury').innerHTML = ex;
        }
    }

    $('#severeInjuryTable').tablesorter({
        theme : "bootstrap",
        sortList : [[2,0]],
        widthFixed: true,
        headerTemplate : '{content} {icon}',
        widgets : [ "uitheme", "filter", "zebra" ],
        widgetOptions : {zebra : ["even", "odd"],
            filter_external : '.search',
            filter_saveFilters : true,
            filter_reset : '.reset',
            filter_hideFilters : false,
            filter_cssFilter : 'tablesorter-filter'
        }
    }).tablesorterPager({container: $('.ts-pager'),cssGoto  : ".pagenum",removeRows: false,output: '{startRow} - {endRow} / {filteredRows} ({totalRows})'});    
});

这需要30秒才能加载整个表并在Chrome和Firefox上应用tablesorter。在IE中加载需要10分钟。我怀疑这是IE的xml变换方法,导致速度减慢。

我需要在IE上更快一些(特别是考虑到我必须向所有人展示这一点以供批准,因为只有IE作为他们的浏览器)。但我正在试图寻找合适的解决方案。任何帮助将不胜感激。

0 个答案:

没有答案
相关问题