高效的使用DOM操作
来源:互联网 发布:淘宝店铺怎么增加分类 编辑:程序博客网 时间:2024/06/16 10:24
一、DOM操作影响性能的原因
前端性能优化主要是DOM操作的优化,DOM优化的总原则是减少DOM的操作。造成DOM影响性能的主要原因
- 1、
DOM
的实现和ECMAScipt
的实现是分离的,通过Javascript
代码调用DOM
接口实际上相当两个独立的模块之间的交互。 - 2、对
DOM
的操作会影响浏览器的重绘和重排。- 增加、删除和修改可见的
DOM
元素 - 页面初始化的渲染
- 移动
DOM
元素 - 修改
CSS
样式,改变DOM
元素的尺寸 DOM
元素内改变,使得尺寸被撑大- 浏览器窗口尺寸的改变
- 浏览器窗口的滚动
- 增加、删除和修改可见的
二、解决方式
1、合并多次的DOM操作为单次的DOM操作
//不建议使用el.style.borderColor = '#ddd';el.style.borderStyle = 'solid';el.style.borderWidth = '1px';//建议使用el.style.cssText += 'border:1px solid #ddd';//或者直接添加classel.className += 'className';
2、使用文档碎片(重点)
var box = document.getElementById("box");var fragment = document.createDocumentFragment();var liDom = document.createElement("li");liDom.innerHTML = "你好";fragment.appendChild(liDom);box.appendChild(fragment);
- 3、设置
DOM
的样式display='none'
来隐藏元素操作 4、事件绑定到父节点上
document.getElementById("ul").addEventListener("click", function(e) { console.log(e.target.nodeName); if (e.target && e.target.nodeName.toUpperCase() === "LI") { //处理事件 }})
阅读全文
1 0
- 高效的使用DOM操作
- repaint和reflow(高效的操作DOM)
- 异或操作的高效使用
- React 中 ref 操作DOM的使用
- jquery DOM使用操作
- 使用jQuery操作DOM
- 使用jQuery操作DOM
- 使用Jquery操作DOM
- 使用jQuery操作DOM
- 高效的删除操作
- 高效的使用空间SQL操作空间数据库系列之一
- 使用ConcurrentMap实现高效可靠的原子操作
- 在Python中使用lambda高效操作列表的教程
- 在Python中使用lambda高效操作列表的教程
- DOM对象的操作
- jQuery 的dom操作
- Dom的一些操作
- Dom操作的基础知识
- 数据库基本操作语句
- golang笔记——数据类型
- 怎么使用Packagist镜像
- js字符串截取函数slice()、substring()、substr()
- MFC SDI 多视图
- 高效的使用DOM操作
- ios随机生成4个字符串
- redis学习日志八(集合(set)的常用命令和集合间的常用命令)
- mybatis 缓存
- 计算机网络自顶向下webserver
- 剑指offer——链表的递归反转打印
- Java 关于进行文件加密
- AOP日志组件 多次获取post参数
- jquery请求数据长时间loading等待效果