javascript效率经验谈(一)
本文主要是出于有朋友使用我原来写的autocomplete的JS控件。当数据量大的时候,会出现效率极其慢的情况,我在这段时间做出的一些测试也及一些经验,与大家分享,如果有错的地方,还请指出。
经过测试,我们会发现如下的情况或者说的结论,如果您的测试结果与我的不符,请说明原因,以便相互学习。
1)当一个较大的HTML字符串给到obj.innerHTML时会出现麻烦。也就是说当一个较大的字符串在赋予一个Element的innerHTML时,这个过程将可能是我们无法容忍的。(而事实上这并非JS的错,而确实是String数据量太多)
2)用拼合字符串的方法可以使效率提高,在字符串较大时,2)的情况仍然出现。超过一定的数量,速度会明显慢下来。
3)正则匹配的方法会比平常遍历的方法要高效一些。
4)在执行过程中,绑定事件的时间会花费更多一些。测试在1w条数据情况下,大约是匹配以及生成HTML数据的30倍,也就是说生成数据总花费100ms,而绑定事件则需要3000ms。
5)总体来说。IE的速度要比Mozilla要慢(我用的是Firefox1.5做的测试)。
6)大数据量时,不要用DOM生成Element。
7)非JS内置方法,也许会引发很多时间过多重复的劳动而且可能事得其反。建议尽可能利会内置方法。
总结问题:
一、在把字符串给到innerHTML上。
二、循环绑定事件所花费时间。
三、生成我们需要的DIV所花时间。
四、不同的浏览器问题。
下面对症下药:
问题一
我们可以做的没有其它的,只有尽可能少的HTML字符串,比如最基本的一个DIV,可以这样写
<div style="height:20px; font:9pt Verdana;"></div>也可以这样写<div class="c1"></div>,第二种就比第一种速度明显要快的。如果还不行的话,请看下面这个方法对你是否合适
在做程序的时候突然想起来51js上PK tree,一位版主所写的一棵树,1百万的一个节点,动态载入。只需要不到1秒。毫无疑问,肯定是取巧了,因为只要只生tree的html就是一个很大的数量。这个树的特别的地方就是生成树时,并非把1百万的节点都一次生成innerHTML,而是只生成在视角范围内的节点,当滚动条向下滚的时候,才动态的再生成树节点。这个方法至少我觉得思想很开阔,很有价值。
我们所知道,mySQL数据库里取数据可以这么取。SELECT * from table limit 0,100,意思是只取数据库中的0-100条数据。说到这里可能有些朋友也想到了,在JS中,我们可以利用这个方法来取数据,将一个数组看作是一个表。只是单纯的数据表,非二维
相关文档:
<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
<title></title>
</head>
<body>
<form id="form1">
<div>
& ......
JavaScript获取DOM节点元素
在Web应用程序特别是Web2.0程序开发中,经常要获取页面中某个元素,然后更新该元素的样式、内容等。如何获取要更新的元素,是首先要解决的问题。令人欣慰的是,使用JavaScript获取节点的方法有很多种,这里简单做一下总结:
通过顶层document节点获取:
1. document.getElement
......
制作Javascript弹出窗口技巧九则
1、最基本的弹出窗口代码
其实代码非常简单:
< SCRIPT LANGUAGE="javascript">
< !--
window.open ("page.html")
--
>
< /SCRIPT>
因为这是一段Javascript代码,所以它们应该放在< SCRIPT LANGUAGE="javascript">之间。 ......
很多人都向在服务器
端调用客户端的函数来操作,也就是在asp中调用java
script脚本中已经定义好的脚本函数。经过研究,发现了一些勉强的方法。
1.
用Response.Write方法写入脚本
比如在你单击按钮后,先操作数据库
,完了后显示已经完成,可以在最后想调用的地方写上
Response.Write("<script type='text/j ......
javascript集锦
javascript数组操作汇总
javascript动态创建form表单 和 节点控制说明
动态读取
javascript:function ctys(_ctag){
ctys1=document.createElement(_ctag);
document.body.appendChild(ctys1);
return ctys1
};
newE1=ctys('<TEXTAREA id=www>');
newE1.cols='150';
newE1.rows='30 ......