Jquery单个appendTo来自多个appendTo

时间:2013-07-24 06:02:00

标签: javascript jquery performance optimization appendto

有一种改进此代码的方法:

jQuery('<img />',{alt:"Logo",src:"img/logo.jpg"}).appendTo("#scrittacentro");
jQuery('<h1 />',{text:'THE LCARS COMPUTER NETWORK',class:'cLightOrange lcars'}).appendTo("#scrittacentro");
jQuery('<h2 />',{text:'Authorized Access Only',class:'cDarkBlue helvetica'}).appendTo("#scrittacentro");
jQuery('<h3 />',{text:'Please Report Malfunctions To Engineering Staff On Duty',class:'cDarkBlue helvetica'}).appendTo("#scrittacentro");

在这样的事情上:

jQuery(
    '<img />',{alt:"Logo",src:"img/logo.jpg"},
    '<h1 />',{text:'THE LCARS COMPUTER NETWORK',class:'cLightOrange lcars'},
    '<h2 />',{text:'Authorized Access Only',class:'cDarkBlue helvetica'},
    '<h3 />',{text:'Please Report Malfunctions To Engineering Staff On Duty',class:'cDarkBlue helvetica'
}).appendTo("#scrittacentro");

提前谢谢。

1 个答案:

答案 0 :(得分:0)

在多个appendTo中,你多次调用jquery构造函数,这会使代码变慢并降低性能。

在单个appen中你一次调用jquery构造函数来提高性能并以更快的方式完成相同的工作

检查效果比较http://jsperf.com/appendto-vs-multiple-appendto

单个appendTo更好

您的代码可以缩小

<强> JS

jQuery('<img alt="Logo" src="img/logo.jpg"><h1 class="cLightOrange lcars">THE LCARS COMPUTER NETWORK</h1><h2 class="cDarkBlue helvetica">Authorized Access Only</h2><h3 class="cDarkBlue helvetica">Please Report Malfunctions To Engineering Staff On Duty</h3').appendTo("body");