javascript性能优化 之 DOM交互

简介:

在javascript各个方面,DOM毫无疑问是最慢的一部分。DOM操作与交互要耗费大量时间,因为它们往往需要重新渲染整个页面或者某一部分。理解如何优化与DOM的交互可以极大提高脚本完成的速度。

1、最小化DOM更新

  看下面例子:

复制代码
    var list = document.getElementById("ul");
    for (var i=0; i < 10; i++){
        var item = document.createELement("li");
        item.appendChild(document.createTextNode("item" + i));
        list.appendChild(item);
    }
    //这段代码为列表添加10个项目。添加每个项目时,都有两次DOM更新。总共需要20次DOM更新。
复制代码

  我们可以使用 文档碎片 来最小化DOM更新。

复制代码
    var list = document.getElementById("ul");
    var fragment = document.createDocumentFragment();

    for (var i=0; i < 10; i++){
        var item = document.createELement("li");
        item.appendChild(document.createTextNode("item" + i));
        fragment.appendChild(item);
    }
    list.appendChild(fragment);
复制代码

  更多关于 文档碎片,详见之前文章 《文档碎片》

2、使用innerHTML

  对于比较大的DOM更改,使用innerHTML要比createElement()和appendChild()快。

复制代码
    var list = document.getElementById("ul");
    var html = "";

    for (var i=0; i < 10; i++){
        html += "<li>item" + i + "<li>";
    }
    list.innerHTML = html;
复制代码

3、使用事件委托

  详见之前文章 《javascript性能优化 之 事件委托》

4、注意NodeList

  最小化访问NodeList的次数可以极大的改进脚本的性能,因为每次访问NodeList,都会运行一次基于文档的查询。

复制代码
    var imgs = document.getElementsByTagName("img");

    for (var i=0, len=imgs.length; i < len; i++){
        var image = imgs[i];
        //more code
    }
    //这里的关键是长度length存入了len变量,而不是每次都去访问NodeList的length属性。当在循环中使用NodeList的时候,把imgs[i]放入image变量中,以避免在循环体内多次调用NodeList;
复制代码

  更多关于 NodeList,详见之前文章 《深入理解 NodeList》

 本文转自挨踢前端博客园博客,原文链接http://www.cnblogs.com/duanhuajian/archive/2013/04/28/3049602.html如需转载请自行联系原作者


@挨踢前端

相关文章
|
7月前
|
JavaScript 前端开发 API
JavaScript中通过array.map()实现数据转换、创建派生数组、异步数据流处理、复杂API请求、DOM操作、搜索和过滤等,array.map()的使用详解(附实际应用代码)
array.map()可以用来数据转换、创建派生数组、应用函数、链式调用、异步数据流处理、复杂API请求梳理、提供DOM操作、用来搜索和过滤等,比for好用太多了,主要是写法简单,并且非常直观,并且能提升代码的可读性,也就提升了Long Term代码的可维护性。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
10月前
|
数据采集 人工智能 自然语言处理
Midscene.js:AI 驱动的 UI 自动化测试框架,支持自然语言交互,生成可视化报告
Midscene.js 是一款基于 AI 技术的 UI 自动化测试框架,通过自然语言交互简化测试流程,支持动作执行、数据查询和页面断言,提供可视化报告,适用于多种应用场景。
2479 1
Midscene.js:AI 驱动的 UI 自动化测试框架,支持自然语言交互,生成可视化报告
|
11月前
|
JavaScript 前端开发 索引
js中DOM的基础方法
【10月更文挑战第31天】这些DOM基础方法是操作网页文档结构和实现交互效果的重要工具,通过它们可以动态地改变页面的内容、样式和行为,为用户提供丰富的交互体验。
|
11月前
|
缓存 JavaScript 前端开发
掌握现代JavaScript异步编程:Promises、Async/Await与性能优化
本文深入探讨了现代JavaScript异步编程的核心概念,包括Promises和Async/Await的使用方法、最佳实践及其在性能优化中的应用,通过实例讲解了如何高效地进行异步操作,提高代码质量和应用性能。
|
11月前
|
缓存 监控 JavaScript
Vue.js 框架下的性能优化策略与实践
Vue.js 框架下的性能优化策略与实践
|
11月前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
357 5
|
11月前
|
JSON 前端开发 JavaScript
聊聊 Go 语言中的 JSON 序列化与 js 前端交互类型失真问题
在Web开发中,后端与前端的数据交换常使用JSON格式,但JavaScript的数字类型仅能安全处理-2^53到2^53间的整数,超出此范围会导致精度丢失。本文通过Go语言的`encoding/json`包,介绍如何通过将大整数以字符串形式序列化和反序列化,有效解决这一问题,确保前后端数据交换的准确性。
259 4
|
11月前
|
JavaScript 前端开发 开发者
.js的dom元素操作
【10月更文挑战第29天】通过灵活运用这些 DOM 元素操作方法,JavaScript 可以实现丰富的网页交互效果,如动态更新页面内容、响应用户操作、创建和删除页面元素等。在实际开发中,开发者可以根据具体的需求和场景,选择合适的 DOM 元素操作方法来实现所需的功能,为用户提供更加流畅和动态的网页体验。
|
XML JavaScript 前端开发
Javaweb之javascript的DOM对象的详细解析
1.5.3 DOM对象 1.5.3.1 DOM介绍 DOM:Document Object Model 文档对象模型。也就是 JavaScript 将 HTML 文档的各个组成部分封装为对象。
145 0
|
JavaScript 前端开发
JavaScript 提供了多种方法来操作 DOM(文档对象模型)
【5月更文挑战第11天】JavaScript 用于DOM操作的方法包括获取元素(getElementById, getElementsByClassName等)、修改内容(innerHTML, innerText, textContent)、改变属性、添加/删除元素(appendChild, removeChild)和调整样式。此外,addEventListener用于监听事件。注意要考虑兼容性和性能当使用这些技术。
104 2