首页 > 代码库 > 利用享元模式来解决DOM元素过多导致的网页解析慢、卡死的问题
利用享元模式来解决DOM元素过多导致的网页解析慢、卡死的问题
我也不知道应该为本文的思路取一个什么比较恰当的标题,但是感觉符合享元模式的思路。
在一些网页应用中,有时会碰到一个超级巨大的列表,成千上万行,这时大部份浏览器解析起来就非常痛苦了(有可能直接卡死)。
也许你们会说可以分页或动态加载啊?但是有可能需求不允许分页,动态加载?网络的延迟也会造成体验不好。
那么适时候介绍本文的实现思路了,有需要的同学可以参考去实现。
首先上最终的效果:
主要思路如下:
首先,创建如上图所示的三个DIV,scrollbar用于显示具体的滚动条(CSS需要设置zindex,要显示在demo-list的底层),real-panel用于计算列表的实际高度(每一个li的高度是固定的,有多少项数据也是知道的,由此可以计算出列表的实际高度),demo-list主要用于当前滚动条高度对应的实际数据(css需要设置zindex,显示于scrollbar的上层,需要使用JS计算宽度等于real-panel的宽度,这样就刚好覆盖掉底层滚动条外的区域)。
然后,使用KO对数据实现绑定,由于KO的双向绑定,我们可以不用再去实现滚动滚动条时数据变化时带来的更新操作。
最后,就是兼容性了。本文的具体实现在IE6\7\8\9\10\11,FireFox,Chrome,Edge上效果完美。
利用享元模式来解决DOM元素过多导致的网页解析慢、卡死的问题
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。