谈一谈浏览器渲染的重绘重排

梦里梦外; 2022-10-25 01:36 210阅读 0赞

### 目录 ###

*   *   *  谈一谈重绘重排
         *  分别叙述 innerHTML innerText textContent
         *  旧方法设置 获取 删除属性方法
         *  h5自定义属性
         *  创建元素节点 插入元素节点 复制节点 删除节点 替换节点操作
         *  高频面试题

### 谈一谈重绘重排 ###

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 的父元素。

### 高频面试题 ###

[点我查看：前端高频面试题链接][Link 1]

此链接为 CSDN 内部链接，我收集整理的一些经常会问到的前端面试题，希望能对您所有帮助！

[Link 1]: https://blog.csdn.net/weixin_47021982/article/details/113572021