面试—DOM结构(DOM树) 如何去优化DOM结构(DOM层级尽量小)

1. Document Object Model (简称DOM)既文档对象模型

文档:就是我们的html页面

文档对象:是页面中的元素

文档对象模型:为了能够让程序--js去操作页面中的元素而定义的标准,通过 DOM,可访问 HTML 文档的所有元素

把整个文档看成一棵树,树分支就是节点,同时定义了很多方法来操作这些节点,如下图是一个将html代码分解成的DOM树:

DOM树中三种常见的DOM节点:

1>元素节点:上图中、、等都是元素节点,即标签

2>文本节点:向用户展示的内容,如...中的"文档标题"文本

3>属性节点:元素的属性,如标签的链接地址属性 href

4>通过getElementById和document.body等方法获取元素就是获取元素节点的

扫描二维码关注公众号,回复: 2689481 查看本文章


2. DOM结构优化

  • 减少DOM访问次数
  • 多次访问同一DOM,应该用局部变量缓存该DOM
  • 尽可能使用querySelector,而不是使用获取HTML集合的API
  • 注意重排和重绘
  • 使用事件委托,减少绑定事件的数量

浏览器工作的过程:

  • 从网络或本地拿到html源代码
  • 浏览器将html源码中的每个标签都实例化对应的对象
  • 在内存中形成一个DOM树
  • 将内存DOM树解析为可视页面
  • JS直接修改DOM树,改变页面视图

猜你喜欢

转载自blog.csdn.net/cosmos033/article/details/81478963
DOM