使用JavaScript將HTML內容附加到div的最快方法
[英]Fastest way to append HTML content to a div using JavaScript
問題描述
我有一個HTML頁面，它使用AJAX從服務器檢索消息。 我將這些消息附加到a，因為它們是通過設置innerHTML屬性來檢索的。
這種方法工作正常，但文本量很小，但隨着它的增長，它會使Firefox使用所有可用的CPU，並且消息會慢下來爬行。 我不能使用文本框，因為我希望某些文本以彩色突出顯示或使用其他HTML格式。 有沒有更快的方法來做這個不會導致瀏覽器鎖定？
我也試過使用jQuery，但是從我讀過的設置開始.innerHTML比它的.html（）函數更快，而且在我自己的經驗中似乎也是如此。
編輯：感知性能不是問題 - 消息在返回時已經被寫入（使用Comet）。 問題是瀏覽器開始鎖定。 內容的數量並不是那么大--400-500行似乎就這么做了。 該div中沒有div。 整個事情都在一張桌子里，但希望這不重要。
6 個解決方案
解決方案1
24 已采納 2009-09-07 03:47:59
您明確表示您附加意味着您將其附加到同一父級。 你做的事情是這樣的：
myElem.innerHTML += newMessage;
要么
myElem.innerHTML = myElem.innerHTML + newMessage;
因為這是非常低效的（參見這個基准： http ： //jsben.ch/#/Nly0s ）。 它會導致瀏覽器首先執行非常大的字符串連接（這永遠不會好），但更糟糕的是，必須重新解析插入並呈現先前附加的所有內容。 比這更好的是創建一個新的div對象，使用innerHTML放入消息然后調用dom方法appendChild來插入新創建的div與消息。 然后瀏覽器只需插入並呈現新消息。
解決方案2
1 2009-09-07 03:36:11
你可以分解你的文字並將其附加成塊嗎？ 將文本的一部分包裝成div標簽，然后將它們分開，將較小的div添加到頁面中。
雖然這不會加快整個過程，但感知性能可能會更好，因為用戶更快地看到第一個元素，而其余元素稍后加載，可能是在可見頁面之外。
此外，您可能應該重新考慮發送和嵌入頁面的數據量。 如果瀏覽器很慢，那么數據量必然會很大 - 這對用戶來說真的有意義嗎？ 或者分頁界面（或其他增量加載機制）是否更有意義？
解決方案3
1 2016-09-27 20:41:27
您可以使用insertAdjacentHTML("beforeend", "<HTML to append>") 。
這是一篇關於它的性能的文章，它的基准測試顯示insertAdjacentHTML比.innerHTML +=操作快150倍。 在撰寫文章之后的幾年里，瀏覽器可能已經對此進行了優化。
解決方案4
0 2009-09-07 03:42:02
與Rick的答案一致，為什么不將信息作為JSON傳回，所以你可以使用setTimeout來完成它，並顯示2-5個消息，然后調用setTimeout，然后它將執行下一批，直到JSON數組已被處理。
你應該使用innerHTML，所以你的javascript可以動態地創建並添加到div，但是，我只會為第一批做到這一點，以便快速完成所有工作。
之后，我將繼續克隆第一批並更改每個其他消息的innerhtml以及其他信息，並將其添加到dom樹中。
克隆將比創建新元素更快，如果在處理時有任何其他更改dom樹，則不會出現問題。
解決方案5
0 2009-09-07 03:58:03
“整個事情都在一張桌子里，但希望這不重要。”
實際上它很重要。 由於表的性質，在計算列和行中所有單元格的寬度和高度之前，通常不能渲染單元格。 table-layout：fixed以基於第一行鎖定單元格寬度和高度為代價來克服這個問題。
簡而言之，最好不要在表格中包裝，或者如果數據確實是表格式，請嘗試固定布局渲染。
解決方案6
0 2009-09-07 04:10:54
我寫了類似的東西，這很有挑戰性。 首先，您需要隔離問題。
是渲染代碼嗎？ 嘗試評論所有渲染，看看AJAX本身是否會降低Firefox的速度。 如果是這樣，請嘗試不同的渲染方法，如上所述。
是網絡嗎？ 嘗試注釋掉Ajax，並定期運行innerHTML設置。 如果這是問題，您可能需要嘗試不同的時序設置。
如何動態使用 javascript 將 append li 和 div 標簽添加到 html
[英]How to append li and div tags to html using javascript dynamically
Javascript 性能：構建和注入 html 的最快方式
[英]Javascript performance: Fastest way of building and injecting html
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.
相關問題
使用Javascript將div內容作為圖像追加到formData
通過JS復制內容時，使用jQuery將HTML附加到div
使用 javascript 保存 div 內容的 HTML 按鈕
在DIV HTML中遍歷或查找元素的最快方法
在HTML javascript中動態附加Div
如何在html中附加javascript內容
如何動態使用 javascript 將 append li 和 div 標簽添加到 html
如何使用javascript/在html中動態附加div標簽
使用JavaScript附加HTML
Javascript 性能：構建和注入 html 的最快方式
相關標簽