DOM学习总结

#DOM学习总结| 来源: 网络整理| 查看: 265

DOM学习总结 DOM(document object model) 浏览器对象模型

dom是 JavaScript操作html的接口实现一些前端的功能

动态渲染列表，表单表格数据处理增删改查监听点击提交事件实现动态展开树组件，表单组件级联等这类复杂的操作懒加载一些样式文件或脚本

主要3个部分组成

DOM节点

DOM事件

选择区域

dom节点用两个部分元素和标签

标签是html基本单位 div span p 标签

节点是DOM树的基本单位，多种类型，元素节点，文本节点，注释节点，空白节点

元素是 dom与html标签对应的节点，p标签对应p元素

csdn

上面标签会生成两个节点元素节点p，文本节点 csdn

为什么频繁操作dom会损耗浏览器性能

浏览器工作机制分为渲染引擎（浏览器内核）和JavaScript引擎，单线程运行，单线程的优势是开发方便，避免多线程下的死锁、竞争等问题，劣势是失去了并发能力。

为了避免两个引擎同时工作造成渲染页面结果不一致，互相排斥，一个引擎在运行，另一个会被阻塞。频繁操作dom，会触发线程切换，渲染引擎切换JavaScript引擎，JavaScript引擎切换渲染引擎，短时间内频繁切换，就会造成性能损耗问题。

重新渲染，重绘，重排

标签样式发生变化，会引起浏览器重新渲染页面，耗时得是重绘和重排

浏览器渲染页面时候会将html和css解析成dom树和 cssom树,然后进行合并排布，再渲染成我们可见的页面。对元素重新排布(重排)重新绘制(重绘)

可能会影响到其他元素排布的操作就会引起重排，继而引发重绘，比如：

修改元素边距、大小

添加、删除元素

改变窗口大小

与之相反的操作则只会引起重绘，比如：

设置背景图片

修改字体颜色

改变 visibility 属性值

重排渲染耗时高于重绘，重排会引起重绘

高效操作dom

在循环外操作dom

var times = 10000 console.time('switch') for(var i=0;i

【本文地址】

今日新闻