- 阅读 53
- 下载 12
- 格式 docx
- 大小 48.56 KB
- 约4页
- 2024-11-03 发布于河南
- 收藏
- 点赞(0)
- 海报
- 举报
第1页共4页编号:时间:2021年x月x日书山有路勤为径,学海无涯苦作舟页码:第1页共4页本文主要是出于有朋友使用我原来写的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,可以这样写
也可以这样写
,第二种就比第一种速度明显要快的。如果还不行的话,请看下面这个方法对你是否合适在做程序的时候突然想起来51js上PKtree,一位版主所写的一棵树,1百万的一个节点,动态载入。只需要不到1秒。毫无疑问,肯定是取巧了,因为只要只生tree的html就是一个很大的数量。这个树的特别的地方就是生成树时,并非把1百万的节点都一次生成innerHTML,而是只生成在视角范围内的节点,当滚动条向下滚的时候,才动态的再生成树节点。这个方法至少我觉得思想很开阔,很有价值。第2页共4页第1页共4页编号:时间:2021年x月x日书山有路勤为径,学海无涯苦作舟页码:第2页共4页我们所知道,mySQL数据库里取数据可以这么取。SELECT*FROMtablelimit0,100,意思是只取数据库中的0-100条数据。说到这里可能有些朋友也想到了,在JS中,我们可以利用这个方法来取数据,将一个数组看作是一个表。只是单纯的数据表,非二维表。如图利用这一些,我们可以把数据有效的值先取出来。如图:想想看。假如我们取一个数组,下标为10000,设生成一个autocomplete的节点HTML长度20(已经非常小了"
item)。匹配数据已知:有3000条数据第3页共4页第2页共4页编号:时间:2021年x月x日书山有路勤为径,学海无涯苦作舟页码:第3页共4页输节字节数为:3000(asc码)也就是3000*20=60000字节而用limit方法,输出为:10*20=200字节。很明显的差距!之后我们便可以分步求解,即当滚动条出现,或者按下down(方向键)再动态的生成innerHTML。问题二、为什么我们还要循环来绑定事件呢?还是由于问题一。假设这样写1)
never-online还可以这样写2)
never-online
document.getElementById("container").childNodes[0].onclick=function(){handlerClick()};这样也可以省掉一些字符串,从而节省字符串资源。但又需要把container的子元素再遍历,所以也会花费时间,用第一种方法还是第二种?我建议还是用第一种,但最好把字符串减到最低,如:
never-online