如何減少DOM操作？

Question

從下面的代碼中可以看到，我們正在使用innerHTML將html插入頁面。 對於每個innerHTML，如果我們擁有大量的innerHTML或復雜的DOM，瀏覽器將進行重排和重繪，這會導致速度變慢。 有沒有一種方法可以只使用一個innerHTML請求來更改內容？ 我們如何在這里提高性能？

<html>
<head>
 <title>test </title>
</head>
<body>
<div id="1"> I'm div 1</div>
<div id="2"> I'm div 2</div>
<div id="3"> I'm div 3</div>
<div id="4"> I'm div 4</div>
<div id="5"> I'm div 5</div>



<script type="text/javascript">
document.getElementById("1").innerHTML='<b>Im New value 1 </b>';
document.getElementById("3").innerHTML='<b>Im New value 3  </b>';
document.getElementById("4").innerHTML='<b>Im New value 4  </b>';
document.getElementById("5").innerHTML='<b>Im New value 5  </b>';
</script>

 </body>
 </html>

Answer 1

取決於速度的變化會影響網站的速度，至少在一個調用中修改dom可以生成更簡潔的CSS過渡，因此DOM上的最佳性能是使用帶有documentFragmanent的色情JavaScript，如@ A.Wolff所說。

也許一個選擇是重新加載html中的部分，如我的示例所示，重新加載/覆蓋dom的較大部分可以提高性能。 如果每個dom子對象都是通過事件進行更新的，而不是您的網站混亂，請重新考慮模塊中的頁面組元素（如頁面中的部分），對事件應用優先級規則。 一次嘗試盡可能多地更新大塊dom。

 var containerString = $("#wrapper").clone(); $(containerString).find('#1').html('<b>Im New value 1 </b>'); $(containerString).find('#3').html('<b>Im New value 3 </b>'); $(containerString).find('#4').html('<b>Im New value 4 </b>'); $(containerString).find('#5').html('<b>Im New value 5 </b>'); $("#wrapper").html("").append(containerString)

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <html> <head> <title>test </title> </head> <body> <div id="wrapper"> <div id="1"> I'm div 1</div> <div id="2"> I'm div 2</div> <div id="3"> I'm div 3</div> <div id="4"> I'm div 4</div> <div id="5"> I'm div 5</div> </div> </body> </html>

如何減少DOM操作？

問題描述

1 個解決方案

解決方案1
1 已采納 2016-03-02 15:40:54

如何減少DOM操作？

問題描述

1 個解決方案

解決方案1 1 已采納 2016-03-02 15:40:54

解決方案1
1 已采納 2016-03-02 15:40:54