javascript性能优化之Dom编程性能调优总结
2024-10-15 18:09:34
1、最小化的Dom访问,在一次Dom访问做尽可能多的操作;
2、使用局部变量存放指向反复访问的元素节点的Dom引用,原则上js代码中不应该重复获取同一个元素节点,除非它在运行过程中发生改变;
3、对元素集合(Html集合)小心处理,因为每次查询都会对底层的文档进行重新查询,在迭代处理中更好的的处理方式是缓存集合的length属性到一个局部变量中,当需要在迭代中使用元素集合,可以将该集合拷贝到数组中;
4、如果使用场景允许使用速度更快的API;
5、注意重绘和重排版,尽量降低重排版的次数,如果js代码中设计对大量的元素节点的几何操作建议创建一个文档片段(frame),对文档片段进行操作然后附加到原始的操作节点(最优解重排次数为1),批量修改风格,离线操作DOM树缓存并减少对布局信息的访问;
6、在js动画代码中为了避免动画节点集合属性改变引起整个页面的重新排版和渲染,建议对动画代码使用绝对坐标、拖放代理;
7、因为为元素绑定事件处理函数是一件极为消耗性能的事,而通常所有绑定事件处理函数的元素节点只有少部分触发,因此使用事件托管技术仅为触发最小化事件句柄是推荐的处理方式;
8、合理使用事件委托技术,利用事件冒泡,为层级尽可能高的元素添加事件处理程序,就可以管理子元素下同一类型的所有事件,而不必给每一个元素都绑定事件处理程序,占用的内存和访问dom节点的次数更少,可以大大提升性能。
最新文章
- SQL Server-外部联接基础回顾(十三)
- 一行代码解决ie6,7,8,9,10兼容性问题
- CSS颜色代码
- 将Java应用程序打包成可执行的Jar包
- JS简单的图片左右滚动
- codeblocks AStyle修改格式和快捷键
- Add, remove, shuffle and sort
- Base-Android快速开发框架(四)--网络操作之FastJson以及AsyncHttpClient
- shell入门之expr的使用 分类: 学习笔记 linux ubuntu 2015-07-10 14:59 76人阅读 评论(1) 收藏
- 1数组的join方法
- C#判断文件是否正在被使用
- struts-config.xml的配置
- mysql进阶(十)不靠谱的FLOAT数据类型
- java——内部类
- Python 常用系统模块整理
- Python 标准类库-Windows特殊服务之msvcrt
- c#处理json数据最好的方式,没有之一。
- FreeRTOS移植到STM32上的移植过程
- (转)csv — 逗号分隔值文件格式
- SpringBoot 开启 Actuator