了解重绘和重排吗，知道怎么去减少重绘和重排吗，让文档脱离文档流有哪些方法

veggie_a_h

已于 2022-03-25 21:47:53 修改

阅读量1.1k

点赞数 1

分类专栏：前端知识点基础前端面试文章标签： javascript html 前端

于 2022-03-24 21:14:38 首次发布

本文链接：https://blog.csdn.net/wanghe1111_/article/details/123721778

版权

前端面试同时被 2 个专栏收录

27 篇文章 1 订阅

订阅专栏

前端知识点基础

21 篇文章 0 订阅

订阅专栏

了解重绘和重排吗，知道怎么去减少重绘和重排吗，让文档脱离文档流有哪些方法

如果改变了元素的宽高，元素的位置，就会导致浏览器不得不重新计算元素的几何属性，并重新构建渲染树，这个过程称为“重排”。完成重排后，要将重新构建的渲染树渲染到屏幕上，这个过程就是“重绘”。

引起重排重绘的原因有：
添加或者删除可见的DOM元素，
元素尺寸位置的改变
浏览器页面初始化，
浏览器窗口大小发生改变，重排一定导致重绘，重绘不一定导致重排，

减少重绘重排的方法有：

在用js修改盒子的多个样式时，尽量使用className来一次性对盒子进行修改。

//一次性修改盒子的类名className
// css 
.active {
    padding: 5px;
    border-left: 1px;
    border-right: 2px;
}
// javascript
var el = document.querySelector('.el');
el.className = 'active';

// 或者修改cssText
var el = document.querySelector('.el');
el.style.cssText = 'border-left: 1px; border-right: 2px; padding: 5px';

使用display：none让父盒子先消失，然后再对此盒子添加一些子元素，然后再将这个父盒子display：block显示出来。浏览器一共发生了两次重排，即第一次的隐藏和最后面的显示。中间的操作都不会造成重排。
使用文档片段createDocumentFragment创建一个子树，然后再拷贝到盒子中

let fragment = document.createDocumentFragment();
appendNode(fragment, data);  //这个过程相当于在这个文档碎片中添加一些子元素
ul.appendChild(fragment); //然后再将文档碎片子树添加到父盒子中

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ul>
    </ul>
</body>
<script>
    let ul = document.querySelector("ul")
    let domFragment = document.createDocumentFragment() //创建文档碎片
    let arr = ["wh", "xx", "wmg", "lyh", "wws"]
    for (let i = 0; i < arr.length; i++) {
        let li = document.createElement("li")
        li.innerHTML = arr[i]
        domFragment.appendChild(li) //在文档碎片中添加元素
    }
    ul.appendChild(domFragment) //将这个碎片构成的dom子树添加到ul中
</script>

</html>

对于在document中做一些动画，一般把这个动画盒子设置为absolute使它脱离标准流，然后再做动画处理

三、怎么脱离文档流？js
1：float
使用float可以脱离文档流。
注意！！！：使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在该元素的周围。

2：absolute
absolute称为绝对定位，其实博主觉得应该称为相对定位，因为使用absolute脱离文档流后的元素，是相对于该元素的父类（及以上，如果直系父类元素不满足条件则继续向上查询）元素进行定位的，并且这个父类元素的position必须是非static定位的（static是默认定位方式）。
3：fixed（如果不设置父盒子定位，则它相对于浏览器进行排列定位）sticky = fixed + 父盒子设置定位
完全脱离文档流，相对于浏览器窗口进行定位。（相对于浏览器窗口就是相对于html）。