谈一谈重绘重排

谈一谈重绘重排

1. 重排和重绘是DOM编程中耗能的主要原因之一。
2. 重排（回流）：当render tree中的一部分或者是全部，因为元素的尺寸、布局、隐藏等等改变引起页面的重新渲染，这个过程称作为重排。
3. 重绘：当render tree（渲染树）中更新的属性只会影响元素的外观、风格，不会影响元素的布局的时候，浏览器需要重新绘制当前元素的样式，被称作为重绘。
4. 重绘不会引起重排，但重排一定会引起重绘，一个元素的重排通常会带来一系列的反应，甚至触发整个文档的重排和重绘，性能代价是高昂的。

分别叙述 innerHTML innerText textContent

• innerHTML: 获取的时候，标签被当做字符串获取到了。

  • 设置的时候，字符串中的标签直接被解析。

• innerText: 获取的时候，只获取元素中的文本节点内容。

  • 设置的时候，字符串中的标签不会被解析。

• textContent：获取的时候，只获取元素中的文本节点内容。

  • 设置的时候，字符串中的标签不会被解析。

旧方法设置 获取 删除属性方法

• 自有属性

  1. 可以直接通过 元素对象.属性名 获取到。
  2. 如果某些自有属性和js的关键字冲突了，那么就会把当前自有属性获取的方法修改
     比如class属性获取的时候 可以通过className获取。

• 自定义属性

  • 获取：
    1. 不能直接通过 元素对象.属性名 获取到，因为他在当前元素的自有属性上没有找到该属性，则会把当前元素对象当作一个js对象，去获取他的属性了。
    2. 自定义属性要通过getAttribute去找，才能去元素的属性上找当前自有属性。
  • 设置：setAttribute(key,value)
  • 删除：removeAttribute(key)

h5自定义属性

1. h5 规定：

   • 如果是自定义属性 请添加data-*前缀。
   • h5 给每一个元素提供了一个dataset属性，是一个对象，保存的是当前元素所有的自定义属性。
   • 只要对dataset这个对象操作属性，就是给当前元素操作自定义属性。

2. 设置 h5 自定义属性
   使用 ele.dataset.key = value

3. 获取自定义属性
   使用 ele.dataset.key

4. 删除自定义属性
   使用 delete ele.dataset.key

创建元素节点 插入元素节点 复制节点 删除节点 替换节点操作

1. 创建一个元素节点：
   document.createElement("元素名");
   特殊：new Image()创建 img 标签。

2. 插入节点：

   1. A.appendChild(B);
      在A元素内部的末尾 插入一个B节点。
   2. A.insertBefore(new,old);
      在 old 元素的正前方插入一个 new，new 和 old 是兄弟关系。
      A 是 old 和 new 的父元素节点。

3. A.cloneNode();

   • 复制A节点。
   • 参数是一个布尔值 默认 false。
     • false 是浅复制 只复制当前元素。
     • true 是深复制 复制当前元素及内部所有元素。

4. 删除元素：
   A.removeChild(B)
   删除A元素中的子元素B。

5. 替换元素：
   A.replaceChild(new,old)
   用 new 替换 old
   A是 new 和 old 的父元素。