爲IE6優化字符串代碼

我的網站上有一個頁面，它使用JS通過字符串寫出大量動態內容，然後將其解析爲HTML。在所有瀏覽器中都很好用，但IE6速度非常慢。許多用戶最終得到「腳本沒有響應，您想中止嗎？」消息。爲IE6優化字符串代碼

我已經嘗試使用數組而不是字符串來查看IE6是否處理更好，但我仍然獲得相同的性能。我想知道是否有人對IE6如何進行優化有任何聰明的想法，否則會阻止出現無響應的腳本消息。

function createTable(){ 

    var tableStr = "<table><tbody>"; 

    tableStr += "</tbody></table>"; 

    for(var x=0; x<contentData.length;x++){ 
    tableStr += createRow(contentData[x]); 
    } 

    $("#content").html(tableStr); 
} 

function createRow(data){ 
    var rowStr = "<tr>"; 
    rowStr += "<td>" + data.name + "</td>"; 
    rowStr += "<td>" + data.address + "</td>"; 
    rowStr += "<td>" + data.phone + "</td>"; 
    rowStr += "<td>" + data.fax + "</td>"; 
    rowStr += "</tr>"; 
    return rowStr; 
}

來源

2011-10-24 Maxx

這將有助於您發佈相關代碼的示例。 – Pointy

您是否使用大型循環？很難幫助您在沒有代碼的情況下進行優化。 – epascarello

IE6 * IS *慢。沒有看到你的代碼，很難說什麼可以優化。一般而言，您希望在內存中執行儘可能多的HTML操作，儘可能少地寫入DOM。即儘可能做到「脫屏」。 –

看this post關於如何提高JavaScript性能的IE

來源

2011-10-24 14:58:39

謝謝，迄今爲止這非常有幫助。 – Maxx

建議最好的解決辦法是將用戶指向http://www.ie6countdown.com/ - 由微軟創建擺脫IE6的全球網站。當一家公司懇求客戶停止使用他們的產品時，我認爲這很有說服力。

但是，您可能無法做到這一點。在IE6中解決這種情況的最佳解決方案是在服務器上構建HTML;字符串操作和分配到innerHTML是非常緩慢的IE6和沒有「竅門」，使其更快。

給你一個想法：我不得不顯示2MB的HTML。 IE6在不到一秒內從磁盤加載。通過分配給innerHTML將相同的HTML添加到現有頁面需要110秒。

或者您可以使用定時器拆分添加以避免阻塞頁面。看到這個答案：Ways to increase performance when set big value to innerHTML

來源

2011-10-24 15:00:03

謝謝......我認爲美國剩下的1.4％是我目前爲這個項目工作的客戶。 – Maxx

function createTable(){ 

    //show loading message here since it will be a async load 
    //$("#loadingMsg").show(); 

    var tableStr = "<table><tbody>"; 
    tableStr += "</tbody></table>"; 

    var rowCnt = 0; 
    function buildTable(){ 

     //break up building table into 50 row chucks 
     for(var x=0; x<50 && rowCnt<contentData.length;x++){ 
      tableStr += createRow(contentData[rowCnt]); 
      rowCnt++; 
     } 

     //if we have not built the table, make a call to build next section 
     //The setTimeout keeps the unresponsive message from appearing 
     if(rowCnt<contentData.length){ 
      window.setTimeout(buildTable,0); 
     } 
     else{ //all rows have been added, set the table with the data 
      //hide a loading message 
      //$("#loadingMsg").hide(); 
      $("#content").html(tableStr); 
     } 
    } 

    buildTable(); //kick off the table building 

} 

function createRow(data){ 
    var rowStr = "<tr>"; 
    rowStr += "<td>" + data.name + "</td>"; 
    rowStr += "<td>" + data.address + "</td>"; 
    rowStr += "<td>" + data.phone + "</td>"; 
    rowStr += "<td>" + data.fax + "</td>"; 
    rowStr += "</tr>"; 
    return rowStr; 
}

來源

2011-10-24 15:24:59 epascarello

我實際上正在做這樣的事情。我已經打破了我的各個部分，一次加載一個，其間有一秒鐘的呼吸室。儘管如此，一部分仍然停止。謝謝你的提示。投票+ – Maxx

你實際上是否正在使用一個計時器來分解這些部分？處理大循環會導致該消息出現。如果您將事件處理程序添加到大量元素中，也會發生這種情況。確保它在構建過程或其他區域發生。 – epascarello

我只是在每個部分的加載結束後使用setTimeout，而不是一個計時器本身。我會研究一下。 – Maxx

你有沒有考慮過使用模板引擎？有多個模板引擎可用於jQuery/JavaScript，可能有助於這種情況。

Check out this stack overflow question

來源

2011-10-24 15:51:07

我有，但它不適合當前的項目。客戶已經在使用我們已有的東西，他們不想要不同的東西，只是更加優化。 – Maxx

爲IE6優化字符串代碼

回答

相關問題