我的jQuery脚本执行得不好吗？
我为照片实验室构建了一个web工具，用于启动打印机处理的打印订单 在旧版Mac上，我的脚本性能很差。 我想知道我的脚本中是否有一些性能低下的部分 你们看到这么低性能的部件了吗 thx，Max我的jQuery脚本执行得不好吗？,jquery,performance,Jquery,Performance,我为照片实验室构建了一个web工具，用于启动打印机处理的打印订单 在旧版Mac上，我的脚本性能很差。 我想知道我的脚本中是否有一些性能低下的部分 你们看到这么低性能的部件了吗 thx，Max $(function() { /* when start button is clicked */ $('.start_btn').click(function() { /* remove all previous input fields */ $("#dialog_fieldset"
$(function() {
/* when start button is clicked */
$('.start_btn').click(function() {
/* remove all previous input fields */
$("#dialog_fieldset").children().remove();
/* save id */
id = $(this).attr('name');
/* get data from db */
$.post("inc/get_start_order_infos.inc.php", { id: id },
/* Callback */
function(data){
/* make data globally available */
daten = data;
/* build the var 'infos_html' */
var infos_html = '<label for="kunden_nr">Kunden-Nr.</label><input type="text" name="kunden_nr" id="kunden_nr" ';
infos_html += 'value="' + data.kunden_nr + '" class="text ui-widget-content ui-corner-all" />';
infos_html += '<label for="sort">Sort</label><input type="text" name="sort" id="sort" value="';
infos_html += data.sort_nr + '" class="text ui-widget-content ui-corner-all" />';
/* append infos_html to the fieldset */
$('#dialog_fieldset').append(infos_html);
/* Code Index */
anzahlCodes = 1;
/* For each element within the sub array codes */
for(e in data.codes){
/* build the var 'code_html' */
var code_html = '<label for="code' + anzahlCodes + '">Code ' + anzahlCodes;
code_html += '</label><input type="text" name="code' + anzahlCodes + '" id="code' + anzahlCodes;
code_html += '" value="' + data.codes[e] + '" class="text ui-widget-content ui-corner-all" />';
/* append code_html to the fieldset */
$('#dialog_fieldset').append(code_html);
anzahlCodes++;
}
$('#dialog').dialog('open');
$('#kunden_nr').select();
}, "json");
return false;
});
$("#dialog").dialog({
bgiframe: false,
autoOpen: false,
height: 350,
modal: true,
buttons: {
'Auftrag starten': function() {
/* close dialog */
$(this).dialog('close');
/* create the info array to be submitted */
var arr_infos = new Array();
arr_infos[0] = id;
arr_infos[1] = $('#kunden_nr').attr('value');
arr_infos[2] = $('#sort').attr('value');
/* write inputs into the str_codes */
var str_codes = "";
for (var i=1; i < anzahlCodes; i++){
var cde = '#code' + i;
if(i == 1){
str_codes += $(cde).attr('value');
}
else{
str_codes += "<--->" + $(cde).attr('value');
}
}
/* execute start */
$.post("inc/start_orders.inc.php", { 'corrected_infos[]':arr_infos, 'corrected_codes': str_codes },
/* Callback */
function(data){
$('#notice').remove();
/* if start was successful */
if (data.mstype == 'success'){
/* the pressed button */
btn = ".start_btn[name=" + id + "]";
/* the tr where the button is inside */
tr = $(btn).parent().parent();
/* remove red */
$(tr).removeClass('rot');
/* set text of Kunden-Nr. td */
$(tr).children().eq(3).text(arr_infos[1]);
/* set text of Sort td */
$(tr).children().eq(4).text(arr_infos[2]);
/* set text of Code td */
$(tr).children().eq(5).text(str_codes);
/* set text of start td */
$(tr).children().eq(8).text('ja');
/* prepend notice */
$("#outline").prepend("<div id='notice'>" + data.ms + "</div>");
}
/* if not successful */
else {
$("#outline").prepend("<div id='notice' class='notice_err'>" + data.ms + "</div>");
}
}, "json");
},
'Abbrechen': function() {
$(this).dialog('close');
}
}
});
$（函数（）{
/*单击“开始”按钮时*/
$（'.start_btn'）。单击（函数（）{
/*删除所有以前的输入字段*/
$（“#对话框_字段集”）.children（）.remove（）；
/*保存id*/
id=$（this.attr（'name'）；
/*从数据库获取数据*/
$.post（“inc/get\u start\u order\u infos.inc.php”，{id:id}，
/*回拨*/
功能（数据）{
/*使数据全球可用*/
daten=数据；
/*构建变量“infos_html”*/
var infos_html='Kunden-Nr'；
infos_html+=“排序”；
/*将infos_html附加到字段集*/
$（'#dialog_fieldset'）。追加（infos_html）；
/*代码索引*/
anzahlCodes=1；
/*对于子数组代码中的每个元素*/
用于（数据代码中的e）{
/*构建变量“code\u html”*/
var code_html=‘code’+anzahlCodes；
代码_html+=''；
/*将代码附加到字段集*/
$（'#dialog_fieldset'）.append（code_html）；
anzahlCodes++；
}
$（'dialog'）。dialog（'open'）；
$（'kunden'u nr'）。选择（）；
}“json”）；
返回false；
});
$（“#对话框”）。对话框({
bgiframe:false，
自动打开：错误，
身高：350，
莫代尔：是的，
按钮：{
“Auftrag starten”：函数（）{
/*关闭对话框*/
$（this.dialog（'close'）；
/*创建要提交的信息数组*/
var arr_infos=新数组（）；
arr_infos[0]=id；
arr#u infos[1]=$（'kunden#u nr'）.attr（'value'）；
arr_infos[2]=$（'sort'）.attr（'value'）；
/*将输入写入str_代码*/
var str_code=“”；
对于（变量i=1；i祝你好运。嘿，Max。如果你还没有安装的话，我建议你安装。然后你可以使用Javascript评测功能来找出代码中到底哪里出现了减速 下面是一个关于Firebug评测的好方法
祝你好运。只要浏览一下代码，你可能犯的最大错误就是第二次回调（最下面的一次）继续重新选择行子元素。您应该将该常见查询结果分配给一个变量，然后使用该变量。我想您会看到性能的改善。我将这样更改：
/* beginning of callback code */
if (data.mstype == 'success') {
/* the pressed button */
btn = $(".start_btn[name=" + id + "]");
/* the tr where the button is inside */
tr = $(btn).parent().parent();
/* remove red */
tr.removeClass('rot');
/***** This is the change *****/
var children = $(tr).children();
/* set text of Kunden-Nr. td */
children.eq(3).text(arr_infos[1]);
/* set text of Sort td */
children.eq(4).text(arr_infos[2]);
/* set text of Code td */
children.eq(5).text(str_codes);
/* set text of start td */
children.eq(8).text('ja');
/* prepend notice */
$("#outline").prepend("<div id='notice'>" + data.ms + "</div>");
}
/* end of callback code */
/*回调代码的开头*/
如果（data.mstype=='success'）{
/*按下的按钮*/
btn=$（“.start_btn[name=“+id+”]）；
/*按钮位于内部的tr*/
tr=$（btn.parent（）.parent（）；
/*去除红色*/
tr.removeClass（“rot”）；
/*****这就是变化*****/
var children=$（tr.children（）；
/*Kunden-Nr.td的设定文本*/
儿童情商（3）.文本（arr_infos[1]）；
/*设置排序为td的文本*/
儿童情商（4）.文本（arr_infos[2]）；
/*设置代码td的文本*/
儿童。情商（5）。文本（str_代码）；
/*设置起始td的文本*/
儿童。情商（8）。文本（“ja”）；
/*预先通知*/
$（“#大纲”）.prepend（“+data.ms+”）；
}
/*回调代码结束*/
除此之外，您还需要更具体地说明性能差的确切原因，并为此使用Firebug，正如其他人指出的那样。只要浏览一下您的代码，您似乎犯的最大错误是在第二次回调中（最下面的一次）继续重新选择行子元素的位置。您应该将该公共查询结果分配给一个变量，然后
$(function() {
//++ jQuery doesn't cache this call, so it has to search the DOM each time.
//++ I've moved any node that is requested more than once here
var dialog_fieldset_node = $("#dialog_fieldset"),
dialog_node = $("#dialog"),
kunden_nr_node = $("#kunden_nr"),
outline_node = $("#outline");
//++ variables that you're using as globals I've moved here so that they can be shared
//++ between the event handlers, but aren't poluting the global scope. They are accessible
//++ to each event handler via the closure property of this annonymous function.
var id = null;
//++ Since you're creating the code <INPUT> nodes, store a refernce to them at that time
//++ instead of having to find them in the DOM again later. Now, anzahlCodes doesn't need
//++ to be available to both handlers.
var code_input_nodes = [];
/* when start button is clicked */
$('.start_btn').click(function() {
/* remove all previous input fields */
dialog_fieldset_node.children().remove();
/* save id */
id = $(this).attr('name');
/* get data from db */
$.post("inc/get_start_order_infos.inc.php", { id: id },
/* Callback */
function(data){
/* make data globally available */
daten = data;
/* append infos_html to the fieldset */
//++ No need to build a string in a variable that you're only going to use once. You might want
//++ to build this out using DOM methods as I did below. Since its only done once, there might
//++ not be a difference performancy wise
dialog_fieldset_node.append(
'<label for="kunden_nr">Kunden-Nr.</label><input type="text" name="kunden_nr" id="kunden_nr" ' +
'value="' + data.kunden_nr + '" class="text ui-widget-content ui-corner-all" />' +
'<label for="sort">Sort</label><input type="text" name="sort" id="sort" value="' +
data.sort_nr + '" class="text ui-widget-content ui-corner-all" />'
);
//++ 1) `var e` to keep `e` from begin global. If you want this side effect, you should be explicit about it.
//++ 2) Create nodes via DOM methods to avoid running the HTML parser. node variables are defined outside of the
//++ loop to avoid overhead of instantiation and scope-chain modification (minimal, but effective for large sets
//++ of iterations.
//++ 3) Append created nodes to a document fragment and then append the fragment to the `dialog_fieldset_node` to
//++ avoid multiple, unnecessary DOM tree reflows (which are slow).
var fragment = document.createDocumentFragment(),
label_node = null,
input_node = null;
anzahlCodes = 0;
//++ Seems this needs to be reset everytime
code_input_nodes = [];
/* For each element within the sub array codes */
for( var e in data.codes){
label_node = document.createElement("LABEL");
label_node.setAttribute("for", anzahlCodes);
label_node.innerHTML = "Code " + anzahlCodes;
input_node = document.createElement("INPUT");
input_node.setAttribute("type", "text");
input_node.setAttribute("name", "code" + anzahlCodes);
input_node.setAttribute("id", "code" + anzahlCodes);
input_node.setAttribute("class", "text ui-widget-content ui-corner-all");
input_node.setAttribute("value", data.codes[e]);
//++ store a reference for later use
code_input_nodes.push(input_node);
/* append code_html to the fieldset */
fragment.appendChild(label_node);
fragment.appendChild(input_node);
anzahlCodes++;
}
dialog_fieldset_node.append(fragment);
dialog_node.dialog('open');
kunden_nr_node = $("#kunden_nr");
kunden_nr_node.select();
},
"json"
);
return false;
});
dialog_node.dialog({
bgiframe: false,
autoOpen: false,
height: 350,
modal: true,
buttons: {
'Auftrag starten': function() {
/* close dialog */
$(this).dialog('close');
/* create the info array to be submitted */
var arr_infos = [id, kunden_nr_node.attr('value'), $('#sort').attr('value')];
/* write inputs into the str_codes */
var str_codes = "";
for ( var i in code_input_nodes ) {
str_codes += (i ? "" : "<--->") + code_input_nodes[i].attr('value');
}
/* execute start */
$.post("inc/start_orders.inc.php", { 'corrected_infos[]':arr_infos, 'corrected_codes': str_codes },
/* Callback */
function(data){
$('#notice').remove();
/* if start was successful */
if (data.mstype == 'success'){
/* the tr where the button is inside */
//++ 1) Was this intentionally global? Global variables are the slowest to access because they
//++ are at the end of the scope-chain (which *sometimes* makes a difference, depending on depth).
//++ 2) Instead of wrapping `tr` in `$()` every time you use it, just do it once.
var tr = $(
$(".start_btn[name=" + id + "]").parent().parent()
);
//++ Avoid calling `.children()` multiple times, just do it once.
var tr_children = tr.children();
/* remove red */
tr.removeClass('rot');
/* set text of Kunden-Nr. td */
tr_children.eq(3).text(arr_infos[1]);
/* set text of Sort td */
tr_children.eq(4).text(arr_infos[2]);
/* set text of Code td */
tr_children.eq(5).text(str_codes);
/* set text of start td */
tr_children.eq(8).text('ja');
/* prepend notice */
outline_node.prepend("<div id='notice'>" + data.ms + "</div>");
}
/* if not successful */
else {
outline_node.prepend("<div id='notice' class='notice_err'>" + data.ms + "</div>");
}
},
"json"
);
},
'Abbrechen': function() {
$(this).dialog('close');
}
}
});
});