【浅谈DOM事件的优化】

浅谈DOM事件的优化

JavaScript程序的开发中,经常会用到一些频繁触发的 DOM 事件,如 mousemove、resize,还有不是那么常用的鼠标滚轮事件:mousewheel (在 Firefox 中,滚轮事件为 DOMMouseScroll)。

浏览器为了确保这些事件能够及时响应,触发的频率会比较高,具体的触发频率各浏览器虽然有出入,但出入不大。很多时候在需要注重性能的场景下使用这些事件会想各种办法对事件的触发频率进行优化,下面说说我的一些优化方法。

mousemove 在拖拽中的优化

拖拽( Drag )是很常见的一个功能,在浏览器还没实现原生的拖拽之前,通过 mousedown、mousemove、mouseup 3种事件类型就可以模拟出拖拽效果来,当然这里不谈如何去实现一个拖拽功能。

mousemove 事件在拖拽的应用中既要确保拖拽的流畅度,又要确保拖拽时的性能,如何保持两者的平衡呢?

可以通过设置一个计数器来去掉一半的 mousemove 事件的触发,代码如下:

代码地址

时间: 2024-08-04 02:23:48

【浅谈DOM事件的优化】的相关文章

转:浅谈CSS在前端优化中一些值得注意的关键点

前端优化工作中要考虑的元素多种多样,而合理地使用CSS脚本可以在很大程度上优化页面的加载性能,以下我们就来浅谈CSS在前端优化中一些值得注意的关键点: 当谈到Web的“高性能”时,很多人想到的是页面加载时间,但其实性能不仅仅是指加载时间,还包括浏览器性能.网络性能.开发效率.在Web前端开发中,性能是一个非常重要的需要考虑的点.本文将介绍一些开发原则和性能准则,这些都是提高Web前端性能的基础. 1. 开发原则 1.1 编写符合当代浏览器性能的代码如果想提高前端性能,就必须理解浏览器的工作原理,

Js之浅谈dom操作

JavaScript之浅谈dom操作 1.理解dom: DOM(Document Object Model ,文档对象模型)一种独立于语言,用于操作xml,html文档的应用编程接口. 怎么说,我从两个角度理解: 对于JavaScript,为了能够使JavaScript操作Html,JavaScript就有了一套自己的dom编程接口. 对于Html,dom使得html形成一棵dom树,类似于一颗家族树一样,一层接一层,子子孙孙. 所以说,有了DOM,在我看来就是相当于JavaScript拿到了钥

浅谈tomcat中间件的优化【转】

今天来总结一下tomcat的一些优化的方案,由于本人才疏学浅,写的不好,勿喷! tomcat对于大多数从事开发工作的童鞋应该不会很陌生,通常做为默认的开发环境来为大家服务,不过tomcat默认的一些配置对于生产环境来说是相当不够滴,特别对于内存以及线程的配置方面都很有可能成为日后性能的瓶颈. 接下来咱们就聊聊tomcat的优化,从内存以及线程两个方面来谈: 1.内存方面 tomcat的内存优化操作起来就比较简单了 如果是linux环境的话设置如下: 修改TOMCAT_HOME/bin/catal

浅谈Android 事件分发机制(一)

在上一篇文章中,浅谈Android 事件分发机制(一),简要分析了一下事件分发机制的原理,总结一下就是事件层层传递,直到被消费,原理看似简单,但是在实际使用过程中,场景各不相同,复杂程度也就因产品而异,这篇文章就通过给view加移动来模拟事件分发. 触摸事件 这里涉及到几个与手指触摸相关的常见事件: 坐标系对于单指触控移动来说,一次简单的交互流程是这样的:手指落下(ACTION_DOWN) -> 移动(ACTION_MOVE) -> 离开(ACTION_UP) 坐标系 Android坐标系以手

浅谈代码重构与优化

浅谈代码重构与优化 前几天看到有一篇不错的文章减少该死的if-else嵌套,觉得写得很不错,整理了一下后准备在团队内部简单分享一下. 写在前面 大家在接手项目的时候,应该有遇到过下面这种结构的代码 if (true) { ..... if (true) { if (true) { .... if (true) { if (true) { ...... } } // do something } // do something if (true) { ......... } } // do som

浅谈Javascript事件模拟

事件是用来描述网页中某一特定有趣时刻的,众所周知事件通常是在由用户和浏览器进行交互时触发,其实不然,通过Javascript可以在任何时间触发特定的事件,并且这些事件与浏览器创建的事件是相同的.这就意味着会有适当的事件冒泡,并且浏览器会执行分配的事件处理程序.这种能力在测试web应用程序的时候,是非常有用的,在DOM 3级规范中提供了方法来模拟特定的事件,IE9 chrome FF Opera 和 Safari都支持这样的方式,在IE8及以前的办法的IE浏览器有他自己的方式来模拟事件a)Dom

运维角度浅谈:MySQL数据库优化

日志君导读: 一个成熟的数据库架构并不是一开始设计就具备高可用.高伸缩等特性的,它是随着用户量的增加,基础架构才逐渐完善. 作者:zhenliang8,本文转自51CTO博客,点击原文阅读查看网页版文章. 本博文主要谈MySQL数据库发展周期中所面临的问题及优化方案,暂且抛开前端应用不说,大致分为以下五个阶段: 1.数据库表设计 项目立项后,开发部根据产品部需求开发项目,开发工程师工作其中一部分就是对表结构设计.对于数据库来说,这点很重要,如果设计不当,会直接影响访问速度和用户体验.影响的因素很

浅谈-变动事件

在DOM2级中添加进来的,当在DOM中的某一部分发生变化时给出提示. 当我们在使用的时候,可以检测浏览器是否支持变动事件: var isSupported = documennt.implementation.hasFeature("MutationEvents","2.0"); 删除节点 在使用 removeChild()或 replaceChild() 从DOM中删除节点时,会一次触发如下事件 实例: 1 EventUtil.addHandler(window,

辛星浅谈大型网站构架优化思路之一简化

其实谈到大型网站,它和小型的站点几乎是两个概念,其概念的差别就像航空母舰和独木舟的区别那样,中国早在黄帝炎帝时代就可以制作独木舟了,但是生产航空母舰呢?因为航空母舰太大了,规模的提升带来了很多问题,那么如何去分析并且解决这些问题呢? 我感觉大型网站更应该去简化,不应该为了复杂而复杂,我感觉一套优秀的简化方案是优化网站的最有效的途径,没有之一,什么意思呢?如果让我们的货车跑得更快,那么少拉一些不必要的货物是最有效的方式,也应该是我们真正去优化一个网站的第一步. 那么该如何去简化呢?我们不妨从可以简