插的数据多的时候页面会卡死,就像死机一样,要死上2-3秒,有没有办法让主线程不要卡住?
大家看看我的代码,是我代码有问题吗?<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title></title>
<script src="jquery-1.4.4.js" type="text/jscript"></script>
<script type="text/jscript">
function go() {
var options = $("#ddl").select("options")
for (var i = 0; i < 5000; i++) {
var option = new Option("text" + i, "value" + i);
options[0].add(option);
}
} $(document).ready(function () {
go();
})
</script>
</head>
<body>
<select id="ddl">
<option value="a">123</option>
</select>
</body>
</html>
大家看看我的代码,是我代码有问题吗?<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title></title>
<script src="jquery-1.4.4.js" type="text/jscript"></script>
<script type="text/jscript">
function go() {
var options = $("#ddl").select("options")
for (var i = 0; i < 5000; i++) {
var option = new Option("text" + i, "value" + i);
options[0].add(option);
}
} $(document).ready(function () {
go();
})
</script>
</head>
<body>
<select id="ddl">
<option value="a">123</option>
</select>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script>
function go() {
var i = 5000, html = new Array(i);
while(i--) {
html[i] = ['<option value="value', i, '">text', i, '</option>'].join("");
}
$("#ddl").replaceWith('<select id="ddl">' + html.join("") + '</select>');
}
$(document).ready(function () {
go();
})
</script>
</head>
<body>
<select id="ddl">
<option value="a">123</option>
</select>
</body>
</html>
createDocumentFragment来做
想当然不能解决任何问题,测试的结果才能说明问题。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script>
function go() {
var i = 5000, html = new Array(i);
while(i--) {
html[i] = ['<option value="value', i, '">text', i, '</option>'].join("");
}
$("#ddl").replaceWith('<select id="ddl">' + html.join("") + '</select>');
}
function go1(){
var i = 5000;
var warp = document.createDocumentFragment();
while(i--) {
var option = document.createElement("option");
option.value = "value";
option.text = "text" + i.toString();
warp.appendChild(option);
}
$("#ddl2").append(warp);
}
$(document).ready(function () {
var d1 = +(new Date());
go();
alert(+(new Date())-d1);
d1 = +(new Date());
go1();
alert(+(new Date()) - d1);
})
</script>
</head>
<body>
<select id="ddl">
<option value="a">123</option>
</select>
<select id="ddl2">
<option value="a">123</option>
</select>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title></title>
<script src="jquery-1.4.4.js" type="text/jscript"></script>
<script type="text/jscript">
function go() {
var frag = document.createDocumentFragment();
var options = $("#ddl")
for (var i = 0; i < 10000; i++) {
var option = new Option("text" + i, "value" + i);
option.innerText = "text" + i;
frag.appendChild(option);
}
options.append(frag);
} $(document).ready(function () {
go();
})
</script>
</head>
<body>
<select id="ddl">
<option value="a">123</option>
</select>
<input type="button" value="click me" onclick="alert($('#ddl').val())"/>
</body>
</html>
我机器现在ubuntu only
运行IE是个麻烦事。希望有测试结果
FF下拼接字符串的方式很快
拼串,然后一次性插入
使用拼串:460毫秒
使用碎片:710毫秒
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script>
function go1() {
var i = 5000, html = new Array(i);
while(i--) {
html[i] = ['<option value="value', i, '">text', i, '</option>'].join("");
}
$("#dd1").replaceWith('<select id="dd1">' + html.join("") + '</select>');
} function go2() {
var i = 5000;
var warp = document.createDocumentFragment();
while(i--) {
var option = document.createElement("option");
option.value = "value" + i;
option.innerText = "text" + i;
warp.appendChild(option);
}
$("#dd2").append(warp);
}
$(document).ready(function () {
var t = +(new Date());
go1();
var t1 = +(new Date()) - t;
var t = +(new Date());
go2();
var t2 = +(new Date()) - t;
alert([t1, t2]); // 460,710
})
</script>
</head>
<body>
<select id="dd1"></select>
<select id="dd2"></select>
</body>
</html>
这两种方式都会比楼主原来的方法快很多
4楼随便丢下谁比谁快的结论就走了,没有什么依据。
运行的环境千差万别,以实际测试的结果为准。楼主你的demo不要写相对路径,这样别人拿着demo不能直接运行,还得修改。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
谢谢zswang,谢谢cj205。