- 阅读 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
