Question

从下面的代码中可以看出，我们使用innerHTML将html插入到页面中。对于每个innerHTML，如果我们有很多innerHTML或复杂的DOM，浏览器将重排并重新绘制，这会导致缓慢。有没有办法只使用一个innerHTML请求来更改内容？我们如何在这里提高绩效？

<Element Name>.FontFamily.ToString();

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 个答案: