JavaScript性能优化:DOM操作优化实战

JavaScript性能优化:DOM操作优化实战

一 重排与重绘的代价
问题场景

用户点击按钮后,需要动态生成一个包含10,000个选项的下拉列表,但界面出现长达5秒的冻结。

错误代码示例
function createList() {const ul = document.getElementById("myList");for(let i=0; i<10000; i++){const li = document.createElement("li");li.style.color = "red";  // 触发样式计算li.style.margin = "2px"; // 触发布局li.textContent = `选项 ${i}`;ul.appendChild(li);      // 每次循环都导致重排}
}
问题分析
  • 每次循环都修改元素样式 ➔ 触发 强制同步布局(Forced Synchronous Layout)
  • 直接操作真实DOM ➔ 累计触发 10,000次重排
二 高效DOM操作三板斧
优化方案1:文档碎片(DocumentFragment)
function createListOptimized() {const ul = document.getElementById("myList");const fragment = document.createDocumentFragment(); // 内存中的虚拟容器for(let i=0; i<10000; i++){const li = document.createElement("li");// 先完成所有属性设置li.textContent = `选项 ${i}`;li.className = "prestyled-item"; // 通过CSS类批量设置样式fragment.appendChild(li); // 不会触发真实DOM操作}ul.appendChild(fragment); // 仅1次重排
}
优化方案2:样式批量处理
/* 将样式集中到CSS类 */
.prestyled-item {color: red;margin: 2px;
}
优化方案3:读写分离原则
// 错误:交替读写布局属性
element.style.width = "100px";
const height = element.offsetHeight; // 触发立即计算
element.style.height = height + "px";// 正确:先读后写
const height = element.offsetHeight; // 集中读取
element.style.width = "100px";        // 集中写入
element.style.height = height + "px";
三 事件监听器的正确姿势
内存泄漏陷阱
// 错误:为每个列表项绑定监听器
document.querySelectorAll(".item").forEach(item => {item.addEventListener("click", handleClick);
});// 当需要移除元素时:
container.innerHTML = ""; // 监听器仍然残留在内存中!
优化方案:事件委托
// 正确:利用事件冒泡在父级监听
document.getElementById("container").addEventListener("click", e => {if(e.target.classList.contains("item")) {handleClick(e);}
});

优势对比

方式内存占用(1000个元素)初始化耗时
单独绑定1000个监听器120ms
事件委托1个监听器15ms
四 虚拟DOM的启示
核心思想
数据变化
生成虚拟DOM树
对比新旧虚拟DOM
计算最小修改
批量更新真实DOM
手动实现简化版
let vDOM = { type: 'ul', children: [] };// 更新函数
function updateDOM() {const realDOM = document.createElement(vDOM.type);vDOM.children.forEach(child => {const node = document.createElement(child.type);node.textContent = child.content;realDOM.appendChild(node);});// 批量替换document.getElementById("app").replaceChildren(realDOM);
}// 添加新项时:
vDOM.children.push({ type: 'li', content: '新项目' });
requestAnimationFrame(updateDOM); // 在下一次重绘时集中更新

本章重点总结

  1. 批量操作:使用文档碎片减少DOM操作次数
  2. 样式管理:用CSS类替代直接样式操作
  3. 事件优化:委托模式节省内存
  4. 更新策略:集中修改减少重排次数

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/73013.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Java学习】包装类

面向对象系列九 包装类变量 一、装箱 1.实例化包装对象 2.静态缓存池 3.写法 二、拆箱 包装类变量 每个基本数据类型都有对应的基本类型的包装类变量&#xff0c;将基本数据类型通过对应的包装类对象载入着进入到类与对象面向对象体系 一、装箱 Integer.valueOf(int) —…

【第22节】C++设计模式(行为模式)-Iterator(迭代器)模式

一、问题背景 Iterator 模式是设计模式中最为常见和实用的模式之一。它的核心思想是将对聚合对象的遍历操作封装到一个独立的类中&#xff0c;从而避免暴露聚合对象的内部表示。通过 Iterator 模式&#xff0c;我们可以实现对聚合对象的统一遍历接口&#xff0c;而不需要关心聚…

02C#基本结构篇(D4_注释-访问修饰符-标识符-关键字-运算符-流程控制语句)

目录 一、注释 1. 单行注释 2. 多行注释 3. XML文档注释 4. 使用建议和最佳实践&#xff1a; 二、访问修饰符 1. public 2. private 3. protected 4. internal 5. protected internal 或 protected and internal 6. private protected 或 private and protected 7.…

【CXX】6.2 str — rust::Str

Rust::Str 公共 API // rust/cxx.hclass Str final { public:Str() noexcept;Str(const Str &) noexcept;Str(const String &) noexcept;// 如果输入不是 UTF-8&#xff0c;抛出 std::invalid_argument 异常。Str(const std::string &);Str(const char *);Str(con…

基于windows的MySQL安装(2025最新,小白可用)

目录 一&#xff0c;下载官网地址&#xff08;及版本选择&#xff09;&#xff1a; 二&#xff0c;以安装程序的方式安装MySQL 1&#xff0c;安装过程 2&#xff0c;用客户端使用MySQL 3&#xff0c;配置环境变量在windows命令行界面使用mysql 下次开机后手动启用服务 三…

Jenkins实现自动化构建与部署:上手攻略

一、持续集成与Jenkins核心价值 1.1 为什么需要自动化构建&#xff1f; 在现代化软件开发中&#xff0c;团队每日面临以下挑战&#xff1a; 高频代码提交&#xff1a;平均每个开发者每天提交5-10次代码。多环境部署&#xff1a;开发、测试、预发布、生产环境需频繁同步。复杂…

4个 Vue 路由实现的过程

大家好&#xff0c;我是大澈&#xff01;一个喜欢结交朋友、喜欢编程技术和科技前沿的老程序员&#x1f468;&#x1f3fb;‍&#x1f4bb;&#xff0c;关注我&#xff0c;科技未来或许我能帮到你&#xff01; Vue 路由相信朋友们用的都很熟了&#xff0c;但是你知道 Vue 路由…

数学之快速幂-数的幂次

题目描述 给定三个正整数 N,M,P&#xff0c;求 输入描述 第 1 行为一个整数 T&#xff0c;表示测试数据数量。 接下来的 T 行每行包含三个正整数 N,M,P。 输出描述 输出共 T 行&#xff0c;每行包含一个整数&#xff0c;表示答案。 输入输出样例 示例 1 输入 3 2 3 7 4…

【JavaEE】多线程进阶(2)

【JavaEE】多线程进阶&#xff08;2&#xff09; 一、JUC(java.util.concurrent) 的常⻅类1.1 Callable 接⼝1.2 ReentrantLock1.3 原子类原子类的特性&#xff1a;常见原子类&#xff1a;原子类的实例&#xff1a; 1.4 线程池1.5 信号量 Semaphore代码实例 1.6 CountDownLatch…

[漏洞篇]XSS漏洞详解

[漏洞篇]XSS漏洞 一、 介绍 概念 XSS&#xff1a;通过JS达到攻击效果 XSS全称跨站脚本(Cross Site Scripting)&#xff0c;为避免与层叠样式表(Cascading Style Sheets, CSS)的缩写混淆&#xff0c;故缩写为XSS。这是一种将任意 Javascript 代码插入到其他Web用户页面里执行以…

越早越好!8 个反直觉的金钱真相|金钱心理学

很多人都追求财富自由&#xff0c;但成功的人少之又少。 这可能是因为&#xff0c;人们往往忽略了一些金钱的真相和常识。 01 金钱常识 & 真相 为了构建健康的金钱观&#xff0c;我读了一本有点反直觉&#xff0c;有点像鸡汤&#xff0c;但都是财富真相的书。 来自 Morg…

Spring Boot/Spring Cloud 整合 ELK(Elasticsearch、Logstash、Kibana)详细避坑指南

我们在开发中经常会写日志&#xff0c;所以需要有个日志可视化界面管理&#xff0c;使用ELK可以实现高效集中化的日志管理与分析&#xff0c;提升性能稳定性&#xff0c;满足安全合规要求&#xff0c;支持开发运维工作。 下述是我在搭建ELK时遇到的许许多多的坑&#xff0c;希望…

AI编程: 一个案例对比CPU和GPU在深度学习方面的性能差异

背景 字节跳动正式发布中国首个AI原生集成开发环境工具&#xff08;AI IDE&#xff09;——AI编程工具Trae国内版。 该工具模型搭载doubao-1.5-pro&#xff0c;支持切换满血版DeepSeek R1&V3&#xff0c; 可以帮助各阶段开发者与AI流畅协作&#xff0c;更快、更高质量地完…

手机屏幕摔不显示了,如何用其他屏幕临时显示,用来导出资料或者清理手机

首先准备一个拓展坞 然后 插入一个外接的U盘 插入鼠标 插入有数字小键盘区的键盘 然后准备一根高清线&#xff0c;一端链接电脑显示器,一端插入拓展坞 把拓展坞的连接线&#xff0c;插入手机充电口&#xff08;可能会需要转接头&#xff09; 然后确保手机开机 按下键盘…

探索链表的奥秘:C语言中的查找操作与链表打印

目录 链表的基本结构 头插法 打印链表 按位置查找 按值查找 主函数 查找操作 示例运行 输出示例 总结 在数据结构的学习中&#xff0c;链表是一种非常重要的线性结构。它的动态特性使得在插入和删除操作时比数组更为高效。今天&#xff0c;我们将继续探讨链表的操作&…

第八届蓝桥杯单片机省赛

什么&#xff1f;你把最近几届省赛真题做完已经无题可做了&#xff0c;那不妨来看看老古董第八届省赛的题目吧&#xff01; 附件&#xff1a;第八届蓝桥杯单片机省赛 一、数码管 1.页面流转 以上的页面流转功能可以用下图总结&#xff1a; #mermaid-svg-38fdQpdydbMy5CyP {fo…

win10电脑鼠标速度突然变的很慢?

电脑鼠标突然变很慢&#xff0c;杀毒检测后没问题&#xff0c;鼠标设置也没变&#xff0c;最后发现可能是误触鼠标的“DPI”调节键。 DPI调节键在鼠标滚轮下方&#xff0c;再次点击即可恢复正常鼠标速度。 如果有和-的按键&#xff0c;速度变快&#xff0c;-速度变慢。 图源&…

1-002:MySQL InnoDB引擎中的聚簇索引和非聚簇索引有什么区别?

在 MySQL InnoDB 存储引擎 中&#xff0c;索引主要分为 聚簇索引&#xff08;Clustered Index&#xff09; 和 非聚簇索引&#xff08;Secondary Index&#xff09;。它们的主要区别如下&#xff1a; 1. 聚簇索引&#xff08;Clustered Index&#xff09; 定义 聚簇索引是表数…

【解决哈希冲突】

哈希冲突 如果两个不同的 key 通过哈希函数得到了相同的索引&#xff0c;这种情况就叫做「哈希冲突」。 哈希冲突不可能避免&#xff0c;只能在算法层面妥善处理出现哈希冲突的情况。 哈希冲突是一定会出现的&#xff0c;因为这个 hash 函数相当于是把一个无穷大的空间映射到…

文件操作详解(万字长文)

C语言文件操作 一、为什么使用文件&#xff1f;二、文件分类三、文件的打开和关闭四、文件的顺序读写4.1fputc4.2fgetc4.3fputs4.4fgets4.5 fprintf4.6 fscanf4.7 fwrite4.8 fread 五、文件的随机读写5.1 fseek5.2 ftell和rewind六、文件读取结束的判定七、文件缓冲区 一、为什…