`
flex_莫冲
  • 浏览: 1095302 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

多DOM操作的性能优化

 
阅读更多
今天发现DOM操作很多,且是显示隐藏操作,性能是非常差的。一个显示(全部)后再隐藏(部分符合的Dom)的DOM操作在ipad上用了22秒。在电脑上用了1秒。显然这是无法接受的。

其实优化的办法很简单,将显示隐藏改成隐藏(全部隐藏)显示(部分显示)。
这样在IPAD上的执行时间是110多毫秒。提高了上百倍。

参考:
http://www.cnblogs.com/leolai/archive/2012/07/03/2573586.html
http://www.cnblogs.com/leolai/archive/2012/07/02/2573366.html
分享到:
评论

相关推荐

    前端性能优化探索.pdf

    3. DOM操作优化:DOM操作是JavaScript中最耗费性能的操作之一,因此需要尽可能减少DOM操作的次数。例如,在修改多个元素的类名时,可以创建一个临时节点,然后一次性修改所有元素的类名,最后再删除临时节点。 ...

    asmdom一个极小的WebAssembly虚拟DOM专注于性能

    asmdom是针对性能优化的虚拟DOM实现,它利用WebAssembly技术来提升前端应用的运行效率。 在现代Web开发中,虚拟DOM(Virtual DOM)是关键组件之一,它允许开发者使用JavaScript操作DOM,但不会立即对实际DOM进行...

    前端性能优化.pptx

    代码级别的优化,例如 Javascript中的DOM 操作优化、CSS选择符优化、图片优化以及 HTML结构优化等等来讲述前端性能优化的多个方式。 目录结构如下: 一、WEB性能优化相关理论 二、前端性能优化的目的 三、前端性能...

    迷你DOM操作库

    迷你DOM操作库是一种轻量级的JavaScript工具集,专门用于简化和加速DOM(Document Object Model)操作。在网页开发中,DOM是HTML或XML文档的结构化表示,它允许我们通过编程方式访问和修改页面元素。这个库因其小巧...

    前端性能优化指南

    ### 前端性能优化指南 #### 概述 前端性能优化是指通过对网站或Web应用的前端部分进行改进,以提升用户体验的过程。优秀的前端性能优化能够显著提高网页加载速度、减少资源消耗、增强用户交互体验,进而提升整体的...

    大型网站性能优化方案

    在构建和运营大型网站的...总的来说,大型网站性能优化是一个系统工程,涉及前端、后端、网络等多个层面。通过科学的方法和持续的优化,我们可以让网站在提供丰富功能的同时,保持快速响应,带给用户流畅的浏览体验。

    Ractivejs下一代DOM操作框架

    6. 性能优化:Ractive.js允许设置延迟更新或批量更新,以减少频繁的数据变更触发的渲染。此外,它可以对数据模型进行观察,仅在需要时才触发视图的更新,进一步提升性能。 7. 社区支持:虽然Ractive.js不像React或...

    移动互联网应用的性能优化

    综上所述,移动互联网应用的性能优化是一个多方面的过程,涉及到用户行为分析、网络管理、数据安全以及用户体验等多个领域。通过综合运用上述策略和技术,可以显著提高移动应用的整体性能,从而更好地满足用户的期望...

    web前端性能优化

    CSS优化主要包括移除未使用的CSS、合并同类选择器、利用CSS3的性能特性来减少DOM操作等。精简和优化CSS可以减少样式渲染的计算量,提高页面渲染效率。同时,合理使用CSS预处理器可以提高样式的编写效率,压缩CSS文件...

    前端 - 郭碧青《Web 前端性能优化思路与学习方法》.pdf

    综合以上内容,可以得知郭碧青在Web前端性能优化方面拥有丰富的知识和实践经验,他不仅关注于前端代码的性能提升,还涉足前端工程化、性能监控、移动端性能优化以及页面渲染优化等多个方面。他的分享对于想要深入...

    JavaScript性能优化的小知识总结共23页.pdf

    然而,随着现代Web应用的复杂性不断提升,性能优化显得尤为重要。以下是一些关于JavaScript性能优化的关键知识点: 1. **延迟加载(Lazy Loading)**:为了提高页面加载速度,可以使用延迟加载策略,如图片懒加载,...

    Javascript 性能优化的一点技巧

    通过上述介绍,我们可以看到,JavaScript性能优化涉及到多个方面,包括变量管理、DOM操作、事件处理、异步编程以及资源加载等。开发者应该根据实际需求选择合适的优化策略,并不断学习新的技术以适应快速发展的前端...

    Javascript_Dom操作案例

    - 优化性能,避免不必要的DOM操作,如在循环中频繁访问DOM。 在提供的`Dom经验文档.rar`中,可能包含了一些实践经验、技巧和常见问题的解决方案,建议详细阅读以加深理解。`TestDomWebsite`可能是一个测试网站,你...

    dom jdom sax dom4j 原理性能比

    DOM4J在性能和易用性之间做了妥协,是很多项目的理想选择。 总之,DOM、JDOM、SAX和DOM4J各有优缺点,选择哪一种取决于具体的应用场景和需求。在实际开发中,理解这些库的工作原理和性能特性,可以帮助我们做出更...

    前端性能优化知识图谱指导

    JS性能优化是指在JavaScript代码的编写和执行过程中,通过一系列的优化策略和技术手段,提高代码的执行效率和性能,从而提升网页或应用程序的响应速度和用户体验。 优化JS性能的方法包括但不限于以下几个方面: 代码...

    渲染篇 3:对症下药——DOM 优化原理与基本实践(1).md

    在JavaScript中,DOM操作涉及到对象属性的读取和设置,而浏览器需要在JavaScript引擎和渲染引擎之间进行多次消息传递,每一次传递都会消耗一定的时间和资源,因此频繁的DOM操作会导致页面性能下降。 #### 2. 减少...

    jQuery性能优化(转)

    **jQuery性能优化** jQuery作为一款广泛使用的JavaScript库,极大地简化了网页中的DOM操作、事件处理、动画制作等任务。然而,随着网站复杂性的增加,优化jQuery代码以提高页面加载速度和用户体验变得至关重要。...

    易语言超文本浏览框全套DOM操作

    5. **性能优化**:在大量操作DOM时,应注意性能问题,避免频繁的DOM操作,可以使用文档片段(DocumentFragment)或批处理更新来提高效率。 综上所述,易语言超文本浏览框全套DOM操作源码提供了在易语言环境中处理和...

Global site tag (gtag.js) - Google Analytics