麦奏
BlogJava
|
首页
|
发新随笔
|
发新文章
|
联系
|
聚合
|
管理
Ajax in Action笔记二
性能:
一.优化性能
1.优化for循环:在循环体外算出需要循环的最大次数。
2.将DOM节点附加到文档:
1
var
container
=
document.createElement('div');
2
var
outer
=
document.getElementById('top');
//
已经存在的结点
3
outer.appendChild(container);
4
for
(
var
i
=
0
;i
<
count;i
++
)
{
6
var
node
=
document.createElement('div');
7
container.appendChild(node);
8
}
//因为首先是把附加容器加入到了DOM,然后再填充容器,所以整个文档需要修改count+1次。
修正!
1
var
container
=
document.createElement('div');
2
var
outer
=
document.getElementById('top');
//
已经存在的结点
3
for
(
var
i
=
0
;i
<
count;i
++
)
{
4
var
node
=
document.createElement('div');
5
container.appendChild(node);
6
}
7
outer.appendChild(container);
//虽然container被修改了count次,但是对于整个文档来说在没有被附加到DOM中之前并没有重新绘制。这样,整个文档只需要修改1次。
3.尽量减少点号操作符的使用:查找父变量的子变量时候,提前找到父变量,而不需要每次都从同一个父变量再次找它的子变量。
4.打破循环引用:当DOM结点于一个对象的属性进行双向引用后,由于DOM元素是一直存在的,所以其对象属性即使没有任何可编程的引用指向也不会被垃圾回收掉,所以需要手动编写清除的函数,把对象的属性设置为null。
5.移除DOM元素:当需要再次使用某个DOM元素时候,优先使用隐藏元素方式。当不再需要使用时候,使用移除元素方式。另外,在使用隐藏元素方式时候,可以首先检测元素时候存在,不存在再建立元素。
1
function
message(txt)
{
2
var
box
=
document.getElementById('message');
3
var
txtNode
=
document.createTextNode(txt);
4
if
(box
==
null
)
5
{
6
box
=
document.createElement(
"
div
"
);
7
box.appendChild(txtNode);
8
}
9
else
10
{
11
var
oldTxtnode
=
box.firstChild;//取得box的textNode
12
box.replace(txtNode,oldTxtNode);//使用replace()替换
13
}
14
}
发表于 2007-02-24 22:08
麦奏
阅读(173)
评论(0)
编辑
收藏
所属分类:
Ajax in Action笔记
新用户注册
刷新评论列表
只有注册用户
登录
后才能发表评论。
网站导航:
博客园
IT新闻
Chat2DB
C++博客
博问
管理
相关文章:
Ajax in Action笔记二
Ajax in Action笔记一
随笔:11 文章:0 评论:0 引用:0
<
2007年2月
>
日
一
二
三
四
五
六
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
1
2
3
4
5
6
7
8
9
10
常用链接
我的随笔
我的评论
我的参与
留言簿
(2)
给我留言
查看公开留言
查看私人留言
随笔分类
Ajax in Action笔记(2)
(rss)
css(4)
(rss)
database(2)
(rss)
java
(rss)
javascript(4)
(rss)
linux
(rss)
perl
(rss)
vi
(rss)
随笔档案
2007年4月 (1)
2007年3月 (1)
2007年2月 (9)
搜索
最新评论
阅读排行榜
1. Hibernate数据关联(606)
2. JS简单AOP实现(转)(565)
3. z-index(403)
4. hibernate二级缓存(232)
5. Ajax in Action笔记二(173)
评论排行榜
1. JS简单AOP实现(转)(0)
2. hibernate二级缓存(0)
3. js一些小方法(0)
4. style,id,class,element(0)
5. Ajax in Action笔记二(0)