利用享元模式来解决DOM元素过多导致的网页解析慢、卡死的问题
来源:互联网 发布:淘宝类目搜索 编辑:程序博客网 时间:2024/04/29 20:28
我也不知道应该为本文的思路取一个什么比较恰当的标题,但是感觉符合享元模式的思路。
在一些网页应用中,有时会碰到一个超级巨大的列表,成千上万行,这时大部份浏览器解析起来就非常痛苦了(有可能直接卡死)。
也许你们会说可以分页或动态加载啊?但是有可能需求不允许分页,动态加载?网络的延迟也会造成体验不好。
那么适时候介绍本文的实现思路了,有需要的同学可以参考去实现。
首先上最终的效果:
主要思路如下:
首先,创建如上图所示的三个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上效果完美。
0 0
- 利用享元模式来解决DOM元素过多导致的网页解析慢、卡死的问题
- 利用享元模式来解决DOM元素过多导致的网页解析慢、卡死的问题
- php提交表单时,元素变量过多导致的问题
- 解决map集合数据过多get操作慢的问题
- 升级“FOTA”洪荒之力,对抗APP过多导致的慢、卡、热
- 解决mac上Intelij idea启动速度慢,Debug卡死的问题
- Android Studio 解决导入其他项目慢或者卡死的问题
- 使用php的DOM函数,解析网页元素
- Netbios名称解析导致MySQL数据库连接慢的问题
- mysql反向解析导致连接慢的问题
- 在客户端使用xslt来解析dom生成网页,不使用js的DOM生成网页
- 解决防火墙因存储空间被过多的更新包占用导致无法升级的问题
- 解决jmeter 处理大数据量结果返回导致jmeter卡死的问题
- 解决PHP加速器eAccelerator导致php-cgi占用内存过多的问题
- Linux服务器Cache占用过多内存导致系统内存不足问题的排查解决
- Linux服务器Cache占用过多内存导致系统内存不足问题的排查解决
- 解决mysql数据库因过多错误链接导致拒绝访问的问题
- [linux]服务器Cache占用过多内存导致系统内存不足问题的排查解决
- |poj 1006|中国剩余定理|Biorhythms
- 温故过去,展望鸡年
- Nor Flash电路与驱动程序
- HDOJ.1342 Lotto (DFS)
- 平板变 PC 电脑的扩展屏幕:TwomonUSB & Duet Display
- 利用享元模式来解决DOM元素过多导致的网页解析慢、卡死的问题
- 每天一个Linux命令5(rmdir命令)
- flume常用source问题总结
- Hibernate 映射多对多关联关系
- C结构体
- [LeetCode]Populating Next Right Pointers in Each Node I & II
- (函数题)4-10 阶乘计算升级版
- JSP内置对象
- codevs 均分纸牌 1098