`
zhangyaochun
  • 浏览: 2613127 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

《JavaScript高级程序设计》性能探究之优化DOM交互

阅读更多

本文来自《JavaScript高级程序设计》阅读笔记

 

 

优化DOM交互

 

-------- DOM操作与交互要消耗大量时间,因为它们往往需要重新渲染整个页面或者某一个部分。

 

 

  1. 最小化现场更新
  • 现场更新:因为需要立即(现场)对页面对用户的显示进行更新。
  • 现场更新越多,代码完成执行所花的时间久越长

举例:

给列表添加10个项目。

var list = document.getElementById("myList"),
      item,
      i;
for(i=0;i<10;i++){
      item = document.createElement("li");
      list.appendChild(item);
      item.appendChild(document.createTextNode("Item "+i));
}
 

   ------ 这样添加一个项目,需要添加li元素,给它添加文本节点,10个项目的话,需要20次的现场更新。

 

  比较好的方式还是创建文档碎片来创建DOM结构,接着将其添加到List元素中,为了避免现场更新和页面闪烁。

 

 

var list = document.getElementById("myList"),
      fragment = document.createDocumentFragment(),
      item,
      i;
for(i=0;i<10;i++){
      item = document.createElement("li");
      fragment.appendChild(item);
      item.appendChild(document.createTextNode("Item "+i));
}

list.appendChild(fragment);
 

     2.  使用innerHTML

当把innerHTML设置为某一个值,后台会创建一个HTML解析器,然后使用内部的DOM调用来创建DOM结构,而非基于JavaScript的DOM调用。由于内部方法是编译好的而非解释执行的,所以执行快得多。


     3.  使用事件代理


     4.  注意HTMLCollection

优化HTMLCollection访问最重要的地方就是循环

举例:

var images = document.getElementsByTagName("img"),
      i,
      len;
for(i=0;len = images.length;i++){

}
 
发生以下情况时候回返回HTMLCollection对象

  • 进行对getElementsByTagName()的调用
  • 获取元素的childNodes属性
  • 获取元素的attributes属性
  • 访问特殊的集合,如document.forms、document.images等

 

分享到:
评论

相关推荐

    掘金首页信息流_企业城微信小程序js代码前台前端H5页面源码.rar

    此外,对于掘金首页的信息流展示,开发者可能会采用高效的列表渲染技术,如虚拟DOM或Intersection Observer,以优化性能并提供流畅的用户体验。 其次,前端H5页面源码是构建Web应用的基础,尤其是在微信环境中,H5...

    QQshow源文件.rar

    10. **性能优化**:高性能的展示类程序通常会关注页面渲染速度,因此源码中可能包括了一些性能优化技巧,如使用事件委托、减少DOM操作、缓存计算结果等。 11. **模块化和打包工具**:如果源代码是现代JavaScript...

    日历控件大集合—各式各样的日历控件

    JS代码可能涉及到DOM操作、事件监听、日期处理函数等技术,以实现用户友好且响应迅速的交互体验。 另一方面,"日历控件"这个文件可能包含了更多关于日历控件的设计和实现细节。这可能包括但不限于各种编程语言(如...

    H+4.2正版源码

    源码是软件开发的核心,包含了程序设计的全部细节,对于开发者而言,能够深入理解系统的架构和实现逻辑,有助于学习、定制和二次开发。 首先,我们要明确H+4.2源码所使用的编程语言和技术栈。通常,前端开发中常见...

    网页版开源围棋打谱工具源代码(含windowsPC版、Linux版及示例)

    对于想要深入学习或者改进这个工具的开发者,理解并熟悉JavaScript基础,尤其是DOM操作和事件处理,是非常重要的。同时,熟悉围棋的基本规则和术语也是必要的,因为这将有助于理解代码背后的逻辑。此外,了解CSS和...

    5天驾驭JQuery教程

    - **jQuery**:是一个基于JavaScript的类库,简化了JavaScript的操作,如DOM选择、事件处理、动画和AJAX交互等。 - **Ajax**:全称是“Asynchronous JavaScript and XML”,一种使用JavaScript异步请求和更新部分...

    学校实训毕业商用项目-茶叶生成基地网站源码-含手机端同步.zip

    3. 探究JavaScript的DOM操作和事件处理,提升交互性设计。 4. 理解响应式设计原理,掌握媒体查询的用法。 5. 研究数据库设计,了解如何创建和管理数据库表。 6. 学习服务器端语言(如PHP或Node.js)和框架,理解前后...

    微信小程序精选源码亲测可用_智能用电.zip

    2. **MVVM架构**:微信小程序采用类似MVVM(Model-View-ViewModel)的设计模式,数据驱动视图,使得开发者可以专注于数据的管理和更新,而不用手动操作DOM。 3. **组件化开发**:小程序支持丰富的组件库,如view、...

    HTML5紫色光圈无限延伸粒子动画特效源码.zip

    HTML5是一种先进的网页开发技术,它极大地扩展了Web应用程序的功能,让开发者能够创建更富交互性和动态性的网页。在这个“HTML5紫色光圈无限延伸粒子动画特效源码”中,我们可以深入探究HTML5如何实现炫酷的视觉效果...

    微信小程序开发探究

    同时,微信小程序采用了类似Vue和React的MVVM(Model-View-ViewModel)设计模式,有自己的模板语法、数据绑定和事件系统。WXML类似于HTML,但增加了微信特有的组件和特性;WXSS则类似于CSS,用于定义样式。代码最终...

    一秒有多长HTML5游戏源码

    HTML5是一种先进的网页开发技术,它极大地扩展了Web应用程序的功能,使得开发者能够创建出更加丰富、交互性更强的网页内容。这款"一秒有多长"HTML5游戏源码提供了一个很好的学习和实践平台,帮助我们深入理解HTML5在...

    BuzzApp-P-68

    【BuzzApp-P-68】项目是一个以JavaScript为核心的开发项目,其主要焦点在于利用JavaScript这一强大的脚本语言来构建高效、交互丰富的Web应用程序。在深入理解这个项目之前,我们需要先了解JavaScript的基础知识。 ...

    毕业设计项目,问答系统.zip

    Vue.js是一个轻量级的前端JavaScript框架,它的核心设计理念是通过可复用的组件来构建用户界面,以提高开发效率。Vue.js的响应式数据绑定和虚拟DOM使得开发者可以便捷地处理数据和视图之间的同步,而其易于上手的...

    US_Congressional_Districting_Beta-Gui:美国国会随机分区浏览器应用程序的初始模拟GUI

    美国国会随机分区浏览器应用程序,即"US_Congressional_Districting_Beta-Gui",是为探究美国国会选区划分问题而设计的一款交互式工具。该程序的核心在于其初始模拟GUI,它允许用户直观地观察和分析选区划分的可能...

    portfolio

    在IT领域,尤其是在前端开发中,JavaScript是一种不可或缺的编程语言,它在构建交互式网站和应用程序方面发挥着至关重要的作用。"portfolio"标题所指的可能是一个开发者用来展示其JavaScript技能和项目经验的在线...

    小游戏源码-测试你的性格味道.rar

    源码是程序设计的基础,它揭示了软件背后的工作原理和逻辑结构。在这个项目中,我们可以深入研究如何利用编程语言构建这样的心理测试应用。 源码通常由一种或多种编程语言编写,例如JavaScript、Python、C++或者...

    BusWebsite

    8. **性能优化**:为了提升用户体验,项目可能使用了延迟加载、代码分割、缓存策略等技术,减少页面加载时间和资源消耗。 9. **模块化**:JavaScript的模块化可以帮助组织代码,使得项目更易于理解和维护。可能是...

    项目39

    为了调试和优化代码,开发者可能会使用Chrome DevTools或Firefox Developer Tools等浏览器内置的开发工具,它们提供了查看和修改DOM、分析性能、调试JavaScript等功能。同时,代码版本控制工具如Git也会被用来管理...

    Belly-Button-Biodiversity:交互式仪表板,用于探索和可视化Belly Button生物多样性数据集

    《肚脐生物多样性的JavaScript交互式探索》 肚脐,这个看似微不足道的身体部位,实际上隐藏着一个丰富多彩的微生物世界。"Belly-Button Biodiversity"项目为我们揭示了这个秘密,它提供了一个交互式的仪表板,让...

    Proyecto_XO

    JavaScript是一种广泛应用于Web开发的编程语言,它在客户端和服务器端都发挥着重要作用,用于创建交互式的网页和应用程序。在这个项目中,JavaScript可能会被用来处理用户输入、动态更新页面内容、实现动画效果、...

Global site tag (gtag.js) - Google Analytics